Home/Patterns/Data table

Data table

The workhorse pattern for any list-heavy surface — products, students, receipts, audit, fleet, payroll, settlement. Hairline rows, sticky header, bulk select, pagination. Five canonical compositions documented end-to-end.

Stable 5 compositions Workhorse pattern

COMPOSITION 01

Product catalog

The bread-and-butter list table. Search, filter chips, status badges, mono pricing, low-stock variants. Used across Retail, Scrap, Warehouses, Thrift.

Use whenYou need to browse and edit a list of stable records where each row is similar in shape, the operator searches by name or code, and a handful of filters narrow it down.

${''}

	SKU & name	Category	Brand	Cost	Price	Margin	On hand	Status

Page 1 of 302

COMPOSITION 02

Receipts log · transactional

A time-ordered list of transactions. Money columns dominate; the operator scans for refunds and voids. Date-range chip, tender filters, sticky totals footer.

Use whenThe list is naturally time-ordered, money columns are the focus, and an aggregate (total revenue, total refunds) belongs at the bottom of the visible set.

Time	Receipt	Cashier	Items	Tender	Total	Status
14:32	R-19281 Park Centre · Till 02	FMFaith Moyo	4 items	Cash	$ 17.21	Posted
14:08	R-19280 Park Centre · Till 01	ACAlex Chiwanza	2 items	Card	$ 9.40	Posted
13:55	R-19279 Park Centre · Till 03	SNSarah Ndongo	7 items	EcoCash	$ 38.20	Posted
13:42	R-19243 Refund · approval pending	FMFaith Moyo	1 item	Cash	– $ 38.00	Refund
13:18	R-19278 Park Centre · Till 02	FMFaith Moyo	5 items	Cash	$ 22.80	Posted
12:55	R-19277 Park Centre · Till 03	SNSarah Ndongo	3 items	Card	$ 14.50	Posted
Totals · today			147 receipts	—	$ 2,816.40	– $ 38 refunds

COMPOSITION 03

Roster with bulk edit

Selectable rows for bulk operations: send reminder, change form, send report card. Selection swaps the toolbar for the dark action bar. Used in Schools, HR, Compliance.

Use whenThe operator regularly takes the same action across many rows — sending bulk fee reminders, marking attendance for a class, exporting a subset of employees.

3 students selected ·

Student	Form	House	Fees	Attendance	Status
TMTariro Moyo FAR-2026-001	4F	Faraday	$ 1,240	96 %	Active
ABAkudzwe Bere FAR-2026-002	4F	Faraday	Cleared	99 %	Active
DGDakarayi Gondo FAR-2026-004	4F	Faraday	$ 420	88 %	Watch
EHEdwin Hove FAR-2026-005	4F	Faraday	Cleared	94 %	Active
GKGracious Kufa FAR-2026-007	4F	Faraday	$ 1,840	72 %	In arrears
JMJoyce Mukamba FAR-2026-010	4C	Curie	$ 280	91 %	Watch

1–6 of 28 · in current selection: 3

COMPOSITION 04

Audit log · grouped & expanding

Rows can expand inline to show diff payloads. Dense layout, grouped by date, no row selection. Used in Audit view, Settlement reconciliation, Stock take.

Use whenThe operator needs to inspect a single row in detail without leaving the table — to see the before/after of an edit, or the items inside an aggregate.

Today · 3 June
	Faith Moyo closed shift S-2841 · counted $ 1,950 · over by $ 7.90 Expected$ 1,942.10Counted$ 1,950.00Variance+ $ 7.90 (within tolerance)Approved byAuto · within tolerance	14:14:32
	Faith Moyo posted receipt R-19281 · $ 17.21 · cash POS · Park Centre · Till 02	14:32:08
	Mai Ndlovu published Mathematics term results for 4F Schools · marks · 28 students	13:42:11
	Stanford Kuda logged pour P-2842 · 1.940 kg · 93.2 % fineness Gold · Mazowe · plant M-01	11:22:48
Yesterday · 2 June
	Robert Mukamba invited Mai Ndlovu as Bursar Settings · members	09:12:42

COMPOSITION 05

Live status grid

Updates in place; rows can change tone as state changes. No selection; tap-through to detail. Used in CCTV (cameras), Fleet (vehicles), Plant (pours), Yard (intake queue).

Use whenThe list represents live state from sensors or in-flight workflows. The operator scans it to spot anomalies and tap-throughs into one record at a time.

Vehicle	Driver	Route	Location	Speed	Fuel	Status
ABX-2841 · Hilux 2022 · diesel	Tendai Nyathi	Harare → Mutare	– 17.84°, 31.05°	88 km/h	68 %	Running
CHK-1882 · Isuzu 2020 · diesel	Sipho Moyo	Yard pickup	Greendale yard	0 km/h	82 %	Idle 14 m
DJL-7732 · Hilux Fuel alert	Walter Banda	Beitbridge → Harare	– 21.91°, 30.42°	42 km/h	8 %	Low fuel
EKL-3318 · NP200 2021 · petrol	Joseph Ranga	Local · Bulawayo	Hillside	62 km/h	44 %	Running
FAR-1102 · Quantum 2023 · diesel	Mhondoro Welding	Mhondoro → Harare	– 18.20°, 30.78°	94 km/h	58 %	Running

Shared rules

What every composition obeys.

Right-align numbers, money, and dates. Left-align text. Mono numerals always.

Don't

Mix mono and proportional digits in the same column.

Sticky header on scroll. Long tables become useless without it.

Don't

Use zebra-striping. Hairline borders carry the same job for less visual noise.

Show row count, selected count, and pagination at the bottom.

Don't

Bury actions in a "..." menu when the operator does them all the time. Inline the top action.