DataTablealternative
Use DataTable for sorting, selection, and TanStack featuresTable
Semantic HTML table with compound API. For data-rich tables with sorting and selection, use DataTable.
Setup
import { Table } from '@fragments-sdk/ui';Examples
Default
Basic semantic table
Loading preview...
Striped
Alternating row backgrounds for readability
Loading preview...
Bordered
Table with bordered container
Loading preview...
Compact
Small, dense table
Loading preview...
With Caption
Table with visible caption
Loading preview...
Screen Reader Caption
Visually hidden caption for screen-reader context while keeping visual UI compact
Loading preview...
With Footer
Table with footer row for totals
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | enumsmmd | md | Table density |
striped | boolean | false | Show alternating row backgrounds |
bordered | boolean | false | Wrap table in a bordered container |
wrapperClassName | string | Not set | Class name for the outer scroll/wrapper container |
wrapperProps | object | Not set | HTML attributes for the outer scroll/wrapper container |
children | node | Not set | — |
Usage Guidelines
When to use
- Displaying simple tabular data with semantic HTML
- Static data that does not need sorting or selection
- Showing structured information with headers and rows
- Tables with footers or captions
When not to use
- Data that needs sorting (use DataTable)
- Data that needs row selection (use DataTable)
- Data that needs clickable rows (use DataTable)
- Simple lists (use List component)
Best practices
- Use Table.HeaderCell for column headers (adds scope="col" by default)
- Use Table.Caption for table descriptions (can be visually hidden)
- Keep tables simple — use DataTable for interactive features
- Consider mobile responsiveness; table scrolls horizontally on small screens
Accessibility
- Semantic HTML table elements (thead, tbody, tfoot, th, td)
- Column headers have scope="col" by default
- Caption provides table description for screen readers
- Supports visually-hidden caption for screen-reader-only labels