Components / Interfaces / DataGrid
Data
FreeComponentA typed read-only grid foundation for object collections.
Demo dataResponsive
| Name | Owner | Value |
|---|---|---|
| Project Apollo | Sarah Chen | $12,450 |
| Project Zephyr | James Park | $8,230 |
Installation
pnpm dlx shadcn@latest add https://elements.micropreneur.dev/r/data-grid.jsonThe shadcn CLI writes the source into your project. Files added:
- components/elements/data-grid.tsxcomponent
- components/ui/table.tsxui
- lib/utils.tslib
Dependenciesclsxtailwind-merge
API
| Prop | Type | Default | Description |
|---|---|---|---|
| columns (required) | Array<DataGridColumn<T>> | — | |
| getRowId (required) | (row: T, index: number) => string | — | |
| rows (required) | T[] | — |
DataGridColumn
| Prop | Type | Default | Description |
|---|---|---|---|
| key (required) | keyof T | — | |
| label (required) | string | — | |
| align | 'left' | 'right' | — | Right-align the column (typical for figures). |
| mono | boolean | — | Render cell values in the mono face with tabular numerals. |
Accessibility
- Built on the native Table primitives, with one header cell per column.
- Rows need a stable id from getRowId so React keeps focus and state across updates.