DataGridPro API

Set of columns of type GridColDef[].

The ref object that allows grid manipulation. Can be instantiated with useGridApiRef().

The label of the Data Grid.

The id of the element containing a label for the Data Grid.

If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.

If true, columns are autosized after the datagrid is mounted.

The options for autosize when user-initiated.

Controls the modes of the cells.

If true, the Data Grid will display an extra column with checkboxes for selecting rows.

If true, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with checkboxSelection. It only works if the pagination is enabled.

Override or extend the styles applied to the component.

See CSS classes API below for more details.

The character used to separate cell values when copying to the clipboard.

Column region in pixels to render before/after the viewport

Sets the height in pixels of the column group headers in the Data Grid. Inherits the columnHeaderHeight value if not set.

Sets the height in pixel of the column headers in the Data Grid.

Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the hide property in GridColDef.

If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.

Set the density of the Data Grid.

The row ids to show the detail panel.

If true, column autosizing on header separator double-click is disabled.

If true, the filtering will only be applied to the top level rows when grouping rows with the treeData prop.

If true, the sorting will only be applied to the top level rows when grouping rows with the treeData prop.

If true, column filters are disabled.

If true, the column menu is disabled.

If true, the column pinning is disabled.

If true, reordering columns is disabled.

If true, resizing columns is disabled.

If true, hiding/showing columns is disabled.

If true, the column sorting feature will be disabled.

If true, the density selector is disabled.

If true, eval() is not used for performance optimization.

If true, filtering with multiple columns is disabled.

If true, the sorting with multiple columns is disabled.

If true, multiple selection using the Ctrl/CMD or Shift key is disabled. The MIT DataGrid will ignore this prop, unless checkboxSelection is enabled.

If true, the selection on click on a row or cell is disabled.

If true, the virtualization is disabled.

Controls whether to use the cell or row editing.

Use if the actual rowCount is not known upfront, but an estimation is available. If some rows have children (for instance in the tree data), this number represents the amount of top level rows. Applicable only with paginationMode="server" and when rowCount="-1"

Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to true, the feature will be fully disabled and any property / method call will not have any effect.

The milliseconds delay to wait after a keystroke before triggering filtering.

Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.

Set the filter model of the Data Grid.

Function that applies CSS classes dynamically on cells.

Function that returns the element to render in row detail.

Function that returns the height of the row detail panel.

Function that returns the estimated height for a row. Only works if dynamic row height is used. Once the row height is measured this value is discarded.

Function that applies CSS classes dynamically on rows.

Function that sets the row height per row.

Return the id of a given GridRowModel.

Function that allows to specify the spacing between rows.

Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element.

The grouping column used by the tree data.

Override the height of the header filters.

If true, the header filters feature is enabled.

If true, the footer component is hidden.

If true, the pagination component in the footer is hidden.

If true, the row count in the footer is hidden. It has no effect if the pagination is enabled.

If true, the selected row count in the footer is hidden.

If true, the diacritics (accents) are ignored when filtering or quick filtering. E.g. when filter value is cafe, the rows with café will be visible.

If true, the Data Grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export.

If select, a group header checkbox in indeterminate state (like "Select All" checkbox) will select all the rows under it. If deselect, it will deselect all the rows under it. Works only if checkboxSelection is enabled.

The initial state of the DataGridPro. The data in it will be set in the state on initialization but will not be controlled. If one of the data in initialState is also being controlled, then the control state wins.

Callback fired when a cell is rendered, returns true if the cell is editable.

Determines if a group should be expanded after its creation. This prop takes priority over the defaultGroupingExpansionDepth prop.

Determines if a row can be selected.

If true, moving the mouse pointer outside the grid before releasing the mouse button in a column re-order action will not cause the column to jump back to its original position.

If true, the selection model will retain selected rows that do not exist. Useful when using server side pagination and row selections need to be retained when changing pages.

If true, a loading overlay is displayed.

Set the locale text of the Data Grid. You can find all the translation keys supported in the source in the GitHub repository.

Pass a custom logger in the components that implements the Logger interface.

Allows to pass the logging level or false to turn off logging.

Nonce of the inline styles for Content Security Policy.

Callback fired when any cell is clicked.

Callback fired when a double click event comes from a cell element.

Callback fired when the cell turns to edit mode.

Callback fired when the cell turns to view mode.

Callback fired when a keydown event comes from a cell element.

Callback fired when the cellModesModel prop changes.

Callback called when the data is copied to the clipboard.

Callback fired when a click event comes from a column header element.

Callback fired when a contextmenu event comes from a column header element.

Callback fired when a double click event comes from a column header element.

Callback fired when a mouse enter event comes from a column header element.

Callback fired when a mouse leave event comes from a column header element.

Callback fired when a mouseout event comes from a column header element.

Callback fired when a mouseover event comes from a column header element.

Callback fired when a column is reordered.

Callback fired while a column is being resized.

Callback fired when the column visibility model changes.

Callback fired when the width of a column is changed.

Callback fired when the density changes.

Callback fired when the detail panel of a row is opened or closed.

Callback fired when rowCount is set and the next batch of virtualized rows is rendered.

Callback fired when the Filter model changes before the filters are applied.

Callback fired when the menu is closed.

Callback fired when the menu is opened.

Callback fired when the pagination meta has changed.

Callback fired when the pagination model has changed.

Callback fired when the pinned columns have changed.

Callback fired when the preferences panel is closed.

Callback fired when the preferences panel is opened.

Callback called when processRowUpdate throws an error or rejects.

Callback fired when the Data Grid is resized.

Callback fired when a row is clicked. Not called if the target clicked is an interactive element added by the built-in columns.

Callback fired when the row count has changed.

Callback fired when a double click event comes from a row container element.

Callback fired when the row turns to edit mode.

Callback fired when the row turns to view mode.

Callback fired when the rowModesModel prop changes.

Callback fired when a row is being reordered.

Callback fired when the selection state of one or multiple rows changes.

Callback fired when scrolling to the bottom of the grid viewport.

Callback fired when the sort model changes before a column is sorted.

Select the pageSize dynamically using the component UI.

If true, pagination is enabled.

The extra information about the pagination state of the Data Grid. Only applicable with paginationMode="server".

Pagination can be processed on the server or client-side. Set it to 'client' if you would like to handle the pagination on the client-side. Set it to 'server' if you would like to handle the pagination on the server-side.

The pagination model of type GridPaginationModel which refers to current page and pageSize.

The column fields to display pinned to left or right.

Rows data to pin on top or bottom.

Callback called before updating a row with new values in the row and cell editing.

The milliseconds throttle delay for resizing the grid.

Row region in pixels to render before/after the viewport

Set the total number of rows, if it is different from the length of the value rows prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows. Only works with paginationMode="server", ignored when paginationMode="client".

Sets the height in pixel of a row in the Data Grid.

Controls the modes of the rows.

If true, the reordering of rows is enabled.

Set of rows of type GridRowsProp.

If false, the row selection mode is disabled.

Sets the row selection model of the Data Grid.

When rowSelectionPropagation.descendants is set to true. - Selecting a parent selects all its filtered descendants automatically. - Deselecting a parent row deselects all its filtered descendants automatically.
When rowSelectionPropagation.parents is set to true - Selecting all the filtered descendants of a parent selects the parent automatically. - Deselecting a descendant of a selected parent deselects the parent automatically.
Works with tree data and row grouping on the client-side only.

Loading rows can be processed on the server or client-side. Set it to 'client' if you would like enable infnite loading. Set it to 'server' if you would like to enable lazy loading. * @default "client"

Sets the type of space between rows added by getRowSpacing.

Override the height/width of the Data Grid inner scrollbar.

Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called.

If true, vertical borders will be displayed between cells.

If true, vertical borders will be displayed between column header items.

Overridable components props dynamically passed to the component at rendering.

Overridable components.

See Slots API below for more details.

Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.

The order of the sorting sequence.

Set the sort model of the Data Grid.

The system prop that allows defining system overrides as well as additional CSS styles.

See the `sx` page for more details.

If positive, the Data Grid will throttle updates coming from apiRef.current.updateRows and apiRef.current.setRows. It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each individual update.

If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop.

Definition of the column rendered when the unstable_listView prop is enabled.

If true, displays the data in a list view. Use in combination with unstable_listColumn.

If true, the Data Grid will auto span the cells over the rows having the same value.

If true, the Data Grid enables column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.