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;
editor: typeof MultiColumnEditor;
};