DataGrid.
Editable, sortable tabular data with resizable columns.
Pura | Live | 3 |
Okumo | Beta | 5 |
Yapuro | Live | 2 |
Double-click a cell to edit. Drag column separators to resize.
The preview uses the actual shared component, including your current theme, rounding, border and motion preferences.
Props & API reference
Parameters available in the shared component, including value types, requirements and accepted options.
| Parameter | Type | Required | Default | Possible values | Description |
|---|---|---|---|---|---|
rows | Array<T & {id: string | number}> | Yes | — | — | Rows with stable IDs. |
columns | GridColumn<T>[] | Yes | — | — | Keys, labels, editability, width and min width. |
onCellChange | (rowId, key, value: string) => void | No | — | — | Request a cell update after editing. |
label | string | No | Data grid | — | Accessible grid region label. |
className | string | No | — | — | Additional CSS class on the outer component element. |