useTableSortable@astryxdesign/core v0.5.2 · useTableSortable

Install with shadcn

Experimental compatibility. This installs the real Astryx package and creates a local public re-export; it does not copy component implementation source. How compatibility works.

This install URL expires with the draft preview.
bash
npx shadcn@latest add https://astryx-2z5i6c2u1-fbopensource.vercel.app/r/astryx-component-use-table-sortable.json
Install the editable showcase composition
bash
npx shadcn@latest add https://astryx-2z5i6c2u1-fbopensource.vercel.app/r/astryx-example-table-sortable-table.json

Usage

Call useTableSortable with a config object containing sort state and callback. Pass the returned plugin to Table via the plugins prop.

ts
import {useTableSortable} from '@astryxdesign/core/Table'

Parameters

ParamTypeDescription
sortrequired
Array<{sortKey: TSortKey, direction: 'ascending' | 'descending'}>

Current sort state (TableSortState<TSortKey>). Ordered array of entries; the first is the primary sort, the rest are tiebreakers. An empty array means unsorted. Direction is the full word: 'ascending' / 'descending', not 'asc' / 'desc'.

onSortChangerequired
(sort: Array<{sortKey: TSortKey, direction: 'ascending' | 'descending'}>) => void

Called when the user clicks a header cell to change sort. Receives the next sort state.

allowUnsortedState
boolean (default: false)

Allow cycling back to unsorted. When true: 'ascending', 'descending', unsorted. When false: 'ascending', 'descending', 'ascending'.

isMultiSortEnabled
boolean (default: false)

Enable multi-sort via Shift+click. Regular click still replaces the entire sort state.

Examples

Common configurations, variations, and states.
Table — Sortable Columns
Open in Playground

Table with sortable columns, click headers to sort ascending or descending.