Data Table
A declarative table component for displaying structured data with minimal configuration. Define columns and pass data to quickly render sortable, formatted tables. Ideal for admin panels, lists, and data-heavy interfaces.
| ID | Name | Title | ||
|---|---|---|---|---|
| 1 | Bob | CEO | [email protected] | |
| 2 | Fred | VP Marketing | [email protected] | |
| 3 | Ted | Engineer | [email protected] |
Column widths
| ID | Name | Title | ||
|---|---|---|---|---|
| 1 | Bob | CEO | [email protected] | |
| 2 | Fred | VP Marketing | [email protected] | |
| 3 | Ted | Engineer | [email protected] |
As cards
Component props
DataTable
| Name | Type | Description |
|---|---|---|
| data | object[] | Array of data objects to display |
| displayMode | DisplayMode | "table" | "cards" |
DataColumn
| Name | Type | Description |
|---|---|---|
| id | string | Column key matching data property (required) |
| label | string | Column header text |
| width | string | Column width (e.g., "100px", "2fr") |
| align | Alignment | "start" | "center" | "end" |