Tables and data tables
Semantic table anatomy and production-ready data collections with sorting, selection, pagination, responsive rows, and deliberate empty states.
Interactive data table
Use DataTable for application-owned collections that need selection, sorting, pagination, row actions, and a compact mobile representation.
| Actions | ||||||
|---|---|---|---|---|---|---|
Azure West Europe azure-west | Microsoft Azure | Healthy | 26 | 1 hr ago | ||
Azure North Europe azure-north | Microsoft Azure | Healthy | 19 | 2 days ago | ||
Production Bedrock bedrock-prod | Amazon Bedrock | Healthy | 42 | 2 min ago | ||
Vertex AI vertex-main | Google Cloud | Attention | 31 | 21 min ago | ||
Anthropic Direct anthropic-direct | Anthropic | Paused | 8 | 3 hr ago |
No rows selected.
Semantic table primitive
Use the primitive anatomy for small, bounded datasets where applications own all behavior.
| Environment | Region | Routes |
|---|---|---|
| Production | eu-west-1 | 128 |
| Staging | eu-central-1 | 44 |
| Legacy | us-east-1 | 7 |
| Total routes | 179 | |
Inventory responsive helpers
InventorySurface, InventoryDesktop, and InventoryMobile let a product intentionally change representation at its breakpoint.
Loading guidance
Keep the table frame and column geometry stable. Mark the region busy and replace rows with application-owned skeletons.
Toolbar inset
PageToolbar shares the frame edge on the page canvas. Inside a Card or InventorySurface it takes the surface inset and a bottom border on the card surface, with no consumer padding classes.
| Model | Provider | Requests |
|---|---|---|
| Claude Sonnet 4 | Amazon Bedrock | 12,480 |
| Nova Pro | Amazon Bedrock | 3,912 |
EntityTable convenience wrapper
EntityTable keeps simple entity collections concise while preserving selection and row actions.
| Connection | Provider | Status |
|---|---|---|
| Production Bedrock | Amazon Bedrock | Healthy |
| OpenAI Europe | OpenAI | Healthy |
| Vertex AI | Google Cloud | Attention |
Package import
Start with DataTable for interactive resource collections and the table primitives for fully application-owned markup.
import { DataTable, type DataTableColumn } from "@conscia-labs/design-system";
const columns: DataTableColumn<Connection>[] = [
{ id: "name", header: "Connection", accessor: (row) => row.name, sortable: true, cell: (row) => row.name },
{ id: "status", header: "Status", accessor: (row) => row.status, sortable: true, cell: (row) => <Badge>{row.status}</Badge> },
];
<DataTable
data={connections}
columns={columns}
getRowId={(row) => row.id}
selectedIds={selectedIds}
onSelectionChange={setSelectedIds}
sorting={sorting}
onSortingChange={setSorting}
/>