Skip to content

useTableSortable

@astryxdesign/core v0.7.1 · useTableSortable

The config is a MaybeRefOrGetter, so pass a getter or a ref to keep the plugin on the current sort state.

Parameters ​

NameTypeDefaultDescription
sortTableSortState<TSortKey>—Current sort state: an ordered array of { sortKey, direction }. The first entry is the primary sort, the rest are tiebreakers. An empty array means unsorted. Direction is the full word: 'ascending' / 'descending', not 'asc' / 'desc'.
onSortChange(sort: TableSortState<TSortKey>) => void—Called when the user clicks a header cell to change sort. Receives the next sort state.
allowUnsortedStatebooleantrueAllow cycling back to unsorted. When true: 'ascending', 'descending', unsorted. When false: 'ascending', 'descending', 'ascending'.
isMultiSortEnabledbooleanfalseEnable multi-sort via Shift+click. Regular click still replaces the entire sort state.

Returns ​

FieldTypeDescription
sortFor(column: TableColumn<T>) => TableSortContribution | nullReturns the sort contribution for a header cell, or null when the column is not sortable. A column is sortable when it declares sortable: true or sortable: { sortKey }.
sortFor().direction'ascending' | 'descending' | nullThe direction this column is currently sorted by, or null.
sortFor().ranknumber | null1-based position in a multi-sort, shown beside the arrow. null unless more than one entry is sorted.
sortFor().labelstringThe localized accessible name for the header button, such as "Sort by Name. Sort descending".
sortFor().onClick(event: MouseEvent) => voidThe click handler. A plain click replaces the whole sort state; Shift+click adds, retargets, or removes this column. Read Shift from the event.