Tables
Data tables for displaying structured information. All tables meet WCAG 2.1 Level AA with proper semantics and keyboard navigation.
Basic Table
| Name | Role | Status | |
|---|---|---|---|
| John Doe | john@example.com | Admin | Active |
| Jane Smith | jane@example.com | Editor | Active |
| Bob Wilson | bob@example.com | Viewer | Pending |
| Alice Brown | alice@example.com | Editor | Inactive |
Striped Table
| Product | Category | Price | Stock |
|---|---|---|---|
| Widget A | Electronics | $29.99 | 150 |
| Widget B | Electronics | $49.99 | 75 |
| Gadget X | Accessories | $19.99 | 200 |
| Gadget Y | Accessories | $24.99 | 120 |
Table with Hover
| Date | Description | Amount | Type |
|---|---|---|---|
| 2025-01-15 | Payment received | +$1,250.00 | Credit |
| 2025-01-14 | Service fee | -$25.00 | Debit |
| 2025-01-12 | Subscription | -$99.00 | Debit |
| 2025-01-10 | Refund | +$50.00 | Credit |
Compact Table
| ID | Task | Priority | Due |
|---|---|---|---|
| #001 | Update documentation | High | Today |
| #002 | Review pull request | Medium | Tomorrow |
| #003 | Fix bug in auth | High | Today |
| #004 | Add unit tests | Low | Next week |
Token Mapping
How tokens flow through the three-layer system: value → primitive → semantic → component.
Container bg
#18181b33→
zinc-900/20→--card→--table-bgContainer border
#27272a99→
zinc-800/60→--border→--table-borderHeader bg
#18181b80→
zinc-900/50→--secondary→--table-header-bgHeader text
#71717a→
zinc-500→--muted-foreground→--table-header-textRow border
#27272a66→
zinc-800/40→--border→--table-row-borderRow hover
#27272a66→
zinc-800/40→--accent→--table-row-hoverCell text
#d4d4d8→
zinc-300→--foreground→--table-cell-textPrimitiveSemanticComponent
Accessibility Guidelines
Proper SemanticsUse thead, tbody, th, and td elements correctly.
Header ScopeTable headers have scope="col" or scope="row" attributes.
Keyboard NavigationInteractive elements within cells are keyboard accessible.
Caption/SummaryComplex tables include caption or aria-describedby for context.