Custom Renderers (Angular)

Render custom Angular components inside grid cells and headers, including badges, charts, action menus, and any other interactive UI you need to embed.

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.

Free-text filter conditions and copy-paste operate on the formatted value — the string users actually see — while the values (checkbox) filter and sorting work on raw values. A cellRenderer only changes how a cell is painted; it does not affect filtering at all. Pair every custom renderer with a matching valueFormatter so the text users type into a filter matches what they see:

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

Without the formatter, users typing "$82,000" into the Salary column's text condition would match nothing because the comparison would run against 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 */];
}