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 @default-file/ui df-ui add data-grid
Virtualized table with resizable columns. Drag a header edge, or focus the resize handle and use arrows, Home, and End.
selectionMode multi adds a checkbox column. Click, Space, or Shift click to select, and use the header checkbox to toggle every row.
selectionMode single keeps one selected row. Clicking a row replaces the selection, and there is no checkbox column.
Click a title cell or press Enter to edit. The host stores the value, Enter and blur commit, and Escape closes the editor.
Controlled column width and visibility. Resize Title, Owner, and Notes, keep Points fixed, and toggle Notes to hide or show it.
Placeholder rows while data is loading. The grid sets aria-busy.
Custom empty content when there are no rows.
No work items yet.
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. |