Table
Table with sizes and variants
Content Options
Unclickable
Clickable
With Actions
Column items with custom component
Empty State
When rows is empty and emptyState is provided, the table keeps column headers visible and renders the empty state content spanning all columns.
Empty State with Custom Component
The emptyState prop accepts any ReactNode, so you can pass a custom component like EmptyTableState.
Style Options
With Border
Elevations
Sunken
Base (default)
Raised
Overlay
Floating
Elevations With Border
Sunken
Base (default)
Raised
Overlay
Floating
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
columns | Column definitions with key, content, and optional className | TableColumn[] | ✅ | |
rows | Row data with key, cells, and optional onClick/className | TableRowData[] | ✅ | |
border | Adds a border and rounded corners around the table | boolean | false | ❌ |
elevation | Controls the shadow and border elevation level | sunken, base, raised, overlay, floating | base | ❌ |
emptyState | Content rendered when rows is empty, spanning all columns | ReactNode | ❌ |