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:

import { GridProClientSideDatasource } from '@genesislcap/grid-pro/react';
import { RapidGridPro as GridPro } from '@genesislcap/rapid-grid-pro/react';

const gridComponents = {
  customRenderer: CustomCellRenderer,
  customEditor: CustomCellEditor,
  customFilter: CustomFilter,
};

export function MyGrid() {
  return (
    <GridPro gridComponents={gridComponents} autoCellRendererByType>
      <GridProClientSideDatasource resourceName="ALL_TRADES" />
    </GridPro>
  );
}

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

import type { ColDef } from '@ag-grid-community/core';
import { GridProCell, GridProColumn } from '@genesislcap/grid-pro/react';
import { RapidGridPro as GridPro } from '@genesislcap/rapid-grid-pro/react';

export function MyElement() {
  const colDefs: ColDef[] = customColDefs; // refer to above example
  return (
    <GridPro>
      <GridProColumn definition={colDefs[0]}>
        <GridProCell
          renderer={colDefs[0].cellRenderer}
          rendererParams={colDefs[0].cellRendererParams}
        />
      </GridProColumn>
    </GridPro>
  );
}

Loop example

import type { ColDef } from '@ag-grid-community/core';
import { GridProCell, GridProColumn } from '@genesislcap/grid-pro/react';
import { RapidGridPro as GridPro } from '@genesislcap/rapid-grid-pro/react';

export function MyElement() {
  const colDefs: ColDef[] = customColDefs; // refer to above example
  return (
    <GridPro>
      {colDefs.map((colDef, index) => (
        <GridProColumn definition={colDef} key={index}>
          {colDef.cellRenderer ? (
            <GridProCell
              renderer={colDef.cellRenderer}
              rendererParams={colDef.cellRendererParams}
            />
          ) : null}
        </GridProColumn>
      ))}
    </GridPro>
  );
}

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.