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';Component name
The nameMuiDataGrid can be used when providing default props or style overrides in the theme.Props
| Name | Type | Default | Description |
|---|---|---|---|
| columns* | Array<object> | Set of columns of type GridColumns. | |
| rows* | Array<object> | Set of rows of type GridRowsProp. | |
| apiRef | { current: object } | The ref object that allows grid manipulation. Can be instantiated with useGridApiRef(). | |
| aria-label | string | The label of the grid. | |
| aria-labelledby | string | The id of the element containing a label for the grid. | |
| autoHeight | bool | false | If true, the grid height is dynamic and follow the number of rows in the grid. |
| autoPageSize | bool | false | If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar. |
| checkboxSelection | bool | false | If true, the grid get a first column with a checkbox that allows to select rows. |
| checkboxSelectionVisibleOnly | bool | false | If true, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with checkboxSelection. It only works if the pagination is enabled. |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| columnBuffer | number | 3 | Number of extra columns to be rendered before/after the visible slice. |
| columnThreshold | number | 3 | Number of rows from the columnBuffer that can be visible before a new slice is rendered. |
| columnTypes | object | Extend native column types with your new column types. | |
| components | object | Overrideable components. | |
| componentsProps | object | Overrideable components props dynamically passed to the component at rendering. | |
| defaultGroupingExpansionDepth | number | 0 | 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. |
| disableChildrenFiltering | bool | false | If true, the filtering will only be applied to the top level rows. |
| disableChildrenSorting | bool | false | If true, the sorting will only be applied to the top level rows. |
| disableColumnFilter | bool | false | If true, column filters are disabled. |
| disableColumnMenu | bool | false | If true, the column menu is disabled. |
| disableColumnPinning | bool | false | If true, the column pinning is disabled. |
| disableColumnReorder | bool | false | If true, reordering columns is disabled. |
| disableColumnResize | bool | false | If true, resizing columns is disabled. |
| disableColumnSelector | bool | false | If true, hiding/showing columns is disabled. |
| disableDensitySelector | bool | false | If true, the density selector is disabled. |
| disableExtendRowFullWidth | bool | false | If true, rows will not be extended to fill the full width of the grid container. |
| disableMultipleColumnsFiltering | bool | false | If true, filtering with multiple columns is disabled. |
| disableMultipleColumnsSorting | bool | false | If true, sorting with multiple columns is disabled. |
| disableMultipleSelection | bool | false | If true, multiple selection using the CTRL or CMD key is disabled. |
| disableSelectionOnClick | bool | false | If true, the selection on click on a row or cell is disabled. |
| disableVirtualization | bool | false | If true, the virtualization is disabled. |
| editMode | 'cell' | 'row' | "cell" | Controls whether to use the cell or row editing. |
| editRowsModel | object | Set the edit rows model of the grid. | |
| error | any | An error that will turn the grid into its error state and display the error component. | |
| filterMode | 'client' | 'server' | "client" | Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side. |
| filterModel | { items: Array<{ columnField: string, id?: number | string, operatorValue?: string, value?: any }>, linkOperator?: 'and' | 'or' } | Set the filter model of the grid. | |
| getCellClassName | func | Function that applies CSS classes dynamically on cells. Signature: function(params: GridCellParams) => stringparams: With all properties from GridCellParams. returns (string): The CSS class to apply to the cell. | |
| getRowClassName | func | Function that applies CSS classes dynamically on rows. Signature: function(params: GridRowParams) => stringparams: With all properties from GridRowParams. returns (string): The CSS class to apply to the row. | |
| getRowId | func | Return the id of a given GridRowModel. | |
| getTreeDataPath | func | 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: GridRowModel) => Array<string>row: The row from which we want the path. returns (Array | |
| groupingColDef | func | object | The grouping column used by the tree data. | |
| headerHeight | number | 56 | Set the height in pixel of the column headers in the grid. |
| hideFooter | bool | false | If true, the footer component is hidden. |
| hideFooterPagination | bool | false | If true, the pagination component in the footer is hidden. |
| hideFooterRowCount | bool | false | If true, the row count in the footer is hidden. It has no effect if the pagination is enabled. |
| hideFooterSelectedRowCount | bool | false | If true, the selected row count in the footer is hidden. |
| initialState | object | The initial state of the DataGrid. The data in it will be set in the state on initialization but will not be controlled. If one of the data in initialState is also being controlled, then the control state wins. | |
| isCellEditable | func | Callback fired when a cell is rendered, returns true if the cell is editable. Signature: function(params: GridCellParams) => booleanparams: With all properties from GridCellParams. returns (boolean): A boolean indicating if the cell is editable. | |
| isGroupExpandedByDefault | func | Determines if a group should be expanded after its creation. This prop takes priority over the defaultGroupingExpansionDepth prop.Signature: function(node: GridRowTreeNodeConfig) => booleannode: The node of the group to test. returns (boolean): A boolean indicating if the group is expanded. | |
| isRowSelectable | func | Determines if a row can be selected. Signature: function(params: GridRowParams) => booleanparams: With all properties from GridRowParams. returns (boolean): A boolean indicating if the cell is selectable. | |
| loading | bool | false | If true, a loading overlay is displayed. |
| localeText | object | Set the locale text of the grid. You can find all the translation keys supported in the source in the GitHub repository. | |
| logger | { debug: func, error: func, info: func, warn: func } | console | Pass a custom logger in the components that implements the Logger interface. |
| logLevel | 'debug' | 'error' | 'info' | 'warn' | false | "debug" | Allows to pass the logging level or false to turn off logging. |
| nonce | string | Nonce of the inline styles for Content Security Policy. | |
| onCellClick | func | Callback fired when a click event comes from a cell element. Signature: function(params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => voidparams: 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) => voidparams: 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) => voidparams: 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>) => voidparams: 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>) => voidparams: 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) => voidparams: 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) => voidparams: With all properties from GridCellParams. event: The event object. details: Additional details for this callback. | |
| onColumnHeaderClick | func | Callback fired when a click event comes from a column header element. Signature: function(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => voidparams: 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) => voidparams: 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) => voidparams: 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) => voidparams: 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) => voidparams: 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) => voidparams: 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) => voidparams: With all properties from GridColumnOrderChangeParams. event: The event object. details: Additional details for this callback. | |
| onColumnResize | func | Callback fired while a column is being resized. Signature: function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => voidparams: With all properties from GridColumnResizeParams. event: The event object. details: Additional details for this callback. | |
| onColumnVisibilityChange | func | Callback fired when a column visibility changes. Signature: function(params: GridColumnVisibilityChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparams: With all properties from GridColumnVisibilityChangeParams. event: The event object. details: Additional details for this callback. | |
| onColumnWidthChange | func | Callback fired when the width of a column is changed. Signature: function(params: GridColumnResizeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => voidparams: With all properties from GridColumnResizeParams. event: The event object. details: Additional details for this callback. | |
| onEditCellPropsChange | func | Callback fired when the edit cell value changes. Signature: function(params: GridEditCellPropsParams, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => voidparams: 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) => voideditRowsModel: 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) => voidargs: 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) => voidmodel: With all properties from GridFilterModel. details: Additional details for this callback. | |
| onPageChange | func | Callback fired when the current page has changed. Signature: function(page: number, details: GridCallbackDetails) => voidpage: 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) => voidpageSize: Size of the page displayed on the Grid. details: Additional details for this callback. | |
| onPinnedColumnsChange | func | Callback fired when the pinned columns have changed. Signature: function(pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => voidpinnedColumns: The changed pinned columns. details: Additional details for this callback. | |
| onResize | func | Callback fired when the grid is resized. Signature: function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => voidcontainerSize: With all properties from ElementSize. event: The event object. details: Additional details for this callback. | |
| onRowClick | func | Callback fired when a click event comes from a row container element. Signature: function(params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => voidparams: 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) => voidparams: 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>) => voidid: 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>) => voidparams: 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>) => voidparams: With all properties from GridRowParams. event: The event that caused this prop to be called. | |
| onRowsScrollEnd | func | Callback fired when scrolling to the bottom of the grid viewport. Signature: function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparams: With all properties from GridRowScrollEndParams. event: The event object. details: Additional details for this callback. | |
| onSelectionModelChange | func | Callback fired when the selection state of one or multiple rows changes. Signature: function(selectionModel: GridSelectionModel, details: GridCallbackDetails) => voidselectionModel: 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) => voidmodel: With all properties from GridSortModel. details: Additional details for this callback. | |
| onStateChange | func | Callback fired when the state of the grid is updated. Signature: function(state: GridState, event: MuiEvent<{}>, details: GridCallbackDetails) => voidstate: The new state. event: The event object. details: Additional details for this callback. | |
| page | number | 0 | The zero-based index of the current page. |
| pageSize | number | 100 | Set the number of rows in one page. 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. |
| pagination | bool | false | If true, pagination is enabled. |
| paginationMode | 'client' | 'server' | "client" | Pagination can be processed on the server or client-side. Set it to 'client' if you would like to handle the pagination on the client-side. Set it to 'server' if you would like to handle the pagination on the server-side. |
| pinnedColumns | { left?: Array<string>, right?: Array<string> } | The column fields to display pinned to left or right. | |
| rowBuffer | number | 3 | Number of extra rows to be rendered before/after the visible slice. |
| rowCount | number | Set the total number of rows, if it is different than the length of the value rows prop. If some of the 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. |
| rowsPerPageOptions | Array<number> | [25, 50, 100] | Select the pageSize dynamically using the component UI. |
| rowThreshold | number | 3 | Number of rows from the rowBuffer that can be visible before a new slice is rendered. |
| scrollbarSize | number | Override the height/width of the grid inner scrollbar. | |
| scrollEndThreshold | number | 80 | Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called. |
| selectionModel | Array<number | string> | number | string | Set the selection model of the grid. | |
| showCellRightBorder | bool | false | If true, the right border of the cells are displayed. |
| showColumnRightBorder | bool | false | If true, the right border of the column headers are displayed. |
| sortingMode | 'client' | 'server' | "client" | Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side. |
| sortingOrder | Array<'asc' | 'desc'> | ['asc', 'desc', null] | The order of the sorting sequence. |
| sortModel | Array<{ field: string, sort?: 'asc' | 'desc' }> | Set the sort model of the grid. | |
| 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. | |
| throttleRowsMs | number | 0 | If positive, the Grid will throttle updates coming from apiRef.current.updateRows and apiRef.current.setRows. It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each individual update. |
| treeData | bool | false | If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop. |
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. |
| ColumnMenu | elementType | GridColumnMenu | Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers. |
| ColumnMenuIcon | elementType | GridTripleDotsVerticalIcon | Icon displayed on the side of the column header title to display the filter input component. |
| ColumnResizeIcon | elementType | GridSeparatorIcon | Icon displayed in between two column headers that allows to resize the column header. |
| ColumnSelectorIcon | elementType | GridColumnIcon | Icon displayed on the column menu selector tab. |
| ColumnSortedAscendingIcon | elementType | null | GridArrowUpwardIcon | Icon displayed on the side of the column header title when sorted in ascending order. |
| ColumnSortedDescendingIcon | elementType | null | GridArrowDownwardIcon | Icon displayed on the side of the column header title when sorted in descending order. |
| ColumnsPanel | elementType | GridColumnsPanel | GridColumns panel component rendered when clicking the columns button. |
| ColumnUnsortedIcon | elementType | null | GridColumnUnsortedIcon | Icon displayed on the side of the column header title when unsorted. |
| DensityComfortableIcon | elementType | GridViewStreamIcon | Icon displayed on the "comfortable" density option in the toolbar. |
| DensityCompactIcon | elementType | GridViewHeadlineIcon | Icon displayed on the compact density option in the toolbar. |
| DensityStandardIcon | elementType | GridTableRowsIcon | Icon displayed on the standard density option in the toolbar. |
| ErrorOverlay | elementType | ErrorOverlay | Error overlay component rendered above the grid when an error is caught. |
| ExportIcon | elementType | GridSaveAltIcon | Icon displayed on the open export button present in the toolbar by default. |
| FilterPanel | elementType | GridFilterPanel | Filter panel component rendered when clicking the filter button. |
| Footer | elementType | GridFooter | Footer component rendered at the bottom of the grid viewport. |
| Header | elementType | GridHeader | Header component rendered above the grid column header bar.
Prefer using the Toolbar slot. You should never need to use this slot. |
| LoadingOverlay | elementType | GridLoadingOverlay | Loading overlay component rendered when the grid is in a loading state. |
| MoreActionsIcon | elementType | GridMoreVertIcon | Icon displayed on the actions column type to open the menu. |
| NoResultsOverlay | elementType | GridNoResultsOverlay | No results overlay component rendered when the grid has no results after filtering. |
| NoRowsOverlay | elementType | GridNoRowsOverlay | No rows overlay component rendered when the grid has no rows. |
| OpenFilterButtonIcon | elementType | GridFilterListIcon | Icon displayed on the open filter button present in the toolbar by default. |
| Pagination | elementType | null | Pagination | Pagination component rendered in the grid footer by default. |
| Panel | elementType | GridPanel | Panel component wrapping the filters and columns panels. |
| PreferencesPanel | elementType | GridPreferencesPanel | PreferencesPanel component rendered inside the Header component. |
| Row | elementType | Component rendered for each row. | |
| Toolbar | elementType | null | null | Toolbar component rendered inside the Header component. |
| TreeDataCollapseIcon | elementType | Icon displayed on the tree data toggling column when the children are expanded | |
| TreeDataExpandIcon | elementType | Icon displayed on the tree data toggling column when the children are collapsed |
ref is forwarded to the root element.CSS
| Rule name | Global class | Description |
|---|---|---|
| autoHeight | .MuiDataGrid-autoHeight | Styles applied to the root element if autoHeight={true}. |
| booleanCell | .MuiDataGrid-booleanCell | Styles applied to the icon of the boolean cell. |
| cell--editable | .MuiDataGrid-cell--editable | Styles applied to the cell element if the cell is editable. |
| cell--editing | .MuiDataGrid-cell--editing | Styles applied to the cell element if the cell is in edit mode. |
| cell--textCenter | .MuiDataGrid-cell--textCenter | Styles applied to the cell element if align="center". |
| cell--textLeft | .MuiDataGrid-cell--textLeft | Styles applied to the cell element if align="left". |
| cell--textRight | .MuiDataGrid-cell--textRight | Styles applied to the cell element if align="right". |
| cell--withRenderer | .MuiDataGrid-cell--withRenderer | Styles applied to the cell element if the cell has a custom renderer. |
| cell | .MuiDataGrid-cell | Styles applied to the cell element. |
| cellCheckbox | .MuiDataGrid-cellCheckbox | Styles applied to the cell checkbox element. |
| checkboxInput | .MuiDataGrid-checkboxInput | Styles applied to the selection checkbox element. |
| columnHeader--alignCenter | .MuiDataGrid-columnHeader--alignCenter | Styles applied to the column header if headerAlign="center". |
| columnHeader--alignLeft | .MuiDataGrid-columnHeader--alignLeft | Styles applied to the column header if headerAlign="left". |
| columnHeader--alignRight | .MuiDataGrid-columnHeader--alignRight | Styles applied to the column header if headerAlign="right". |
| columnHeader--dragging | .MuiDataGrid-columnHeader--dragging | Styles applied to the floating column header element when it is dragged. |
| columnHeader--moving | .MuiDataGrid-columnHeader--moving | Styles applied to the column header if it is being dragged. |
| columnHeader--numeric | .MuiDataGrid-columnHeader--numeric | Styles applied to the column header if the type of the column is number. |
| columnHeader--sortable | .MuiDataGrid-columnHeader--sortable | Styles applied to the column header if the column is sortable. |
| columnHeader--sorted | .MuiDataGrid-columnHeader--sorted | Styles applied to the column header if the column is sorted. |
| columnHeader | .MuiDataGrid-columnHeader | Styles applied to the column header element. |
| columnHeaderCheckbox | .MuiDataGrid-columnHeaderCheckbox | Styles applied to the header checkbox cell element. |
| columnHeaderDraggableContainer | .MuiDataGrid-columnHeaderDraggableContainer | Styles applied to the column header's draggable container element. |
| columnHeaderDropZone | .MuiDataGrid-columnHeaderDropZone | Styles applied to the column headers wrapper if a column is being dragged. |
| columnHeaderTitle | .MuiDataGrid-columnHeaderTitle | Styles applied to the column header's title element; |
| columnHeaderTitleContainer | .MuiDataGrid-columnHeaderTitleContainer | Styles applied to the column header's title container element. |
| 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. |
| panel | .MuiDataGrid-panel | Styles applied to the panel element. |
| panelHeader | .MuiDataGrid-panelHeader | Styles applied to the panel header element. |
| panelWrapper | .MuiDataGrid-panelWrapper | Styles applied to the panel wrapper element. |
| panelContent | .MuiDataGrid-panelContent | Styles applied to the panel content element. |
| panelFooter | .MuiDataGrid-panelFooter | Styles applied to the panel footer element. |
| paper | .MuiDataGrid-paper | Styles applied to the paper element. |
| editBooleanCell | .MuiDataGrid-editBooleanCell | Styles applied to root of the boolean edit component. |
| filterForm | .MuiDataGrid-filterForm | Styles applied to the root of the filter form component. |
| editInputCell | .MuiDataGrid-editInputCell | Styles applied to the root of the input component. |
| filterIcon | .MuiDataGrid-filterIcon | Styles applied to the filter icon element. |
| footerContainer | .MuiDataGrid-footerContainer | Styles applied to the footer container element. |
| iconButtonContainer | .MuiDataGrid-iconButtonContainer | Styles applied to the column header icon's container. |
| iconSeparator | .MuiDataGrid-iconSeparator | Styles applied to the column header separator icon element. |
| main | .MuiDataGrid-main | Styles applied to the main container element. |
| menu | .MuiDataGrid-menu | Styles applied to the menu element. |
| menuIcon | .MuiDataGrid-menuIcon | Styles applied to the menu icon element. |
| menuIconButton | .MuiDataGrid-menuIconButton | Styles applied to the menu icon button element. |
| menuOpen | .MuiDataGrid-menuOpen | Styles applied to the menu icon element if the menu is open. |
| menuList | .MuiDataGrid-menuList | Styles applied to the menu list element. |
| overlay | .MuiDataGrid-overlay | Styles applied to the overlay element. |
| virtualScroller | .MuiDataGrid-virtualScroller | Styles applied to the virtualization container. |
| virtualScrollerContent | .MuiDataGrid-virtualScrollerContent | Styles applied to the virtualization content. |
| virtualScrollerRenderZone | .MuiDataGrid-virtualScrollerRenderZone | Styles applied to the virtualization render zone. |
| 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. |
| root | .MuiDataGrid-root | Styles applied to the root element. |
| row--editable | .MuiDataGrid-row--editable | Styles applied to the row element if the row is editable. |
| row--editing | .MuiDataGrid-row--editing | Styles applied to the row element if the row is in edit mode. |
| row | .MuiDataGrid-row | Styles applied to the row element. |
| rowCount | .MuiDataGrid-rowCount | Styles applied to the footer row count element to show the total number of rows. Only works when pagination is disabled. |
| 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 column of the tree data. |
| treeDataGroupingCellToggle | .MuiDataGrid-treeDataGroupingCellToggle | Styles applied to the toggle of the grouping column of the tree data. |
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
styleOverridesproperty in a custom theme.