Cell Renderer

The cellRenderer property on the Column Definition object determines the component Graphite Grid should use for a cell in the grid. A default renderer is used if not provided, which is usually sufficient for textual information.

This guide specifically focuses on the cell component used by the DOM renderer of Graphite Grid (<GraphiteGridDom />). For instructions on creating custom renderers for the Canvas renderer, please refer to the Canvas Cell Renderer guide.

A cellRenderer is a regular React component. It is rendered within a cell container in the grid, so the cellTheme values are still applied even when a custom cell renderer is used.

export function CellRender<T>({ field }: CellRendererParams<T>) {
  if (!Array.isArray(field)) return;
 
  return (
    <ResponsiveContainer width="100%" height="100%">
      <AreaChart
        width={500}
        height={400}
        data={field}
        margin={{
          top: 0,
          right: 0,
          left: 0,
          bottom: 0,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" fillOpacity={0.3} />
        <Area type={cardinal} dataKey="uv" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.3} />
      </AreaChart>
    </ResponsiveContainer>
  );
}
 
export function CellRenderer() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        {
          id: "performance",
          headerLabel: "Performance",
          field: 2,
          cellRenderer: CellRenderer,
        },
      ],
      // orher props
    },
  });
 
  return (
    <div style={{ height: 200 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}CopyCopied!

Using a custom cellRenderer, you can create visually rich and interactive cells in the Graphite Grid DOM renderer. The cell renderer component receives the cell data as props and can render any desired content or visualization within the cell container.