Column Cell Template

By default, the grid uses the field 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 can customize the cell template.

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

// Get a reference to the column element
const column = document.querySelector('igc-grid-lite-column[field="price"]');

// Set the cellTemplate property
column.cellTemplate = (params: IgcCellContext<T, K>) => { return html`<!-- template content -->`};

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-150', { style: 'currency', currency: 'EUR' });

// Get a reference to the column element
const column = document.querySelector('igc-grid-lite-column');

// Return the custom currency formatted value
column.cellTemplate = (params) => asCurrency(params.value); // => "€123,456.79"

You can combine values of different fields from the data source as well.

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

// Get a reference to the column element
const column = document.querySelector('igc-grid-lite-column');

// Return the custom currency formatted value
column.cellTemplate = ({value, row}) => asCurrency(value * row.data.count);

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";

// Get a reference to the column element
const column = document.querySelector('igc-grid-lite-column[field="rating"]');

// Use another web component to represent the `rating` value in the grid
column.cellTemplate = ({ value }) => html`<igc-rating readonly value=${value}></igc-rating>`;

Cell Context Object

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

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

Additional Resources

• Column Configuration
• Sorting
• Filtering
• Theming & Styling

Our community is active and always welcoming to new ideas.

• Grid Lite GitHub