What it means
Row grouping is driven by the action layer. The grouped rows usually come from `useGrid`, and the public `rowGrouping` prop wires the grid's group toggles and drag actions back into that same host-owned state.
Data Models guide
Row Grouping data grid documentation
Row grouping turns flat rows into collapsible sections. This page keeps the demo focused on the client-side action layer: nested groups, row selection plus drag reordering, and the callbacks that keep those interactions in host-owned state.
When to use it
Use grouping on large datasets that users naturally read by team, region, owner, or another shared business dimension. It is best when grouped rows help users scan or act faster, not just because the data can be grouped.
Implementation notes
Create and manipulate groups through `useGrid` or your own host action layer. Pass `api.toggleGroupExpansion`, `api.expandAllGroups`, `api.collapseAllGroups`, `api.moveRowsToGroup`, and `api.reorderRowGroups` into `rowGrouping` so built-in group UI and row dragging can call them.
Relevant API
Start with rowGrouping.onToggleGroup, rowGrouping.onCollapseAll, rowGrouping.onExpandAll, rowGrouping.onMoveRowsToGroup, rowGrouping.onReorderGroups. Open the live API reference for types and defaults.