Components
Tables
The dashboard's table: quiet headers, hairline rows, tabular numbers on the right, a totals row at the foot. Click a header to sort, a row to open it, checkboxes to act on many at once.
Sort, select, search, page
Everything here works: sort by any header, search, choose rows to archive (with Undo), open a row, change page. Totals follow the search.
| Casa do MonteCosta Family | Active | €98,000 | €57,702 | ||
| Quinta restorationQuinta Velha | Active | €84,000 | €35,301 | ||
| Harbour officeLagos Marina | Active | €71,000 | €15,890 | ||
| Clinic fit-outMarina Clinic | Active | €61,000 | €45,439 | ||
| Atlântico loftAtlântico Studio | Active | €52,000 | €27,313 | ||
| 12 jobs | €606,400 | €301,946 |
Loading
Rows keep their place while data arrives.
| Invoice | Date | Status | Amount |
|---|---|---|---|
Props
| Prop | Values | Default | What it does |
|---|---|---|---|
columns | { key, label, align?, sortable?, format?, cell? }[] | — | What each column shows; cell is a snippet for custom content |
rows / rowKey | object[] · string | · 'id' | The data and its unique key |
sort / dir | bindable key · 'asc' | 'desc' | null · desc | Current sort (numbers start high, text starts at A) |
selectable / selected | boolean · bindable keys[] | false · [] | Checkbox column for bulk actions |
onrowclick | (row) => void | — | Makes rows clickable (also with Enter) |
footer | { [key]: text } | — | Totals row |
loading / emptyTitle / dense | boolean · string · boolean | — | Skeleton rows · empty message · tighter rows |