Skip to content

DataGridPro API

API reference docs for the React DataGridPro component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

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

NameTypeDefaultDescription
columns*Array<object>
Set of columns of type GridColDef[].
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.
cellModesModelobject
Controls the modes of the cells.
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.
columnHeaderHeightnumber56
Sets the height in pixel of the column headers in the grid.
columnThresholdnumber3
Number of rows from the columnBuffer that can be visible before a new slice is rendered.
columnVisibilityModelobject
Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.
componentsobject
Overrideable components.
componentsPropsobject
Overrideable components props dynamically passed to the component at rendering.
defaultGroupingExpansionDepthnumber0
If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.
density'comfortable'
| 'compact'
| 'standard'
"standard"
Set the density of the grid.
detailPanelExpandedRowIdsArray<number
| string>
The row ids to show the detail panel.
disableChildrenFilteringboolfalse
If true, the filtering will only be applied to the top level rows when grouping rows with the treeData prop.
disableChildrenSortingboolfalse
If true, the sorting will only be applied to the top level rows when grouping rows with the treeData prop.
disableColumnFilterboolfalse
If true, column filters are disabled.
disableColumnMenuboolfalse
If true, the column menu is disabled.
disableColumnPinningboolfalse
If true, the column pinning 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.
disableMultipleColumnsFilteringboolfalse
If true, filtering with multiple columns is disabled.
disableMultipleColumnsSortingboolfalse
If true, sorting with multiple columns is disabled.
disableMultipleRowSelectionboolfalse
If true, multiple selection using the Ctrl or CMD key is disabled.
disableRowSelectionOnClickboolfalse
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.
experimentalFeatures{ columnGrouping?: bool, lazyLoading?: bool, rowPinning?: bool, warnIfFocusStateIsNotSynced?: bool }
Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to true, the feature will be fully disabled and any property / method call will not have any effect.
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<{ field: string, id?: number
| string, operator: string, value?: any }>, logicOperator?: 'and'
| 'or', quickFilterLogicOperator?: 'and'
| 'or', quickFilterValues?: array }
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.
getDetailPanelContentfunc
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.
getDetailPanelHeightfunc"() => 500"
Function that returns the height of the row detail panel.

Signature:
function(params: GridRowParams) => number | string
params: With all properties from GridRowParams.
returns (number | string): The height in pixels or "auto" to use the content height.
getEstimatedRowHeightfunc
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.
getRowClassNamefunc
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.
getRowHeightfunc
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.
getRowIdfunc
Return the id of a given GridRowModel.
getRowSpacingfunc
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.
getTreeDataPathfunc
Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element.

Signature:
function(row: R) => Array<string>
row: The row from which we want the path.
returns (Array): The path to the row.
groupingColDeffunc
| object
The grouping column used by the tree data.
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 DataGridPro. The data in it will be set in the state on initialization but will not be controlled. If one of the data in initialState is also being controlled, then the control state wins.
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.
isGroupExpandedByDefaultfunc
Determines if a group should be expanded after its creation. This prop takes priority over the defaultGroupingExpansionDepth prop.

Signature:
function(node: GridGroupNode) => boolean
node: The node of the group to test.
returns (boolean): A boolean indicating if the group is expanded.
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.
keepColumnPositionIfDraggedOutsideboolfalse
If true, moving the mouse pointer outside the grid before releasing the mouse button in a column re-order action will not cause the column to jump back to its original position.
keepNonExistentRowsSelectedboolfalse
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.
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
"error" ("warn" in dev mode)
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 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.
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.
onCellEditStartfunc
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.
onCellEditStopfunc
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.
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.
onCellModesModelChangefunc
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.
onColumnHeaderClickfunc
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.
onColumnHeaderDoubleClickfunc
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.
onColumnHeaderEnterfunc
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.
onColumnHeaderLeavefunc
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.
onColumnHeaderOutfunc
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.
onColumnHeaderOverfunc
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.
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<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnResizeParams.
event: The event object.
details: Additional details for this callback.
onColumnVisibilityModelChangefunc
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.
onColumnWidthChangefunc
Callback fired when the width of a column is changed.

Signature:
function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void
params: With all properties from GridColumnResizeParams.
event: The event object.
details: Additional details for this callback.
onDetailPanelExpandedRowIdsChangefunc
Callback fired when the detail panel of a row is opened or closed.

Signature:
function(ids: Array<GridRowId>, details: GridCallbackDetails) => void
ids: The ids of the rows which have the detail panel open.
details: Additional details for this callback.
onFetchRowsfunc
Callback fired when rowCount is set and the next batch of virtualized rows is rendered.

Signature:
function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridFetchRowsParams.
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.
onMenuClosefunc
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.
onMenuOpenfunc
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.
onPaginationModelChangefunc
Callback fired when the pagination model has changed.

Signature:
function(model: GridPaginationModel, details: GridCallbackDetails) => void
model: Updated pagination model.
details: Additional details for this callback.
onPinnedColumnsChangefunc
Callback fired when the pinned columns have changed.

Signature:
function(pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => void
pinnedColumns: The changed pinned columns.
details: Additional details for this callback.
onPreferencePanelClosefunc
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.
onPreferencePanelOpenfunc
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.
onProcessRowUpdateErrorfunc
Callback called when processRowUpdate throws an error or rejects.

Signature:
function(error: any) => void
error: The error thrown.
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 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.
onRowDoubleClickfunc
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.
onRowEditCommitfunc
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.
onRowEditStartfunc
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.
onRowEditStopfunc
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.
onRowModesModelChangefunc
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.
onRowOrderChangefunc
Callback fired when a row is being reordered.

Signature:
function(params: GridRowOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
params: With all properties from GridRowOrderChangeParams.
event: The event object.
details: Additional details for this callback.
onRowSelectionModelChangefunc
Callback fired when the selection state of one or multiple rows changes.

Signature:
function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void
rowSelectionModel: With all the row ids GridSelectionModel.
details: Additional details for this callback.
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.
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.
pageSizeOptionsArray<number>[25, 50, 100]
Select the pageSize dynamically using the component UI.
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.
paginationModel{ page: number, pageSize: number }
The pagination model of type GridPaginationModel which refers to current page and pageSize.
pinnedColumns{ left?: Array<string>, right?: Array<string> }
The column fields to display pinned to left or right.
pinnedRows{ bottom?: Array<object>, top?: Array<object> }
Rows data to pin on top or bottom.
processRowUpdatefunc
Callback called before updating a row with new values in the row and cell editing.

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.
rowBuffernumber3
Number of extra rows to be rendered before/after the visible slice.
rowCountnumber
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.
rowHeightnumber52
Sets the height in pixel of a row in the grid.
rowModesModelobject
Controls the modes of the rows.
rowReorderingboolfalse
If true, the reordering of rows is enabled.
rowSelectionbooltrue
If false, the row selection mode is disabled.
rowSelectionModelArray<number
| string>
| number
| string
Sets the row selection model of the grid.
rowsLoadingMode'client'
| 'server'
Loading rows can be processed on the server or client-side. Set it to 'client' if you would like enable infnite loading. Set it to 'server' if you would like to enable lazy loading. * @default "client"
rowSpacingType'border'
| 'margin'
"margin"
Sets the type of space between rows added by getRowSpacing.
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.
showCellVerticalBorderboolfalse
If true, the vertical borders of the cells are displayed.
showColumnVerticalBorderboolfalse
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.
sxArray<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.
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.
treeDataboolfalse
If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop.

Slots

NameTypeDefaultDescription
BaseButtonelementTypeButton
The custom Button component used in the grid.
BaseCheckboxelementTypeCheckbox
The custom Checkbox component used in the grid for both header and cells.
BaseFormControlelementTypeFormControl
The custom FormControl component used in the grid.
BaseIconButtonelementTypeIconButton
The custom IconButton component used in the grid.
BasePopperelementTypePopper
The custom Popper component used in the grid.
BaseSelectelementTypeSelect
The custom Select component used in the grid.
BaseSwitchelementTypeSwitch
The custom Switch component used in the grid.
BaseTextFieldelementTypeTextField
The custom TextField component used in the grid.
BaseTooltipelementTypeTooltip
The custom Tooltip component used in the grid.
BooleanCellFalseIconelementTypeGridCloseIcon
Icon displayed on the boolean cell to represent the false value.
BooleanCellTrueIconelementTypeGridCheckIcon
Icon displayed on the boolean cell to represent the true value.
CellelementTypeGridCell
Component rendered for each cell.
ColumnFilteredIconelementTypeGridFilterAltIcon
Icon displayed on the column header menu to show that a filter has been applied to the column.
ColumnHeaderFilterIconButtonelementTypeGridColumnHeaderFilterIconButton
Filter icon component rendered in each column header.
ColumnMenuelementTypeGridColumnMenu
Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
ColumnMenuClearIconelementTypeGridClearIcon
Icon displayed in column menu for clearing values
ColumnMenuFilterIconelementTypeGridFilterAltIcon
Icon displayed in column menu for filter
ColumnMenuHideIconelementTypeGridVisibilityOffIcon
Icon displayed in column menu for hiding column
ColumnMenuIconelementTypeGridTripleDotsVerticalIcon
Icon displayed on the side of the column header title to display the filter input component.
ColumnMenuManageColumnsIconelementTypeGridViewColumnIcon
Icon displayed in column menu for showing all columns
ColumnMenuPinLeftIconelementTypeGridPushPinLeftIcon
Icon displayed in column menu for left pinning
ColumnMenuPinRightIconelementTypeGridPushPinRightIcon
Icon displayed in column menu for right pinning
ColumnMenuSortAscendingIconelementTypeGridArrowUpwardIcon
Icon displayed in column menu for ascending sort
ColumnMenuSortDescendingIconelementTypeGridArrowDownwardIcon
Icon displayed in column menu for descending sort
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.
DetailPanelCollapseIconelementTypeGridRemoveIcon
Icon displayed on the detail panel toggle column when expanded.
DetailPanelExpandIconelementTypeGridAddIcon
Icon displayed on the detail panel toggle column when collapsed.
ExportIconelementTypeGridSaveAltIcon
Icon displayed on the open export button present in the toolbar by default.
FilterPanelelementTypeGridFilterPanel
Filter panel component rendered when clicking the filter button.
FilterPanelDeleteIconelementTypeGridCloseIcon
Icon displayed for deleting the filter from filter Panel.
FooterelementTypeGridFooter
Footer component rendered at the bottom of the grid viewport.
GroupingCriteriaCollapseIconelementTypeGridExpandMoreIcon
Icon displayed on the grouping column when the children are expanded
GroupingCriteriaExpandIconelementTypeGridKeyboardArrowRight
Icon displayed on the grouping column when the children are collapsed
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.
QuickFilterClearIconelementTypeGridCloseIcon
Icon displayed on the quick filter reset input.
QuickFilterIconelementTypeGridSearchIcon
Icon displayed on the quick filter input.
RowelementTypeGridRow
Component rendered for each row.
RowReorderIconelementTypeGridDragIcon
Icon displayed on the reorder column type to reorder a row.
SkeletonCellelementTypeGridSkeletonCell
Component rendered for each skeleton cell.
ToolbarelementType | nullnull
Toolbar component rendered inside the Header component.
TreeDataCollapseIconelementTypeGridExpandMoreIcon
Icon displayed on the tree data toggling column when the children are expanded
TreeDataExpandIconelementTypeGridKeyboardArrowRight
Icon displayed on the tree data toggling column when the children are collapsed
The ref is forwarded to the root element.

CSS

Rule nameGlobal classDescription
actionsCell.MuiDataGrid-actionsCellStyles applied to the root element of the cell with type="actions".
aggregationColumnHeader.MuiDataGrid-aggregationColumnHeaderStyles applied to the root element of the column header when aggregated.
aggregationColumnHeader--alignLeft.MuiDataGrid-aggregationColumnHeader--alignLeftStyles applied to the root element of the header when aggregation if headerAlign="left".
aggregationColumnHeader--alignCenter.MuiDataGrid-aggregationColumnHeader--alignCenterStyles applied to the root element of the header when aggregation if headerAlign="center".
aggregationColumnHeader--alignRight.MuiDataGrid-aggregationColumnHeader--alignRightStyles applied to the root element of the header when aggregation if headerAlign="right".
aggregationColumnHeaderLabel.MuiDataGrid-aggregationColumnHeaderLabelStyles applied to the aggregation label in the column header when aggregated.
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--rangeTop.MuiDataGrid-cell--rangeTopStyles applied to the cell element if it is at the top edge of a cell selection range.
cell--rangeBottom.MuiDataGrid-cell--rangeBottomStyles applied to the cell element if it is at the bottom edge of a cell selection range.
cell--rangeLeft.MuiDataGrid-cell--rangeLeftStyles applied to the cell element if it is at the left edge of a cell selection range.
cell--rangeRight.MuiDataGrid-cell--rangeRightStyles applied to the cell element if it is at the right edge of a cell selection range.
cell.MuiDataGrid-cellStyles applied to the cell element.
cellContent.MuiDataGrid-cellContentStyles applied to the element that wraps the cell content.
cellCheckbox.MuiDataGrid-cellCheckboxStyles applied to the cell checkbox element.
cellSkeleton.MuiDataGrid-cellSkeletonStyles applied to the skeleton cell 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--filtered.MuiDataGrid-columnHeader--filteredStyles applied to the column header if the column has a filter applied to it.
columnHeader.MuiDataGrid-columnHeaderStyles applied to the column header element.
columnGroupHeader.MuiDataGrid-columnGroupHeaderStyles applied to the column group header element.
columnHeaderCheckbox.MuiDataGrid-columnHeaderCheckboxStyles applied to the header checkbox cell element.
columnHeaderDraggableContainer.MuiDataGrid-columnHeaderDraggableContainerStyles applied to the column header's draggable container element.
rowReorderCellPlaceholder.MuiDataGrid-rowReorderCellPlaceholderStyles applied to the row's draggable placeholder element inside the special row reorder cell.
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.
columnHeaderTitleContainerContent.MuiDataGrid-columnHeaderTitleContainerContentStyles applied to the column header's title excepted buttons.
columnHeader--filledGroup.MuiDataGrid-columnHeader--filledGroupStyles applied to the column group header cell if not empty.
columnHeader--emptyGroup.MuiDataGrid-columnHeader--emptyGroupStyles applied to the empty column group header cell.
columnHeader--showColumnBorder.MuiDataGrid-columnHeader--showColumnBorderStyles applied to the column group header cell when show column border.
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--sideLeft.MuiDataGrid-columnSeparator--sideLeftStyles applied to the column header separator if the side is "left".
columnSeparator--sideRight.MuiDataGrid-columnSeparator--sideRightStyles applied to the column header separator if the side is "right".
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.
detailPanel.MuiDataGrid-detailPanelStyles applied to the detail panel element.
detailPanels.MuiDataGrid-detailPanelsStyles applied to the detail panels wrapper element.
detailPanelToggleCell.MuiDataGrid-detailPanelToggleCellStyles applied to the detail panel toggle cell element.
detailPanelToggleCell--expanded.MuiDataGrid-detailPanelToggleCell--expandedStyles applied to the detail panel toggle cell element if expanded.
footerCell.MuiDataGrid-footerCellStyles applied to the root element of the cell inside a footer row.
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.
filterFormDeleteIcon.MuiDataGrid-filterFormDeleteIconStyles applied to the delete icon of the filter form component.
filterFormLogicOperatorInput.MuiDataGrid-filterFormLogicOperatorInputStyles applied to the link operator inout of the filter form component.
filterFormColumnInput.MuiDataGrid-filterFormColumnInputStyles applied to the column input of the filter form component.
filterFormOperatorInput.MuiDataGrid-filterFormOperatorInputStyles applied to the operator input of the filter form component.
filterFormValueInput.MuiDataGrid-filterFormValueInputStyles applied to the value input 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.
overlayWrapper.MuiDataGrid-overlayWrapperStyles applied to the overlay wrapper element.
overlayWrapperInner.MuiDataGrid-overlayWrapperInnerStyles applied to the overlay wrapper inner 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.
virtualScrollerContent--overflowed.MuiDataGrid-virtualScrollerContent--overflowedStyles applied to the virtualization content when its height is bigger than the virtualization container.
virtualScrollerRenderZone.MuiDataGrid-virtualScrollerRenderZoneStyles applied to the virtualization render zone.
pinnedColumns.MuiDataGrid-pinnedColumnsStyles applied to the pinned columns.
pinnedColumns--left.MuiDataGrid-pinnedColumns--leftStyles applied to the left pinned columns.
pinnedColumns--right.MuiDataGrid-pinnedColumns--rightStyles applied to the right pinned columns.
pinnedColumnHeaders.MuiDataGrid-pinnedColumnHeadersStyles applied to the pinned column headers.
pinnedColumnHeaders--left.MuiDataGrid-pinnedColumnHeaders--leftStyles applied to the left pinned column headers.
pinnedColumnHeaders--right.MuiDataGrid-pinnedColumnHeaders--rightStyles applied to the right pinned column headers.
root.MuiDataGrid-rootStyles applied to the root element.
root--densityStandard.MuiDataGrid-root--densityStandardStyles applied to the root element if density is "standard" (default).
root--densityComfortable.MuiDataGrid-root--densityComfortableStyles applied to the root element if density is "comfortable".
root--densityCompact.MuiDataGrid-root--densityCompactStyles applied to the root element if density is "compact".
root--disableUserSelection.MuiDataGrid-root--disableUserSelectionStyles applied to the root element when user selection is disabled.
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--dragging.MuiDataGrid-row--draggingStyles applied to the floating special row reorder cell element when it is dragged.
row--lastVisible.MuiDataGrid-row--lastVisibleStyles applied to the last visible row element on every page of the grid.
row--dynamicHeight.MuiDataGrid-row--dynamicHeightStyles applied to the row if it has dynamic row height.
row--detailPanelExpanded.MuiDataGrid-row--detailPanelExpandedStyles applied to the row if its detail panel is open.
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.
rowReorderCellContainer.MuiDataGrid-rowReorderCellContainerStyles applied to the row reorder cell container element.
rowReorderCell.MuiDataGrid-rowReorderCellStyles applied to the root element of the row reorder cell
rowReorderCell--draggable.MuiDataGrid-rowReorderCell--draggableStyles applied to the root element of the row reorder cell when dragging is allowed
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.
withBorderColor.MuiDataGrid-withBorderColorStyles applied to cells, column header and other elements that have border. Sets border color only.
cell--withRightBorder.MuiDataGrid-cell--withRightBorderStyles applied the cell if `showColumnVerticalBorder={true}`.
columnHeader--withRightBorder.MuiDataGrid-columnHeader--withRightBorderStyles applied the column header if `showColumnVerticalBorder={true}`.
treeDataGroupingCell.MuiDataGrid-treeDataGroupingCellStyles applied to the root of the grouping column of the tree data.
treeDataGroupingCellToggle.MuiDataGrid-treeDataGroupingCellToggleStyles applied to the toggle of the grouping cell of the tree data.
groupingCriteriaCell.MuiDataGrid-groupingCriteriaCellStyles applied to the root element of the grouping criteria cell
groupingCriteriaCellToggle.MuiDataGrid-groupingCriteriaCellToggleStyles applied to the toggle of the grouping criteria cell
pinnedRows.MuiDataGrid-pinnedRowsStyles applied to the pinned rows container.
pinnedRows--top.MuiDataGrid-pinnedRows--topStyles applied to the top pinned rows container.
pinnedRows--bottom.MuiDataGrid-pinnedRows--bottomStyles applied to the bottom pinned rows container.
pinnedRowsRenderZone.MuiDataGrid-pinnedRowsRenderZoneStyles applied to pinned rows render zones.

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