Column Header Renderer

Learn how to create, implement, and register custom header renderers for columns in LyteNyte Grid.

Add a custom React component to a column's header by setting the headerRenderer property. Custom header renderers let you show specialized content in LyteNyte Grid headers.

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

Creating a Header Renderer

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

Creating A Header Renderer

"use client";

import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column, HeaderCellRendererParams } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
import { useId } from "react";

type BankData = (typeof bankDataSmall)[number];

function HeaderRendererExample({ grid, column }: HeaderCellRendererParams<BankData>) {
  const name = column.name ?? column.id;
  const index = grid.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: Column<BankData>[] = [
  { 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 default function ColumnHeaderRenderer() {
  const ds = useClientRowDataSource({ data: bankDataSmall });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,

    columnBase: {
      widthFlex: 1,
    },
  });

  const view = grid.view.useValue();

  return (
    <div className="lng-grid" style={{ height: 500 }}>
      <Grid.Root grid={grid}>
        <Grid.Viewport>
          <Grid.Header>
            {view.header.layout.map((row, i) => {
              return (
                <Grid.HeaderRow key={i} headerRowIndex={i}>
                  {row.map((c) => {
                    if (c.kind === "group") return null;

                    return (
                      <Grid.HeaderCell
                        key={c.id}
                        cell={c}
                        className="flex h-full w-full items-center px-2 capitalize"
                      />
                    );
                  })}
                </Grid.HeaderRow>
              );
            })}
          </Grid.Header>
          <Grid.RowsContainer>
            <Grid.RowsCenter>
              {view.rows.center.map((row) => {
                if (row.kind === "full-width") return null;

                return (
                  <Grid.Row row={row} key={row.id}>
                    {row.cells.map((c) => {
                      return (
                        <Grid.Cell
                          key={c.id}
                          cell={c}
                          className="flex h-full w-full items-center px-2 text-sm"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

Header Renderer Registration System

You can also pass a string value to headerRenderer. In this case, LyteNyte Grid treats it as a key for a registered header renderer.

Reuse the same renderer across columns
Keep columns serializable
Define columns on the server and renderers on the client

Register a header renderer by setting headerCellRenderers in the initial value for useLyteNyte. You can then reference it by name.

Registering A Header Renderer

"use client";

import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column, HeaderCellRendererParams } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
import { useId } from "react";

type BankData = (typeof bankDataSmall)[number];
function HeaderRendererExample({ grid, column }: HeaderCellRendererParams<BankData>) {
  const name = column.name ?? column.id;
  const index = grid.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: Column<BankData>[] = [
  { 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 default function ColumnHeaderRendererRegistration() {
  const ds = useClientRowDataSource({ data: bankDataSmall });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,

    headerCellRenderers: {
      "indexed-uppercase": HeaderRendererExample,
    },
    columnBase: {
      widthFlex: 1,
    },
  });

  const view = grid.view.useValue();

  return (
    <div className="lng-grid" style={{ height: 500 }}>
      <Grid.Root grid={grid}>
        <Grid.Viewport>
          <Grid.Header>
            {view.header.layout.map((row, i) => {
              return (
                <Grid.HeaderRow key={i} headerRowIndex={i}>
                  {row.map((c) => {
                    if (c.kind === "group") return null;

                    return (
                      <Grid.HeaderCell
                        key={c.id}
                        cell={c}
                        className="flex h-full w-full items-center px-2 capitalize"
                      />
                    );
                  })}
                </Grid.HeaderRow>
              );
            })}
          </Grid.Header>
          <Grid.RowsContainer>
            <Grid.RowsCenter>
              {view.rows.center.map((row) => {
                if (row.kind === "full-width") return null;

                return (
                  <Grid.Row row={row} key={row.id}>
                    {row.cells.map((c) => {
                      return (
                        <Grid.Cell
                          key={c.id}
                          cell={c}
                          className="flex h-full w-full items-center px-2 text-sm"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

Registering a Header Renderer vs Direct Component

Direct React component:

Quick for simple use cases
Less flexible because the column is not serializable
Logs for the column won't show a readable property value

Registered header renderer:

Keeps the column serializable for data transfer
Produces readable values when logging columns
Separates column definitions from rendering logic

Column Header RendererCopy Page

Creating a Header Renderer

Creating A Header Renderer

Header Renderer Registration System

Registering A Header Renderer

Registering a Header Renderer vs Direct Component

On this page