Columns
Column Header Renderer
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.
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/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 w-full h-full capitalize px-2 items-center"
/>
);
})}
</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="text-sm flex items-center px-2 h-full w-full"
/>
);
})}
</Grid.Row>
);
})}
</Grid.RowsCenter>
</Grid.RowsContainer>
</Grid.Viewport>
</Grid.Root>
</div>
);
}
You can also pass a string value to headerRenderer. In this case,
LyteNyte Grid treats it as a key for a registered header renderer.
Register header renderers and reference them by name when you want to:
- 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/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 w-full h-full capitalize px-2 items-center"
/>
);
})}
</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="text-sm flex items-center px-2 h-full w-full"
/>
);
})}
</Grid.Row>
);
})}
</Grid.RowsCenter>
</Grid.RowsContainer>
</Grid.Viewport>
</Grid.Root>
</div>
);
}
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
