# Data table

The admin's main list: a white card with a muted 36px header row and 44px body rows in Plex 13px, typed columns (product, cloth, status, money, date, code, version) and a row menu. Wide tables freeze their first columns and scroll sideways.

- **Group:** Data table · **family:** `data-table` · **shadcn:** Table
- **Build:** shadcn `Table` + TanStack Table (`@tanstack/react-table`) as a `DataTable` with toolbar, saved views, bulk bar and `Pagination`.
- **In apps/admin today:** No `table.tsx` and no @tanstack/react-table in apps/admin; both are new.
- **Client component:** yes. Sorting, selection and column state run in the client (TanStack).

## Content rules

- Money: £1,150 in lists, two decimals only when not whole.
- Dates: 2 Oct, Yesterday, Today 14:20.
- Codes, handles, versions in Plex Mono.

## Do

- Right-align numbers and money.
- Keep the first column the record name.

## Don't

- Truncate money.
- Show a table on the phone.

## Accessibility

- **Keyboard:** Rows are not tab stops; the name link and row actions are.
- **Keyboard:** Optional grid navigation (↑ ↓) when rows are selectable.
- **ARIA:** Real `<table>` with `<th scope="col">`; sort state `aria-sort`.
- **ARIA:** Row checkboxes labelled with the row name.
- **Focus:** Ring inside the row, never clipped by the scroll container.

## Tokens

`--font-voice` `--font-stretch-title` `--card` `--border` `--r-card` `--text-body` `--row-th` `--s-3` `--muted` `--text-small` `--w-semibold` `--muted-foreground` `--row` `--s-2` `--motion-hover` `--motion-sheet-in` `--accent` `--e-row-focus` `--e-row-focus-first` `--foreground` `--w-medium` `--w-regular` `--font-code` `--r-media` `--studio` `--text-8` `--primary-foreground` `--text-code` `--s-1` `--destructive` `--warning` `--s-4` `--sticky-edge` `--background` `--r-chip` `--text-8-5` `--text-9` `--row-compact`

## Files

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