LyteNyte Grid provides flexible header height customization. The header can consist of three possible components:
Column group rows appear only when columns are organized into groups. The floating header row
displays only when the floatingRowEnabled
property is set to true
on LyteNyte Grid.
You can set the column header height using the columnHeaderHeight
property. This property
accepts a number
value representing the height in pixels.
"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[] = [
{ id: "age", type: "number" },
{ id: "job" },
{ id: "balance", type: "number" },
{ id: "education" },
{ id: "marital" },
];
export function ColumnHeaderHeight() {
const ds = useClientDataSource({ data: bankDataSmall });
const grid = useLyteNytePro({
gridId: useId(),
rowDataSource: ds,
columns,
columnHeaderHeight: 60,
columnBase: {
widthFlex: 1,
},
});
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<div>Change Header Height: </div>
<button onClick={() => grid.state.columnHeaderHeight.set(30)}>
Small
</button>
<button onClick={() => grid.state.columnHeaderHeight.set(50)}>
Medium
</button>
<button onClick={() => grid.state.columnHeaderHeight.set(80)}>
Large
</button>
</div>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}
The column header height can be adjusted dynamically after initial setup:
// Set the header height to 24px
grid.state.columnHeaderHeight.set(24);
When using column groups, some columns may not belong to any group or may belong to groups with fewer levels than the deepest group. In these cases, the column header will span multiple column group rows, increasing the cell height proportionally to the number of rows spanned.
"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[] = [
{ id: "age", type: "number", groupPath: ["One Group"] },
{ id: "job", groupPath: ["One Group", "Second Level"] },
{ id: "balance", type: "number" },
{ id: "education" },
{ id: "marital" },
];
export function ColumnHeaderHeightSpans() {
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>
);
}
The columnGroupHeaderHeight
property determines the height of each column group header row.
Column groups can form a hierarchical structure with multiple rows.
"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[] = [
{ id: "age", type: "number", groupPath: ["One Group"] },
{ id: "job", groupPath: ["One Group", "Second Level"] },
{ id: "balance", type: "number" },
{ id: "education" },
{ id: "marital" },
];
export function ColumnHeaderGroupHeight() {
const ds = useClientDataSource({ data: bankDataSmall });
const grid = useLyteNytePro({
gridId: useId(),
rowDataSource: ds,
columns,
columnGroupHeaderHeight: 20,
columnBase: {
widthFlex: 1,
},
});
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<div>Change Header Group Height: </div>
<button onClick={() => grid.state.columnGroupHeaderHeight.set(20)}>
Small
</button>
<button onClick={() => grid.state.columnGroupHeaderHeight.set(50)}>
Medium
</button>
<button onClick={() => grid.state.columnGroupHeaderHeight.set(80)}>
Large
</button>
</div>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}
You can modify the column group header height by updating the columnGroupHeaderHeight
state:
// Set the column group header height to 30px
grid.state.columnGroupHeaderHeight.set(30);
The floating row appears as an additional header row below the column header. It's useful for
displaying supplementary information or interactive components such as floating filters. Use the
floatingRowHeight
property to set its height.
"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[] = [
{ id: "age", type: "number" },
{ id: "job" },
{ id: "balance", type: "number" },
{ id: "education" },
{ id: "marital" },
];
export function ColumnHeaderFloatingRowHeight() {
const ds = useClientDataSource({ data: bankDataSmall });
const grid = useLyteNytePro({
gridId: useId(),
rowDataSource: ds,
columns,
floatingRowEnabled: true,
floatingRowHeight: 20,
columnBase: {
widthFlex: 1,
},
});
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<div>Change Floating Row Height: </div>
<button onClick={() => grid.state.floatingRowHeight.set(20)}>
Small
</button>
<button onClick={() => grid.state.floatingRowHeight.set(50)}>
Medium
</button>
<button onClick={() => grid.state.floatingRowHeight.set(80)}>
Large
</button>
</div>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}
The floating row height can be adjusted dynamically:
// Set the floating row height to 24px
grid.state.floatingRowHeight.set(24);