Renderers

Overview

All of our custom cell rendering components enabled by default in Grid Pro. These renderers provide flexible and extensible ways to customize cell content and interactions in grid columns.

Default Genesis renderers

Action renderer (action)

Renders a single action button within a grid cell, allowing for row-specific interactions.

Further details are available in the API documentation.

Key features

• Customizable button name and appearance
• Supports disabled state based on row data
• Handles click events with optional async actions
• Supports E2E testing with data-test-id attributes

Usage example

const actionRendererColDef = {
  cellRenderer: 'action',
  cellRendererParams: {
    actionName: 'Edit',
    actionClick: (rowData) => handleEdit(rowData),
    isDisabled: (rowData) => !rowData.editable,
    appearance: 'primary'
  },
  // other column options
}

Actions menu renderer (actionsMenu)

Renders a menu of multiple actions for a grid row.

Further details are available in the API documentation.

Key features

• Supports multiple actions per row
• Customizable menu opener text and appearance
• Flexible action definition

Usage example

const actionsColDefs = getActionsMenuDef([
  {
    name: 'View',
    callback: (rowData) => viewDetails(rowData)
  },
  {
    name: 'Delete',
    callback: (rowData) => deleteRow(rowData)
  }
]);

const columnDefs = [
  { field: 'name' },
  // other defs
  actionsColDefs
];

const actionsMenuRendererColDef: ColDef = {
    cellRenderer: GridProRendererTypes.actionsMenu,
    cellRendererParams: {
      actions,
      buttonAppearance,
      isVertical,
      buttonText: customActionsOpenerName,
    },
    // other column options
  };

Boolean renderer (boolean)

Renders a checkbox within a grid cell, allowing direct boolean value editing.

Further details are available in the API documentation.

Key features

• Supports disabled state
• Automatically handles grid editing events
• Integrates with AG Grid's editing mechanism

Usage example

const booleanRendererColDef = {
  cellRenderer: 'boolean',
  cellRendererParams: {
    isDisabled: (rowData) => !rowData.canEdit
  },
  // other column options
}

Editable renderer (editable)

Renders a cell with a formatted value and an optional progress indicator.

Further details are available in the API documentation.

Key features

• Formats cell values
• Displays a progress ring for pending edits
• Lightweight and simple

Usage example

const editableRenderercolDef = {
  cellRenderer: 'editable',
  valueFormatter: (params) => formatCurrency(params.value),
  // other column options
}

Select editor (selectEditor)

Renders a dropdown select editor within a grid cell, allowing users to edit cell values by selecting from a list of options.

Further details are available in the API documentation.

Key features

• Supports asynchronous data loading for options
• Customizable value and label fields
• Integrates with data sources
• Handles value changes and updates the grid data
• Supports both synchronous and asynchronous options

Usage example

const selectEditorRendererColDef = {
  cellEditor: 'selectEditor',
  cellEditorParams: {
    allOptionsResourceName: 'optionsResource',
    valueField: 'id',
    labelField: 'name',
    async: true,
    datasourceOptions: { /* datasource configuration */ },
    values: [/* static option values */],
  },
  // other column options
}

Number editor (numberEditor)

Provides a numeric input editor within a grid cell, allowing users to input and edit numerical values.

Further details are available in the API documentation.

Key features

• Supports number formatting options
• Customizable placeholder text
• Handles value changes and updates grid data
• Supports disabling the editor

Usage example

const numberEditorRendererColDef = {
  cellEditor: 'numberEditor',
  cellEditorParams: {
    withFormatting: true,
    formatOptions: { style: 'currency', currency: 'USD' },
    placeholder: 'Enter amount',
    disabled: false,
  },
  // other column options
}

Multiselect editor (multiselectEditor)

Provides a multi-select editor within a grid cell, allowing users to select multiple options.

Further details are available in the API documentation.

Key features

• Supports asynchronous data loading for options
• Customizable value and label fields
• Integrates with data sources
• Handles multiple selections
• Handles value changes and updates grid data

Usage example

const multiselectEditorRendererColDef = {
  cellEditor: 'multiselectEditor',
  cellEditorParams: {
    allOptionsResourceName: 'optionsResource', // Resource name for fetching options.
    valueField: 'id',
    labelField: 'name',
    async: true,
    datasourceOptions: { /* datasource configuration */ },
    values: [/* static option values */],
    selectedOptionsCallback: (data) => fetchSelectedOptions(data),
  },
  // other column options
}

Date editor (dateEditor)

Provides a date or date-time input editor within a grid cell, allowing users to input or edit date values.

Further details are available in the API documentation.

Key features

• Supports both date and date-time input types
• Customizable date format
• Handles value changes and updates grid data
• Automatically focuses on the editor when opened

Usage example

const dateEditorRendererColDef = {
  cellEditor: 'dateEditor',
  cellEditorParams: {
    withTime: true, // Set to false for date only
  },
  // other column options
}

String editor (stringEditor)

Provides a text input editor within a grid cell, allowing users to input or edit string values.

Further details are available in the API documentation.

Key features

• Customizable placeholder text
• Handles value changes and updates grid data
• Automatically focuses on the editor when opened

Usage example

const stringEditorRendererColDef = {
  cellEditor: 'stringEditor',
  cellEditorParams: {
    placeholder: 'Enter text',
  },
  // other column options
}

Creating a custom renderer component

To create a custom renderer component, you need to implement the ICellRendererComp interface from AG Grid. This interface defines the required methods for a renderer component.

Step-by-step implementation

1. Basic renderer structure

import { 
  ICellRendererComp, 
  ICellRendererParams 
} from '@ag-grid-community/core';
import { GenesisElement, html, observable } from '@genesislcap/web-core';
import { logger } from '../utils';

// Define custom params interface
interface CustomRendererParams extends ICellRendererParams {
  onChange?: (value: any, params: CustomRendererParams) => void;
  isDisabled?: (rowData: any) => boolean;
}

export class CustomRenderer extends GenesisElement implements ICellRendererComp {
  @observable
  public params: CustomRendererParams;

  @observable
  public value: any;

  // Initialize renderer
  public init(params: CustomRendererParams) {
    if (!params) return;
    this.params = params;
    this.value = params.value;
  }

  // Required method to return GUI element
  public getGui(): HTMLElement {
    return this;
  }

  // Refresh method
  public refresh(params: CustomRendererParams): boolean {
    this.params = params;
    this.value = params.value;
    return true;
  }

  // Optional disable logic
  public isDisabled(data: any): boolean {
    if (typeof this.params?.isDisabled === 'function') {
      try {
        return this.params.isDisabled(data);
      } catch (error) {
        logger.error('Error in isDisabled callback:', error);
      }
    }
    return false;
  }

  // Handle value changes
  public changeHandler = (newValue: any) => {
    this.value = newValue;
    
    if (typeof this.params?.onChange === 'function') {
      this.params.onChange(newValue, this.params);
    }
  };
}

Key considerations

• Always implement ICellRendererComp for renderers or ICellEditorComp for editors.
• Use @observable for reactive properties.
• Provide flexible configuration options through cellRendererParams or cellEditorParams.
• Handle potential errors gracefully.
• Integrate with design system components.
• Ensure editors are registered in gridOptions.components.

Common patterns to follow

• All custom components implement the appropriate AG Grid interface (ICellRendererComp or ICellEditorComp).
• Use @observable decorators for reactive properties.
• Support custom disable logic through isDisabled functions.
• Integrate with the Foundation UI design system.
• Provide flexible configuration through parameters.
• Handle value changes and update grid data accordingly.
• Consider performance when generating dynamic options.
• Ensure proper focus management in editors with afterGuiAttached().

When creating custom renderers or editors for Grid Pro, follow these key steps:

• Initialize with the init() method.
• Implement getGui() to return the root element.
• Use refresh() to update the component state.
• Implement getValue() in editors to return the edited value.
• Provide optional disable logic with isDisabled().
• Support custom change handling.
• Handle potential errors in callbacks.
• Use appropriate value accessors.
• Consider the user experience, such as focusing the editor when it's opened.