DataGrid API

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

Import

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

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		Set of columns of type GridColumns.
rows^*	Array<object>		Set of rows of type GridRowsProp.
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.
cellModesModel	object		Controls the modes of the cells.
checkboxSelection	bool	false	If `true`, the grid get a first column with a checkbox that allows to select rows.
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.
columnVisibilityModel	object		Set the column visibility model of the grid. If defined, the grid will ignore the `hide` property in GridColDef.
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.
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.
disableIgnoreModificationsIfProcessingProps	bool	false	If `true`, modification to a cell will not be discarded if the mode is changed from "edit" to "view" while processing props.
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.
experimentalFeatures	{ columnGrouping?: bool, newEditingApi?: bool, preventCommitWhileValidating?: bool, warnIfFocusStateIsNotSynced?: bool }		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.
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', quickFilterLogicOperator?: 'and' \| 'or', quickFilterValues?: array }		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.
getDetailPanelContent	func		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.
getEstimatedRowHeight	func		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.
getRowClassName	func		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.
getRowHeight	func		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.
getRowId	func		Return the id of a given GridRowModel.
getRowSpacing	func		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.
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.
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.
keepNonExistentRowsSelected	bool	false	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.
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	"error" ("warn" in dev mode)	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 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.
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<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.
onCellEditStart	func		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.
onCellEditStop	func		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.
onCellFocusOut	func		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.
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.
onCellModesModelChange	func		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.
onColumnHeaderClick	func		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.
onColumnHeaderDoubleClick	func		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.
onColumnHeaderEnter	func		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.
onColumnHeaderLeave	func		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.
onColumnHeaderOut	func		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.
onColumnHeaderOver	func		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.
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.
onColumnVisibilityChange	func		Deprecated - Use `onColumnVisibilityModelChange` instead. 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.
onColumnVisibilityModelChange	func		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.
onEditCellPropsChange	func		Deprecated - use `preProcessEditCellProps` from the `GridColDef` 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.
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.
onMenuClose	func		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.
onMenuOpen	func		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.
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.
onPreferencePanelClose	func		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.
onPreferencePanelOpen	func		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.
onProcessRowUpdateError	func		Callback called when `processRowUpdate` throws an error or rejects. Signature: `function(error: any) => void` error: The error thrown.
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 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.
onRowDoubleClick	func		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.
onRowEditCommit	func		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.
onRowEditStart	func		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.
onRowEditStop	func		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.
onRowModesModelChange	func		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.
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.
page	number	0	The zero-based index of the current page.
pageSize	number	100	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.
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.
processRowUpdate	func		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.
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 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.
rowHeight	number	52	Set the height in pixel of a row in the grid.
rowModesModel	object		Controls the modes of the rows.
rowSpacingType	'border' \| 'margin'	"margin"	Sets the type of space between rows added by `getRowSpacing`.
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.
selectionModel	number \| string \| array		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.
sx	Array<func \| object \| bool> \| func \| object		The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.

Slots

Name	Type	Default	Description
BaseButton	elementType	Button	The custom Button component used in the grid.
BaseCheckbox	elementType	Checkbox	The custom Checkbox component used in the grid for both header and cells.
BaseFormControl	elementType	FormControl	The custom FormControl component used in the grid.
BasePopper	elementType	Popper	The custom Popper component used in the grid.
BaseSelect	elementType	Select	The custom Select component used in the grid.
BaseSwitch	elementType	Switch	The custom Switch component used in the grid.
BaseTextField	elementType	TextField	The custom TextField component used in the grid.
BaseTooltip	elementType	Tooltip	The custom Tooltip component used in the grid.
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	GridCell	Component rendered for each cell.
ColumnFilteredIcon	elementType	GridFilterAltIcon	Icon displayed on the column header menu to show that a filter has been applied to the column.
ColumnHeaderFilterIconButton	elementType	GridColumnHeaderFilterIconButton	Filter icon component rendered in each column header.
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.
DetailPanelCollapseIcon	elementType	GridRemoveIcon	Icon displayed on the detail panel toggle column when expanded.
DetailPanelExpandIcon	elementType	GridAddIcon	Icon displayed on the detail panel toggle column when collapsed.
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.
FilterPanelDeleteIcon	elementType	GridCloseIcon	Icon displayed for deleting the filter from filter Panel.
Footer	elementType	GridFooter	Footer component rendered at the bottom of the grid viewport.
GroupingCriteriaCollapseIcon	elementType	GridExpandMoreIcon	Icon displayed on the grouping column when the children are expanded
GroupingCriteriaExpandIcon	elementType	GridKeyboardArrowRight	Icon displayed on the grouping column when the children are collapsed
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.
QuickFilterClearIcon	elementType	GridCloseIcon	Icon displayed on the quick filter reset input.
QuickFilterIcon	elementType	GridSearchIcon	Icon displayed on the quick filter input.
Row	elementType	GridRow	Component rendered for each row.
RowReorderIcon	elementType	GridDragIcon	Icon displayed on the `reorder` column type to reorder a row.
SkeletonCell	elementType	GridSkeletonCell	Component rendered for each skeleton cell.
Toolbar	elementType \| null	null	Toolbar component rendered inside the Header component.
TreeDataCollapseIcon	elementType	GridExpandMoreIcon	Icon displayed on the tree data toggling column when the children are expanded
TreeDataExpandIcon	elementType	GridKeyboardArrowRight	Icon displayed on the tree data toggling column when the children are collapsed

The ref is forwarded to the root element.

CSS

Rule name	Global class	Description
actionsCell	.MuiDataGrid-actionsCell	Styles applied to the root element of the cell with type="actions".
aggregationColumnHeader	.MuiDataGrid-aggregationColumnHeader	Styles applied to the root element of the column header when aggregated.
aggregationColumnHeader--alignLeft	.MuiDataGrid-aggregationColumnHeader--alignLeft	Styles applied to the root element of the header when aggregation if `headerAlign="left"`.
aggregationColumnHeader--alignCenter	.MuiDataGrid-aggregationColumnHeader--alignCenter	Styles applied to the root element of the header when aggregation if `headerAlign="center"`.
aggregationColumnHeader--alignRight	.MuiDataGrid-aggregationColumnHeader--alignRight	Styles applied to the root element of the header when aggregation if `headerAlign="right"`.
aggregationColumnHeaderLabel	.MuiDataGrid-aggregationColumnHeaderLabel	Styles applied to the aggregation label in the column header when aggregated.
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.
cellContent	.MuiDataGrid-cellContent	Styles applied to the element that wraps the cell content.
cellCheckbox	.MuiDataGrid-cellCheckbox	Styles applied to the cell checkbox element.
cellSkeleton	.MuiDataGrid-cellSkeleton	Styles applied to the skeleton cell 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--filtered	.MuiDataGrid-columnHeader--filtered	Styles applied to the column header if the column has a filter applied to it.
columnHeader	.MuiDataGrid-columnHeader	Styles applied to the column header element.
columnGroupHeader	.MuiDataGrid-columnGroupHeader	Styles applied to the column group 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.
rowReorderCellPlaceholder	.MuiDataGrid-rowReorderCellPlaceholder	Styles applied to the row's draggable placeholder element inside the special row reorder cell.
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.
columnHeaderTitleContainerContent	.MuiDataGrid-columnHeaderTitleContainerContent	Styles applied to the column header's title excepted buttons.
columnHeader--filledGroup	.MuiDataGrid-columnHeader--filledGroup	Styles applied to the column group header cell if not empty.
columnHeader--emptyGroup	.MuiDataGrid-columnHeader--emptyGroup	Styles applied to the empty column group header cell.
columnHeader--showColumnBorder	.MuiDataGrid-columnHeader--showColumnBorder	Styles applied to the column group header cell when show column border.
columnHeaders	.MuiDataGrid-columnHeaders	Styles applied to the column headers.
columnHeadersInner	.MuiDataGrid-columnHeadersInner	Styles applied to the column headers's inner element.
columnHeadersInner--scrollable	.MuiDataGrid-columnHeadersInner--scrollable	Styles applied to the column headers's inner element if there is a horizontal scrollbar.
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--sideLeft	.MuiDataGrid-columnSeparator--sideLeft	Styles applied to the column header separator if the side is "left".
columnSeparator--sideRight	.MuiDataGrid-columnSeparator--sideRight	Styles applied to the column header separator if the side is "right".
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.
detailPanel	.MuiDataGrid-detailPanel	Styles applied to the detail panel element.
detailPanels	.MuiDataGrid-detailPanels	Styles applied to the detail panels wrapper element.
detailPanelToggleCell	.MuiDataGrid-detailPanelToggleCell	Styles applied to the detail panel toggle cell element.
detailPanelToggleCell--expanded	.MuiDataGrid-detailPanelToggleCell--expanded	Styles applied to the detail panel toggle cell element if expanded.
footerCell	.MuiDataGrid-footerCell	Styles applied to the root element of the cell inside a footer row.
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.
filterFormDeleteIcon	.MuiDataGrid-filterFormDeleteIcon	Styles applied to the delete icon of the filter form component.
filterFormLinkOperatorInput	.MuiDataGrid-filterFormLinkOperatorInput	Styles applied to the link operator inout of the filter form component.
filterFormColumnInput	.MuiDataGrid-filterFormColumnInput	Styles applied to the column input of the filter form component.
filterFormOperatorInput	.MuiDataGrid-filterFormOperatorInput	Styles applied to the operator input of the filter form component.
filterFormValueInput	.MuiDataGrid-filterFormValueInput	Styles applied to the value input 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.
virtualScrollerContent--overflowed	.MuiDataGrid-virtualScrollerContent--overflowed	Styles applied to the virtualization content when its height is bigger than the virtualization container.
virtualScrollerRenderZone	.MuiDataGrid-virtualScrollerRenderZone	Styles applied to the virtualization render zone.
pinnedColumns	.MuiDataGrid-pinnedColumns	Styles applied to the pinned columns.
pinnedColumns--left	.MuiDataGrid-pinnedColumns--left	Styles applied to the left pinned columns.
pinnedColumns--right	.MuiDataGrid-pinnedColumns--right	Styles applied to the right pinned columns.
pinnedColumnHeaders	.MuiDataGrid-pinnedColumnHeaders	Styles applied to the pinned column headers.
pinnedColumnHeaders--left	.MuiDataGrid-pinnedColumnHeaders--left	Styles applied to the left pinned column headers.
pinnedColumnHeaders--right	.MuiDataGrid-pinnedColumnHeaders--right	Styles applied to the right pinned column headers.
root	.MuiDataGrid-root	Styles applied to the root element.
root--densityStandard	.MuiDataGrid-root--densityStandard	Styles applied to the root element if density is "standard" (default).
root--densityComfortable	.MuiDataGrid-root--densityComfortable	Styles applied to the root element if density is "comfortable".
root--densityCompact	.MuiDataGrid-root--densityCompact	Styles applied to the root element if density is "compact".
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--dragging	.MuiDataGrid-row--dragging	Styles applied to the floating special row reorder cell element when it is dragged.
row--lastVisible	.MuiDataGrid-row--lastVisible	Styles applied to the last visible row element on every page of the grid.
row--dynamicHeight	.MuiDataGrid-row--dynamicHeight	Styles applied to the row if it has dynamic row height.
row--detailPanelExpanded	.MuiDataGrid-row--detailPanelExpanded	Styles applied to the row if its detail panel is open.
row	.MuiDataGrid-row	Styles applied to the row element.
rowCount	.MuiDataGrid-rowCount	Styles applied to the footer row count element to show the total number of rows. Only works when pagination is disabled.
rowReorderCellContainer	.MuiDataGrid-rowReorderCellContainer	Styles applied to the row reorder cell container element.
rowReorderCell	.MuiDataGrid-rowReorderCell	Styles applied to the root element of the row reorder cell
rowReorderCell--draggable	.MuiDataGrid-rowReorderCell--draggable	Styles applied to the root element of the row reorder cell when dragging is allowed
scrollArea	.MuiDataGrid-scrollArea	Styles applied to both scroll area elements.
scrollArea--left	.MuiDataGrid-scrollArea--left	Styles applied to the left scroll area element.
scrollArea--right	.MuiDataGrid-scrollArea--right	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.
withBorder	.MuiDataGrid-withBorder	Styles applied to both the cell and the column header if `showColumnRightBorder={true}`.
treeDataGroupingCell	.MuiDataGrid-treeDataGroupingCell	Styles applied to the root of the grouping cell of the tree data.
treeDataGroupingCellToggle	.MuiDataGrid-treeDataGroupingCellToggle	Styles applied to the toggle of the grouping cell of the tree data.
groupingCriteriaCell	.MuiDataGrid-groupingCriteriaCell	Styles applied to the root element of the grouping criteria cell
groupingCriteriaCellToggle	.MuiDataGrid-groupingCriteriaCellToggle	Styles applied to the toggle of the grouping criteria cell
pinnedRows	.MuiDataGrid-pinnedRows	Styles applied to the pinned rows container.
pinnedRows--top	.MuiDataGrid-pinnedRows--top	Styles applied to the top pinned rows container.
pinnedRows--bottom	.MuiDataGrid-pinnedRows--bottom	Styles applied to the bottom pinned rows container.
pinnedRowsRenderZone	.MuiDataGrid-pinnedRowsRenderZone	Styles applied to pinned rows render zones.

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

DataGrid