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.
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
.
"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>
);
}
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:
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.
"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>
);
}
Each approach has different advantages:
Directly providing a React component:
Using a registered header renderer: