Multi Renderer

The Multi Renderer feature allows you to display different types of data in the same column using different renderers based on the data type. This creates a more flexible and dynamic way to present your data.

Why Use Multi Renderer?

Multi Renderer is particularly useful when you want to:

• Handle Mixed Data Types: Display different types of data (numbers, dates, sliders) in the same column
• Create Dynamic Presentations: Automatically choose the best way to display each value
• Improve Data Visualization: Use appropriate visualizations for different data types

Example Use Cases

• Mixed Data Columns: When a column contains different types of data (e.g., numbers, dates, percentages)
• Dynamic Formatting: Automatically format values based on their type or content
• Conditional Rendering: Show different visualizations based on data conditions

How It Works

The Multi Renderer works by:

1. Defining a set of renderers with conditions that determine when to use them
2. For each cell value, checking the conditions to determine which renderer to use
3. Applying the appropriate renderer to display the data
4. If no condition matches, using a default renderer

Configuration

To use Multi Renderer, configure your column with the appropriate renderers and conditions:

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.columnTypes = {
  multi: MultiColumn,
};

grid.columns = [
  {
    prop: 'data',
    name: 'Mixed Data',
    columnType: 'multi',
    multiColumn: {
      defaultRenderer: numberType.cellTemplate,
      defaultEditor: numberType.editor,
      renderers: [
        {
          // Use dateRenderer for date strings
          condition: (value) => value instanceof Date ||
            (typeof value === 'string' && !isNaN(Date.parse(value))),
          renderer: dateType.cellTemplate,
          editor: dateType.editor,
        },
        {
          // Use sliderRenderer for numbers between 0 and 100
          condition: (value) => typeof value === 'number' && value >= 0 && value <= 100,
          renderer: editorSlider,
          editor: editorSlider,
        },
        {
          // Use checkboxRenderer for boolean values
          condition: (value) => typeof value === 'boolean',
          renderer: editorCheckbox,
          editor: editorCheckbox,
        },
      ],
    },
  },
];

Configuration Options

The MultiColumn configuration accepts the following options:

interface MultiColumnConfig {
  /**
   * Default renderer to use if no condition matches
   */
  defaultRenderer: ColumnRegular['cellTemplate'];

  /**
   * Default editor to use if no condition matches
   */
  defaultEditor?: EditorCtr;

  /**
   * Array of renderers with conditions
   */
  renderers: Array<{
    /**
     * Condition function that returns true if the renderer should be used
     */
    condition: (value: any) => boolean;

    /**
     * Renderer to use if the condition is true
     */
    renderer: ColumnRegular['cellTemplate'];

    /**
     * Optional editor to use if the condition is true
     */
    editor?: EditorCtr;
  }>;
}

Example Data

const data = [
  { data: 42 },                    // Will use numberRenderer
  { data: new Date() },            // Will use dateRenderer
  { data: 75 },                    // Will use sliderRenderer
  { data: '2024-03-15' },          // Will use dateRenderer
  { data: true },                  // Will use checkboxRenderer
];

Best Practices

1. Order Matters: Place more specific conditions before general ones
2. Default Renderer: Always provide a default renderer for unmatched cases
3. Type Checking: Use proper type checking in conditions
4. Editor Matching: Match editors with their corresponding renderers
5. Performance: Keep condition functions simple and efficient

Common Patterns

Date Detection

condition: (value) => value instanceof Date ||
  (typeof value === 'string' && !isNaN(Date.parse(value)))

Numeric Range

condition: (value) => typeof value === 'number' && value >= 0 && value <= 100

Boolean Values

condition: (value) => typeof value === 'boolean'

String Pattern

condition: (value) => typeof value === 'string' && value.startsWith('http')