LyteNyte Grid enables you to display menus tied to specific columns. These menus provide contextual interactions for individual columns, such as dropdown menus in column headers.
This guide assumes you're familiar with LyteNyte Grid's menu components. For complete details, see the menu frame guide.
The grid uses the columnMenuRenderer
property on grid state to determine what to display when
opening a column menu. The renderer receives the grid's API and the associated column as props.
You can open a column menu using the grid's columnMenuOpen
API method, and close it with the
columnMenuClose
method. Here's a complete example:
"use client";
import {
LyteNyteGrid,
useClientDataSource,
useLyteNytePro,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { Menu } from "@1771technologies/lytenyte-pro/menu";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
const columns: ColumnProReact[] = [
{ id: "age", type: "number", groupPath: ["Specifics"] },
{ id: "job", groupPath: ["Specifics"] },
{ id: "balance", type: "number" },
{ id: "education" },
{ id: "marital" },
{ id: "default", groupPath: ["Hosing"] },
{ id: "housing", groupPath: ["Hosing"] },
{ id: "loan", groupPath: ["Hosing"] },
{ id: "contact" },
{ id: "day", type: "number" },
{ id: "month" },
{ id: "duration" },
{ id: "campaign" },
{ id: "pdays" },
{ id: "previous" },
{ id: "poutcome" },
{ id: "y" },
];
export function ColumnMenu() {
const ds = useClientDataSource({
data: bankDataSmall,
});
const grid = useLyteNytePro({
gridId: useId(),
columns: columns,
rowDataSource: ds,
columnMenuRenderer: () => {
return (
<Menu.Positioner>
<Menu.Container>
<Menu.Item>Label 1</Menu.Item>
<Menu.Item>Label 2</Menu.Item>
<Menu.Item>Label 3</Menu.Item>
<Menu.Separator />
<Menu.Item>Label 4</Menu.Item>
<Menu.Item>Label 5</Menu.Item>
<Menu.Item disabled>Label 6</Menu.Item>
<Menu.Group>
<Menu.GroupLabel>Export</Menu.GroupLabel>
<Menu.Item>CSX Export</Menu.Item>
<Menu.Item>Excel Export</Menu.Item>
<Menu.Item>PDF Export</Menu.Item>
</Menu.Group>
<Menu.Separator />
<Menu.Checkbox>
<span>Minify</span>
<Menu.CheckboxIndicator />
</Menu.Checkbox>
<Menu.Checkbox>
<span>Expand</span>
<Menu.CheckboxIndicator />
</Menu.Checkbox>
<Menu.RadioGroup>
<Menu.Radio value="alpha">
<span>Alpha</span>
<Menu.RadioIndicator />
</Menu.Radio>
<Menu.Radio value="beta">
<span>Beta</span>
<Menu.RadioIndicator />
</Menu.Radio>
<Menu.Radio value="theta">
<span>Theta</span>
<Menu.RadioIndicator />
</Menu.Radio>
</Menu.RadioGroup>
</Menu.Container>
</Menu.Positioner>
);
},
columnBase: {
resizable: true,
movable: true,
sortable: true,
uiHints: {
columnMenu: true,
},
},
});
return (
<div style={{ height: 500, display: "flex", flexDirection: "column" }}>
<div>
<button
onClick={(ev) =>
grid.api.columnMenuOpen(
grid.api.columnByIndex(0)!,
ev.currentTarget
)
}
>
Click Me to Show the Column Menu
</button>
</div>
<div style={{ flex: "1" }}>
<LyteNyteGrid grid={grid} />
</div>
</div>
);
}
LyteNyte's column menu functionality extends the more generic menu frame functionality. The grid identifies the column the menu belongs to and provides it as a property to the menu renderer. This approach requires only one menu renderer for all columns.