Columns

Column Header Renderer

Add a custom React component to a column's header by using the headerRenderer property. Custom header renderers provide a natural way to display specialized content in your LyteNyte Grid headers.

LyteNyte Grid renders your custom header within a managed container. The grid controls and maintains the container structure, while your custom renderer controls the content displayed inside it.

Creating a Header Renderer

A header renderer is a React component that receives the LyteNyte Grid API and the associated column as props. Your header renderer must return a ReactNode.

Creating A Header Renderer

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import {
  ColumnHeaderRendererParamsProReact,
  ColumnProReact,
} from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
function HeaderRendererExample({
  api,
  column,
}: ColumnHeaderRendererParamsProReact) {
  const name = column.headerName ?? column.id;
  const index = api.columnIndex(column);
 
  return (
    <div
      style={{
        textAlign: "center",
        height: "100%",
        width: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        textTransform: "uppercase",
      }}
    >
      {index}. {name}
    </div>
  );
}
 
const columns: ColumnProReact[] = [
  { id: "age", type: "number", headerRenderer: HeaderRendererExample },
  { id: "job", headerRenderer: HeaderRendererExample },
  { id: "balance", type: "number", headerRenderer: HeaderRendererExample },
  { id: "education", headerRenderer: HeaderRendererExample },
  { id: "marital", headerRenderer: HeaderRendererExample },
];
 
export function ColumnHeaderRenderer() {
  const ds = useClientDataSource({ data: bankDataSmall });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
 
    columnBase: {
      widthFlex: 1,
    },
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}

Header Renderer Registration System

Besides directly providing a function, the headerRenderer property also accepts a string value. When you provide a string, LyteNyte Grid treats it as a key for a registered header renderer.

You can register header renderer components and refer to them by name. This approach is useful when:

You need to reuse the same header renderer across multiple columns
Your columns need to be serializable
Your columns are defined on the server side while renderers are defined client-side

To register a header renderer, set the columnHeaderRenderers property in the initial value you provide to useLyteNytePro. You can then refer to any registered header renderer by its name.

Registering a Header Renderer

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import {
  ColumnHeaderRendererParamsProReact,
  ColumnProReact,
} from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
function HeaderRendererExample({
  api,
  column,
}: ColumnHeaderRendererParamsProReact) {
  const name = column.headerName ?? column.id;
  const index = api.columnIndex(column);
 
  return (
    <div
      style={{
        textAlign: "center",
        height: "100%",
        width: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        textTransform: "uppercase",
      }}
    >
      {index}. {name}
    </div>
  );
}
 
const columns: ColumnProReact[] = [
  { id: "age", type: "number", headerRenderer: "indexed-uppercase" },
  { id: "job", headerRenderer: "indexed-uppercase" },
  { id: "balance", type: "number", headerRenderer: "indexed-uppercase" },
  { id: "education", headerRenderer: "indexed-uppercase" },
  { id: "marital", headerRenderer: "indexed-uppercase" },
];
 
export function ColumnHeaderRendererRegistration() {
  const ds = useClientDataSource({ data: bankDataSmall });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
 
    columnHeaderRenderers: {
      "indexed-uppercase": HeaderRendererExample,
    },
    columnBase: {
      widthFlex: 1,
    },
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}

Registering A Header Renderer VS Direct Component

Each approach has different advantages:

Directly providing a React component:

More convenient for simple implementations
Less flexible because the column is no longer serializable
Logging the column won't output a readable value for the property

Using a registered header renderer:

Keeps the column serializable, facilitating data transfer
Produces readable field values when logging the column
Allows for separation of column definitions and rendering logic

PreviousColumn Header Name

Next Column Visibility