Skip to main content

Cell and column components

Overview​

The cell and column components provide a flexible, template-driven approach to configuring Grid Pro columns and cell renderers. Grid Pro includes a comprehensive set of built-in cell renderers and editors for common data types and use cases.

Built-in cell renderers​

Grid Pro provides several predefined cell renderers that can be used without custom implementation:

Available renderers​

  • ActionRenderer: Renders action buttons for row operations (edit, delete, custom actions)
  • ActionsMenuRenderer: Renders a dropdown menu with multiple actions
  • BooleanRenderer: Displays boolean values as checkboxes or toggle switches
  • EditableRenderer: Provides inline editing capabilities for cells
  • TextRenderer: Basic text display with optional formatting
  • TextFieldRenderer: Text input field for editing
  • StatusPillRenderer: Displays status values as colored pills/badges
  • SelectRenderer: Dropdown selection for predefined options

Using built-in renderers​

You can use these renderers by specifying the renderer type in your column definitions:

const columnDefs: ColDef[] = [
  {
    headerName: 'Status',
    field: 'status',
    cellRenderer: 'statusPill',
    cellRendererParams: {
      values: [
        { value: 'active', label: 'Active', color: 'green' },
        { value: 'inactive', label: 'Inactive', color: 'red' }
      ]
    }
  },
  {
    headerName: 'Actions',
    field: 'actions',
    cellRenderer: 'action',
    cellRendererParams: {
      actionName: 'Edit',
      appearance: 'primary',
      actionClick: (rowData) => console.log('Edit', rowData)
    }
  }
];

Built-in cell editors​

Grid Pro includes predefined cell editors for common data types:

Available editors​

  • DateEditor: Date picker with configurable format and validation
  • NumberEditor: Numeric input with formatting and validation options
  • StringEditor: Text input with optional validation and placeholder
  • SelectEditor: Dropdown selection with support for dynamic options
  • MultiselectEditor: Multi-selection dropdown for multiple values

Using built-in editors​

Configure editors in your column definitions:

const columnDefs: ColDef[] = [
  {
    headerName: 'Birth Date',
    field: 'birthDate',
    editable: true,
    cellEditor: 'dateEditor',
    cellEditorParams: {
      format: 'DD/MM/YYYY',
      placeholder: 'Select date'
    }
  },
  {
    headerName: 'Category',
    field: 'category',
    editable: true,
    cellEditor: 'selectEditor',
    cellEditorParams: {
      values: ['A', 'B', 'C'],
      placeholder: 'Choose category'
    }
  }
];

GridProCell component​

Description​

The GridProCell component is used to define custom cell renderers within a GridProColumn. It implements the AG Grid ICellRendererComp interface, allowing for dynamic cell rendering.

Properties​

Property examples are shown using Genesis syntax bindings, and closing tags omitted.

PropertyTypeDescriptionExample
rendererICellRendererFuncDefines the cell rendering function. Can be a custom rendering function or a reference to a predefined renderer.
<grid-pro-cell :renderer="${(x) => x.customRenderer}">
rendererParamsICellRendererParamsProvides parameters for the cell renderer. Configures how the cell should be rendered based on the grid context.
<grid-pro-cell :rendererParams="${(x) => x.customRendererParams}">
info

You can get the types ICellRendererFunc and ICellRendererParams from the "@ag-grid-community/core" package;

GridProColumn component​

Description​

The GridProColumn component represents a column definition for the Grid Pro.

Properties​

PropertyTypeDescriptionExample
slottedAgCellHTMLElement[]Tracks slotted cell elements
<grid-pro-column :slottedAgCell="${(x) => x.slottedElements}">
definitionColDefStores the column definition configuration. Initialized as an empty object.
<grid-pro-column :definition="${(x) => x.columnDefinition}">
info

You can get the type ColDef from the "@ag-grid-community/core" package;

Best practice​

  • Use GridProCell to define custom cell renderers with dynamic rendering logic.
  • Leverage the definition property of GridProColumn to configure column-specific settings.
  • Consider using built-in renderers and editors before creating custom implementations.
  • Use the auto-cell-renderer-by-type attribute on <grid-pro> to automatically select appropriate renderers based on data type.

Custom components registration​

You can register custom cell renderers, editors, and filters using the gridComponents property:

@customElement({
  name: 'my-grid',
  template: html`
    <rapid-grid-pro 
      :gridComponents="${(x) => x.gridComponents}"
      auto-cell-renderer-by-type>
      <grid-pro-client-side-datasource
        resource-name="ALL_TRADES">
      </grid-pro-client-side-datasource>
    </rapid-grid-pro>
  `
})
export class MyGrid extends GenesisElement {
  @observable gridComponents = {
    customRenderer: CustomCellRenderer,
    customEditor: CustomCellEditor,
    customFilter: CustomFilter
  };
}

Usage example​

import { ColDef } from '@ag-grid-community/core';

const customColDefs: ColDef[] = [
  {
    headerName: 'Action',
    cellRenderer: 'action',
    width: 200,
    pinned: 'right',
    cellRendererParams: {
      actionName: 'View',
      appearance: 'primary',
      actionClick: (rowData) => console.log('View Data', rowData),
    },
  },
  {
    headerName: 'Status',
    field: 'status',
    cellRenderer: 'statusPill',
    cellRendererParams: {
      values: [
        { value: 'active', label: 'Active', color: 'green' },
        { value: 'pending', label: 'Pending', color: 'orange' },
        { value: 'inactive', label: 'Inactive', color: 'red' }
      ]
    }
  },
  {
    headerName: 'Category',
    field: 'category',
    editable: true,
    cellEditor: 'selectEditor',
    cellEditorParams: {
      values: ['Technology', 'Finance', 'Healthcare', 'Education']
    }
  }
];

Simple example

@customElement({
  name: 'my-element',
  template: html`
    <rapid-grid-pro>
      <grid-pro-column :definition="${(x) => x.colDefs[0]}">
        <grid-pro-cell
          :renderer="${(x) => x.colDefs[0].cellRenderer}"
          :rendererParams="${(x) => x.colDefs[0].cellRendererParams}"
        ></grid-pro-cell>
      </grid-pro-column>
    </rapid-grid-pro>
  `,
})
export class MyElement extends GenesisElement {
    @observable colDefs: ColDef[] = customColDefs; // refer to above example
}

Loop example

@customElement({
  name: 'my-element',
  template: html`
    <rapid-grid-pro>
      ${repeat(
        (x) => x.colDefs,
        html`
          <grid-pro-column :definition="${(x) => x}">
            ${when(
              (x) => x.cellRenderer,
              html`
                <grid-pro-cell
                  :renderer="${(x) => x.cellRenderer}"
                  :rendererParams="${(x) => x.cellRendererParams}"
                ></grid-pro-cell>
              `,
            )}
          </grid-pro-column>
        `,
      )}
    </rapid-grid-pro>
  `,
})
export class MyElement extends GenesisElement {
    @observable colDefs: ColDef[] = customColDefs; // refer to above example
}

Editor configuration​

Each editor supports extensive configuration through editor parameters, allowing customization of appearance, validation, and behavior:

const columnWithAdvancedEditor: ColDef = {
  headerName: 'Price',
  field: 'price',
  editable: true,
  cellEditor: 'numberEditor',
  cellEditorParams: {
    min: 0,
    max: 10000,
    precision: 2,
    step: 0.01,
    placeholder: 'Enter price'
  }
};

Performance considerations​

  • Custom renderers should be lightweight to maintain grid performance.
  • Use observable properties to enable reactive updates.
  • Consider using built-in renderers and editors before implementing custom solutions.
  • Use the auto-cell-renderer-by-type feature to automatically select appropriate renderers based on data types.