UI Tables Catalog

Fifteen named table patterns across basic data, sortable grids, compact admin, comparison, invoice lines, master-detail, expandable rows, grouping, pagination, and sticky columns. See CATALOG.md for recipes. Narrow viewports scroll horizontally inside each stage.

.table-basic

Basic Data Table

Toolbar + simple columns for name, role, email, and joined date.

Team members

4 people

Name Role Email Joined
Mira Chen Design mira@harbor.example Jan 12, 2025
Jonah Blake Engineering jonah@harbor.example Mar 3, 2025
Asha Patel Support asha@harbor.example May 21, 2025
Leo Park Product leo@harbor.example Aug 8, 2025
.table-zebra

Zebra Basic Table

Captioned table with alternating row fills for denser scanning.

Recent orders
Order Customer Items Total
#1042 Northstar Labs 3 $248.00
#1041 Fieldwork Co. 1 $64.00
#1040 Atelier Studio 5 $512.40
#1039 Pulse Apps 2 $96.00
#1038 Ledger Finance 4 $320.00
.table-sortable

Sortable Table

Clickable headers with aria-sort; sorts text and numeric columns.
Harbor marketing Mira 42 Mar 12
Docs refresh Jonah 28 Mar 10
Storefront QA Asha 35 Mar 8
Invoice export Leo 18 Mar 4
.table-sortable-status

Sortable Status Table

Sortable grid with person stack, status badges, and amount column.
Atelier Collective atelier.example
Active Growth $890
Fieldwork Studio fieldwork.example
Trial Starter $0
Northstar Inc. northstar.example
Active Scale $2,400
Pulse Mobile pulse.example
Past due Growth $890
.table-admin-compact

Compact Admin Table

Dense rows, mono IDs, sticky header inside a scroll shell.

ID Event Actor When
evt_9182 invoice.paid system 09:14:02
evt_9181 seat.added mira@… 09:11:44
evt_9180 api.key.rotated jonah@… 08:56:10
evt_9179 webhook.failed system 08:42:33
evt_9178 member.invited leo@… 08:21:09
evt_9177 plan.upgraded asha@… 07:58:41
evt_9176 login.success mira@… 07:40:12
evt_9175 export.ready system 07:12:55
.table-admin-actions

Admin Actions Table

Bulk checkboxes, toolbar actions, per-row Edit / Archive.

Products

SKU Name Stock Price
HT-104 Field tote In stock $48
HP-220 Harbor pack Low $96
DD-018 Dock duffel Out $112
.table-compare-plans

Comparison Plans Table

Feature matrix with sticky first column and featured plan highlight.

Feature Starter $12/mo Growth $29/mo Scale $79/mo
Projects 3 15 Unlimited
Seats 2 10 Unlimited
Custom domains — Yes Yes
SSO — — Yes
Audit log — Yes Yes
.table-compare-specs

Comparison Specs Table

Row-labeled product specs with a highlighted “best” cell.

Bag comparison
Spec Daypack Trail 28 Summit 40
Volume 18 L 28 L 40 L
Weight 0.7 kg 1.1 kg 1.6 kg
Laptop sleeve 13″ 16″ —
Waterproof Splash Splash IPX4
Price $78 $118 $164
.table-invoice-lines

Invoice Lines Table

Invoice header chrome with qty / rate / amount line items.

Invoice INV-2048

Billed to Northstar Inc.

Due Mar 30, 2026 Issued Mar 13, 2026
Description Qty Rate Amount
Growth plan — March 1 $29.00 $29.00
Additional seats 4 $8.00 $32.00
Priority support 1 $15.00 $15.00
.table-invoice-ledger

Invoice Ledger Table

Line items plus tfoot subtotal, tax, and accent total row.

Statement

Item Qty Unit Line total
Canvas tote — olive 2 $48.00 $96.00
Harbor pack — navy 1 $96.00 $96.00
Shipping — express 1 $18.00 $18.00
Subtotal $210.00
Tax (8%) $16.80
Total due $226.80

Payment due upon receipt. Reference ORD-7712.

.table-master-detail

Master Detail Table

Select a row to populate the detail pane (keyboard: Enter / Space).

Orders

Select a row

Order Customer Total
#1042 Northstar Labs $248.00
#1041 Fieldwork Co. $64.00
#1040 Atelier Studio $512.40
#1039 Pulse Apps $96.00
.table-expandable

Expandable Rows Table

Row toggle reveals an inline detail panel under the selected row.

Shipment Carrier Status
SHP-219 UPS In transit

Tracking 1Z999AA10123456784

Expected Mar 14 · Last scan: Denver sort facility
.table-grouped

Grouped Rows Table

Section header rows group line items by region with counts.

Account Owner Seats
North America 3 accounts
Northstar Inc. Mira Chen 24
Pulse Apps Jonah Blake 8
Ledger Finance Leo Park 16
Europe 2 accounts
Atelier Collective Asha Patel 6
Fieldwork Studio Mira Chen 4
.table-paginated

Paginated Table

Data rows with footer range text and page controls.

Ticket Subject Priority Updated
T-8821 SSO login loop High 10m ago
T-8819 Invoice PDF margin Med 1h ago
T-8814 CSV export encoding Low Yesterday
T-8808 Webhook retry storm High Yesterday

Showing 1–4 of 48

.table-sticky-cols

Sticky Columns Table

Wide grid with sticky first (name) and last (actions) columns while scrolling.

Campaign Channel Impressions Clicks CTR Spend ROAS Actions
Spring launch Search 128,400 4,210 3.3% $2,840 4.1×
Retargeting Q1 Display 86,200 1,980 2.3% $1,120 2.8×
Creator collab Social 214,000 9,640 4.5% $3,600 5.2×
Brand lift Video 52,800 890 1.7% $980 1.4×