DataGridPremium API

Set of columns of type GridColumns.

Set of rows of type GridRowsProp.

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

The label of the grid.

The id of the element containing a label for the grid.

If true, the grid height is dynamic and follow the number of rows in the 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.

Controls the modes of the cells.

If true, the grid get a first column with a checkbox that allows to select 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 API below for more details.

Number of extra columns to be rendered before/after the visible slice.

Number of rows from the columnBuffer that can be visible before a new slice is rendered.

Extend native column types with your new column types.

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

Overrideable components.

Overrideable components props dynamically passed to the component at rendering.

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 grid.

The row ids to show the detail panel.

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 density selector is disabled.

If true, rows will not be extended to fill the full width of the grid container.

If true, filtering with multiple columns is disabled.

If true, sorting with multiple columns is disabled.

If true, multiple selection using the Ctrl or CMD key is disabled.

If true, the row grouping is disabled.

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.

Set the edit rows model of the grid.

An error that will turn the grid into its error state and display the error component.

Features under development. 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.

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 grid.

Function that applies CSS classes dynamically on cells.

Signature:
function(params: GridCellParams) => string
params: With all properties from GridCellParams.
returns (string): The CSS class to apply to the cell.

Function that returns the element to render in row detail.

Signature:
function(params: GridRowParams) => JSX.Element
params: With all properties from GridRowParams.
returns (JSX.Element): The row detail element.

Function that returns the height of the row detail panel.

Signature:
function(params: GridRowParams) => number
params: With all properties from GridRowParams.
returns (number): The height in pixels.

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.

Signature:
function(params: GridRowHeightParams) => number | null
params: With all properties from GridRowHeightParams.
returns (number | null): The estimated row height value. If null or undefined then the default row height, based on the density, is applied.

Function that applies CSS classes dynamically on rows.

Signature:
function(params: GridRowClassNameParams) => string
params: With all properties from GridRowClassNameParams.
returns (string): The CSS class to apply to the row.

Function that sets the row height per row.

Signature:
function(params: GridRowHeightParams) => GridRowHeightReturnValue
params: With all properties from GridRowHeightParams.
returns (GridRowHeightReturnValue): The row height value. If null or undefined then the default row height is applied. If "auto" then the row height is calculated based on the content.

Return the id of a given GridRowModel.

Function that allows to specify the spacing between rows.

Signature:
function(params: GridRowSpacingParams) => GridRowSpacing
params: With all properties from GridRowSpacingParams.
returns (GridRowSpacing): The row spacing values.

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.

Signature:
function(row: R) => Array<string>
row: The row from which we want the path.
returns (Array): The path to the row.

The grouping column used by the tree data.

Set the height in pixel of the column headers in the grid.

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.

The initial state of the DataGridPremium. 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.

Signature:
function(params: GridCellParams) => boolean
params: With all properties from GridCellParams.
returns (boolean): A boolean indicating if the cell is editable.

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

Signature:
function(node: GridRowTreeNodeConfig) => boolean
node: The node of the group to test.
returns (boolean): A boolean indicating if the group is expanded.

Determines if a row can be selected.

Signature:
function(params: GridRowParams) => boolean
params: With all properties from GridRowParams.
returns (boolean): A boolean indicating if the cell is selectable.

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 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.

Signature:
function(params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridCellParams.
event: The event object.
details: Additional details for this callback.

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

Signature:
function(params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridCellParams.
event: The event object.
details: Additional details for this callback.

Callback fired when the cell changes are committed.

Signature:
function(params: GridCellEditCommitParams, event: MuiEvent<MuiBaseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridCellEditCommitParams.
event: The event that caused this prop to be called.
details: Additional details for this callback.

Callback fired when the cell turns to edit mode.

Signature:
function(params: GridCellParams, event: MuiEvent<React.KeyboardEvent | React.MouseEvent>) => void
params: With all properties from GridCellParams.
event: The event that caused this prop to be called.

Callback fired when the cell turns to view mode.

Signature:
function(params: GridCellParams, event: MuiEvent<MuiBaseEvent>) => void
params: With all properties from GridCellParams.
event: The event that caused this prop to be called.

Callback fired when a cell loses focus.

Signature:
function(params: GridCellParams, event: MuiEvent<MuiBaseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridCellParams.
event: The event object.
details: Additional details for this callback.

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

Signature:
function(params: GridCellParams, event: MuiEvent<React.KeyboardEvent>, details: GridCallbackDetails) => void
params: With all properties from GridCellParams.
event: The event object.
details: Additional details for this callback.

Callback fired when the cellModesModel prop changes.

Signature:
function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void
cellModesModel: Object containig which cells are in "edit" mode.
details: Additional details for this callback.

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

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.

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

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.

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

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.

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

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.

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

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.

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

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnHeaderParams.
event: The event object.
details: Additional details for this callback.

Callback fired when a column is reordered.

Signature:
function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridColumnOrderChangeParams.
event: The event object.
details: Additional details for this callback.

Callback fired while a column is being resized.

Signature:
function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnResizeParams.
event: The event object.
details: Additional details for this callback.

Callback fired when a column visibility changes. Only works when no columnVisibilityModel is provided and if we change the visibility of a single column at a time.

Signature:
function(params: GridColumnVisibilityChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridColumnVisibilityChangeParams.
event: The event object.
details: Additional details for this callback.

Callback fired when the column visibility model changes.

Signature:
function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => void
model: The new model.
details: Additional details for this callback.

Callback fired when the width of a column is changed.

Signature:
function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnResizeParams.
event: The event object.
details: Additional details for this callback.

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

Signature:
function(ids: Array<GridRowId>, details: GridCallbackDetails) => void
ids: The ids of the rows which have the detail panel open.
details: Additional details for this callback.

Callback fired when the edit cell value changes.

Signature:
function(params: GridEditCellPropsParams, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => void
params: With all properties from GridEditCellPropsParams.
event: The event that caused this prop to be called.
details: Additional details for this callback.

Callback fired when the editRowsModel changes.

Signature:
function(editRowsModel: GridEditRowsModel, details: GridCallbackDetails) => void
editRowsModel: With all properties from GridEditRowsModel.
details: Additional details for this callback.

Callback fired when an exception is thrown in the grid.

Signature:
function(args: any, event: MuiEvent<{}>, details: GridCallbackDetails) => void
args: The arguments passed to the showError call.
event: The event object.
details: Additional details for this callback.

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

Signature:
function(model: GridFilterModel, details: GridCallbackDetails) => void
model: With all properties from GridFilterModel.
details: Additional details for this callback.

Callback fired when the menu is closed.

Signature:
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridMenuParams.
event: The event object.
details: Additional details for this callback.

Callback fired when the menu is opened.

Signature:
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridMenuParams.
event: The event object.
details: Additional details for this callback.

Callback fired when the current page has changed.

Signature:
function(page: number, details: GridCallbackDetails) => void
page: Index of the page displayed on the Grid.
details: Additional details for this callback.

Callback fired when the page size has changed.

Signature:
function(pageSize: number, details: GridCallbackDetails) => void
pageSize: Size of the page displayed on the Grid.
details: Additional details for this callback.

Callback fired when the pinned columns have changed.

Signature:
function(pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => void
pinnedColumns: The changed pinned columns.
details: Additional details for this callback.

Callback fired when the preferences panel is closed.

Signature:
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridPreferencePanelParams.
event: The event object.
details: Additional details for this callback.

Callback fired when the preferences panel is opened.

Signature:
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridPreferencePanelParams.
event: The event object.
details: Additional details for this callback.

Callback called when processRowUpdate throws an error or rejects.

Signature:
function(error: any) => void
error: The error thrown.

Callback fired when the grid is resized.

Signature:
function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => void
containerSize: With all properties from ElementSize.
event: The event object.
details: Additional details for this callback.

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

Signature:
function(params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridRowParams.
event: The event object.
details: Additional details for this callback.

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

Signature:
function(params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from RowParams.
event: The event object.
details: Additional details for this callback.

Callback fired when the row changes are committed.

Signature:
function(id: GridRowId, event: MuiEvent<MuiBaseEvent>) => void
id: The row id.
event: The event that caused this prop to be called.

Callback fired when the row turns to edit mode.

Signature:
function(params: GridRowParams, event: MuiEvent<React.KeyboardEvent | React.MouseEvent>) => void
params: With all properties from GridRowParams.
event: The event that caused this prop to be called.

Callback fired when the row turns to view mode.

Signature:
function(params: GridRowParams, event: MuiEvent<MuiBaseEvent>) => void
params: With all properties from GridRowParams.
event: The event that caused this prop to be called.

Callback fired when the row grouping model changes.

Signature:
function(model: GridRowGroupingModel, details: GridCallbackDetails) => void
model: Columns used as grouping criteria.
details: Additional details for this callback.

Callback fired when the rowModesModel prop changes.

Signature:
function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void
rowModesModel: Object containig which rows are in "edit" mode.
details: Additional details for this callback.

Callback fired when a row is being reordered.

Signature:
function(params: GridRowOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridRowOrderChangeParams.
event: The event object.
details: Additional details for this callback.

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

Signature:
function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridRowScrollEndParams.
event: The event object.
details: Additional details for this callback.

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

Signature:
function(selectionModel: GridSelectionModel, details: GridCallbackDetails) => void
selectionModel: With all the row ids GridSelectionModel.
details: Additional details for this callback.

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

Signature:
function(model: GridSortModel, details: GridCallbackDetails) => void
model: With all properties from GridSortModel.
details: Additional details for this callback.

Callback fired when the state of the grid is updated.

Signature:
function(state: GridState, event: MuiEvent<{}>, details: GridCallbackDetails) => void
state: The new state.
event: The event object.
details: Additional details for this callback.

The zero-based index of the current page.

Set the number of rows in one page. If some of the rows have children (for instance in the tree data), this number represents the amount of top level rows wanted on each page.

If true, pagination is enabled.

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 column fields to display pinned to left or right.

Callback called before updating a row with new values in the row and cell editing. Only applied if props.experimentalFeatures.newEditingApi: true.

Signature:
function(newRow: R, oldRow: R) => Promise<R> | R
newRow: Row object with the new values.
oldRow: Row object with the old values.
returns (Promise | R): The final values to update the row.

Number of extra rows to be rendered before/after the visible slice.

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.

If single, all column we are grouping by will be represented in the same grouping the same column. If multiple, each column we are grouping by will be represented in its own column.

Set the row grouping model of the grid.

Set the height in pixel of a row in the grid.

Controls the modes of the rows.

If true, the reordering of rows is enabled.

Sets the type of space between rows added by getRowSpacing.

Select the pageSize dynamically using the component UI.

Number of rows from the rowBuffer that can be visible before a new slice is rendered.

Override the height/width of the grid inner scrollbar.

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

Set the selection model of the grid.

If true, the right border of the cells are displayed.

If true, the right border of the column headers are displayed.

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 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 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.