Table
Table is a container component: the wrapper owns elevation, rows stay flat.
Basic Usage
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV-001 | Paid | Card | $250.00 |
| INV-002 | Pending | PayPal | $150.00 |
| INV-003 | Unpaid | Bank | $350.00 |
| INV-004 | Paid | Bank | $89.00 |
| INV-005 | Pending | Card | $420.50 |
Variants
Default (Level 2)
Use as a standalone table section.
| Component | Status | Size |
|---|---|---|
| Table | Stable | 2.1 KB |
| Tabs | Stable | 1.4 KB |
Elevated (Hero)
Use sparingly when the table is a focal element.
| Theme | Status | Version |
|---|---|---|
| paper-cut10 | Active | v1.0 |
| zine-mark6 | Beta | v0.9 |
Sorting
Click column headers to sort. Keep controls quiet; the table remains the main surface.
| INV-005 | Pending | Card | $420.50 |
| INV-003 | Unpaid | Bank | $350.00 |
| INV-001 | Paid | Card | $250.00 |
| INV-002 | Pending | PayPal | $150.00 |
| INV-004 | Paid | Bank | $89.00 |
Best Practices
Inside a Card (Level 3), use `variant="inset"` to avoid double elevation.
Component bundle
Nested table stays inset.
| Component | Status | Size |
|---|---|---|
| Button | Stable | 2.4 KB |
| Card | Stable | 1.8 KB |
Anti-patterns
Default table elevation inside a Card stacks shadows and gets noisy.
❌ Nested default table
| Component | Status | Size |
|---|---|---|
| Table | Stable | 2.1 KB |