useTableRowExpansion
@astryxdesign/core v0.7.1 · useTableRowExpansion
Parameters
useTableRowExpansion() takes one config object. Wrap it in a getter or a ref so the panels follow the current expanded set: useTableRowExpansion(() => ({ ... })).
| Name | Type | Default | Description |
|---|---|---|---|
expandedKeys | ReadonlySet<string> | — | Required. Set of currently-expanded row keys. Consumer-owned. |
onToggle | (key: string) => void | — | Required. Called with a row key when its expansion is toggled, by the chevron or by the context-menu action. |
getRowKey | (item: T) => string | — | Required. Derive a stable unique key from a row item. |
renderExpanded | (item: T) => VNodeChild | — | Required. 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' | 'transparent' | Background behind the detail panel. 'transparent' 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 | 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. |
Returns
useTableRowExpansion() returns one TablePlugin<T>. Pass it to Table in plugins. The plugin fills three fields of the plugin contract:
| Name | Type | Description |
|---|---|---|
transformColumns | (columns: TableColumn<T>[]) => TableColumn<T>[] | Prepends the __expansion column with the chevron. |
rowPatch | (row: T, index: number, columnCount: number) => TableRowPatch | null | Adds the expand action to the row's context menu, the optional whole-row click, and the panel when the row is open. Returns null for a row that is not expandable. |
cellPatch | (input: TableCellPatchInput<T>) => TableCellPatch | null | Marks the chevron cells with the astryx-table__expansion class so they keep their 40px width. |
TableRowPatch
| Name | Type | Description |
|---|---|---|
attrs | Record<string, string | undefined> | data-expanded is set on an open row. |
class | string | astryx-table__clickable when hasRowClickExpansion is on. |
onClick | (event: MouseEvent) => void | Toggles the row, unless the click landed on an interactive element or on a text selection. |
menu | TableRowMenuItem[] | One item that expands or collapses the row. Its label is localized. |
panel | TablePanelPatch | The detail panel below the row. Carries variant and render, and is only present while the row is open. |