Component kit/Data tableDesktop

Data table

On a phone every table becomes a list of rows or cards with the same data and the same actions. Nothing is squeezed, nothing scrolls sideways. One row height: phones do not need a density switch.

Global Store as a list

Live: search, tap a status, open sort and filter, tap Select to tick rows and bring up the bulk bar.

Global StoreStaging

Global Store

214 master products

7 of 214Updated, newest
7 of 214 shown
0 selected
shadcnTable → listDrawerTanStack rowsUses.dt-list.dt-li.k-sheet.k-bottom--control-h-m

List row

Tap the row to open the product. The ⋯ button holds the same actions as the desktop menu.

default

focus

selected

disabled

error

Status not saved: add the EUR price first.

Usesshadcn Table → ul.dt-li.dt-li-r--control-h-m

Row actions

The ⋯ button opens a bottom sheet with the row's actions.

Usesshadcn DrawerDropdownMenu (desktop).k-sheet.k-bottom--e-phone-sheet--motion-sheet-in

Search, filters and sort

Status chips scroll sideways; everything else lives in one bottom sheet.

Status chip

default
focus
selected
disabled

Applied filters

Collection is Crystal SpringsPrice £500 to £1,500

Sort and filter sheet

Sort, status and facets share one sheet; the button counts what will show.

Usesshadcn DrawerToggleGroupRadioGroup.dt-hs.dt-fchip

Saved views

Views made on desktop work here too. The blue dot means the filters were changed.

Usesshadcn Tabs.dt-view.dt-mod

Bulk select

Selection is a mode on the phone, so a tap still opens the row.

Tick box, 44px target

none
some
all
focus
disabled

Bulk bar

Tap Select, tick rows; the bar sits above the tab bar until the selection is cleared.

3 selected
5 selected
3 selected
Usesshadcn Checkbox.dt-mbulk--e-phone-sheet--motion-sheet-in

Column types in a row

The same six types, laid out for a list row.

image
photo to come
status
DraftAvailableRetired
order state
ERP failed
money
£1,150€1,320$1,450
unverified
£690€795$870
no price yet
No price yet
date
Today 14:20
exact
2026-10-11 14:20:07
cloth code
VBC 218.1003
handle
navy-birdseye-two-piece
version
v2v3 ready
Uses.dt-ph.dt-money.dt-unv.dt-ver--font-code

Orders as cards

The eight order columns regroup into a card: who and what, the total, then payment, fulfillment and ERP side by side.

1–25 of 128 · 5 awaiting ERP retry
RJ-20418SpecialToday 14:20
A. Hartley
Navy birdseye two-piece suit
£1,150
PaymentPaid
FulfillmentIn production
ERPIn syncMO-88213
RJ-20417Today 11:02
No DTC customer record
Charcoal herringbone jacket
£780
PaymentPaid
FulfillmentAwaiting
ERPERP failed504 · retry 2 of 5
RJ-20415Yesterday
D. Okafor
Navy chalk-stripe three-piece
€1,595
PaymentPaid
FulfillmentShipped
ERPIn syncMO-88190
S. Brennan
Midnight mohair dinner suit
$1,860
PaymentPaid
FulfillmentIn production
ERPIn syncMO-88152
25 of 128 shown
Usesshadcn CardTanStack rows.dt-oc.dt-oc-st

Empty, loading and error

Same causes and words as desktop; buttons grow to the 44px target.

Nothing yet

No products yet

Master products you create here become available to the brands you grant them to.

Filtered to nothing

No products match

Nothing matches “flannel” with status Retired.

First load

Show more, loading

Some products are not shown: this brand's grants were cut at 500.

Failed read

Global Store unavailable

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

Not read

Order book not read.

The ERP order read did not complete. This is not a statement that this brand has no orders.

Uses.dt-emp.skel.dt-notearia-busy