# Column types

The typed cells every table reuses: image + product, cloth swatch + code, status chip, money (multi-currency), date, code / handle, version, ERP state with a reason.

- **Group:** Data table · **family:** `data-table` · **shadcn:** Table
- **Build:** TanStack `ColumnDef.meta.type` + one cell renderer per type.
- **In apps/admin today:** No `table.tsx` and no @tanstack/react-table in apps/admin; both are new.
- **Client component:** no. Cell renderers are plain components.

## Content rules

- £1,150 · v4 · HS 81045 · navy-birdseye-two-piece · 2 Oct.

## Do

- One formatter per type, shared.

## Don't

- Format money by hand per page.

## Accessibility

- **Keyboard:** Copy buttons appear on focus too.
- **ARIA:** Exact date in `<time datetime>` + `title`.
- **Focus:** Ring on copy.

## Tokens

`--font-voice` `--font-stretch-title` `--w-semibold` `--text-card` `--s-3` `--w-medium` `--foreground` `--w-regular` `--text-small` `--font-code` `--muted-foreground` `--r-media` `--studio` `--text-8` `--primary-foreground` `--s-2` `--text-code` `--s-1` `--r-chip` `--motion-hover` `--muted` `--destructive` `--warning` `--s-4` `--border` `--r-card` `--card` `--text-micro` `--background` `--text-8-5` `--text-9`

## Files

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