Components
List table
List table
List-page wrapper around list card. Owns the desktop column header, the rows-id container, and the vertical gap between rows. Below xl rows stack as cards; at xl+ the header appears and rows switch to a horizontal grid.
Canonical
Client
Address
Status
Price
Partner
Created
<koala-list-table columns="@columns" rows-id="transaction-rows">
@foreach (var row in Model.Rows)
{
<koala-list-card model="@row" />
}
</koala-list-table>The most-used shape. Resize the window to see the same data flip between a stack of cards and a horizontal grid at xl.
Variants
2 variantsClient
Address
Status
Price
Partner
Created
Transactions
6 columns — Client, Address, Status, Price, Partner, Created
Client
Property
Status
Total
Partner
Created
Quotes
6 columns — Client, Property, Status, Total, Partner, Created
States
1 stateClient
Property
Status
Total
Partner
Created
Default
Props
2 attributes| Attribute | Type | Notes |
|---|---|---|
| columns | IReadOnlyList<ListCardColumn> | Drives the desktop header row. Pass the same list as desktopColumns on each card factory call so header and rows align. |
| rows-id | string? | When set, the rows container gets that id plus x-merge="append". Point koala-load-more at the same id. |
Do & don't
Client
Status
Total
Do
Reach for the list table only on list pages. Dashboards, modals, and detail-page tabs use <koala-list-card> directly without a column header.
[page title]
[search, filters, sort]
[koala-list-table]
[search, filters, sort]
[koala-list-table]
Don't
Don't push the page title, totals, filter bar, or sort dropdown into the component. Those vary per surface and become config sprawl. The table starts at the header row.