Usage
Hook that groups a flat data array into collapsible section rows. Each distinct groupBy value becomes a full-width section-header row with a chevron toggle, the group label, and a member count; collapsing hides that group's data rows while keeping the header visible. Mirrors useTableTreeState: the consumer owns the collapsedGroups set and the hook returns {data, plugin, idKey}: pass them to Table as data, plugins, and idKey respectively. Grouping runs on the rows you hand it, so with pagination the order is filter, sort, slice, then group: sort by the group key first and the user's keys second, so a section's rows stay contiguous and each page appends to the bottom of the table instead of splicing rows in above the reader. A page that ends on a row count still cuts mid-section, and the heading then counts what has loaded rather than what exists: "6" quietly becoming "10". Where the full result set is in hand, carry the cut forward to the end of the section it lands in: every rendered section is then whole and its count is a total.
ts
Parameters
| Param | Type | Description |
|---|---|---|
datarequired | T[] | The flat data to group. |
groupByrequired | (item: T) => string | Derive the group key for a row. Rows with the same key share a section. |
collapsedGroupsrequired | Set<string> | Set of currently-collapsed group keys. |
onToggleGrouprequired | (groupKey: string) => void | Called with a group key when its header is toggled. |
renderGroupHeader | (groupKey: string, count: number, collapsed: boolean) => ReactNode | Custom renderer for a group header's content (right of the chevron). Defaults to |
getRowKey | (item: T) => string | Stable key for a real row. Falls back to a positional key when omitted. |
groupOrder | string[] | Explicit group ordering; groups not listed keep first-seen order after these. |
Examples
Common configurations, variations, and states.A table grouped into collapsible sections with useTableGroupedRows. Each group gets a full-width header with a chevron, label, and member count; click to collapse/expand.