Scrollable data grid with sort, filter, and structural layouts.
| Layout | Behaviour |
|---|---|
flat | Default dense row list. |
grouped | Collapse rows by groupBy with expandable group headers. |
tree | Nested row.children with indent and expand toggles. |
pivot | Client pivot via pivot aggregator into synthetic columns. |
getDetailContent inserts a full-width detail row.rowHeight.hasMore / onLoadMore sentinel at the scroll bottom.| Prop | Type | Default | Description |
|---|---|---|---|
columns | DataGridColumn[] | — | Columns. |
rows | DataGridRow[] | — | Rows (optional nested children). |
layout | "flat" | "grouped" | "tree" | "pivot" | "flat" | Structural mode. |
groupBy | string | — | Group column key when grouped. |
pivot | DataGridPivotConfig | — | Pivot dimensions and aggregator. |
getDetailContent | (row) => ReactNode | — | Master-detail body. |
virtualized | boolean | false | DOM windowing. |
hasMore / onLoadMore | infinite load | — | Bottom sentinel. |
columnManager | boolean | false | Shows the Columns button and visibility menu. |
columnVisibility | Record<string, boolean> | — | Controlled column visibility. |
defaultColumnVisibility | Record<string, boolean> | — | Initial visibility for uncontrolled grids. |
onColumnVisibilityChange | (visibility) => void | — | Fired when a column is shown or hidden. |
views | DataGridView[] | — | Saved column presets rendered in the toolbar. |
activeViewId / defaultActiveViewId | string | — | Controlled or initial saved view. |
onActiveViewChange | (viewId) => void | — | Fired when a saved view is chosen. |
saveState | boolean / string / DataGridSaveStateOptions | false | Persists each grid's column widths under its own key and restores them. |
onColumnWidthsChange | (widths) => void | — | Fired when a user resize commits. |
Enable columnManager to expose a visibility menu, or pass views to offer saved column presets. DataGridView entries list the columns to hide, for example { id: "compact", label: "Compact", hiddenColumnKeys: ["owner", "status"] }.
Columns marked resizable keep their widths when saveState is set — pass a string key or { key, storage } for an explicit slot per grid, or saveState on its own to derive one from the grid's shape. Widths are stored as pixels and treated as intent: when the grid is narrower than the saved total, the visible columns are scaled down proportionally without overwriting the stored values, so the saved widths return once there is room again. Read committed widths with onColumnWidthsChange.
aria-sort on sortable headers.aria-expanded.Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…