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.

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

[!NOTE] 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 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