The floating row in LyteNyte Grid is a specialized header row that appears below the main column headers. It allows custom components to be rendered for each column. While commonly used for implementing filtering interfaces, the floating row can accommodate any type of component.
To display the floating header row, set the floatingRowEnabled
property to true
in the grid's
configuration. Once enabled, a row will appear below the column headers with cells for each column.
The content of each floating cell is determined by the column's floatingCellRenderer
property.
"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" },
{ id: "default" },
{ id: "housing" },
{ id: "loan" },
{ id: "contact" },
{ id: "day", type: "number" },
{ id: "month" },
{ id: "duration" },
{ id: "campaign" },
{ id: "pdays" },
{ id: "previous" },
{ id: "poutcome" },
{ id: "y" },
];
export function FloatingHeader() {
const ds = useClientDataSource({ data: bankDataSmall });
const grid = useLyteNytePro({
gridId: useId(),
rowDataSource: ds,
columns,
floatingRowEnabled: true,
columnBase: {
floatingCellRenderer: (p) => {
return (
<div
style={{
width: "100%",
height: "100%",
boxSizing: "border-box",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
paddingInline: 8,
}}
>
<button
onClick={() =>
p.api.columnUpdate(p.column, {
width: p.api.columnVisualWidth(p.column) - 10,
})
}
>
-
</button>
Width: {p.api.columnVisualWidth(p.column)}
<button
onClick={() =>
p.api.columnUpdate(p.column, {
width: p.api.columnVisualWidth(p.column) + 10,
})
}
>
+
</button>
</div>
);
},
},
});
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}
A column's floatingCellRenderer
property can accept either a React component or a string
. When
providing a string
, it serves as a lookup key to retrieve the actual component from those
registered in the grid's state. The floatingCellRenderers
property on the grid allows you to
register a set of floating cell renderers that can be referenced by columns.
"use client";
import {
LyteNyteGrid,
useLyteNytePro,
useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import {
ColumnProReact,
FloatingCellRendererParamsProReact,
} 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" },
{ id: "default" },
{ id: "housing" },
{ id: "loan" },
{ id: "contact" },
{ id: "day", type: "number" },
{ id: "month" },
{ id: "duration" },
{ id: "campaign" },
{ id: "pdays" },
{ id: "previous" },
{ id: "poutcome" },
{ id: "y" },
];
function WidthAdjuster(p: FloatingCellRendererParamsProReact) {
return (
<div
style={{
width: "100%",
height: "100%",
boxSizing: "border-box",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
paddingInline: 8,
}}
>
<button
onClick={() =>
p.api.columnUpdate(p.column, {
width: p.api.columnVisualWidth(p.column) - 10,
})
}
>
-
</button>
Width: {p.api.columnVisualWidth(p.column)}
<button
onClick={() =>
p.api.columnUpdate(p.column, {
width: p.api.columnVisualWidth(p.column) + 10,
})
}
>
+
</button>
</div>
);
}
export function FloatingHeaderRegistered() {
const ds = useClientDataSource({ data: bankDataSmall });
const grid = useLyteNytePro({
gridId: useId(),
rowDataSource: ds,
columns,
floatingRowEnabled: true,
floatingCellRenderers: { "width-adjuster": WidthAdjuster },
columnBase: {
floatingCellRenderer: "width-adjuster",
},
});
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}
We recommend registering floating cell renderers and referencing them from columns rather than providing React components directly. This approach keeps columns serializable and improves debugging capabilities.
You can toggle the floating row's visibility by modifying the floatingRowEnabled
state value on
the grid. Here's a simple function that demonstrates this capability:
const toggleFloatingFilter = () =>
grid.state.floatingRowEnabled.set((prev) => !prev);