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 Store
214 master products
- £340€390$430
- £690€795$870
- £1,150€1,320$1,450
- £780€895$985
- £1,390€1,595$1,750
- £1,480€1,700$1,860
- £260€299$330
No products match
Try another search or status.
Table → listDrawerTanStack rowsUses.dt-list.dt-li.k-sheet.k-bottom--control-h-mList 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.
shadcn Table → ul.dt-li.dt-li-r--control-h-mRow actions
The ⋯ button opens a bottom sheet with the row's actions.
shadcn DrawerDropdownMenu (desktop).k-sheet.k-bottom--e-phone-sheet--motion-sheet-inSearch, filters and sort
Status chips scroll sideways; everything else lives in one bottom sheet.
Status chip
Applied filters
Sort and filter sheet
Sort, status and facets share one sheet; the button counts what will show.
shadcn DrawerToggleGroupRadioGroup.dt-hs.dt-fchipSaved views
Views made on desktop work here too. The blue dot means the filters were changed.
shadcn Tabs.dt-view.dt-modBulk select
Selection is a mode on the phone, so a tap still opens the row.
Tick box, 44px target
Bulk bar
Tap Select, tick rows; the bar sits above the tab bar until the selection is cleared.
shadcn Checkbox.dt-mbulk--e-phone-sheet--motion-sheet-inColumn types in a row
The same six types, laid out for a list row.
.dt-ph.dt-money.dt-unv.dt-ver--font-codeOrders as cards
The eight order columns regroup into a card: who and what, the total, then payment, fulfillment and ERP side by side.
shadcn CardTanStack rows.dt-oc.dt-oc-stAudit log rows
Each row opens in place to show the request and the before and after.
updatemaster_product / 3f2c9a1e…14:20staff: Mei
Before
After
publishwebsite_release / v314:02staff: Mei
updateoffer_price / 8d41c0b2…13:47api_key: mcp-doors
synccloth / HS 8104512:31system: cloth-mirror
createmaster_product / c97e2f10…11:15staff: Tom
shadcn Collapsibledetails/summary.dt-ad.dt-jsonEmpty, 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
Failed read
Global Store unavailable
The master product store did not answer within 10 seconds. Nothing was changed.
Not read
The ERP order read did not complete. This is not a statement that this brand has no orders.
.dt-emp.skel.dt-notearia-busy