Koala logo Design
Koala logo Design
Esc
No matches for “”
↑↓ navigate ↵ open Esc close
Components Tables

Tables

Row-clickable list tables. Three helpers cover the surface — koala-th, koala-tr, koala-td. Plain <table> wraps them so the host page controls layout (fixed vs auto, min-width, etc.).

koala-tr / koala-td / koala-th

Canonical

Reference Property Client Amount
Q-1001 123 High Street, London Sarah Adams £2,400
Q-1002 45 Oak Avenue, Bristol James Mitchell £1,820
Q-1003 9 Mill Lane, Bath Priya Patel £3,150

The whole koala-tr is clickable — clicks anywhere that isn't a nested link or button activate the row's first anchor. Use koala-td-primary on the label cell (the one that owns the anchor).

Variants

3 variants
Name Role Status
Sarah Adams Conveyancer Active
James Mitchell Partner Pending
Card-wrapped
rounded-md border overflow-hidden
Min Max Amount
£0 £250,000 £995
£250,001 £500,000 £1,295
£500,001 £1,000,000 £1,795
Flush header — for compact form-style tables
koala-th-flush
Reference Status
Q-1001 Quoted
Bare — no card chrome
just <table> + helpers

States

3 states
Q-1001 Sarah Adams £2,400
Default row
Hover me Sarah Adams £2,400
Hover
Row gets bg-surface-dim — whole row reads as the hit target.
Reference Client Amount

No quotes yet

Quotes will appear here once they're created.

Empty — replace the body with a small empty state

Props

4 attributes
Attribute Target Notes
koala-th <th> Applies uppercase tracked header styling. Sets scope="col".
koala-th-flush <th> Drops the cell padding. Use when the table cells already supply their own spacing.
koala-tr <tr> Hoverable row. Clicks activate the row's first <a>; ctrl/cmd-click opens in a new tab.
koala-td / koala-td-primary <td> Standard cell padding. koala-td-primary bumps weight + colour to mark the label cell.

Do & don't

Q-1001 Sarah Adams £2,400
Do One anchor per row, on the primary cell. The row's x-on:click activates it — the whole row reads as a single hit target.
Q-1001 Sarah Adams
Don't Don't add a second anchor or inline button to a clickable row. Users can't tell what the row does — promote the action to a per-row menu instead.