Column templates

Custom header and cell rendering with headerTemplate and cellTemplate.

Start from defineColumnsFromRows for the columns you don't need to customize, then declare the ones you do. headerTemplate and cellTemplate accept any React node, so formatting and conditional styling are plain component code.

Formatted currency column

Column templates

Live example

Id	Service	Environment Name	Environment Region	Status	Cost	Cost
1	checkout-api	production	us-east-1	healthy	1240.5	$1,240.50
2	billing-worker	production	eu-west-1	degraded	860.2	$860.20
3	search-index	staging	us-east-1	healthy	92.75	$92.75
4	notifications	production	us-west-2	down	305.4	$305.40
5	analytics-pipeline	staging	eu-west-1	healthy	145	$145.00

import { defineColumnsFromRows } from "@gridkitjs/core";
import { DataGridComponent, type ColumnDefinition } from "@gridkitjs/react";

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
});

const columns: readonly ColumnDefinition<Row>[] = [
  ...defineColumnsFromRows(rows),
  {
    field: "Cost",
    id: "Cost.currency",
    type: "currency",
    headerTemplate: <span className="italic">Cost</span>,
    cellTemplate: ({ value, row }) => (
      <span className={row.Cost > 500 ? "font-semibold text-red-600" : ""}>
        {currency.format(Number(value))}
      </span>
    ),
  },
];

<DataGridComponent columns={columns} dataSource={rows} borders="horizontal" />;