# Sortable header

Header cells that sort on click: a quiet up-down icon at 45% until hovered, then an arrow for the active direction. One sort at a time.

- **Group:** Data table · **family:** `data-table` · **shadcn:** Table
- **Build:** TanStack `getSortedRowModel` + a header button.
- **In apps/admin today:** No `table.tsx` and no @tanstack/react-table in apps/admin; both are new.
- **Client component:** yes. 

## Content rules

- Phone: sort lives in the filter sheet ("Sort by Updated, newest first").

## Do

- Default sort = most useful (Updated, newest).

## Don't

- Multi-column sort without a visible order.

## Motion

- Icon opacity and rotation on `--motion-hover`.

## Accessibility

- **Keyboard:** Enter / Space cycles ascending → descending → none.
- **ARIA:** `aria-sort` on the `th`, not the button.
- **Focus:** 2px ring, 0 offset (inside the cell).

## Tokens

`--font-voice` `--font-stretch-title` `--row-th` `--s-3` `--muted` `--border` `--text-small` `--w-semibold` `--muted-foreground` `--s-1` `--r-control` `--motion-hover` `--foreground` `--ring`

## Files

`table-sort.html` live specimen · `table-sort.css` kit rules · `table-sort.d.ts` props · full page: `docs/components/table-sort/` (phone: `m/`).