Components
A data table with styled header, body, footer, and row hover states. Supports striped rows for easier scanning.
Basic usage
| Invoice | Customer | Amount | Status |
|---|
| INV-001 | Alice Johnson | $250.00 | Paid |
| INV-002 | Bob Smith | $150.00 | Pending |
| INV-003 | Carol White | $350.00 | Paid |
| INV-004 | David Brown | $450.00 | Overdue |
Striped variant
Use variant="striped" for alternating row backgrounds.
| Invoice | Customer | Amount | Status |
|---|
| INV-001 | Alice Johnson | $250.00 | Paid |
| INV-002 | Bob Smith | $150.00 | Pending |
| INV-003 | Carol White | $350.00 | Paid |
| INV-004 | David Brown | $450.00 | Overdue |
With footer
| Invoice | Customer | Amount |
|---|
| INV-001 | Alice Johnson | $250.00 |
| INV-002 | Bob Smith | $150.00 |
| INV-003 | Carol White | $350.00 |
| INV-004 | David Brown | $450.00 |
| Total | $1,200.00 |
Props
| Prop | Type | Default | Description |
|---|
variant | 'default' | 'striped' | 'default' | Visual style. Striped adds alternating row backgrounds. |
className | string | — | Additional Tailwind classes. |
Accessibility
- Uses semantic
<table>, <thead>, <tbody>, <tfoot>. - Column headers use
<th> for proper screen reader announcement. - Wrap table in
overflow-auto container for horizontal scroll on small screens.