Usage
Hook that returns a TablePlugin which expands a full-width detail panel below a row, rendered by the consumer via renderExpanded(item). Adds a leading chevron column and a right-click "Expand/Collapse row" action; the consumer owns the expandedKeys set. Use it for master-detail rows (order details, forms, charts, nested tables). For hierarchical data where child rows reuse the parent columns, use useTableTreeData + useTableTreeState instead.
ts
Parameters
| Param | Type | Description |
|---|---|---|
expandedKeysrequired | Set<string> | Set of currently-expanded row keys. Consumer-owned. |
onTogglerequired | (key: string) => void | Called with a row key when its expansion is toggled (chevron click or context-menu action). |
getRowKeyrequired | (item: T) => string | Derive a stable unique key from a row item. |
renderExpandedrequired | (item: T) => ReactNode | Render the detail content shown in a full-width panel below the row when it is expanded. Receives the row item. |
getIsItemExpandable | (item: T) => boolean | Control which rows are expandable. Non-expandable rows show no chevron, no context-menu action, and never render a panel. Defaults to all rows expandable. |
Examples
Common configurations, variations, and states.A tree table using useTableRowExpansion with inherited columns. Child rows use the same columns as parents, indented by depth. Click the chevron or right-click to expand/collapse.