F1 component kit/Tables and lists/Data tableDesktop

Data table

F1 variant05 · data-table

The A01 index (109 pages). TanStack Table with server paging and totals, compact 30px rows, sticky header and sticky first column, column chooser, keyboard walk, inline edit with saving / saved / rejected, expandable and grouped rows, real column types (4-digit order id, retailer pill, piece pills by phase, real status chips, factory codes + HF) and the shared table states. Drawn from flagship O01.

Covers: data-table primitive, data-table designer, table-sort designer, sticky-header designer, row-actions designer, column-types designer, table-states designer, density designer. Exports: DataTable, ColumnTypes, InlineEditCell, ColumnChooser.

Whole page:Phone is fixed at comfortable (POWERUPS #15).Laravel · navyDTC · midnight green

Anatomy

The component as it sits in the product: English, compact, real data shapes.

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 2-Piece + ShirtJATRSHBuild

4523 · M. BrennanKestrel Tailoring · 2-PieceJATROn HoldUrgent

States

16 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

default

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 2-Piece + ShirtJATRSHBuild

4523 · M. BrennanKestrel Tailoring · 2-PieceJATROn HoldUrgent

hover + keyboard focus

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 2-Piece + ShirtJATRSHBuild

4523 · M. BrennanKestrel Tailoring · 2-PieceJATROn HoldUrgent

selected rows

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 2-Piece + ShirtJATRSHBuild

2 selectedPrint

column chooser open

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 2-Piece + ShirtJATRSHBuild

4523 · M. BrennanKestrel Tailoring · 2-PieceJATROn HoldUrgent

wide · sticky first column

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 2-Piece + ShirtJATRSHBuild

4523 · M. BrennanKestrel Tailoring · 2-PieceJATROn HoldUrgent

expanded row

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 2-Piece + ShirtJATRSHBuild

4523 · M. BrennanKestrel Tailoring · 2-PieceJATROn HoldUrgent

grouped rows

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 2-Piece + ShirtJATRSHBuild

4523 · M. BrennanKestrel Tailoring · 2-PieceJATROn HoldUrgent

inline edit: saving · saved · rejected

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 2-Piece + ShirtJATRSHBuild

4523 · M. BrennanKestrel Tailoring · 2-PieceJATROn HoldUrgent

sort: only where the API sorts

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 2-Piece + ShirtJATRSHBuild

4523 · M. BrennanKestrel Tailoring · 2-PieceJATROn HoldUrgent

loading skeleton

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

refetch dims rows

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 2-Piece + ShirtJATRSHBuild

4523 · M. BrennanKestrel Tailoring · 2-PieceJATROn HoldUrgent

filtered empty

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

No orders match “4419”

Search looks in every status.

zero state (On Hold)

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 2-Piece + ShirtJATRSHBuild

4523 · M. BrennanKestrel Tailoring · 2-PieceJATROn HoldUrgent

stale / offline

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

partial data

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 2-Piece + ShirtJATRSHBuild

4523 · M. BrennanKestrel Tailoring · 2-PieceJATROn HoldUrgent

error + request id

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

Orders didn't load

Pull down or tap Retry.

Density

The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.

comfortable · phone default

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 2-Piece + ShirtJATRSHBuild

4523 · M. BrennanKestrel Tailoring · 2-PieceJATROn HoldUrgent

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 2-Piece + ShirtJATRSHBuild

4523 · M. BrennanKestrel Tailoring · 2-PieceJATROn HoldUrgent

中文 · lang=zh-Hans

客户订单

查找订单

进行中 426可以下单 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 两件套JATR可以下单加急

4527 · R. LindqvistAtelier North · 衬衫 ×2SHSH可以下单

4526 · 王先生杭州云裳高级定制 · 三件套JATRWC可以下单

4525R · A. Fitzwilliam-HartThe Cambridge Gentleman's Outfitters · 两件套 + 衬衫JATRSHBuild

4523 · M. BrennanKestrel Tailoring · 两件套JATROn Hold加急

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4525R · A. Fitzwilliam-Hart-Montgomery-AbernethyThe Cambridge Gentleman's Outfitters · Trumpington Street bespoke & made-to-measure branchJATRSHSHWCBuild

permission denied

Orders

Find order

Active 426Ready For Fulfilment 7Build 5Manufacturing 412

4528 · J. OkaforHarrow & Vale · 2-PieceJATRReady For FulfilmentUrgent

4527 · R. LindqvistAtelier North · Shirt ×2SHSHReady For Fulfilment

4526 · 王先生杭州云裳高级定制 · 3-PieceJATRWCReady For Fulfilment

Support: read only; long-press select is off.

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export: DataTable · @rj/admin-kit
Props: columns · data · manualPagination · rowCount · sorting (only when serverSort) · selection · onBulkAction · density · stickyFirstColumn · columnVisibility · expand · groupBy · state
Variants: compact · comfortable · framed
States: loading · ready · refetching (dim) · empty · filtered-empty · zero · error · stale · offline · partial · denied (read-only) · long-string · CJK
shadcn / Radix: Table (shadcn) · Checkbox · DropdownMenu (row ⋯) · Popover (column chooser)
Package underneath: @tanstack/react-table 8 · @tanstack/react-virtual · nuqs (page, sort, filters in the URL) · @tanstack/react-query
Accessibility: role=grid with roving focus; ↑↓ rows, Space peek, ↵ open, x select, / search; header checkbox is tri-state; sticky cells keep their reading order
API operations: admin.orders.index · admin.orders.status-catalogue · admin.tickets.index · admin.fabrics.index · admin.default-measurements.update (inline)
Phone variant: DataCardList: cards in a list, status chips scroll sideways, long-press to select
Permission: checkboxes, bulk bar and next-step buttons render only with the verbs the role holds

Export: ColumnTypes · @rj/admin-kit
Props: orderId · retailer · pieces · orderStatus · ticketStatus · factory · money · datetime · bilingual · mono + copy · thumb · chips (+N) · bool
Accessibility: truncated cells carry the full value in title + accessible name

Export: InlineEditCell · @rj/admin-kit
Props: value · onSave (optimistic) · validate
States: idle · editing · saving · saved (Undo) · rejected 422 (typed value kept)
Package underneath: react-query useMutation (rollback) · sonner (Undo) · zod

Export: ColumnChooser · @rj/admin-kit
Props: columns · visible · order
States: on · off · unavailable with reason (Meas. dropped)
shadcn / Radix: Popover + Checkbox + dnd-kit