# Multi Column
URL: https://pro.rv-grid.com/api/multi-column/
Source: src/content/docs/api/multi-column.md
## Module Extensions

### `ColumnRegular` (Extended from `@revolist/revogrid`)

```ts
interface ColumnRegular {
  /**
       * Configuration for multi-column type
       */
      multiColumn?: MultiColumnConfig
}
```

## Plugin API

### `isEditorCtrConstructible`

```ts
export function isEditorCtrConstructible(
  editor: any,
): editor is EditorCtrConstructible;
```

---

### `MultiColumn`

The MultiColumn type is a custom column type for RevoGrid that can apply different renderers
and editors based on the value type.
editors as well.

**Key Features**:
- **Multiple Renderers**: Applies different renderers based on conditions
- **Multiple Editors**: Applies different editors based on conditions
- **Default Fallbacks**: Uses default renderer and editor if no condition matches
- **Cell Properties**: Applies consistent styling for cells
- **Array Support**: Handles arrays of values using the array renderer

**Usage**:
- Import `MultiColumn` and use it to define different renderers and editors for different value types
- Configure the column with options like renderers and editors
- Use the `arrayOptions` to customize how arrays are rendered

### Example
```typescript
import { MultiColumn } from '@revolist/revogrid-pro';
import { editorSlider, editorCheckbox } from '@revolist/revogrid-pro';
import NumberColumnType from '@revolist/revogrid-column-numeral';
import DateColumnType from '@revolist/revogrid-column-date';

const numberType = new NumberColumnType('0.00');
const dateType = new DateColumnType();

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'data',
    name: 'Mixed Data',
    columnType: 'multi',
    multiColumn: {
      defaultRenderer: numberType.cellTemplate,
      defaultEditor: numberType.editor,
      renderers: [
        {
          condition: (value) => value instanceof Date ||
            (typeof value === 'string' && !isNaN(Date.parse(value))),
          renderer: dateType.cellTemplate,
          editor: dateType.editor,
        },
        {
          condition: (value) => typeof value === 'number' && value >= 0 && value <= 100,
          renderer: editorSlider,
          editor: editorSlider,
        },
        {
          condition: (value) => typeof value === 'boolean',
          renderer: editorCheckbox,
          editor: editorCheckbox,
        },
      ],
      // Array renderer options
      arrayOptions: {
        separator: ' | ',
        wrapper: 'div',
        wrapperClass: 'array-container',
      },
    },
  },
];
```

### Example with Array Values
```typescript
import { MultiColumn } from '@revolist/revogrid-pro';
import { linkRenderer } from '@revolist/revogrid-pro';
import NumberColumnType from '@revolist/revogrid-column-numeral';

const numberType = new NumberColumnType('0.00');

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'data',
    name: 'Mixed Data',
    columnType: 'multi',
    multiColumn: {
      defaultRenderer: numberType.cellTemplate,
      defaultEditor: numberType.editor,
      renderers: [
        {
          // Use linkRenderer for URLs
          condition: (value) => typeof value === 'string' &&
            (value.startsWith('http://') || value.startsWith('https://')),
          renderer: linkRenderer,
        },
        {
          // Use numberType for numbers
          condition: (value) => typeof value === 'number',
          renderer: numberType.cellTemplate,
          editor: numberType.editor,
        },
      ],
      // Array renderer options
      arrayOptions: {
        separator: ', ',
        wrapper: 'div',
        wrapperClass: 'array-container',
      },
    },
  },
];

// Example data with arrays
grid.source = [
  { data: [1, 2, 3] }, // Will be rendered as numbers
  { data: ['https://example.com', 'https://example.org'] }, // Will be rendered as links
  { data: [1, 'https://example.com', true] }, // Mixed types in array
];
```

```ts
MultiColumn: {
  cellTemplate: CellTemplate<DataType<any, ColumnProp>>;
  editor: typeof MultiColumnEditor;
};
```

---

### `createColumnGroupingExportHeaders`

Builds Excel-ready grouped header rows from the original `ColumnGrouping`
column tree and a flattened export column list.

```ts
export function createColumnGroupingExportHeaders(;
```

---

### `ColumnGroupingExportColumn`

```ts
export type ColumnGroupingExportColumn = ColumnRegular;
```

---

### `ColumnGroupingExportSourceColumn`

```ts
export type ColumnGroupingExportSourceColumn =
  | ColumnGrouping
  | ColumnRegular;
```

---

### `ColumnGroupingExportMergeRange`

```ts
export type ColumnGroupingExportMergeRange = {
  start: {
    row: number;
    column: number;
  };
  end: {
    row: number;
    column: number;
  };
};
```

---

### `ColumnGroupingExportHeaderContext`

```ts
export type ColumnGroupingExportHeaderContext = {
  /**
   * Original column tree before RevoGrid flattens grouped columns.
   */
  columns: ColumnGroupingExportSourceColumn[];

  /**
   * Flattened columns in export order, for example from
   * `providers.column.getColumns('all')`.
   */
  exportColumns: ColumnGroupingExportColumn[];
};
```

---

### `ColumnGroupingExportHeaders`

```ts
export type ColumnGroupingExportHeaders = {
  /**
   * Group header rows only. Append the existing flattened leaf header row after
   * these rows in the export integration.
   */
  headerRows: string[][];

  /**
   * Zero-based merge ranges relative to `headerRows`.
   */
  merges: ColumnGroupingExportMergeRange[];
};
```
