Data display · Application UI
Table
Table system: a styled, accessible HTML table primitive with scrollable container, density and layout variants, plus the DataTable admin shell (index filters, bulk selection, sortable columns, pagination).
Feature showcase
Installation
Features
Compound HTML table parts
Provides container, table, header, body, footer, row, head, cell, and caption parts.
Density and layout variants
Comfortable, condensed, and spacious density; default, sticky-header, and card layouts.
DataTable admin shell
Install @byronwade/data-table for Shopify-grade index filters, bulk bar, selection, and pagination.
Inset admin framing
DataTable supports an `inset` frame for Shopify-style admin panels while the table primitive keeps density and layout variants separate.
Data-state styling hooks
Rows support selected-state styling for tables with selection.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes merged onto the root table element. |
| density | "comfortable" | "condensed" | "spacious" | "comfortable" | Row and header padding scale — comfortable (default), condensed, or spacious. |
| layout | "default" | "sticky-header" | "card" | "default" | Container chrome — plain scroll, sticky header, or card-wrapped table. |
| children | React.ReactNode | - | Table content, typically TableHeader, TableBody, and TableFooter compound parts. |
Exports
| Export | Kind | Description |
|---|---|---|
| Table | component | Scrollable table root and native table element. |
| TableHeader | component | Table header group. |
| TableBody | component | Table body group. |
| TableRow | component | Table row element. |
| TableCell | component | Body cell element. |
| DataTable | component | Admin index shell composing index-filters, selectable table, bulk bar, and pagination. |
| tableHeadVariants | constant | CVA variant map for header cell density. |
Slots
| Slot | Element | Description |
|---|---|---|
| table-container | - | Scrollable wrapper. |
| table | table | Native table element. |
| table-header | thead | Header group. |
| table-row | tr | Row. |
| table-cell | td | Body cell. |
| data-table | - | DataTable admin shell root (non-embedded). |
| index-table | - | Embedded table slot used by DataTable embedded mode. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @byronwade/table | registry | Installed through the byronwade/ui registry. |
| @byronwade/checkbox | registry | Installed through the byronwade/ui registry. |
| @byronwade/bulk-action-bar | registry | Installed through the byronwade/ui registry. |
| @byronwade/skeleton | registry | Installed through the byronwade/ui registry. |
| @byronwade/button | registry | Installed through the byronwade/ui registry. |
| @byronwade/empty-state | registry | Installed through the byronwade/ui registry. |
| @byronwade/index-filters | registry | Installed through the byronwade/ui registry. |
| @byronwade/segmented-control | registry | Installed through the byronwade/ui registry. |
| @byronwade/data-table | registry | Installed through the byronwade/ui registry. |
| @phosphor-icons/react | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Table primitive | registry/ui/table.tsx |
| DataTable composite | registry/components/data-table.tsx |
| Default example | content/examples/table/default.tsx |
| Admin data table example | content/examples/table/admin-index.tsx |