Table
Composable data table with header, body, footer, and caption parts. Horizontally scrollable on small screens.
Basic
| Name | Role | |
|---|---|---|
| Alice Chen | alice@example.com | Admin |
| Bob Kim | bob@example.com | Member |
| Carol Davis | carol@example.com | Member |
With badges and footer
| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | $250.00 |
| INV-002 | Pending | $150.00 |
| INV-003 | Overdue | $350.00 |
| Total | $750.00 | |
With caption
| Date | Description | Amount |
|---|---|---|
| 2024-01-15 | Subscription renewal | -$49.00 |
| 2024-01-12 | Customer payment | +$320.00 |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| Table | table | — | Root element. Wraps in a scrollable div. |
| TableHeader | thead | — | Header section. |
| TableBody | tbody | — | Body section. |
| TableFooter | tfoot | — | Footer section with muted background. |
| TableRow | tr | — | Table row. Supports data-[state=selected] for selection styling. |
| TableHead | th | — | Column header cell. |
| TableCell | td | — | Data cell. |
| TableCaption | caption | — | Optional caption rendered below the table. |