Table
A complete table component system for displaying structured data with proper semantics, styling, and accessibility features.
Basic Table
| Date | Description | Amount |
|---|---|---|
| 2025-01-28 | Office Supplies | $45.00 |
| 2025-01-27 | Software License | $299.00 |
| 2025-01-26 | Team Lunch | $120.00 |
With Status Badges
| Task | Status | Priority |
|---|---|---|
| Implement authentication | Complete | High |
| Write documentation | In Progress | Medium |
| Code review | Pending | Low |
Components
| Name | Type | Default | Description |
|---|---|---|---|
Table | Component | - | Root table wrapper with overflow handling |
TableHeader | Component | - | Table header section (thead) |
TableBody | Component | - | Table body section (tbody) |
TableRow | Component | - | Table row with hover states |
TableHead | Component | - | Table header cell (th) |
TableCell | Component | - | Table data cell (td) |
TableCaption | Component | - | Table caption for accessibility |
Usage Guidelines
When to use
- •For displaying structured, tabular data
- •For comparison of items across multiple attributes
- •For data that benefits from sorting or filtering
- •When rows and columns have semantic meaning
Best practices
- •Always include TableCaption for accessibility
- •Use TableHead in TableHeader for column labels
- •Keep tables simple - avoid nested tables
- •Consider alternative layouts (cards) for mobile
- •Use proper semantic HTML structure
- •Add hover states to help users scan rows
Accessibility
- •TableCaption provides context for screen readers
- •Proper thead/tbody structure aids navigation
- •Table headers (th) are programmatically associated with data cells
- •Keyboard users can navigate cell by cell
- •Consider aria-label or aria-describedby for complex tables
Do's and Don'ts
✓ Do
- •Always include a caption for accessibility
- •Use semantic table structure (thead, tbody)
- •Keep table data scannable with clear headers
| Name | |
|---|---|
| John Doe | john@example.com |
✗ Don't
- •Don't omit table captions
- •Don't use tables for layout purposes
- •Don't nest tables within table cells
| No headers | Hard to understand |
Related Components
Badge
Display status indicators in table cells
Card
Alternative layout for mobile devices
Input
Filter and search table data