Skip to content

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(() => ({ ... })).

NameTypeDefaultDescription
expandedKeysReadonlySet<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.
hasRowClickExpansionbooleanfalseToggle 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&lt;T&gt;. Pass it to Table in plugins. The plugin fills three fields of the plugin contract:

NameTypeDescription
transformColumns(columns: TableColumn<T>[]) => TableColumn<T>[]Prepends the __expansion column with the chevron.
rowPatch(row: T, index: number, columnCount: number) => TableRowPatch | nullAdds 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 | nullMarks the chevron cells with the astryx-table__expansion class so they keep their 40px width.

TableRowPatch ​

NameTypeDescription
attrsRecord<string, string | undefined>data-expanded is set on an open row.
classstringastryx-table__clickable when hasRowClickExpansion is on.
onClick(event: MouseEvent) => voidToggles the row, unless the click landed on an interactive element or on a text selection.
menuTableRowMenuItem[]One item that expands or collapses the row. Its label is localized.
panelTablePanelPatchThe detail panel below the row. Carries variant and render, and is only present while the row is open.