adx design system · Chapter 05

Data rows that go somewhere

Registers are the heart of the product: tables whose whole row is a real link, stage pills that keep one colour everywhere, and the summary cards that turn a thousand rows into one number worth reading.

Data anatomyLive from adx
draftReviewcm final reviewRevise
Number of

Open RFA

7
CM Review:1
Published:2
Tables

A register, not a spreadsheet

Header widths declared per column, stage pills coloured from the stage prefix, an empty-state row when the list runs dry, and pagination as real links. This is the table every document type lists in.

AdxTable / AdxTh / AdxTd / AdxStatusPill / DocListPagination
Stage
Subject
Issued By
Issued Date
draft
RFA-0001 — Sample document subject
Somchai Jaidee
2026-06-13
Review
RFA-0002 — Sample document subject
Somchai Jaidee
2026-06-13
cm final review
RFA-0003 — Sample document subject
Somchai Jaidee
2026-06-13
No more documents
draftReviewcm final reviewReviseRejectedpublished
AdxStatusPill stage="cm_review" — colour/label from the stage prefix · AdxEmptyRow carries the empty state
Table upgrades

Sort it, link it, heat it

Click a header to sort. The whole row is a genuine link — middle-click and ⌘-click work — and the heat wrapper tints numeric columns by magnitude so the outliers surface themselves.

useTableSort / AdxRowLink / AdxTableHeat
No.
Subject
Issued By
Days open
sort: asc → desc → off · AdxTableHeat wraps the WHOLE table · ignoreColumns for the non-measurements
Cards

A thousand rows, one number

Dashboards summarise the registers: a stat card with its breakdown rows, a plain card for everything else — both clickable when they lead somewhere.

AdxCard / AdxStatCard

Shop
Drawings

2
Approved Drawings0
Reviewing Drawings1
Resubmit0
Uploaded / Pending Approval1
Number of

Open RFA

7

Plain card

AdxCard — basic white card, holds anything (href = clickable)
AdxStatCard: title + value + rows[{ label, value, color }] · eyebrow · href
Document pieces

Who made it, where it went

The recurring fragments of a document page: the created-by line, the next-stage chip, the per-type summary card — and the avatar that puts a face on every name.

CreateByField / NextTo / DocSummaryCard / StageCountCard

Next to

CM Review
AdxAvatar
sm
md
topbar
lg
custom px
a person's name next to an avatar carries class `adx-person`

Numbers read, now let it speak

When something needs saying — a warning, a confirmation, an empty page — the last chapter is how the system talks back.

FoundationsNavigationActionsForms