Virtualized table with resizable columns, selection, and optional cell editing.
Also known as: table, grid, spreadsheet, virtual table
Install with the CLI, or copy the component source into your project.
Add data-grid (npm)
1npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add data-grid
Virtualized data table with resizable columns, row selection, and optional cell editing.
| Prop | Type | Default | Notes |
|---|---|---|---|
| rows | DataGridRow<T>[] | - | Row models with id and data (required). |
| columns | DataGridColumnDef<T>[] | - | Column definitions (required). |
| columnState | DataGridColumnState[] | - | Controlled column width and visibility state. |
| defaultColumnState | DataGridColumnState[] | - | Uncontrolled initial column state. |
| onColumnStateChange | (state: DataGridColumnState[]) => void | - | Called when column widths or visibility change. |
| selectionMode | "none" | "single" | "multiple" | - | Row selection behavior. |
| selectedIds | string[] | - | Controlled selected row ids. |
| defaultSelectedIds | string[] | - | Uncontrolled initial selected row ids. |
| onSelectionChange | (ids: string[]) => void | - | Called when selection changes. |
| loading | boolean | false | Show loading placeholder rows. |
| emptyContent | ReactNode | - | Content when there are no rows. |
| overscan | number | - | Extra virtual rows rendered outside the viewport. |
| estimateRowSize | number | - | Estimated row height in pixels for virtualization. |
| className | string | - | Additional styles on the root. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| id | string | - | Stable column id (required). |
| header | ReactNode | - | Header cell content (required). |
| width | number | - | Initial width in pixels. |
| minWidth | number | - | Lower bound for resize. Defaults to --df-data-grid-col-min-width. |
| maxWidth | number | - | Upper bound for resize. Defaults to --df-data-grid-col-max-width. |
| resizable | boolean | - | When true, the column can be resized. |
| hidden | boolean | - | When true, the column is omitted from the grid. |
| cell | (row: DataGridRow<T>) => ReactNode | - | Render function for the body cell (required). |
| editCell | (row, commit) => ReactNode | - | Optional editor for the cell. |