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.).
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 | |
| James Mitchell | Partner |
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 |
Bare — no card chrome
just <table> + helpers
States
3 statesProps
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.
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.