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. The panel spans the row but starts its content at the first column, past the chevron, so detail lines up with the labels above it; the inset follows the table density. 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. |
panelVariant | 'muted' | 'transparent' (default: 'muted') | Background behind the detail panel. 'muted' washes it, marking it as commentary on the row above rather than another row of data — in a bare table with no dividers that wash is the only cue. 'transparent' takes whatever surface is behind the table, for a table already on a Card or Section where a second tint reads as a third surface. The wash is a low-alpha near-black, so it is close to invisible over a dark card: 'muted' is largely a light-theme effect. |
hasRowClickExpansion | boolean (default: false) | Toggle a row by clicking anywhere on it, not only on its chevron. A pointer-only convenience layered over the chevron, which stays the accessible control for keyboard and assistive tech. Clicks on interactive cell content (buttons, links, form controls) or on a text selection do not toggle, and non-expandable rows stay inert. |
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.