跳转到内容

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.

属性

名称类型默认值描述
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-labelstring
The label of the grid.
aria-labelledbystring
The id of the element containing a label for the grid.
autoHeightboolfalse
If true, the grid height is dynamic and follow the number of rows in the grid.
autoPageSizeboolfalse
If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.
checkboxSelectionboolfalse
If true, the grid get a first column with a checkbox that allows to select rows.
checkboxSelectionVisibleOnlyboolfalse
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.
classesobject
Override or extend the styles applied to the component. See CSS API below for more details.
columnBuffernumber3
Number of extra columns to be rendered before/after the visible slice.
columnThresholdnumber3
Number of rows from the columnBuffer that can be visible before a new slice is rendered.
columnTypesobject
Extend native column types with your new column types.
componentsobject
Overrideable components.
componentsPropsobject
Overrideable components props dynamically passed to the component at rendering.
density'comfortable'
| 'compact'
| 'standard'
"standard"
Set the density of the grid.
disableChildrenFilteringboolfalse
If true, the filtering will only be applied to the top level rows.
disableChildrenSortingboolfalse
If true, the sorting will only be applied to the top level rows.
disableColumnFilterboolfalse
If true, column filters are disabled.
disableColumnMenuboolfalse
If true, the column menu is disabled.
disableColumnReorderboolfalse
If true, reordering columns is disabled.
disableColumnResizeboolfalse
If true, resizing columns is disabled.
disableColumnSelectorboolfalse
If true, hiding/showing columns is disabled.
disableDensitySelectorboolfalse
If true, the density selector is disabled.
disableExtendRowFullWidthboolfalse
If true, rows will not be extended to fill the full width of the grid container.
disableMultipleColumnsFilteringboolfalse
If true, filtering with multiple columns is disabled.
disableMultipleColumnsSortingboolfalse
If true, sorting with multiple columns is disabled.
disableMultipleSelectionboolfalse
If true, multiple selection using the CTRL or CMD key is disabled.
disableSelectionOnClickboolfalse
If true, the selection on click on a row or cell is disabled.
disableVirtualizationboolfalse
If true, the virtualization is disabled.
editMode'cell'
| 'row'
"cell"
Controls whether to use the cell or row editing.
editRowsModelobject
Set the edit rows model of the grid.
errorany
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.
getCellClassNamefunc
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.
getRowClassNamefunc
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.
getRowIdfunc
Return the id of a given GridRowModel.
headerHeightnumber56
Set the height in pixel of the column headers in the grid.
hideFooterboolfalse
If true, the footer component is hidden.
hideFooterPaginationboolfalse
If true, the pagination component in the footer is hidden.
hideFooterRowCountboolfalse
If true, the row count in the footer is hidden. It has no effect if the pagination is enabled.
hideFooterSelectedRowCountboolfalse
If true, the selected row count in the footer is hidden.
initialStateobject
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.
isCellEditablefunc
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.
isRowSelectablefunc
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.
loadingboolfalse
If true, a loading overlay is displayed.
localeTextobject
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.
noncestring
Nonce of the inline styles for Content Security Policy.
onCellClickfunc
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.
onCellDoubleClickfunc
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.
onCellEditCommitfunc
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.
onCellEditStartfunc
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.
onCellEditStopfunc
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.
onCellFocusOutfunc
Callback fired when a cell loses focus.

Signature:
function(params: GridCellParams) => void
params: With all properties from GridCellParams.
onCellKeyDownfunc
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.
onCellValueChangefunc
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.
onColumnHeaderClickfunc
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.
onColumnHeaderDoubleClickfunc
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.
onColumnHeaderEnterfunc
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.
onColumnHeaderLeavefunc
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.
onColumnHeaderOutfunc
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.
onColumnHeaderOverfunc
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.
onColumnOrderChangefunc
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.
onColumnResizefunc
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.
onColumnVisibilityChangefunc
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.
onColumnWidthChangefunc
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.
onEditCellPropsChangefunc
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.
onEditRowsModelChangefunc
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.
onErrorfunc
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.
onFilterModelChangefunc
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.
onPageChangefunc
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.
onPageSizeChangefunc
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.
onResizefunc
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.
onRowClickfunc
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.
onRowDoubleClickfunc
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.
onRowEditCommitfunc
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.
onRowEditStartfunc
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.
onRowEditStopfunc
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.
onRowsScrollEndfunc
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.
onSelectionModelChangefunc
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.
onSortModelChangefunc
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.
onStateChangefunc
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.
pagenumber0
The zero-based index of the current page.
pageSizenumber100
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.
paginationboolfalse
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.
rowBuffernumber3
Number of extra rows to be rendered before/after the visible slice.
rowCountnumber
Set the total number of rows, if it is different than the length of the value rows prop. If some of the rows have children (for instance in the tree data), this number represents the amount of top level rows.
rowHeightnumber52
Set the height in pixel of a row in the grid.
rowsPerPageOptionsArray<number>[25, 50, 100]
Select the pageSize dynamically using the component UI.
rowThresholdnumber3
Number of rows from the rowBuffer that can be visible before a new slice is rendered.
scrollbarSizenumber
Override the height/width of the grid inner scrollbar.
scrollEndThresholdnumber80
Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called.
selectionModelArray<number
| string>
| number
| string
Set the selection model of the grid.
showCellRightBorderboolfalse
If true, the right border of the cells are displayed.
showColumnRightBorderboolfalse
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.
sortingOrderArray<'asc'
| 'desc'>
['asc', 'desc', null]
The order of the sorting sequence.
sortModelArray<{ field: string, sort?: 'asc'
| 'desc' }>
Set the sort model of the grid.
throttleRowsMsnumber0
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

名称类型默认值描述
BaseCheckboxelementTypeCheckbox
The custom Checkbox component used in the grid for both header and cells.
BooleanCellFalseIconelementTypeGridCloseIcon
Icon displayed on the boolean cell to represent the false value.
BooleanCellTrueIconelementTypeGridCheckIcon
Icon displayed on the boolean cell to represent the true value.
CellelementType
Component rendered for each cell.
ColumnFilteredIconelementTypeGridFilterAltIcon
Icon displayed on the column header menu to show that a filter has been applied to the column.
ColumnMenuelementTypeGridColumnMenu
Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
ColumnMenuIconelementTypeGridTripleDotsVerticalIcon
Icon displayed on the side of the column header title to display the filter input component.
ColumnResizeIconelementTypeGridSeparatorIcon
Icon displayed in between two column headers that allows to resize the column header.
ColumnSelectorIconelementTypeGridColumnIcon
Icon displayed on the column menu selector tab.
ColumnSortedAscendingIconelementType | nullGridArrowUpwardIcon
Icon displayed on the side of the column header title when sorted in ascending order.
ColumnSortedDescendingIconelementType | nullGridArrowDownwardIcon
Icon displayed on the side of the column header title when sorted in descending order.
ColumnsPanelelementTypeGridColumnsPanel
GridColumns panel component rendered when clicking the columns button.
ColumnUnsortedIconelementType | nullGridColumnUnsortedIcon
Icon displayed on the side of the column header title when unsorted.
DensityComfortableIconelementTypeGridViewStreamIcon
Icon displayed on the "comfortable" density option in the toolbar.
DensityCompactIconelementTypeGridViewHeadlineIcon
Icon displayed on the compact density option in the toolbar.
DensityStandardIconelementTypeGridTableRowsIcon
Icon displayed on the standard density option in the toolbar.
ErrorOverlayelementTypeErrorOverlay
Error overlay component rendered above the grid when an error is caught.
ExportIconelementTypeGridSaveAltIcon
Icon displayed on the open export button present in the toolbar by default.
FilterPanelelementTypeGridFilterPanel
Filter panel component rendered when clicking the filter button.
FooterelementTypeGridFooter
Footer component rendered at the bottom of the grid viewport.
HeaderelementTypeGridHeader
Header component rendered above the grid column header bar. Prefer using the Toolbar slot. You should never need to use this slot.
LoadingOverlayelementTypeGridLoadingOverlay
Loading overlay component rendered when the grid is in a loading state.
MoreActionsIconelementTypeGridMoreVertIcon
Icon displayed on the actions column type to open the menu.
NoResultsOverlayelementTypeGridNoResultsOverlay
No results overlay component rendered when the grid has no results after filtering.
NoRowsOverlayelementTypeGridNoRowsOverlay
No rows overlay component rendered when the grid has no rows.
OpenFilterButtonIconelementTypeGridFilterListIcon
Icon displayed on the open filter button present in the toolbar by default.
PaginationelementType | nullPagination
Pagination component rendered in the grid footer by default.
PanelelementTypeGridPanel
Panel component wrapping the filters and columns panels.
PreferencesPanelelementTypeGridPreferencesPanel
PreferencesPanel component rendered inside the Header component.
RowelementType
Component rendered for each row.
ToolbarelementType | nullnull
Toolbar component rendered inside the Header component.
ref 则会被传递到根元素中。

CSS

Rule nameGlobal class描述
autoHeight.MuiDataGrid-autoHeightStyles applied to the root element if autoHeight={true}.
booleanCell.MuiDataGrid-booleanCellStyles applied to the icon of the boolean cell.
cell--editable.MuiDataGrid-cell--editableStyles applied to the cell element if the cell is editable.
cell--editing.MuiDataGrid-cell--editingStyles applied to the cell element if the cell is in edit mode.
cell--textCenter.MuiDataGrid-cell--textCenterStyles applied to the cell element if align="center".
cell--textLeft.MuiDataGrid-cell--textLeftStyles applied to the cell element if align="left".
cell--textRight.MuiDataGrid-cell--textRightStyles applied to the cell element if align="right".
cell--withRenderer.MuiDataGrid-cell--withRendererStyles applied to the cell element if the cell has a custom renderer.
cell.MuiDataGrid-cellStyles applied to the cell element.
cellCheckbox.MuiDataGrid-cellCheckboxStyles applied to the cell checkbox element.
checkboxInput.MuiDataGrid-checkboxInputStyles applied to the selection checkbox element.
columnHeader--alignCenter.MuiDataGrid-columnHeader--alignCenterStyles applied to the column header if headerAlign="center".
columnHeader--alignLeft.MuiDataGrid-columnHeader--alignLeftStyles applied to the column header if headerAlign="left".
columnHeader--alignRight.MuiDataGrid-columnHeader--alignRightStyles applied to the column header if headerAlign="right".
columnHeader--dragging.MuiDataGrid-columnHeader--draggingStyles applied to the floating column header element when it is dragged.
columnHeader--moving.MuiDataGrid-columnHeader--movingStyles applied to the column header if it is being dragged.
columnHeader--numeric.MuiDataGrid-columnHeader--numericStyles applied to the column header if the type of the column is number.
columnHeader--sortable.MuiDataGrid-columnHeader--sortableStyles applied to the column header if the column is sortable.
columnHeader--sorted.MuiDataGrid-columnHeader--sortedStyles applied to the column header if the column is sorted.
columnHeader.MuiDataGrid-columnHeaderStyles applied to the column header element.
columnHeaderCheckbox.MuiDataGrid-columnHeaderCheckboxStyles applied to the header checkbox cell element.
columnHeaderDraggableContainer.MuiDataGrid-columnHeaderDraggableContainerStyles applied to the column header's draggable container element.
columnHeaderDropZone.MuiDataGrid-columnHeaderDropZoneStyles applied to the column headers wrapper if a column is being dragged.
columnHeaderTitle.MuiDataGrid-columnHeaderTitleStyles applied to the column header's title element;
columnHeaderTitleContainer.MuiDataGrid-columnHeaderTitleContainerStyles applied to the column header's title container element.
columnHeaders.MuiDataGrid-columnHeadersStyles applied to the column headers.
columnHeadersInner.MuiDataGrid-columnHeadersInnerStyles applied to the column headers's inner element.
columnHeadersInner--scrollable.MuiDataGrid-columnHeadersInner--scrollableStyles applied to the column headers's inner element if there is a horizontal scrollbar.
columnSeparator--resizable.MuiDataGrid-columnSeparator--resizableStyles applied to the column header separator if the column is resizable.
columnSeparator--resizing.MuiDataGrid-columnSeparator--resizingStyles applied to the column header separator if the column is being resized.
columnSeparator.MuiDataGrid-columnSeparatorStyles applied to the column header separator element.
columnsPanel.MuiDataGrid-columnsPanelStyles applied to the columns panel element.
columnsPanelRow.MuiDataGrid-columnsPanelRowStyles applied to the columns panel row element.
panel.MuiDataGrid-panelStyles applied to the panel element.
panelHeader.MuiDataGrid-panelHeaderStyles applied to the panel header element.
panelWrapper.MuiDataGrid-panelWrapperStyles applied to the panel wrapper element.
panelContent.MuiDataGrid-panelContentStyles applied to the panel content element.
panelFooter.MuiDataGrid-panelFooterStyles applied to the panel footer element.
paper.MuiDataGrid-paperStyles applied to the paper element.
editBooleanCell.MuiDataGrid-editBooleanCellStyles applied to root of the boolean edit component.
filterForm.MuiDataGrid-filterFormStyles applied to the root of the filter form component.
editInputCell.MuiDataGrid-editInputCellStyles applied to the root of the input component.
filterIcon.MuiDataGrid-filterIconStyles applied to the filter icon element.
footerContainer.MuiDataGrid-footerContainerStyles applied to the footer container element.
iconButtonContainer.MuiDataGrid-iconButtonContainerStyles applied to the column header icon's container.
iconSeparator.MuiDataGrid-iconSeparatorStyles applied to the column header separator icon element.
main.MuiDataGrid-mainStyles applied to the main container element.
menu.MuiDataGrid-menuStyles applied to the menu element.
menuIcon.MuiDataGrid-menuIconStyles applied to the menu icon element.
menuIconButton.MuiDataGrid-menuIconButtonStyles applied to the menu icon button element.
menuOpen.MuiDataGrid-menuOpenStyles applied to the menu icon element if the menu is open.
menuList.MuiDataGrid-menuListStyles applied to the menu list element.
overlay.MuiDataGrid-overlayStyles applied to the overlay element.
virtualScroller.MuiDataGrid-virtualScrollerStyles applied to the virtualization container.
virtualScrollerContent.MuiDataGrid-virtualScrollerContentStyles applied to the virtualization content.
virtualScrollerRenderZone.MuiDataGrid-virtualScrollerRenderZoneStyles applied to the virtualization render zone.
root.MuiDataGrid-rootStyles applied to the root element.
row--editable.MuiDataGrid-row--editableStyles applied to the row element if the row is editable.
row--editing.MuiDataGrid-row--editingStyles applied to the row element if the row is in edit mode.
row.MuiDataGrid-rowStyles applied to the row element.
rowCount.MuiDataGrid-rowCountStyles applied to the footer row count element to show the total number of rows. Only works when pagination is disabled.
scrollArea.MuiDataGrid-scrollAreaStyles applied to both scroll area elements.
scrollArea--left.MuiDataGrid-scrollArea--leftStyles applied to the left scroll area element.
scrollArea--right.MuiDataGrid-scrollArea--rightStyles applied to the right scroll area element.
selectedRowCount.MuiDataGrid-selectedRowCountStyles applied to the footer selected row count element.
sortIcon.MuiDataGrid-sortIconStyles applied to the sort icon element.
toolbarContainer.MuiDataGrid-toolbarContainerStyles applied to the toolbar container element.
toolbarFilterList.MuiDataGrid-toolbarFilterListStyles applied to the toolbar filter list element.
withBorder.MuiDataGrid-withBorderStyles 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:

Demos