Apex Grid Column Cell Template

By default, the grid uses the key of the column to render the value as a string inside the cell. This is fine for basic scenarios, but if you want to customize the rendered output or the final output is a combination of different data fields, you should use a cell template renderer.

To achieve that, set the cellTemplate property of the column.

{
  cellTemplate?: (params: ApexCellContext<T, K>) => TemplateResult;
}

Use as a formatter function

For the simple scenario where some formatting is required, one can just return the formatted value. Here is an example for displaying a number value to a locale currency format:

const { format: asCurrency } = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'EUR' });

  {
    ...
    /** Return the custom currency format for a value `value = 123456.789` */
    cellTemplate: (params) => asCurrency(params.value) // => "€123,456.79"
    ...
  }

You can combine values different fields from the data source as well. Refer to the API documentation for ApexCellContext for more information.

const { format: asCurrency } = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'EUR' });

  {
    ...
    /** Return the custom currency format for an order of 10 items where the price is 99.99 */
    cellTemplate: ({value, row}) => asCurrency(value * row.data.count) // => "€999.90"
    ...
  }

Custom DOM templates

Aside from using the cellTemplate property as a value formatter, you can also create your own DOM template, which will be rendered inside the cell container.

We've decided to re-use the functionality provided by lit and its tagged template syntax for building declarative DOM fragments.

You can template any standard DOM elements as well as web components from other libraries.

// Import the `html` tag function from the Lit package.
  import { html } from "lit";
  
  {
    key: 'rating',
    // Use another web component to represent the `rating` value in the grid
    cellTemplate: ({ value }) => html`<igc-rating readonly value=${value}></igc-rating>`
    ...
  }

Keep in mind the more complex and involved the template is, the greater the performance cost. Avoid complex DOM structures if performance is important.

Cell context object

The custom cell renderer is passed an ApexCellContext object as a parameter with the following props:

/**
  * Context object for the row cell template callback.
  */
 export interface ApexCellContext<
   T extends object,
   K extends Keys<T> = Keys<T>
 > {
   /**
    * The cell element parent of the template.
    */
   parent: ApexGridCell<T>;
   /**
    * The row element containing the cell.
    */
   row: ApexGridRow<T>;
   /**
    * The current configuration for the column.
    */
   column: ColumnConfiguration<T, K>;
   /**
    * The value from the data source for this cell.
    */
   value: PropertyType<T, K>;
 }