Data and analytics · §5.23

Data table

The board, queues and admin lists: sortable, keyboard-driven, virtualised.

Density

Rows

Theme

Contrast

Language

Motion

Text size

	Patient					Alerts
B12	N.W.	3	Tests under way	6 h 18 min	3/3	Urgent request
W2	A.D.	3	Staying in hospital: waiting for a bed	6 h 8 min	1/3	Over the usual wait
B10	H.H.	3	Treatment and monitoring	5 h 58 min	3/3	Results back
A11	H.H.	5	Results back: waiting to see your care team again	5 h 41 min	0/1
C1	R.M.	5	Waiting to be seen	5 h 31 min	0/1
A9	C.S.	5	Getting ready to go home	5 h 21 min	0/1
W10	C.S.	2	Treatment and monitoring	5 h 4 min	1/4	Results back
B18	K.A.	2	Tests under way	4 h 54 min	1/4	Urgent request
W8	T.E.	2	Staying in hospital: waiting for a bed	4 h 44 min	1/4	Over the usual wait
C9	T.E.	4	Getting ready to go home	4 h 27 min	0/2

36 rows

Code

<DataTable aria-label="Board" columns={columns} data={rows} density="dense" onRowActivate={open} t={t} />

Sortable headers are buttons with aria-sort; ↑/↓ move between rows, Enter opens.
Virtualised tables keep aria-rowcount and aria-rowindex.
Below md, rows become cards with the same fields.

Don't

Web: apps/web/components/edflow/data-table.tsx, apps/web/components/ui/table.tsx
iOS: SwiftUI Table / List
Android: Compose LazyColumn