arrayRenderer
The arrayRenderer
is a custom cell renderer for RevoGrid that can handle both single values and arrays of values. It applies different renderers based on the value type.
Features:
- Detects if the value is an array or a single value
- For arrays, renders multiple elements using the provided renderer
- For single values, renders a single element using the provided renderer
- Supports custom separator between array items
- Supports custom wrapper for array items
Usage:
- Import
arrayRenderer
and use it as a wrapper around your existing renderer - Configure the renderer with options like separator and wrapper
Example
import { arrayRenderer } from '@revolist/revogrid-pro';
import { linkRenderer } from '@revolist/revogrid-pro';
const grid = document.createElement('revo-grid');
grid.columns = [
{
prop: 'links',
name: 'Links',
cellTemplate: arrayRenderer(linkRenderer, {
separator: ', ',
wrapper: 'div',
}),
},
];
Example of using multiRenderer to handle different types of values
export const multiRendererExample = { prop: 'data', name: 'Data', cellTemplate: multiRenderer({ default: progressLineRenderer, renderers: [ { // Use linkRenderer for URLs condition: (value) => typeof value === 'string' && (value.startsWith('http://') || value.startsWith('https://')), renderer: linkRenderer, }, { // Use progressLineRenderer for numbers condition: (value) => typeof value === 'number', renderer: progressLineRenderer, }, ], separator: ' | ', wrapper: 'div', wrapperClass: 'multi-data-container', }), };
export function arrayRenderer(
renderer: ColumnRegular['cellTemplate'],
options: ArrayRendererOptions =;
multiRenderer
The multiRenderer
is a custom cell renderer for RevoGrid that can apply different renderers based on the value type. It's similar to arrayRenderer
but allows for more complex rendering logic.
Features:
- Detects if the value is an array or a single value
- For arrays, applies a different renderer for each item based on a condition
- For single values, applies a default renderer
- Supports custom separator between array items
- Supports custom wrapper for array items
Usage:
- Import
multiRenderer
and use it to define different renderers for different value types - Configure the renderer with options like separator and wrapper
Example
import { multiRenderer } from '@revolist/revogrid-pro';
import { linkRenderer } from '@revolist/revogrid-pro';
import { progressLineRenderer } from '@revolist/revogrid-pro';
const grid = document.createElement('revo-grid');
grid.columns = [
{
prop: 'data',
name: 'Data',
cellTemplate: multiRenderer({
default: progressLineRenderer,
renderers: [
{
condition: (value) => typeof value === 'string' && value.startsWith('http'),
renderer: linkRenderer,
},
],
}),
},
];
export function multiRenderer(config:;
ArrayRendererOptions
export type ArrayRendererOptions = {
/**
* Separator between array items
* @default ', '
*/
separator?: string;
/**
* Wrapper element for array items
* @default 'div'
*/
wrapper?: string;
/**
* CSS class for the wrapper element
*/
wrapperClass?: string;
/**
* CSS style for the wrapper element
*/
wrapperStyle?: Record<string, string>;
};