Array Renderer

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