Skip to content

useTableStickyColumns

@astryxdesign/core v0.7.1 · useTableStickyColumns

The config is a MaybeRefOrGetter, so pass a getter or a ref to change the pinned keys at runtime.

Parameters ​

NameTypeDefaultDescription
startKeysreadonly string[]—Column keys pinned to the start (inline-start / left in LTR) edge: the contiguous run from the first column through the last listed key.
endKeysreadonly string[]—Column keys pinned to the end (inline-end / right in LTR) edge: the contiguous run from the first listed key through the last column.

Returns ​

FieldTypeDescription
cellPatch(input: TableCellPatchInput<T>) => TableCellPatch | nullMarks a header or body cell as sticky. The offset is cumulative over the pinned run: each pinned column adds the floor width of the one before it. Returns null for columns that stay in flow, and for every column while both key lists are empty.
bindScrollRoot(element: HTMLElement | null) => voidThe table calls this with its scroll container, and again with null when it unmounts. The hook listens to scroll and resize there and writes --table-sticky-shadow-start / --table-sticky-shadow-end as '1' or '0', which drive the soft shadow. The listener is removed when the scope is disposed.

A pinned cell gets position: sticky, an inset on the start or end edge, z-index 3 for a header cell and 1 for a body cell, and the classes astryx-table__sticky plus astryx-table__sticky--start or astryx-table__sticky--end.