Table
Table primitives for static data. For sort, filter, search, and pagination out of the box, use TableData (documented separately).
Default
Table with Header and Body.
| Invoice | Method | Status | Amount |
|---|---|---|---|
| INV-001 | Credit Card | Paid | $250.00 |
| INV-002 | PayPal | Pending | $150.00 |
| INV-003 | Bank Transfer | Unpaid | $350.00 |
| INV-004 | Credit Card | Paid | $450.00 |
Status with Badge
Common pattern: status column uses Badge plain so it does not dominate the row.
| Order | Customer | Status |
|---|---|---|
| ORD-1042 | Olivia Martin | Fulfilled |
| ORD-1041 | Jackson Lee | Processing |
| ORD-1040 | Isabella Nguyen | Refunded |
Empty state
Use TableEmpty when there is no data. The colspan must match the column count.
| Invoice | Method | Amount |
|---|---|---|
No invoices yet. Create one to get started. | ||
API Reference
Props, events, and slots for each sub-component.
Table
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Main container. Already wrapped in relative w-full overflow-auto. |
TableHead / TableCell
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Override alignment (text-right, text-center) or width. |
TableEmpty
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colspan | number | 1 | Must match the number of columns in the header. |