Table
A semantic table component for displaying tabular data. Supports size variants to control row height and cell padding.
Basic
| Name | Status | Role |
|---|---|---|
| Alice Johnson | Active | Admin |
| Bob Smith | Inactive | User |
| Carol White | Active | Editor |
Sizes
Control the row height and cell padding with the size prop on the Table component.
Small
| Name | |
|---|---|
| Alice Johnson | alice@example.com |
| Bob Smith | bob@example.com |
Default
| Name | |
|---|---|
| Alice Johnson | alice@example.com |
| Bob Smith | bob@example.com |
Large
| Name | |
|---|---|
| Alice Johnson | alice@example.com |
| Bob Smith | bob@example.com |
With Footer
| Product | Quantity | Price |
|---|---|---|
| Widget A | 2 | $20.00 |
| Widget B | 1 | $35.00 |
| Widget C | 3 | $15.00 |
| Total | $120.00 | |
With Caption
| Transaction | Date | Amount |
|---|---|---|
| Payment received | Jan 15, 2024 | +$250.00 |
| Subscription | Jan 10, 2024 | -$9.99 |
| Refund | Jan 5, 2024 | +$50.00 |