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: 'transparent') | Background behind the detail panel. 'transparent' (default) paints nothing: the panel is the row's continuation and takes whatever surface the table sits on, so a Card shows through and a striped table's zebra reads on unchanged. 'muted' washes it, marking it as commentary rather than another row of data — reach for it in a bare table with no card, dividers or striping, where nothing else makes that distinction. 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.
Use with shadcn
Already using the shadcn registry workflow? Install the real Astryx package and a local public re-export. Component implementation source stays in Astryx. How compatibility works.
This install URL expires with the draft preview.bash