Koala logo Design
Koala logo Design
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 
<table class="min-w-full">
    <thead>
        <tr>
            <th koala-th>Reference</th>
            <th koala-th>Property</th>
            <th koala-th class="text-right">Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr koala-tr>
            <td koala-td koala-td-primary><a href="@quoteUrl" class="hover:underline">@quote.Reference</a></td>
            <td koala-td>@quote.Property</td>
            <td koala-td class="text-right">@quote.Amount</td>
        </tr>
    </tbody>
</table>

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
<th koala-th koala-th-flush>Min</th>
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.