Data Table
Sortable, selectable data tables with cursor or offset pagination and breadcrumb navigation. All data values in Berkeley Mono. Column headers in label font.
DataTable
Semantic HTML table with sortable columns, row selection, loading skeletons, and empty state. Sort and selection state owned by parent.
SORTABLE + SELECTABLE
| Name | Status | Type | Updated | |
|---|---|---|---|---|
| customer-enrichment-v2 | active | Sync | 2026-04-13 09:14 | |
| order-reconciliation | active | Transform | 2026-04-12 22:01 | |
| inventory-snapshot | paused | Extract | 2026-04-11 14:30 | |
| payment-gateway-sync | error | Sync | 2026-04-10 08:45 | |
| user-activity-rollup | active | Aggregate | 2026-04-09 17:22 |
LOADING
| Name | Status | Type | Updated |
|---|
EMPTY
| Name | Status | Type | Updated |
|---|---|---|---|
No pipelines foundCreate your first pipeline to see it here. | |||
Pagination
Two modes: cursor (PREV/NEXT for API-driven pagination) and offset (numbered pages for known totals). Renders below DataTable.
CURSOR MODE
147 total
OFFSET MODE 51–75 of 287
Breadcrumb
Hierarchical navigation trail. Last item (no href) renders as bold text for the current page. Supports truncation via max_items.
DEFAULT
TRUNCATED (max_items=3)
SINGLE LEVEL
TOKEN REFERENCE
Data table, Pagination, Breadcrumb use component tokens from components.css:
--table-header-font: var(--type-label-font)--table-header-bg: var(--color-surface-secondary)--table-cell-font: var(--type-data-font)--table-row-hover-bg: var(--color-surface-secondary)--table-row-alt-bg: var(--color-surface)--table-border: var(--elevation-border)--table-checkbox-size: 16px--table-sort-icon-size: var(--icon-size-xs)--pagination-font: var(--type-label-font)--pagination-button-size: var(--button-sm-height)--breadcrumb-font: var(--type-label-font)--breadcrumb-separator-color: var(--color-text-muted)