Data table

All copy is placeholder. Real strings come from the i18n layer.

Named rows — a guest list

--named weights the identifying column, so a reader scanning down finds the row before reading across it.

Guest list
Guest	Pax	Attendance	Payment
Guest 01 (sample)	2	Confirmed	Paid
Guest 02 (sample)	1	Invited	Unpaid
Guest 03 (sample)	1	Cancelled	Refunded

The cancelled row is dimmed and its status cell still says so in words. It is never removed: seeing who dropped out is the reason it is still there.

Dated rows — transactions

--dated does the opposite: a leading column that is metadata rather than identity recedes.

Transactions
Date	Description	Category	Amount
1 Aug 2026	Room hire deposit	Venue hire	−€250.00
20 Jul 2026	Serving ware	Equipment	−¥12,000
11 Apr 2026	Door takings	Ticket sales	+€960.00

Amounts are tabular and end-aligned, on the header too — a numeric header sitting over the wrong edge of its own column is the commonest small defect in a money table.

Narrow: the wrapper scrolls, never the page

Transactions, narrow
Date	Description	Category	Amount
1 Aug 2026	Room hire deposit	Venue hire	−€250.00

This is the fallback, not the phone design. Below the breakpoint the product renders the same records as stacked rows instead — a four-column table at 390px is unreadable however it scrolls. Two renderings, one dataset, and when the screen pages, both read the same page.

When not to use it

A table is for comparing down a column. Where a reader takes one record at a time, that is a list row — a table with one meaningful column is a list wearing a grid.