Table with click-to-sort headers, on TanStack's sorting.
import { easedColumns, SortableTable } from "@/components/eased/sortable-table/sortable-table";const col = easedColumns<Rep>();const columns = col.columns([ col.accessor("name", { header: "Rep", meta: { emphasis: true, grow: true } }), col.accessor("revenue", { header: "Revenue", sortDescFirst: true, meta: { align: "end" } }),]);<SortableTable label="Leaderboard" data={reps} columns={columns} getRowId={(r) => r.id} defaultSorting={[{ id: "revenue", desc: true }]} />Installation
npx shadcn add @eased-pro/sortable-tableNeeds the @eased-pro registry and your Pro token in components.json. Create a token and copy the setup from your account .
Props
Everything in Table, plus:
| Prop | Type | Default | |
|---|---|---|---|
sorting / defaultSorting | SortingState | [] | Controlled or uncontrolled. |
onSortingChange | (sorting) => void | ||
multiSort | boolean | true | Shift-click adds a secondary sort, numbered. |
allowUnsort | boolean | true | A third click clears the sort. |
flip | boolean | true | Rows glide to their new order. |
flipMaxRows | number | 60 | Above this, reorder instantly. |
Turn sorting off for a column with enableSorting: false. Start numeric columns descending with sortDescFirst.
Motion signature: the arrow stays hidden until you hover or focus a header, then previews the order a click will apply. On click, every row glides from where it was to its new place on the smooth spring while the arrow rotates on the same spring. Re-sorting mid-flight starts from where each row is. The header never shifts, and reduced motion reorders instantly.