Table
A responsive table component for displaying tabular data. Built with semantic HTML and includes built-in styling, hover states, and accessibility features. Perfect for data display and data tables.
Installation
Import
Usage
Use Table for displaying tabular data. Structure tables with TableHeader, TableBody, and optionally TableFooter. Use TableCaption for accessibility and context. Use data-state='selected' on TableRow for selected row styling. Keep tables responsive with horizontal scrolling when needed.
Design Guidelines
Maintain consistent table styling throughout your application. Use appropriate spacing and alignment. Highlight selected rows clearly. Use TableFooter for totals and summaries. Keep tables responsive with horizontal scrolling. Provide clear visual hierarchy with headers.
Basic Usage
Simple table with headers and data
With Footer
Table with footer for totals or summaries
With Caption
Table with caption for description
Selectable Rows
Table with selectable rows
Table
Main table container with responsive wrapper This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
TableHeader
Header section containing column headers This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
TableBody
Main content section containing data rows This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
TableFooter
Footer section for totals or summaries This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
TableRow
A row in the table (can be used in header, body, or footer) This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
data-state | "selected" | — | Set to "selected" to apply selected row styling |
className | string | — | Additional CSS classes to apply to the component |
TableHead
A header cell for column headers This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
TableCell
A data cell in the table body or footer This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
TableCaption
Caption for the table (provides title or description) This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
Accessibility
Accessibility features and considerations
Tables include proper semantic HTML and ARIA attributes. Use TableCaption for table descriptions. Ensure column headers are properly associated with data cells. Use scope attributes on TableHead when appropriate. Screen readers announce table structure and content.