Components

Tables & lists

A data table with a header, zebra rows on the well surface, a brand-tint row hover and an indigo selection. Numbers use tabular figures.

Tables & lists
ClientStatusValue
Acme LtdActive£4,200
GlobexDraft£1,050
InitechQueued£820
<Table
  columns={['Client', 'Status', 'Value']}
  rows={[
    { Client: 'Acme Ltd', Status: <Badge tone="success">Active</Badge>, Value: '£4,200' },
    { Client: 'Globex', Status: <Badge tone="warning">Draft</Badge>, Value: '£1,050' },
  ]}
/>

Guidelines

Do
  • Zebra rows with the well surface and hover in the brand tint.
  • Mark a selected row with an indigo checkbox.
  • Right-align and use tabular figures for numbers.
Do not
  • Do not colour clickable record names like links. They are primary text that underlines on hover.
  • Do not pack rows so tightly the table feels dense. Keep it calm.