Data table

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.

Live specimen

Lifted from the approved family page at build time; interact with it.

Column types

Six cell types, each with its edge cases. Money and numbers align right in tabular figures.

Imageimg · next/image
photo
Navy birdseye two-piece suitnavy-birdseye-two-piece
large
Brown glen check waistcoatbrown-glen-check-waistcoat
photo to come
Stone linen jacketPhoto to come · HS 30612
loading
StatusBadge
catalogue
DraftAvailableRetired
payment
PaidRefunded
fulfillment
In productionShipped
ERP
ERP failed504 · retry 2 of 5
Money, multi-currencyIntl.NumberFormat
all confirmed
£1,150€1,320$1,450
unverified
£690€795$870
base only
£780+2 currencies
no price yet
No price yet
edit value
£1,150.00
Datedate-fns · time
today
Today 14:20
yesterday
Yesterday
this year
2 Oct
older
14 Nov 2025
exact
2026-10-11 14:20:07
Codefont-mono
cloth
HS 81045Crystal Springs
handle
navy-birdseye-two-piece
order
RJ-20418Special
request id
req_01JA7Q3K8MZC4W
Versionfont-mono · Badge
current
v4
update ready
v2v3 ready
draft, unreleased
v1
never saved
—
Usesshadcn TableCellBadge.dt-ph.dt-money.dt-unv.dt-ver.dt-code--font-code--warning

from families/data-table/#column-types