# Sortable Table

> A table with click-to-sort headers: the arrow appears on header hover and previews the order, and on click every row glides from where it was to its new place while the arrow rotates on the same spring. Shift-click adds a secondary sort.

- Tier: Eased Pro
- Interaction: Press
- Page: https://eased.dev/components/sortable-table
- Installs: @tanstack/react-table

## Install

Sortable Table ships with Eased Pro (https://eased.dev/#pricing). Members add the `@eased-pro` registry with their token (https://eased.dev/account), then run:

```bash
npx shadcn add @eased-pro/sortable-table
```

Table with click-to-sort headers, on TanStack's sorting.

```tsx
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 }]} />
```

## 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.