Tollerud UI / Data Table
Examples · data table

Data Table

Config-driven table from @tollerud/ui: search, segmented or combobox filters, sort, selection, bulk actions, per-row menus, pagination with optional rows-per-page selector, loading skeletons, and horizontal scroll with pinned columns.

Props

Auto-generated from DataTableProps. Rich mode activates with searchable, selectable, pageSize, pageSizeOptions, rowMenu, filter, and related props.

PropsDataTableProps
PropType
columnsColumn<T>[]
data?T[]
rows?T[]
rowKey?keyof T | ((row: T) => string | number)
onRowClick?(row: T) => void
className?string
emptyMessage?string
searchable?boolean
searchKeys?(keyof T | string)[]
searchPlaceholder?string
filter?DataTableFilter
selectable?boolean
pageSize?number
pageSizeOptions?number[]
bulkActions?DataTableBulkAction[]
rowMenu?(row: T) => DataTableRowMenuItem[]
toolbarRight?ReactNode
emptyState?ReactNode
loading?boolean
skeletonRows?number
striped?boolean
pinColumns?boolean
footer?ReactNode

Simple table

Bordered table with sortable headers. Add filterable: true on columns for per-column text filters (simple mode).

Host↕Status
emma.tollerud.noonline
pia.tollerud.nooffline
iris.tollerud.noonline
package-data-table

Column filters

Simple mode (no searchable / pageSize) adds a filter row under the headers. Rich mode uses global search and segmented filter instead.

Host↕Region↕Status
—eu-northonline
—eu-northonline
—eu-westwarning
—us-eastonline
—us-eastoffline
—eu-westonline
—eu-northwarning
—us-westonline
data-table-filters

Filter control

Rich-mode filter uses Segmented by default. Set filter.variant to combobox for a searchable dropdown — better when there are many values or on narrow viewports.

Segmented (default)

HostRegionStatus
emmaeu-northonline
piaeu-northonline
iriseu-westwarning
miriamus-eastonline
victoriaus-eastoffline
Showing 1–5 of 8
data-table-filter-segmented

Combobox

HostRegionOwner
emmaeu-northTia
piaeu-northEmma
iriseu-westTia
miriamus-eastPia
victoriaus-eastEmma
Showing 1–5 of 8
data-table-filter-combobox

Servers

Full rich table — the canonical pattern for homelab and ops lists. Multiple bulk actions fuse in ButtonGroup; use toolbarRight for your own ButtonGroup or single buttons.

HostStatusRegionCPULoad · 7dContainersOwner
emma
10.0.10.10
onlineeu-north23%
4Tia
pia
10.0.10.11
onlineeu-north51%
2Emma
iris
10.0.10.12
warningeu-west88%
6Tia
miriam
10.0.10.13
onlineus-east34%
3Pia
victoria
10.0.10.14
offlineus-east0%
0Emma
Showing 1–5 of 8
servers-data-table

Pagination

Pass pageSize to enable client-side pagination. Add pageSizeOptions for a footer Rows selector. DataTable owns page state — search and filter reset to page 1. Row selection persists across pages.

Fixed page size

HostRegionOwner
emmaeu-northTia
piaeu-northEmma
iriseu-westTia
miriamus-eastPia
victoriaus-eastEmma
Showing 1–5 of 8
data-table-pagination

Rows per page selector

HostRegion
emmaeu-north
piaeu-north
iriseu-west
miriamus-east
victoriaus-east
emblaeu-west
sigrideu-north
astridus-west
Showing 1–8 of 8
data-table-page-size-options

Mobile and horizontal scroll

On narrow viewports the table scrolls horizontally inside a focusable region. pinColumns (default in rich mode) keeps the first column and row ⋮ menu visible while you scroll — WCAG allows horizontal scroll for data tables when content cannot reflow.

HostStatusRegionCPULoad · 7dContainersOwner
emma
10.0.10.10
onlineeu-north23%
4Tia
pia
10.0.10.11
onlineeu-north51%
2Emma
iris
10.0.10.12
warningeu-west88%
6Tia
miriam
10.0.10.13
onlineus-east34%
3Pia
Showing 1–4 of 8
data-table-mobile