DataGridPro API

API documentation for the React DataGridPro component. Learn about the available props and the CSS API.

Import

import { DataGridPro } from '@mui/x-data-grid-pro';

You can learn about the difference by reading this guide on minimizing bundle size.

Component name

The name MuiDataGrid can be used when providing default props or style overrides in the theme.

Props

Name	Type	Default	Description
columns^*	Array<object>		Set of columns of type GridColumns.
rows^*	Array<object>		Set of rows of type GridRowsProp.
apiRef	{ current: object }		The ref object that allows grid manipulation. Can be instantiated with useGridApiRef().
aria-label	string		The label of the grid.
aria-labelledby	string		The id of the element containing a label for the grid.
autoHeight	bool	false	If `true`, the grid height is dynamic and follow the number of rows in the grid.
autoPageSize	bool	false	If `true`, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.
checkboxSelection	bool	false	If `true`, the grid get a first column with a checkbox that allows to select rows.
checkboxSelectionVisibleOnly	bool	false	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.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
columnBuffer	number	3	Number of extra columns to be rendered before/after the visible slice.
columnThreshold	number	3	Number of rows from the `columnBuffer` that can be visible before a new slice is rendered.
columnTypes	object		Extend native column types with your new column types.
components	object		Overrideable components.
componentsProps	object		Overrideable components props dynamically passed to the component at rendering.
density	'comfortable' \| 'compact' \| 'standard'	"standard"	Set the density of the grid.
disableColumnFilter	bool	false	If `true`, column filters are disabled.
disableColumnMenu	bool	false	If `true`, the column menu is disabled.
disableColumnReorder	bool	false	If `true`, reordering columns is disabled.
disableColumnResize	bool	false	If `true`, resizing columns is disabled.
disableColumnSelector	bool	false	If `true`, hiding/showing columns is disabled.
disableDensitySelector	bool	false	If `true`, the density selector is disabled.
disableExtendRowFullWidth	bool	false	If `true`, rows will not be extended to fill the full width of the grid container.
disableMultipleColumnsFiltering	bool	false	If `true`, filtering with multiple columns is disabled.
disableMultipleColumnsSorting	bool	false	If `true`, sorting with multiple columns is disabled.
disableMultipleSelection	bool	false	If `true`, multiple selection using the CTRL or CMD key is disabled.
disableSelectionOnClick	bool	false	If `true`, the selection on click on a row or cell is disabled.
disableVirtualization	bool	false	If `true`, the virtualization is disabled.
editMode	'cell' \| 'row'	"cell"	Controls whether to use the cell or row editing.
editRowsModel	object		Set the edit rows model of the grid.
error	any		An error that will turn the grid into its error state and display the error component.
filterMode	'client' \| 'server'	"client"	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.
filterModel	{ items: Array<{ columnField?: string, id?: number \| string, operatorValue?: string, value?: any }>, linkOperator?: 'and' \| 'or' }		Set the filter model of the grid.
getCellClassName	func		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.
getRowClassName	func		Function that applies CSS classes dynamically on rows. Signature: `function(params: GridRowParams) => string` params: With all properties from GridRowParams. returns (string): The CSS class to apply to the row.
getRowId	func		Return the id of a given GridRowModel.
headerHeight	number	56	Set the height in pixel of the column headers in the grid.
hideFooter	bool	false	If `true`, the footer component is hidden.
hideFooterPagination	bool	false	If `true`, the pagination component in the footer is hidden.
hideFooterRowCount	bool	false	If `true`, the row count in the footer is hidden. It has no effect if the pagination is enabled.
hideFooterSelectedRowCount	bool	false	If `true`, the selected row count in the footer is hidden.
initialState	object		The initial state of the DataGrid. 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.
isCellEditable	func		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.
isRowSelectable	func		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.
loading	bool	false	If `true`, a loading overlay is displayed.
localeText	object		Set the locale text of the grid. You can find all the translation keys supported in the source in the GitHub repository.
logger	{ debug: func, error: func, info: func, warn: func }	console	Pass a custom logger in the components that implements the Logger interface.
logLevel	'debug' \| 'error' \| 'info' \| 'warn' \| false	"debug"	Allows to pass the logging level or false to turn off logging.
nonce	string		Nonce of the inline styles for Content Security Policy.
onCellClick	func		Callback fired when a 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.
onCellDoubleClick	func		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.
onCellEditCommit	func		Callback fired when the cell changes are committed. Signature: `function(params: GridCellEditCommitParams, event: MuiEvent<React.SyntheticEvent>, 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.
onCellEditStart	func		Callback fired when the cell turns to edit mode. Signature: `function(params: GridCellParams, event: MuiEvent<React.SyntheticEvent>) => void` params: With all properties from GridCellParams. event: The event that caused this prop to be called.
onCellEditStop	func		Callback fired when the cell turns to view mode. Signature: `function(params: GridCellParams, event: MuiEvent<React.SyntheticEvent>) => void` params: With all properties from GridCellParams. event: The event that caused this prop to be called.
onCellFocusOut	func		Callback fired when a cell loses focus. Signature: `function(params: GridCellParams) => void` params: With all properties from GridCellParams.
onCellKeyDown	func		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.
onCellValueChange	func		Callback fired when the cell value changed. Signature: `function(params: GridEditCellValueParams, event: MuiEvent, details: GridCallbackDetails) => void` params: With all properties from GridEditCellValueParams. event: The event object. details: Additional details for this callback.
onColumnHeaderClick	func		Callback fired when a click event comes from a column header element. Signature: `function(params: GridColumnHeaderParams, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => void` params: With all properties from GridColumnHeaderParams. event: The event object. details: Additional details for this callback.
onColumnHeaderDoubleClick	func		Callback fired when a double click event comes from a column header element. Signature: `function(params: GridColumnHeaderParams, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => void` params: With all properties from GridColumnHeaderParams. event: The event object. details: Additional details for this callback.
onColumnHeaderEnter	func		Callback fired when a mouse enter event comes from a column header element. Signature: `function(params: GridColumnHeaderParams, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => void` params: With all properties from GridColumnHeaderParams. event: The event object. details: Additional details for this callback.
onColumnHeaderLeave	func		Callback fired when a mouse leave event comes from a column header element. Signature: `function(params: GridColumnHeaderParams, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => void` params: With all properties from GridColumnHeaderParams. event: The event object. details: Additional details for this callback.
onColumnHeaderOut	func		Callback fired when a mouseout event comes from a column header element. Signature: `function(params: GridColumnHeaderParams, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => void` params: With all properties from GridColumnHeaderParams. event: The event object. details: Additional details for this callback.
onColumnHeaderOver	func		Callback fired when a mouseover event comes from a column header element. Signature: `function(params: GridColumnHeaderParams, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => void` params: With all properties from GridColumnHeaderParams. event: The event object. details: Additional details for this callback.
onColumnOrderChange	func		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.
onColumnResize	func		Callback fired while a column is being resized. Signature: `function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => void` params: With all properties from GridColumnResizeParams. event: The event object. details: Additional details for this callback.
onColumnVisibilityChange	func		Callback fired when a column visibility changes. 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.
onColumnWidthChange	func		Callback fired when the width of a column is changed. Signature: `function(params: GridCallbackDetails, event: MuiEvent, details: GridCallbackDetails) => void` params: With all properties from GridColumnResizeParams. event: The event object. details: Additional details for this callback.
onEditCellPropsChange	func		Callback fired when the edit cell value changes. Signature: `function(params: GridEditCellPropsParams, event: MuiEvent, 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.
onEditRowsModelChange	func		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.
onError	func		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.
onFilterModelChange	func		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.
onPageChange	func		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.
onPageSizeChange	func		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.
onResize	func		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.
onRowClick	func		Callback fired when a click event comes from a row container element. Signature: `function(params: GridRowParams, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => void` params: With all properties from GridRowParams. event: The event object. details: Additional details for this callback.
onRowDoubleClick	func		Callback fired when a double click event comes from a row container element. Signature: `function(params: GridRowParams, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => void` params: With all properties from RowParams. event: The event object. details: Additional details for this callback.
onRowEditCommit	func		Callback fired when the row changes are committed. Signature: `function(id: GridRowId, event: MuiEvent<React.SyntheticEvent>) => void` id: The row id. event: The event that caused this prop to be called.
onRowEditStart	func		Callback fired when the row turns to edit mode. Signature: `function(params: GridRowParams, event: MuiEvent<React.SyntheticEvent>) => void` params: With all properties from GridRowParams. event: The event that caused this prop to be called.
onRowEditStop	func		Callback fired when the row turns to view mode. Signature: `function(params: GridRowParams, event: MuiEvent<React.SyntheticEvent>) => void` params: With all properties from GridRowParams. event: The event that caused this prop to be called.
onRowsScrollEnd	func		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.
onSelectionModelChange	func		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.
onSortModelChange	func		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.
onStateChange	func		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.
page	number	0	The zero-based index of the current page.
pageSize	number	100	Set the number of rows in one page.
pagination	bool	false	If `true`, pagination is enabled.
paginationMode	'client' \| 'server'	"client"	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.
rowBuffer	number	3	Number of extra rows to be rendered before/after the visible slice.
rowCount	number		Set the total number of rows, if it is different than the length of the value `rows` prop.
rowHeight	number	52	Set the height in pixel of a row in the grid.
rowsPerPageOptions	Array<number>	[25, 50, 100]	Select the pageSize dynamically using the component UI.
rowThreshold	number	3	Number of rows from the `rowBuffer` that can be visible before a new slice is rendered.
scrollbarSize	number		Override the height/width of the grid inner scrollbar.
scrollEndThreshold	number		Set the area at the bottom of the grid viewport where onRowsScrollEnd is called.
selectionModel	Array<number \| string> \| number \| string		Set the selection model of the grid.
showCellRightBorder	bool	false	If `true`, the right border of the cells are displayed.
showColumnRightBorder	bool	false	If `true`, the right border of the column headers are displayed.
sortingMode	'client' \| 'server'	"client"	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.
sortingOrder	Array<'asc' \| 'desc'>	['asc', 'desc', null]	The order of the sorting sequence.
sortModel	Array<{ field: string, sort?: 'asc' \| 'desc' }>		Set the sort model of the grid.
throttleRowsMs	number	0	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.

Slots

Name	Type	Default	Description
BooleanCellFalseIcon	elementType	GridCloseIcon	Icon displayed on the boolean cell to represent the false value.
BooleanCellTrueIcon	elementType	GridCheckIcon	Icon displayed on the boolean cell to represent the true value.
Cell	elementType		Component rendered for each cell.
Checkbox	elementType	Checkbox	The custom Checkbox component used in the grid for both header and cells.
ColumnFilteredIcon	elementType	GridFilterAltIcon	Icon displayed on the column header menu to show that a filter has been applied to the column.
ColumnMenu	elementType	GridColumnMenu	Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
ColumnMenuIcon	elementType	GridTripleDotsVerticalIcon	Icon displayed on the side of the column header title to display the filter input component.
ColumnResizeIcon	elementType	GridSeparatorIcon	Icon displayed in between two column headers that allows to resize the column header.
ColumnSelectorIcon	elementType	GridColumnIcon	Icon displayed on the column menu selector tab.
ColumnSortedAscendingIcon	elementType \| null	GridArrowUpwardIcon	Icon displayed on the side of the column header title when sorted in ascending order.
ColumnSortedDescendingIcon	elementType \| null	GridArrowDownwardIcon	Icon displayed on the side of the column header title when sorted in descending order.
ColumnsPanel	elementType	GridColumnsPanel	GridColumns panel component rendered when clicking the columns button.
ColumnUnsortedIcon	elementType \| null	GridColumnUnsortedIcon	Icon displayed on the side of the column header title when unsorted.
DensityComfortableIcon	elementType	GridViewStreamIcon	Icon displayed on the "comfortable" density option in the toolbar.
DensityCompactIcon	elementType	GridViewHeadlineIcon	Icon displayed on the compact density option in the toolbar.
DensityStandardIcon	elementType	GridTableRowsIcon	Icon displayed on the standard density option in the toolbar.
ErrorOverlay	elementType	ErrorOverlay	Error overlay component rendered above the grid when an error is caught.
ExportIcon	elementType	GridSaveAltIcon	Icon displayed on the open export button present in the toolbar by default.
FilterPanel	elementType	GridFilterPanel	Filter panel component rendered when clicking the filter button.
Footer	elementType	GridFooter	Footer component rendered at the bottom of the grid viewport.
Header	elementType	GridHeader	Header component rendered above the grid column header bar. Prefer using the `Toolbar` slot. You should never need to use this slot.
LoadingOverlay	elementType	GridLoadingOverlay	Loading overlay component rendered when the grid is in a loading state.
MoreActionsIcon	elementType	GridMoreVertIcon	Icon displayed on the `actions` column type to open the menu.
NoResultsOverlay	elementType	GridNoResultsOverlay	No results overlay component rendered when the grid has no results after filtering.
NoRowsOverlay	elementType	GridNoRowsOverlay	No rows overlay component rendered when the grid has no rows.
OpenFilterButtonIcon	elementType	GridFilterListIcon	Icon displayed on the open filter button present in the toolbar by default.
Pagination	elementType \| null	Pagination	Pagination component rendered in the grid footer by default.
Panel	elementType	GridPanel	Panel component wrapping the filters and columns panels.
PreferencesPanel	elementType	GridPreferencesPanel	PreferencesPanel component rendered inside the Header component.
Row	elementType		Component rendered for each row.
Toolbar	elementType \| null	null	Toolbar component rendered inside the Header component.

The ref is forwarded to the root element.

CSS

Rule name	Global class	Description
autoHeight	.MuiDataGrid-autoHeight	Styles applied to the root element if `autoHeight={true}`.
booleanCell	.MuiDataGrid-booleanCell	Styles applied to the icon of the boolean cell.
cell--editable	.MuiDataGrid-cell--editable	Styles applied to the cell element if the cell is editable.
cell--editing	.MuiDataGrid-cell--editing	Styles applied to the cell element if the cell is in edit mode.
cell--textCenter	.MuiDataGrid-cell--textCenter	Styles applied to the cell element if `align="center"`.
cell--textLeft	.MuiDataGrid-cell--textLeft	Styles applied to the cell element if `align="left"`.
cell--textRight	.MuiDataGrid-cell--textRight	Styles applied to the cell element if `align="right"`.
cell--withRenderer	.MuiDataGrid-cell--withRenderer	Styles applied to the cell element if the cell has a custom renderer.
cell	.MuiDataGrid-cell	Styles applied to the cell element.
cellCheckbox	.MuiDataGrid-cellCheckbox	Styles applied to the cell checkbox element.
checkboxInput	.MuiDataGrid-checkboxInput	Styles applied to the selection checkbox element.
columnHeader--alignCenter	.MuiDataGrid-columnHeader--alignCenter	Styles applied to the column header if `headerAlign="center"`.
columnHeader--alignLeft	.MuiDataGrid-columnHeader--alignLeft	Styles applied to the column header if `headerAlign="left"`.
columnHeader--alignRight	.MuiDataGrid-columnHeader--alignRight	Styles applied to the column header if `headerAlign="right"`.
columnHeader--dragging	.MuiDataGrid-columnHeader--dragging	Styles applied to the floating column header element when it is dragged.
columnHeader--moving	.MuiDataGrid-columnHeader--moving	Styles applied to the column header if it is being dragged.
columnHeader--numeric	.MuiDataGrid-columnHeader--numeric	Styles applied to the column header if the type of the column is `number`.
columnHeader--sortable	.MuiDataGrid-columnHeader--sortable	Styles applied to the column header if the column is sortable.
columnHeader--sorted	.MuiDataGrid-columnHeader--sorted	Styles applied to the column header if the column is sorted.
columnHeader	.MuiDataGrid-columnHeader	Styles applied to the column header element.
columnHeaderCheckbox	.MuiDataGrid-columnHeaderCheckbox	Styles applied to the header checkbox cell element.
columnHeaderDraggableContainer	.MuiDataGrid-columnHeaderDraggableContainer	Styles applied to the column header's draggable container element.
columnHeaderDropZone	.MuiDataGrid-columnHeaderDropZone	Styles applied to the column headers wrapper if a column is being dragged.
columnHeaderTitle	.MuiDataGrid-columnHeaderTitle	Styles applied to the column header's title element;
columnHeaderTitleContainer	.MuiDataGrid-columnHeaderTitleContainer	Styles applied to the column header's title container element.
columnHeaderWrapper	.MuiDataGrid-columnHeaderWrapper	Styles applied to the column header's wrapper element.
columnsContainer	.MuiDataGrid-columnsContainer	Styles applied to the outer columns container element.
columnSeparator--resizable	.MuiDataGrid-columnSeparator--resizable	Styles applied to the column header separator if the column is resizable.
columnSeparator--resizing	.MuiDataGrid-columnSeparator--resizing	Styles applied to the column header separator if the column is being resized.
columnSeparator	.MuiDataGrid-columnSeparator	Styles applied to the column header separator element.
columnsPanel	.MuiDataGrid-columnsPanel	Styles applied to the columns panel element.
columnsPanelRow	.MuiDataGrid-columnsPanelRow	Styles applied to the columns panel row element.
panel	.MuiDataGrid-panel	Styles applied to the panel element.
panelHeader	.MuiDataGrid-panelHeader	Styles applied to the panel header element.
panelWrapper	.MuiDataGrid-panelWrapper	Styles applied to the panel wrapper element.
panelContent	.MuiDataGrid-panelContent	Styles applied to the panel content element.
panelFooter	.MuiDataGrid-panelFooter	Styles applied to the panel footer element.
paper	.MuiDataGrid-paper	Styles applied to the paper element.
editBooleanCell	.MuiDataGrid-editBooleanCell	Styles applied to root of the boolean edit component.
filterForm	.MuiDataGrid-filterForm	Styles applied to the root of the filter form component.
editInputCell	.MuiDataGrid-editInputCell	Styles applied to the root of the input component.
filterIcon	.MuiDataGrid-filterIcon	Styles applied to the filter icon element.
footerContainer	.MuiDataGrid-footerContainer	Styles applied to the footer container element.
iconButtonContainer	.MuiDataGrid-iconButtonContainer	Styles applied to the column header icon's container.
iconSeparator	.MuiDataGrid-iconSeparator	Styles applied to the column header separator icon element.
main	.MuiDataGrid-main	Styles applied to the main container element.
menu	.MuiDataGrid-menu	Styles applied to the menu element.
menuIcon	.MuiDataGrid-menuIcon	Styles applied to the menu icon element.
menuIconButton	.MuiDataGrid-menuIconButton	Styles applied to the menu icon button element.
menuOpen	.MuiDataGrid-menuOpen	Styles applied to the menu icon element if the menu is open.
menuList	.MuiDataGrid-menuList	Styles applied to the menu list element.
overlay	.MuiDataGrid-overlay	Styles applied to the overlay element.
virtualScroller	.MuiDataGrid-virtualScroller	Styles applied to the virtualization container.
virtualScrollerContent	.MuiDataGrid-virtualScrollerContent	Styles applied to the virtualization content.
virtualScrollerRenderZone	.MuiDataGrid-virtualScrollerRenderZone	Styles applied to the virtualization render zone.
root	.MuiDataGrid-root	Styles applied to the root element.
row--editable	.MuiDataGrid-row--editable	Styles applied to the row element if the row is editable.
row--editing	.MuiDataGrid-row--editing	Styles applied to the row element if the row is in edit mode.
row	.MuiDataGrid-row	Styles applied to the row element.
rowCount	.MuiDataGrid-rowCount	Styles applied to the footer row count element.
scrollArea	.MuiDataGrid-scrollArea	Styles applied to both scroll area elements.
scrollAreaLeft	.MuiDataGrid-scrollAreaLeft	Styles applied to the left scroll area element.
scrollAreaRight	.MuiDataGrid-scrollAreaRight	Styles applied to the right scroll area element.
selectedRowCount	.MuiDataGrid-selectedRowCount	Styles applied to the footer selected row count element.
sortIcon	.MuiDataGrid-sortIcon	Styles applied to the sort icon element.
toolbarContainer	.MuiDataGrid-toolbarContainer	Styles applied to the toolbar container element.
toolbarFilterList	.MuiDataGrid-toolbarFilterList	Styles applied to the toolbar filter list element.
viewport	.MuiDataGrid-viewport	Styles applied to the viewport element.
window	.MuiDataGrid-window	Styles applied to the window element.
withBorder	.MuiDataGrid-withBorder	Styles applied to both the cell and the column header if `showColumnRightBorder={true}`.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

Demos

DataGridPro