Multi Column

Module Extensions

ColumnRegular (Extended from @revolist/revogrid)

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

Plugin API

isEditorCtrConstructible

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

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

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
];

MultiColumn: {
  cellTemplate: CellTemplate;
  editor: typeof MultiColumnEditor;
};