Loading navigation…
User
API and Development
Table displays structured data in a simple, semantic table format, providing full control over layout and styling without built-in data management features. It provides a lightweight, semantic table component built on Radix UI's Table primitives. It renders tabular data with proper HTML structure, supports flexible cell alignment and sizing, and offers complete control over rendering without any built-in data management features like sorting, filtering, or pagination. It's the foundation component that DataTable builds upon, ideal for simple displays, static content, or when you need complete control over table structure and styling.
Use Table (from @prepared911/ui-core) when you need:
Use DataTable (from @prepared911/ui-data-table) when you need: (see the Data table package API for generated props, Storybook links, and a live preview)
Name | Type | Default | Description |
|---|---|---|---|
|
|
| When true, uses |
Interactive examples and edge cases live in Storybook (not duplicated here).
| Name | Default | Description |
|---|---|---|
shrink | false | Whether to use auto layout (shrink) or fixed layout. When true, table uses auto layout; when false, uses fixed layout. |
children | required | Table structure components (TableHeader, TableBody, etc.). |
| Name | Default | Description |
|---|---|---|
type | TableCellType.Default | Cell type determining semantic meaning. Options: Default, ColumnHeader, RowHeader. |
justify | Text alignment within the cell. Options: Start, Center, End. | |
width | Fixed width for the cell (e.g., "20rem", "300px"). | |
minWidth | Minimum width for the cell. | |
maxWidth | Maximum width for the cell. | |
colSpan | Number of columns the cell spans. | |
children | required | Cell content. |
Control how the table handles column sizing.
Use fixed layout for consistent column widths (default).
Column widths are fixed according to the specified width prop.
Use auto layout to let content determine column widths.
Columns automatically size based on content.
Use appropriate cell types for semantic meaning.
Mark column headers for accessibility.
Column headers provide semantic meaning and improve accessibility.
Mark the first cell in each row as a row header.
Row headers help identify row content, especially for screen readers.
Control column widths explicitly.
Use min and max width constraints.
Span cells across multiple columns.
Wrap tables in scrollable containers for long content.
Scrollable containers enable horizontal and vertical scrolling.
Render complex content within cells.
Cells can contain any React components.
Apply custom styling through components.
Use Text components for styled cell content.
Handle table overflow on smaller screens.
Horizontal scrolling allows tables to adapt to narrow viewports.
Use tables for structured documentation content.
Tables work well for API documentation, feature comparisons, or data specifications.
Handle empty tables appropriately.
Provide clear messaging when tables are empty.
Generate rows dynamically from data.
Use map to generate rows from arrays.
Include nested structures in cells.
Cells can contain complex nested layouts.
Control text alignment within cells.
Align content to the start (left in LTR layouts).
Center content within cells.
Align content to the end (right in LTR layouts).
Right alignment is useful for numbers, dates, or action buttons.
On this page