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
| Name | Type | Default | Description |
|---|---|---|---|
sort | TableSortState<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. |
allowUnsortedState | boolean | true | Allow cycling back to unsorted. When true: 'ascending', 'descending', unsorted. When false: 'ascending', 'descending', 'ascending'. |
isMultiSortEnabled | boolean | false | Enable multi-sort via Shift+click. Regular click still replaces the entire sort state. |
Returns
| Field | Type | Description |
|---|---|---|
sortFor | (column: TableColumn<T>) => TableSortContribution | null | Returns 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' | null | The direction this column is currently sorted by, or null. |
sortFor().rank | number | null | 1-based position in a multi-sort, shown beside the arrow. null unless more than one entry is sorted. |
sortFor().label | string | The localized accessible name for the header button, such as "Sort by Name. Sort descending". |
sortFor().onClick | (event: MouseEvent) => void | The click handler. A plain click replaces the whole sort state; Shift+click adds, retargets, or removes this column. Read Shift from the event. |