Component kit/Data tablePhone

Data table

The one table behind the Global Store, Orders, the audit log and every other list in the admin: sort, filter, save a view, select in bulk, and read money in three currencies at a glance.

Built on shadcn Table with TanStack Table. On a phone the same rows become a list, never a squeezed table.

Global Store, table view

Live: sort a column, filter by status, search, change density, tick rows to bring up the bulk bar.

StagingML

Global Store214

Actions
Mid-grey flannel trousersmid-grey-flannel-trousers
HS 64033Sherry Flannel
Draftv1
£340€390$430
Today 09:42
Stone linen jacketstone-linen-jacket
HS 30612Irish Linen
Draftv1
£690€795$870
Yesterday
Navy birdseye two-piece suitnavy-birdseye-two-piece
HS 81045Crystal Springs
Availablev4
£1,150€1,320$1,450
2 Oct
Charcoal herringbone jacketcharcoal-herringbone-jacket
VBC 218.1003Perennial
Availablev2v3 ready
£780€895$985
29 Sep
Navy chalk-stripe three-piecenavy-chalk-stripe-three-piece
VBC 403.0118Revenge
Availablev3
£1,390€1,595$1,750
24 Sep
Midnight mohair dinner suitmidnight-mohair-dinner-suit
VBC 150.2201Ceremony
Availablev2
£1,480€1,700$1,860
18 Sep
Brown glen check waistcoatbrown-glen-check-waistcoat
HS 92201Moorland Tweed
Retiredv5
£260€299$330
11 Aug
Showing 1–7 of 214
0 selected
shadcnTableDataTable (TanStack Table v8)getSortedRowModelgetFilteredRowModelrowSelectionUses.dt.dt-wrap--row--row-th--r-card

Sortable header

One click sorts descending, the next ascending. Columns that cannot sort show plain text.

default
hover
focus
disabled
Request

Not sorted

Descending: newest or highest first, the default on date and money

Ascending: A to Z, oldest or lowest first

Usesshadcn Table · TableHeadTanStack column.getToggleSortingHandler()aria-sort.dt-sort--motion-hover

Filter bar

Search first, status chips with counts, then the facets behind Filters.

Search

default
hover
focus
disabled
error

Entity type filter ignored: it must be at most 100 characters.

Status chip with count

default
hover
focus
selected
disabled

Applied filters

Each applied facet becomes a removable pill. Counts on the status chips always add up to the total.

Collection is Crystal SpringsPrice £500 to £1,500

Filters popover, open. Facets are the Global Store facets: fabric code, collection, price range by currency, colour, composition, weight and blend.

Usesshadcn InputToggleGroupPopoverSelectBadgeTanStack column.setFilterValue().dt-fchip.dt-fpop--motion-pop-in

Saved views

A view stores search, status, facets, sort and density under a name. Personal to each staff member.

default
hover
focus
selected
changed
disabled

Changed view

Filters were changed on a saved view: the blue dot appears and the view can be updated, saved as new or reset.

Usesshadcn TabsDropdownMenuTanStack table.getState().dt-view.dt-mod--info

Density

Two settings only. Compact hides second lines (handle, other currencies); nothing else moves.

Comfortable44px rows, thumbnail, handle and every currency
ProductStatusRecommended priceUpdated
Navy birdseye two-piece suitnavy-birdseye-two-piece
Available
£1,150€1,320$1,450
2 Oct
Charcoal herringbone jacketcharcoal-herringbone-jacket
Available
£780€895$985
29 Sep
Navy chalk-stripe three-piecenavy-chalk-stripe-three-piece
Available
£1,390€1,595$1,750
24 Sep
Compact36px rows, one line per cell
ProductStatusRecommended priceUpdated
Navy birdseye two-piece suitnavy-birdseye-two-piece
Available
£1,150€1,320$1,450
2 Oct
Charcoal herringbone jacketcharcoal-herringbone-jacket
Available
£780€895$985
29 Sep
Navy chalk-stripe three-piecenavy-chalk-stripe-three-piece
Available
£1,390€1,595$1,750
24 Sep
Usesshadcn ToggleGroupdata-density--row--row-compact--motion-sheet-in

Row and row actions

The whole row is the target for the product name; the actions sit at the right edge.

default
Navy birdseye two-piece suitnavy-birdseye-two-piece
HS 81045Crystal Springs
Availablev4
£1,150€1,320$1,450
2 Oct
hover
Navy birdseye two-piece suitnavy-birdseye-two-piece
HS 81045Crystal Springs
Availablev4
£1,150€1,320$1,450
2 Oct
focus
Navy birdseye two-piece suitnavy-birdseye-two-piece
HS 81045Crystal Springs
Availablev4
£1,150€1,320$1,450
2 Oct
selected
Navy birdseye two-piece suitnavy-birdseye-two-piece
HS 81045Crystal Springs
Availablev4
£1,150€1,320$1,450
2 Oct
disabled
Stone linen jacketstone-linen-jacket
HS 30612Irish Linen
Draftv1
£690€795$870
Yesterday
Saving…
error
Charcoal herringbone jacketcharcoal-herringbone-jacket
VBC 218.1003Perennial
Availablev2v3 ready
£780€895$985
29 Sep
Status not saved.

Charcoal herringbone jacket has no EUR price, so it cannot be Available. Add the price, then try again.

Row actions

Quick edit (pencil) opens the side sheet; the menu holds the rest. Destructive items sit last, under a divider.

Usesshadcn TableRowDropdownMenudata-state=selected.dt-ra.mi--motion-pop-in

Bulk select and bulk bar

Tick rows, act once. The bar is navy, like every primary action.

Header and row checkbox

none
some
all
focus
disabled

Bulk bar

Rises from the bottom of the table when the first row is ticked, and leaves when the selection is cleared. Selection covers the visible page.

Global Store

Set status for many masters

3 selected

My Products

Section placement

5 selected

Loading

Action in progress

3 selected

Variants

Backend not connected

12 selectedNot wired
Usesshadcn CheckboxTanStack getToggleAllPageRowsSelectedHandlerrow.getIsSelected().dt-bulk--e-toast--motion-toast-in

Pagination

Numbered pages with first, last and neighbours. Counts use the same total as the status chips.

default
hover
focus
current
disabled
loading
Rows per page
Showing 1–25 of 214
Rows per page
Showing 101–125 of 214
Rows per page
Showing 201–214 of 214
Rows per page
Showing 76–100 of 214

Show more

Used where people browse (Global Store gallery, My Products). Pages are for tables people work through.

48 of 96 products shown
Some products are not shown: this brand's grants were cut at 500.
Usesshadcn PaginationTanStack getPaginationRowModeltable.setPageSize().dt-pager.dt-pgaria-current=page

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

Wide table: Orders

Scroll sideways inside the table. The tick box and order number stay put; a soft edge shows content passing under.

StagingML

Orders

RJ Clothing · 128 in window · 5 awaiting ERP retry

CustomerItemPaymentFulfillmentERPActions
RJ-20418SpecialA. HartleyNavy birdseye two-piece suitHS 81045 · 2 pieces
£1,150
PaidIn productionIn syncMO-88213Today 14:20
RJ-20417No DTC customer recordCharcoal herringbone jacketVBC 218.1003
£780
PaidAwaitingERP failed504 · retry 2 of 5Today 11:02
RJ-20415D. OkaforNavy chalk-stripe three-pieceVBC 403.0118 · 3 pieces
€1,595
PaidShippedIn syncMO-88190Yesterday
RJ-20409S. BrennanMidnight mohair dinner suitVBC 150.2201 · 2 pieces
$1,860
PaidIn productionIn syncMO-881528 Oct
RJ-20398SpecialR. LindqvistBrown glen check waistcoatHS 92201
£260
Refunded—In syncMO-880774 Oct
RJ-20391M. CastellanoMid-grey flannel trousersHS 64033
€390
PaidShippedIn syncMO-880312 Oct
Showing 1–25 of 128 in window · 5 awaiting ERP retry
shadcnTableScrollAreaTanStack columnPinning: leftUses.dt-scroll.dt-frozen .fz.fz-last--motion-hover

Empty table

Two kinds: nothing exists yet (offer the first step), or filters hide everything (offer to clear them).

ProductStatusVersionRecommended priceUpdated

No products yet

Master products you create here become available to every brand you grant them to.

ProductStatusVersionRecommended priceUpdated

No products match

Nothing matches “flannel” with status Retired.

TimestampWhoActionEntityRequest

No audit rows yet

Changes to this brand appear here, newest first, and are kept for a year.

OrderCustomerTotalPlaced

No orders in this brand's window

RJ MTM has no orders in the last 90 days.

Usesshadcn TableRow colSpanEmpty.dt-empty.dt-emp

Loading skeleton

Never a blank table, never a bare “Loading…”.

First load

Real headers, skeleton cells shaped like the content they stand in for. The pulse is slow and stops under reduced motion.

Actions
Loading the Global Store…

Refreshing

Refreshing prices.

Rows stay readable while new prices load.

Navy birdseye two-piece suitnavy-birdseye-two-piece
HS 81045Crystal Springs
Availablev4
£1,150€1,320$1,450
2 Oct
Charcoal herringbone jacketcharcoal-herringbone-jacket
VBC 218.1003Perennial
Availablev2v3 ready
£780€895$985
29 Sep
Usesshadcn Skeletonaria-busy.skel--motion-skeletonprefers-reduced-motion

Error, partial and not wired

Name the real cause and the next step. A table that was never read must never look empty.

ProductStatusVersionRecommended priceUpdated

Global Store unavailable

The master product store did not answer within 10 seconds. Nothing was changed.

Order book not read.

The ERP order read did not complete, so no rows are shown. This is not a statement that this brand has no orders.

OrderCustomerTotalPaymentPlaced

No rows to show until the order read completes.

Showing ERP order data only.

DTC commerce did not answer, so customer names are missing for now.

OrderCustomerTotalPlaced
RJ-20418Not loaded£1,150Today 14:20
RJ-20417Not loaded£780Today 11:02
Audit log not readable yet.

The audit read is not wired on staging. No rows are shown.

TimestampWhoActionEntity

Rows appear here once the audit read is connected.

Usesshadcn Alert.dt-note.bad | .warn | .info.dt-emp.bad--destructive--not-wired