Data Table
Toolbar + sortable, selectable table + pagination. Cells are ReactNode — Badge/Avatar/FontAwesomeIcon compose freely.
| Name | Assignee | Priority | Status | Updated | ||
|---|---|---|---|---|---|---|
| Lobby HVAC | AGAshley Green | Medium | Finalized | 2h ago | ||
| Warehouse door | OBOllie Brooks | High | In progress | 1d ago | ||
| Loading dock light | MGMitch Galehouse | Low | Pending | 3d ago |
Showing 1–3 of 3
rows per page
<div className="flex flex-col gap-sm">
<Toolbar searchPlaceholder="Search requests…">
<IconButton
icon={faDownload}
type="ghost"
size="sm"
aria-label="Export"
/>
<IconButton
icon={faTableColumns}
type="ghost"
size="sm"
aria-label="Columns"
/>
</Toolbar>
<DataTable
selectable
rowActions={(id) => {/* … */}}
sortKey="name"
sortDirection="asc"
columns={columns}
rows={rows}
footer={
<DataTablePagination
total={3}
page={1}
pageSize={20}
/>
}
/>
</div>| Name | Building | Updated | |
|---|---|---|---|
| Asset 1 | Building A | 1d ago | |
| Asset 2 | Building B | 2d ago | |
| Asset 3 | Building C | 3d ago | |
| Asset 4 | Building D | 4d ago | |
| Asset 5 | Building A | 5d ago | |
| Asset 6 | Building B | 6d ago | |
| Asset 7 | Building C | 7d ago | |
| Asset 8 | Building D | 8d ago | |
| Asset 9 | Building A | 9d ago | |
| Asset 10 | Building B | 10d ago | |
| Asset 11 | Building C | 11d ago | |
| Asset 12 | Building D | 12d ago | |
| Asset 13 | Building A | 13d ago | |
| Asset 14 | Building B | 14d ago | |
| Asset 15 | Building C | 15d ago | |
| Asset 16 | Building D | 16d ago | |
| Asset 17 | Building A | 17d ago | |
| Asset 18 | Building B | 18d ago | |
| Asset 19 | Building C | 19d ago | |
| Asset 20 | Building D | 20d ago | |
| Asset 21 | Building A | 21d ago | |
| Asset 22 | Building B | 22d ago | |
| Asset 23 | Building C | 23d ago | |
| Asset 24 | Building D | 24d ago | |
| Asset 25 | Building A | 25d ago |
Showing 1–25 of 25
rows per page
<div className="flex h-[360px] flex-col">
<DataTable
fillHeight
className="flex-1"
selectable
columns={columns}
rows={rows}
footer={
<DataTablePagination
total={25}
page={1}
pageSize={50}
/>
}
/>
</div>columns:DataTableColumn[]{ key, header, align?, sortable? } definitions.
rows:DataTableRow[]{ id, cells, muted? } — cells keyed by column, each a ReactNode.
selectable:boolean= falseLeading select-all / per-row checkboxes.
rowActions:(rowId: string) => voidTrailing … overflow per row. Called with row id on activation.
sortKey / sortDirection:string / "asc" | "desc"Presentational sort indicator.
selectedIds / onSelectionChange:string[] / fnControlled selection.
footer / stickyFooter:ReactNode / boolean= — / falseFooter slot (e.g. <DataTablePagination>). stickyFooter pins it to the scroll-area bottom while a long page-scrolled table scrolls; ignored when fillHeight is set.
fillHeight:boolean= falseCard fills a height-constrained flex parent; rows scroll inside the card under a sticky header and the footer is always visible. Pass className="flex-1" and own the page's bottom gap. Overrides stickyFooter.