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.

// Define cellTemplate function
const currencyCellTemplate = (ctx: IgrCellContext) => (
  {/* Template contents */}
);

// Set the cellTemplate property
return (
  <IgrGridLite data={data} id="grid-lite">
    <IgrGridLiteColumn
      field="price"
      header="Price"
      dataType="number"
      cellTemplate={currencyCellTemplate}
    ></IgrGridLiteColumn>
  </IgrGridLite>
);

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 formatCurrency = new Intl.NumberFormat("en-150", {
  style: "currency",
  currency: "EUR",
});

// Return the custom currency formatted value
const currencyCellTemplate = (ctx: IgrCellContext) => (
  <span>{formatCurrency(ctx.value)}</span>
);

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",
});

// Return the custom currency formatted value
const totalCellTemplate = (ctx: IgrCellContext) => (
  <span>{asCurrency(ctx.value * ctx.row.data.count)}</span>
);

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.

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

// Import defineComponents and an igniteui-webcomponents component such as the rating component.
import { defineComponents, IgcRatingComponent } from "igniteui-webcomponents";

defineComponents(IgcRatingComponent);

// Use the web component as you would normally inside the react cell template
const satisfactionCellTemplate = (ctx: IgrCellContext) => (
  <span>
    <igc-rating readonly value={ctx.value}></igc-rating>
  </span>
);

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