Use the headerName
property to provide a user-friendly display name for any column. The grid's
default header renderer displays this value in the column header.
Other LyteNyte Grid components also use the headerName
property when displaying column-related
information. For example, the Pill Manager uses headerName
values
as display labels on each pill.
"use client";
import {
LyteNyteGrid,
useLyteNytePro,
useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
const columns: ColumnProReact[] = [
{ headerName: "Years Alive", id: "age", type: "number" },
{ headerName: "Employment", id: "job" },
{ headerName: "Money In Bank", id: "balance", type: "number" },
{ headerName: "Smartness Level", id: "education" },
{ headerName: "Single Or Not?", id: "marital" },
];
export function ColumnHeaderName() {
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>
);
}
You can update a column's header name using the grid API method columnUpdate
. This method allows
you to modify any column property, including the header name.
"use client";
import {
LyteNyteGrid,
useLyteNytePro,
useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
const columns: ColumnProReact[] = [
{ headerName: "Years Alive", id: "age", type: "number" },
{ headerName: "Employment", id: "job" },
{ headerName: "Money In Bank", id: "balance", type: "number" },
{ headerName: "Smartness Level", id: "education" },
{ headerName: "Single Or Not?", id: "marital" },
];
export function ColumnHeaderNameUpdate() {
const ds = useClientDataSource({ data: bankDataSmall });
const grid = useLyteNytePro({
gridId: useId(),
rowDataSource: ds,
columns,
columnBase: {
widthFlex: 1,
},
});
const c = grid.state.columns.use();
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<div>
<input
aria-label="update-age"
style={{ width: 150, boxSizing: "border-box" }}
value={c[0].headerName ?? ""}
onChange={(e) => {
grid.api.columnUpdate(c[0], { headerName: e.target.value ?? "" });
}}
/>
<input
aria-label="update-job"
style={{ width: 150, boxSizing: "border-box" }}
value={c[1].headerName ?? ""}
onChange={(e) => {
grid.api.columnUpdate(c[1], { headerName: e.target.value ?? "" });
}}
/>
<input
aria-label="update-balance"
style={{ width: 150, boxSizing: "border-box" }}
value={c[2].headerName ?? ""}
onChange={(e) => {
grid.api.columnUpdate(c[2], { headerName: e.target.value ?? "" });
}}
/>
<input
aria-label="update-education"
style={{ width: 150, boxSizing: "border-box" }}
value={c[3].headerName ?? ""}
onChange={(e) => {
grid.api.columnUpdate(c[3], { headerName: e.target.value ?? "" });
}}
/>
<input
aria-label="update-marital"
style={{ width: 150, boxSizing: "border-box" }}
value={c[4].headerName ?? ""}
onChange={(e) => {
grid.api.columnUpdate(c[4], { headerName: e.target.value ?? "" });
}}
/>
</div>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}
To update multiple columns at once, use the columnUpdateMany
method. For more details on these and
other API methods, see the LyteNyte Grid API Reference.