Custom Renderers

Customize how cells and headers are rendered with custom renderer functions.

Interactive Demo

This demo shows three custom renderers in action:

Status - Colored dot indicator (green/amber/gray)
Performance - Positive values in green, negative in red
Salary - Formatted as currency

Angular-specific code samples below. The renderer signature is the same across all three framework bindings.

Filters, sort comparisons, and copy-paste operate on the formatted value — the string users actually see — not the raw cell value. A cellRenderer only changes how a cell is painted; it does not change the value that powers filtering. Pair every custom renderer with a matching valueFormatter so the two stay in sync:

{
  field: "salary",
  cellDataType: "number",
  width: 140,
  cellRenderer: salaryRenderer,
  valueFormatter: (value) => `$${(value as number).toLocaleString()}`,
}

Without the formatter, users filtering for "$82,000" on the Salary column would match nothing because the filter sees the raw 82000. See the React valueFormatter reference for signature, caveats, and more examples — the Angular API is identical.

Cell Renderers

renderer-grid.component.ts

import { Component } from "@angular/core";
import {
  GridComponent,
  type ColumnDefinition,
  type CellRendererParams,
} from "@gp-grid/angular";

const statusRenderer = (params: CellRendererParams) => {
  const status = params.value as string;
  const color =
    status === "ok" ? "#22c55e" : status === "warn" ? "#f59e0b" : "#9ca3af";
  return `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${color};"></span>`;
};

@Component({
  selector: "app-renderer-grid",
  standalone: true,
  imports: [GridComponent],
  template: `
    <div style="height: 400px">
      <gp-grid
        [columns]="columns"
        [rowData]="data"
        [rowHeight]="36"
      />
    </div>
  `,
})
export class RendererGridComponent {
  columns: ColumnDefinition[] = [
    {
      field: "status",
      cellDataType: "text",
      width: 80,
      cellRenderer: statusRenderer,
    },
  ];

  data = [/* your data */];
}