āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/1771-technologies/lytenyte/(components)/component-grid-box ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
The GridBox component is highly flexible-it can power pill rows, list pickers, and many other interactive layouts.
In the example below, it's used as a group pill manager:
+ icon on the right.GridBox component.!demo:Grid Box Group Pills="./demos/grid-box"
LyteNyte Grid provides three built-in hooks that make it easy to generate lists for common use cases:
GridBox.useAggregationBoxItems - Enumerates the grid's aggregation model,
producing a list of applied aggregations.GridBox.useColumnBoxItems - Enumerates the grid's columns. Use this to
build lists that manage column-related settings or behaviors.GridBox.useRowGroupBoxItems - Enumerates the row group model of the grid.
This hook also supports drag-and-drop ordering for row groups.These hooks are convenience utilities-they simplify setup but are not required
to use the GridBox component effectively.
The GridBox component is composed of the following parts:
Root - The root context of the grid box. All components must be rendered within Root.Panel - The main container that provides layout and keyboard interaction handling.Item - A single list item, serving as the primary interaction point.ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā