Inventory and tables
Responsive data-heavy resource collections.
Example
A representative composition rendered with the published package API.
| Status | ||
|---|---|---|
| Amazon Bedrock | Connected | 18 |
| Vertex AI | Attention | 7 |
| OpenAI | Connected | 12 |
Options
The decisions most consumers need to make when adopting this family.
presentationDataTable owns interaction; InventorySurface owns responsive presentation.
page sizeUse 25 rows for full-page inventories and 10 for tables inside detail pages. The Rows control and page buttons share the small control height.
DataTable showCaptioncaption names the table for screen readers. Pass showCaption to render it as visible text above the header.
surfacesOn the page canvas, DataTable rows and PageToolbar paint the canvas. Inside a Card or InventorySurface they take the card surface. The column header and pagination footer always sit on the darker table-header band.
touch sizingOn touch devices every control height, including pagination, the Rows control and sort headers, rises to 44px in all densities. Do not add min-height overrides on cards or tables.
| Option | Values or anatomy | Guidance |
|---|---|---|
presentation | DataTable · EntityTable · InventorySurface | DataTable owns interaction; InventorySurface owns responsive presentation. |
page size | paginationPageSizes.inventory (25) · paginationPageSizes.detail (10) | Use 25 rows for full-page inventories and 10 for tables inside detail pages. The Rows control and page buttons share the small control height. |
DataTable showCaption | false (default) · true | caption names the table for screen readers. Pass showCaption to render it as visible text above the header. |
surfaces | canvas page · Card / InventorySurface | On the page canvas, DataTable rows and PageToolbar paint the canvas. Inside a Card or InventorySurface they take the card surface. The column header and pagination footer always sit on the darker table-header band. |
touch sizing | pointer: coarse | On touch devices every control height, including pagination, the Rows control and sort headers, rises to 44px in all densities. Do not add min-height overrides on cards or tables. |
Usage
Copy the package import and adapt the composition to product-owned content and state.
import { DataTable, EntityTable, InventoryDesktop, InventoryMobile, InventorySurface } from "@conscia-labs/design-system";