Skip to content

DataGrid API

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

Component demos

Import

import { DataGrid } from '@mui/x-data-grid/DataGrid';
// or
import { DataGrid } from '@mui/x-data-grid';
// or
import { DataGrid } from '@mui/x-data-grid-pro';
// or
import { DataGrid } from '@mui/x-data-grid-premium';
Learn about the difference by reading this guide on minimizing bundle size.

Props

columnsRequired

Set of columns of type GridColDef[].

Type:array


rowsRequired

Set of rows of type GridRowsProp.

Type:Array<object>


apiRef

The ref object that allows Data Grid manipulation. Can be instantiated with useGridApiRef().

Type:{ current: object }


aria-label

The label of the Data Grid.

Type:string


aria-labelledby

The id of the element containing a label for the Data Grid.

Type:string


autoHeight

If true, the Data Grid height is dynamic and follow the number of rows in the Data Grid.

Type:bool

Default:false


autoPageSize

If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.

Type:bool

Default:false


cellModesModel

Controls the modes of the cells.

Type:object


checkboxSelection

If true, the Data Grid will display an extra column with checkboxes for selecting rows.

Type:bool

Default:false


classes

Override or extend the styles applied to the component.

See CSS API below for more details.

Type:object


clipboardCopyCellDelimiter

The character used to separate cell values when copying to the clipboard.

Type:string

Default:'\t'


columnBuffer

Number of extra columns to be rendered before/after the visible slice.

Type:number

Default:3


columnHeaderHeight

Sets the height in pixel of the column headers in the Data Grid.

Type:number

Default:56


columnThreshold

Number of rows from the columnBuffer that can be visible before a new slice is rendered.

Type:number

Default:3


columnVisibilityModel

Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the hide property in GridColDef.

Type:object


componentsDeprecated

Overridable components.

Type:object


componentsPropsDeprecated

Overridable components props dynamically passed to the component at rendering.

Type:object


density

Set the density of the Data Grid.

Type:'comfortable'
| 'compact'
| 'standard'

Default:"standard"


disableColumnFilter

If true, column filters are disabled.

Type:bool

Default:false


disableColumnMenu

If true, the column menu is disabled.

Type:bool

Default:false


disableColumnSelector

If true, hiding/showing columns is disabled.

Type:bool

Default:false


disableDensitySelector

If true, the density selector is disabled.

Type:bool

Default:false


disableEval

If true, eval() is not used for performance optimization.

Type:bool

Default:false


disableRowSelectionOnClick

If true, the selection on click on a row or cell is disabled.

Type:bool

Default:false


disableVirtualization

If true, the virtualization is disabled.

Type:bool

Default:false


editMode

Controls whether to use the cell or row editing.

Type:'cell'
| 'row'

Default:"cell"


experimentalFeatures

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.

Type:{ ariaV7?: bool, columnGrouping?: bool, warnIfFocusStateIsNotSynced?: bool }


filterDebounceMs

The milliseconds delay to wait after a keystroke before triggering filtering.

Type:number

Default:150


filterMode

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.

Type:'client'
| 'server'

Default:"client"


filterModel

Set the filter model of the Data Grid.

Type:{ items: Array<{ field: string, id?: number
| string, operator: string, value?: any }>, logicOperator?: 'and'
| 'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and'
| 'or', quickFilterValues?: array }


getCellClassName

Function that applies CSS classes dynamically on cells.

Type:func

Signature:
function(params: GridCellParams) => string

Returns: The CSS class to apply to the cell.


getDetailPanelContent

Function that returns the element to render in row detail.

Type:func

Signature:
function(params: GridRowParams) => React.JSX.Element

Returns: The row detail element.


getEstimatedRowHeight

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.

Type:func

Signature:
function(params: GridRowHeightParams) => number | null
  • params With all properties from GridRowHeightParams.

Returns: The estimated row height value. If null or undefined then the default row height, based on the density, is applied.


getRowClassName

Function that applies CSS classes dynamically on rows.

Type:func

Signature:
function(params: GridRowClassNameParams) => string

Returns: The CSS class to apply to the row.


getRowHeight

Function that sets the row height per row.

Type:func

Signature:
function(params: GridRowHeightParams) => GridRowHeightReturnValue
  • params With all properties from GridRowHeightParams.

Returns: The row height value. If null or undefined then the default row height is applied. If "auto" then the row height is calculated based on the content.


getRowId

Return the id of a given GridRowModel.

Type:func


getRowSpacing

Function that allows to specify the spacing between rows.

Type:func

Signature:
function(params: GridRowSpacingParams) => GridRowSpacing

Returns: The row spacing values.


hideFooter

If true, the footer component is hidden.

Type:bool

Default:false


hideFooterPagination

If true, the pagination component in the footer is hidden.

Type:bool

Default:false


hideFooterSelectedRowCount

If true, the selected row count in the footer is hidden.

Type:bool

Default:false


ignoreDiacritics

If true, the diacritics (accents) are ignored when filtering or quick filtering. E.g. when filter value is cafe, the rows with café will be visible.

Type:bool

Default:false


initialState

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.

Type:object


isCellEditable

Callback fired when a cell is rendered, returns true if the cell is editable.

Type:func

Signature:
function(params: GridCellParams) => boolean

Returns: A boolean indicating if the cell is editable.


isRowSelectable

Determines if a row can be selected.

Type:func

Signature:
function(params: GridRowParams) => boolean

Returns: A boolean indicating if the cell is selectable.


keepNonExistentRowsSelected

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.

Type:bool

Default:false


loading

If true, a loading overlay is displayed.

Type:bool


localeText

Set the locale text of the Data Grid. You can find all the translation keys supported in the source in the GitHub repository.

Type:object


logger

Pass a custom logger in the components that implements the Logger interface.

Type:{ debug: func, error: func, info: func, warn: func }

Default:console


logLevel

Allows to pass the logging level or false to turn off logging.

Type:'debug'
| 'error'
| 'info'
| 'warn'
| false

Default:"error" ("warn" in dev mode)


nonce

Nonce of the inline styles for Content Security Policy.

Type:string


onCellClick

Callback fired when any cell is clicked.

Type:func

Signature:
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridCellParams.
  • event The event object.
  • details Additional details for this callback.

onCellDoubleClick

Callback fired when a double click event comes from a cell element.

Type:func

Signature:
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridCellParams.
  • event The event object.
  • details Additional details for this callback.

onCellEditStart

Callback fired when the cell turns to edit mode.

Type:func

Signature:
function(params: GridCellParams, event: MuiEvent) => void
  • params With all properties from GridCellParams.
  • event The event that caused this prop to be called.

onCellEditStop

Callback fired when the cell turns to view mode.

Type:func

Signature:
function(params: GridCellParams, event: MuiEvent) => void
  • params With all properties from GridCellParams.
  • event The event that caused this prop to be called.

onCellKeyDown

Callback fired when a keydown event comes from a cell element.

Type:func

Signature:
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridCellParams.
  • event The event object.
  • details Additional details for this callback.

onCellModesModelChange

Callback fired when the cellModesModel prop changes.

Type:func

Signature:
function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void
  • cellModesModel Object containing which cells are in "edit" mode.
  • details Additional details for this callback.

onClipboardCopy

Callback called when the data is copied to the clipboard.

Type:func

Signature:
function(data: string) => void
  • data The data copied to the clipboard.

onColumnHeaderClick

Callback fired when a click event comes from a column header element.

Type:func

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridColumnHeaderParams.
  • event The event object.
  • details Additional details for this callback.

onColumnHeaderDoubleClick

Callback fired when a double click event comes from a column header element.

Type:func

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridColumnHeaderParams.
  • event The event object.
  • details Additional details for this callback.

onColumnHeaderEnter

Callback fired when a mouse enter event comes from a column header element.

Type:func

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridColumnHeaderParams.
  • event The event object.
  • details Additional details for this callback.

onColumnHeaderLeave

Callback fired when a mouse leave event comes from a column header element.

Type:func

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridColumnHeaderParams.
  • event The event object.
  • details Additional details for this callback.

onColumnHeaderOut

Callback fired when a mouseout event comes from a column header element.

Type:func

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridColumnHeaderParams.
  • event The event object.
  • details Additional details for this callback.

onColumnHeaderOver

Callback fired when a mouseover event comes from a column header element.

Type:func

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridColumnHeaderParams.
  • event The event object.
  • details Additional details for this callback.

onColumnOrderChange

Callback fired when a column is reordered.

Type:func

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.

onColumnVisibilityModelChange

Callback fired when the column visibility model changes.

Type:func

Signature:
function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => void
  • model The new model.
  • details Additional details for this callback.

onFilterModelChange

Callback fired when the Filter model changes before the filters are applied.

Type:func

Signature:
function(model: GridFilterModel, details: GridCallbackDetails) => void
  • model With all properties from GridFilterModel.
  • details Additional details for this callback.

onMenuClose

Callback fired when the menu is closed.

Type:func

Signature:
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params With all properties from GridMenuParams.
  • event The event object.
  • details Additional details for this callback.

onMenuOpen

Callback fired when the menu is opened.

Type:func

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.

onPaginationModelChange

Callback fired when the pagination model has changed.

Type:func

Signature:
function(model: GridPaginationModel, details: GridCallbackDetails) => void
  • model Updated pagination model.
  • details Additional details for this callback.

onPreferencePanelClose

Callback fired when the preferences panel is closed.

Type:func

Signature:
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params With all properties from GridPreferencePanelParams.
  • event The event object.
  • details Additional details for this callback.

onPreferencePanelOpen

Callback fired when the preferences panel is opened.

Type:func

Signature:
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • params With all properties from GridPreferencePanelParams.
  • event The event object.
  • details Additional details for this callback.

onProcessRowUpdateError

Callback called when processRowUpdate throws an error or rejects.

Type:func

Signature:
function(error: any) => void
  • error The error thrown.

onResize

Callback fired when the Data Grid is resized.

Type:func

Signature:
function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => void
  • containerSize With all properties from ElementSize.
  • event The event object.
  • details Additional details for this callback.

onRowClick

Callback fired when a row is clicked. Not called if the target clicked is an interactive element added by the built-in columns.

Type:func

Signature:
function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from GridRowParams.
  • event The event object.
  • details Additional details for this callback.

onRowDoubleClick

Callback fired when a double click event comes from a row container element.

Type:func

Signature:
function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void
  • params With all properties from RowParams.
  • event The event object.
  • details Additional details for this callback.

onRowEditCommit

Callback fired when the row changes are committed.

Type:func

Signature:
function(id: GridRowId, event: MuiEvent) => void
  • id The row id.
  • event The event that caused this prop to be called.

onRowEditStart

Callback fired when the row turns to edit mode.

Type:func

Signature:
function(params: GridRowParams, event: MuiEvent) => void
  • params With all properties from GridRowParams.
  • event The event that caused this prop to be called.

onRowEditStop

Callback fired when the row turns to view mode.

Type:func

Signature:
function(params: GridRowParams, event: MuiEvent) => void
  • params With all properties from GridRowParams.
  • event The event that caused this prop to be called.

onRowModesModelChange

Callback fired when the rowModesModel prop changes.

Type:func

Signature:
function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void
  • rowModesModel Object containing which rows are in "edit" mode.
  • details Additional details for this callback.

onRowSelectionModelChange

Callback fired when the selection state of one or multiple rows changes.

Type:func

Signature:
function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void
  • rowSelectionModel With all the row ids GridSelectionModel.
  • details Additional details for this callback.

onSortModelChange

Callback fired when the sort model changes before a column is sorted.

Type:func

Signature:
function(model: GridSortModel, details: GridCallbackDetails) => void
  • model With all properties from GridSortModel.
  • details Additional details for this callback.

pageSizeOptions

Select the pageSize dynamically using the component UI.

Type:Array<number
| { label: string, value: number }>

Default:[25, 50, 100]


paginationMode

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.

Type:'client'
| 'server'

Default:"client"


paginationModel

The pagination model of type GridPaginationModel which refers to current page and pageSize.

Type:{ page: number, pageSize: number }


processRowUpdate

Callback called before updating a row with new values in the row and cell editing.

Type:func

Signature:
function(newRow: R, oldRow: R) => Promise | R
  • newRow Row object with the new values.
  • oldRow Row object with the old values.

Returns: The final values to update the row.


rowBuffer

Number of extra rows to be rendered before/after the visible slice.

Type:number

Default:3


rowCount

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.

Type:number


rowHeight

Sets the height in pixel of a row in the Data Grid.

Type:number

Default:52


rowModesModel

Controls the modes of the rows.

Type:object


rowPositionsDebounceMs

The milliseconds delay to wait after measuring the row height before recalculating row positions. Setting it to a lower value could be useful when using dynamic row height, but might reduce performance when displaying a large number of rows.

Type:number

Default:166


rowSelection

If false, the row selection mode is disabled.

Type:bool

Default:true


rowSelectionModel

Sets the row selection model of the Data Grid.

Type:Array<number
| string>
| number
| string


rowSpacingType

Sets the type of space between rows added by getRowSpacing.

Type:'border'
| 'margin'

Default:"margin"


rowThreshold

Number of rows from the rowBuffer that can be visible before a new slice is rendered.

Type:number

Default:3


scrollbarSize

Override the height/width of the Data Grid inner scrollbar.

Type:number


showCellVerticalBorder

If true, the vertical borders of the cells are displayed.

Type:bool

Default:false


showColumnVerticalBorder

If true, the right border of the column headers are displayed.

Type:bool

Default:false


slotProps

Overridable components props dynamically passed to the component at rendering.

Type:object


slots

Overridable components.

See Slots API below for more details.

Type:object


sortingMode

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.

Type:'client'
| 'server'

Default:"client"


sortingOrder

The order of the sorting sequence.

Type:Array<'asc'
| 'desc'>

Default:['asc', 'desc', null]


sortModel

Set the sort model of the Data Grid.

Type:Array<{ field: string, sort?: 'asc'
| 'desc' }>


sx

The system prop that allows defining system overrides as well as additional CSS styles.

See the `sx` page for more details.

Type:Array<func
| object
| bool>
| func
| object


unstable_ignoreValueFormatterDuringExport

If true, the Data Grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export.

Type:{ clipboardExport?: bool, csvExport?: bool }
| bool

Default:false


The ref is forwarded to the root element.

Slots

BaseButton

The custom Button component used in the grid.

Default component: Button


BaseCheckbox

The custom Checkbox component used in the grid for both header and cells.

Default component: Checkbox


BaseChip

The custom Chip component used in the grid.

Default component: Chip


BaseFormControl

The custom FormControl component used in the grid.

Default component: FormControl


BaseIconButton

The custom IconButton component used in the grid.

Default component: IconButton


BaseInputAdornment

The custom InputAdornment component used in the grid.

Default component: InputAdornment


BaseInputLabel

The custom InputLabel component used in the grid.

Default component: InputLabel


BasePopper

The custom Popper component used in the grid.

Default component: Popper


BaseSelect

The custom Select component used in the grid.

Default component: Select


BaseSelectOption

The custom SelectOption component used in the grid.

Default component: MenuItem


BaseSwitch

The custom Switch component used in the grid.

Default component: Switch


BaseTextField

The custom TextField component used in the grid.

Default component: TextField


BaseTooltip

The custom Tooltip component used in the grid.

Default component: Tooltip


BooleanCellFalseIcon

Icon displayed on the boolean cell to represent the false value.

Default component: GridCloseIcon


BooleanCellTrueIcon

Icon displayed on the boolean cell to represent the true value.

Default component: GridCheckIcon


Cell

Component rendered for each cell.

Default component: GridCell


ColumnFilteredIcon

Icon displayed on the column header menu to show that a filter has been applied to the column.

Default component: GridFilterAltIcon


ColumnHeaderFilterIconButton

Filter icon component rendered in each column header.

Default component: GridColumnHeaderFilterIconButton


ColumnHeaders

Component responsible for rendering the column headers.

Default component: DataGridColumnHeaders


ColumnMenu

Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.

Default component: GridColumnMenu


ColumnMenuClearIcon

Icon displayed in column menu for clearing values

Default component: GridClearIcon


ColumnMenuFilterIcon

Icon displayed in column menu for filter

Default component: GridFilterAltIcon


ColumnMenuHideIcon

Icon displayed in column menu for hiding column

Default component: GridVisibilityOffIcon


ColumnMenuIcon

Icon displayed on the side of the column header title to display the filter input component.

Default component: GridTripleDotsVerticalIcon


ColumnMenuManageColumnsIcon

Icon displayed in column menu for showing all columns

Default component: GridViewColumnIcon


ColumnMenuSortAscendingIcon

Icon displayed in column menu for ascending sort

Default component: GridArrowUpwardIcon


ColumnMenuSortDescendingIcon

Icon displayed in column menu for descending sort

Default component: GridArrowDownwardIcon


ColumnReorderIcon

Icon displayed on the column reorder button.

Default component: GridDragIcon


ColumnResizeIcon

Icon displayed in between two column headers that allows to resize the column header.

Default component: GridSeparatorIcon


ColumnSelectorIcon

Icon displayed on the column menu selector tab.

Default component: GridColumnIcon


ColumnSortedAscendingIcon

Icon displayed on the side of the column header title when sorted in ascending order.

Default component: GridArrowUpwardIcon


ColumnSortedDescendingIcon

Icon displayed on the side of the column header title when sorted in descending order.

Default component: GridArrowDownwardIcon


ColumnsPanel

GridColumns panel component rendered when clicking the columns button.

Default component: GridColumnsPanel


ColumnUnsortedIcon

Icon displayed on the side of the column header title when unsorted.

Default component: GridColumnUnsortedIcon


DensityComfortableIcon

Icon displayed on the "comfortable" density option in the toolbar.

Default component: GridViewStreamIcon


DensityCompactIcon

Icon displayed on the compact density option in the toolbar.

Default component: GridViewHeadlineIcon


DensityStandardIcon

Icon displayed on the standard density option in the toolbar.

Default component: GridTableRowsIcon


DetailPanelCollapseIcon

Icon displayed on the detail panel toggle column when expanded.

Default component: GridRemoveIcon


DetailPanelExpandIcon

Icon displayed on the detail panel toggle column when collapsed.

Default component: GridAddIcon


ExportIcon

Icon displayed on the open export button present in the toolbar by default.

Default component: GridSaveAltIcon


FilterPanel

Filter panel component rendered when clicking the filter button.

Default component: GridFilterPanel


FilterPanelAddIcon

Icon displayed for deleting the filter from filter panel.

Default component: GridAddIcon


FilterPanelDeleteIcon

Icon displayed for deleting the filter from filter panel.

Default component: GridDeleteIcon


FilterPanelRemoveAllIcon

Icon displayed for deleting all the active filters from filter panel.

Default component: GridDeleteForeverIcon


Footer

Footer component rendered at the bottom of the grid viewport.

Default component: GridFooter


FooterRowCount

Row count component rendered in the footer

Default component: GridRowCount


GroupingCriteriaCollapseIcon

Icon displayed on the grouping column when the children are expanded

Default component: GridExpandMoreIcon


GroupingCriteriaExpandIcon

Icon displayed on the grouping column when the children are collapsed

Default component: GridKeyboardArrowRight


LoadIcon

Icon displayed on the input while processing.

Default component: GridLoadIcon


LoadingOverlay

Loading overlay component rendered when the grid is in a loading state.

Default component: GridLoadingOverlay


MoreActionsIcon

Icon displayed on the actions column type to open the menu.

Default component: GridMoreVertIcon


NoResultsOverlay

No results overlay component rendered when the grid has no results after filtering.

Default component: GridNoResultsOverlay


NoRowsOverlay

No rows overlay component rendered when the grid has no rows.

Default component: GridNoRowsOverlay


OpenFilterButtonIcon

Icon displayed on the open filter button present in the toolbar by default.

Default component: GridFilterListIcon


Pagination

Pagination component rendered in the grid footer by default.

Default component: Pagination


Panel

Panel component wrapping the filters and columns panels.

Default component: GridPanel


PreferencesPanel

PreferencesPanel component rendered inside the Header component.

Default component: GridPreferencesPanel


QuickFilterClearIcon

Icon displayed on the quick filter reset input.

Default component: GridCloseIcon


QuickFilterIcon

Icon displayed on the quick filter input.

Default component: GridSearchIcon


Row

Component rendered for each row.

Default component: GridRow


RowReorderIcon

Icon displayed on the reorder column type to reorder a row.

Default component: GridDragIcon


SkeletonCell

Component rendered for each skeleton cell.

Default component: GridSkeletonCell


Toolbar

Toolbar component rendered inside the Header component.

Default component: null


TreeDataCollapseIcon

Icon displayed on the tree data toggling column when the children are expanded

Default component: GridExpandMoreIcon


TreeDataExpandIcon

Icon displayed on the tree data toggling column when the children are collapsed

Default component: GridKeyboardArrowRight


CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

.MuiDataGrid-actionsCell

Styles applied to the root element of the cell with type="actions".

Rule name:actionsCell


.MuiDataGrid-aggregationColumnHeader

Styles applied to the root element of the column header when aggregated.

Rule name:aggregationColumnHeader


.MuiDataGrid-aggregationColumnHeader--alignCenter

Styles applied to the root element of the header when aggregation if headerAlign="center".

Rule name:aggregationColumnHeader--alignCenter


.MuiDataGrid-aggregationColumnHeader--alignLeft

Styles applied to the root element of the header when aggregation if headerAlign="left".

Rule name:aggregationColumnHeader--alignLeft


.MuiDataGrid-aggregationColumnHeader--alignRight

Styles applied to the root element of the header when aggregation if headerAlign="right".

Rule name:aggregationColumnHeader--alignRight


.MuiDataGrid-aggregationColumnHeaderLabel

Styles applied to the aggregation label in the column header when aggregated.

Rule name:aggregationColumnHeaderLabel


.MuiDataGrid-autoHeight

Styles applied to the root element if autoHeight={true}.

Rule name:autoHeight


.MuiDataGrid-autosizing

Styles applied to the root element while it is being autosized.

Rule name:autosizing


.MuiDataGrid-booleanCell

Styles applied to the icon of the boolean cell.

Rule name:booleanCell


.MuiDataGrid-cell

Styles applied to the cell element.

Rule name:cell


.MuiDataGrid-cell--editable

Styles applied to the cell element if the cell is editable.

Rule name:cell--editable


.MuiDataGrid-cell--editing

Styles applied to the cell element if the cell is in edit mode.

Rule name:cell--editing


.MuiDataGrid-cell--rangeBottom

Styles applied to the cell element if it is at the bottom edge of a cell selection range.

Rule name:cell--rangeBottom


.MuiDataGrid-cell--rangeLeft

Styles applied to the cell element if it is at the left edge of a cell selection range.

Rule name:cell--rangeLeft


.MuiDataGrid-cell--rangeRight

Styles applied to the cell element if it is at the right edge of a cell selection range.

Rule name:cell--rangeRight


.MuiDataGrid-cell--rangeTop

Styles applied to the cell element if it is at the top edge of a cell selection range.

Rule name:cell--rangeTop


.MuiDataGrid-cell--selectionMode

Styles applied to the cell element if it is in a cell selection range.

Rule name:cell--selectionMode


.MuiDataGrid-cell--textCenter

Styles applied to the cell element if align="center".

Rule name:cell--textCenter


.MuiDataGrid-cell--textLeft

Styles applied to the cell element if align="left".

Rule name:cell--textLeft


.MuiDataGrid-cell--textRight

Styles applied to the cell element if align="right".

Rule name:cell--textRight


.MuiDataGrid-cell--withRenderer

Styles applied to the cell element if the cell has a custom renderer.

Rule name:cell--withRenderer


.MuiDataGrid-cell--withRightBorder

Styles applied the cell if showColumnVerticalBorder={true}.

Rule name:cell--withRightBorder


.MuiDataGrid-cellCheckbox

Styles applied to the cell checkbox element.

Rule name:cellCheckbox


.MuiDataGrid-cellContent

Styles applied to the element that wraps the cell content.

Rule name:cellContent


.MuiDataGrid-cellSkeleton

Styles applied to the skeleton cell element.

Rule name:cellSkeleton


.MuiDataGrid-checkboxInput

Styles applied to the selection checkbox element.

Rule name:checkboxInput


.MuiDataGrid-columnGroupHeader

Styles applied to the column group header element.

Rule name:columnGroupHeader


.MuiDataGrid-columnHeader

Styles applied to the column header element.

Rule name:columnHeader


.MuiDataGrid-columnHeader--alignCenter

Styles applied to the column header if headerAlign="center".

Rule name:columnHeader--alignCenter


.MuiDataGrid-columnHeader--alignLeft

Styles applied to the column header if headerAlign="left".

Rule name:columnHeader--alignLeft


.MuiDataGrid-columnHeader--alignRight

Styles applied to the column header if headerAlign="right".

Rule name:columnHeader--alignRight


.MuiDataGrid-columnHeader--dragging

Styles applied to the floating column header element when it is dragged.

Rule name:columnHeader--dragging


.MuiDataGrid-columnHeader--emptyGroup

Styles applied to the empty column group header cell.

Rule name:columnHeader--emptyGroup


.MuiDataGrid-columnHeader--filledGroup

Styles applied to the column group header cell if not empty.

Rule name:columnHeader--filledGroup


.MuiDataGrid-columnHeader--filtered

Styles applied to the column header if the column has a filter applied to it.

Rule name:columnHeader--filtered


.MuiDataGrid-columnHeader--moving

Styles applied to the column header if it is being dragged.

Rule name:columnHeader--moving


.MuiDataGrid-columnHeader--numeric

Styles applied to the column header if the type of the column is number.

Rule name:columnHeader--numeric


.MuiDataGrid-columnHeader--showColumnBorder

Styles applied to the column group header cell when show column border.

Rule name:columnHeader--showColumnBorder


.MuiDataGrid-columnHeader--sortable

Styles applied to the column header if the column is sortable.

Rule name:columnHeader--sortable


.MuiDataGrid-columnHeader--sorted

Styles applied to the column header if the column is sorted.

Rule name:columnHeader--sorted


.MuiDataGrid-columnHeader--withRightBorder

Styles applied the column header if showColumnVerticalBorder={true}.

Rule name:columnHeader--withRightBorder


.MuiDataGrid-columnHeaderCheckbox

Styles applied to the header checkbox cell element.

Rule name:columnHeaderCheckbox


.MuiDataGrid-columnHeaderDraggableContainer

Styles applied to the column header's draggable container element.

Rule name:columnHeaderDraggableContainer


.MuiDataGrid-columnHeaderDropZone

Styles applied to the column headers wrapper if a column is being dragged.

Rule name:columnHeaderDropZone


.MuiDataGrid-columnHeaders

Styles applied to the column headers.

Rule name:columnHeaders


.MuiDataGrid-columnHeadersInner

Styles applied to the column headers's inner element.

Rule name:columnHeadersInner


.MuiDataGrid-columnHeadersInner--scrollable

Styles applied to the column headers's inner element if there is a horizontal scrollbar.

Rule name:columnHeadersInner--scrollable


.MuiDataGrid-columnHeaderTitle

Styles applied to the column header's title element;

Rule name:columnHeaderTitle


.MuiDataGrid-columnHeaderTitleContainer

Styles applied to the column header's title container element.

Rule name:columnHeaderTitleContainer


.MuiDataGrid-columnHeaderTitleContainerContent

Styles applied to the column header's title excepted buttons.

Rule name:columnHeaderTitleContainerContent


.MuiDataGrid-columnSeparator

Styles applied to the column header separator element.

Rule name:columnSeparator


.MuiDataGrid-columnSeparator--resizable

Styles applied to the column header separator if the column is resizable.

Rule name:columnSeparator--resizable


.MuiDataGrid-columnSeparator--resizing

Styles applied to the column header separator if the column is being resized.

Rule name:columnSeparator--resizing


.MuiDataGrid-columnSeparator--sideLeft

Styles applied to the column header separator if the side is "left".

Rule name:columnSeparator--sideLeft


.MuiDataGrid-columnSeparator--sideRight

Styles applied to the column header separator if the side is "right".

Rule name:columnSeparator--sideRight


.MuiDataGrid-columnsPanel

Styles applied to the columns panel element.

Rule name:columnsPanel


.MuiDataGrid-columnsPanelRow

Styles applied to the columns panel row element.

Rule name:columnsPanelRow


.MuiDataGrid-detailPanel

Styles applied to the detail panel element.

Rule name:detailPanel


.MuiDataGrid-detailPanels

Styles applied to the detail panels wrapper element.

Rule name:detailPanels


.MuiDataGrid-detailPanelToggleCell

Styles applied to the detail panel toggle cell element.

Rule name:detailPanelToggleCell


.MuiDataGrid-detailPanelToggleCell--expanded

Styles applied to the detail panel toggle cell element if expanded.

Rule name:detailPanelToggleCell--expanded


.MuiDataGrid-editBooleanCell

Styles applied to root of the boolean edit component.

Rule name:editBooleanCell


.MuiDataGrid-editInputCell

Styles applied to the root of the input component.

Rule name:editInputCell


.MuiDataGrid-filterForm

Styles applied to the root of the filter form component.

Rule name:filterForm


.MuiDataGrid-filterFormColumnInput

Styles applied to the column input of the filter form component.

Rule name:filterFormColumnInput


.MuiDataGrid-filterFormDeleteIcon

Styles applied to the delete icon of the filter form component.

Rule name:filterFormDeleteIcon


.MuiDataGrid-filterFormLogicOperatorInput

Styles applied to the link operator input of the filter form component.

Rule name:filterFormLogicOperatorInput


.MuiDataGrid-filterFormOperatorInput

Styles applied to the operator input of the filter form component.

Rule name:filterFormOperatorInput


.MuiDataGrid-filterFormValueInput

Styles applied to the value input of the filter form component.

Rule name:filterFormValueInput


.MuiDataGrid-filterIcon

Styles applied to the filter icon element.

Rule name:filterIcon


.MuiDataGrid-footerCell

Styles applied to the root element of the cell inside a footer row.

Rule name:footerCell


.MuiDataGrid-footerContainer

Styles applied to the footer container element.

Rule name:footerContainer


.MuiDataGrid-groupingCriteriaCell

Styles applied to the root element of the grouping criteria cell

Rule name:groupingCriteriaCell


.MuiDataGrid-groupingCriteriaCellToggle

Styles applied to the toggle of the grouping criteria cell

Rule name:groupingCriteriaCellToggle


.MuiDataGrid-headerFilterRow

Styles applied to the column header filter row.

Rule name:headerFilterRow


.MuiDataGrid-iconButtonContainer

Styles applied to the column header icon's container.

Rule name:iconButtonContainer


.MuiDataGrid-iconSeparator

Styles applied to the column header separator icon element.

Rule name:iconSeparator


.MuiDataGrid-main

Styles applied to the main container element.

Rule name:main


.MuiDataGrid-menu

Styles applied to the menu element.

Rule name:menu


.MuiDataGrid-menuIcon

Styles applied to the menu icon element.

Rule name:menuIcon


.MuiDataGrid-menuIconButton

Styles applied to the menu icon button element.

Rule name:menuIconButton


.MuiDataGrid-menuList

Styles applied to the menu list element.

Rule name:menuList


.MuiDataGrid-menuOpen

Styles applied to the menu icon element if the menu is open.

Rule name:menuOpen


.MuiDataGrid-overlay

Styles applied to the overlay element.

Rule name:overlay


.MuiDataGrid-overlayWrapper

Styles applied to the overlay wrapper element.

Rule name:overlayWrapper


.MuiDataGrid-overlayWrapperInner

Styles applied to the overlay wrapper inner element.

Rule name:overlayWrapperInner


.MuiDataGrid-panel

Styles applied to the panel element.

Rule name:panel


.MuiDataGrid-panelContent

Styles applied to the panel content element.

Rule name:panelContent


.MuiDataGrid-panelFooter

Styles applied to the panel footer element.

Rule name:panelFooter


.MuiDataGrid-panelHeader

Styles applied to the panel header element.

Rule name:panelHeader


.MuiDataGrid-panelWrapper

Styles applied to the panel wrapper element.

Rule name:panelWrapper


.MuiDataGrid-paper

Styles applied to the paper element.

Rule name:paper


.MuiDataGrid-pinnedColumnHeaders

Styles applied to the pinned column headers.

Rule name:pinnedColumnHeaders


.MuiDataGrid-pinnedColumnHeaders--left

Styles applied to the left pinned column headers.

Rule name:pinnedColumnHeaders--left


.MuiDataGrid-pinnedColumnHeaders--right

Styles applied to the right pinned column headers.

Rule name:pinnedColumnHeaders--right


.MuiDataGrid-pinnedColumns

Styles applied to the pinned columns.

Rule name:pinnedColumns


.MuiDataGrid-pinnedColumns--left

Styles applied to the left pinned columns.

Rule name:pinnedColumns--left


.MuiDataGrid-pinnedColumns--right

Styles applied to the right pinned columns.

Rule name:pinnedColumns--right


.MuiDataGrid-pinnedRows

Styles applied to the pinned rows container.

Rule name:pinnedRows


.MuiDataGrid-pinnedRows--bottom

Styles applied to the bottom pinned rows container.

Rule name:pinnedRows--bottom


.MuiDataGrid-pinnedRows--top

Styles applied to the top pinned rows container.

Rule name:pinnedRows--top


.MuiDataGrid-pinnedRowsRenderZone

Styles applied to pinned rows render zones.

Rule name:pinnedRowsRenderZone


.MuiDataGrid-root

Styles applied to the root element.

Rule name:root


.MuiDataGrid-root--densityComfortable

Styles applied to the root element if density is "comfortable".

Rule name:root--densityComfortable


.MuiDataGrid-root--densityCompact

Styles applied to the root element if density is "compact".

Rule name:root--densityCompact


.MuiDataGrid-root--densityStandard

Styles applied to the root element if density is "standard" (default).

Rule name:root--densityStandard


.MuiDataGrid-root--disableUserSelection

Styles applied to the root element when user selection is disabled.

Rule name:root--disableUserSelection


.MuiDataGrid-row

Styles applied to the row element.

Rule name:row


.MuiDataGrid-row--detailPanelExpanded

Styles applied to the row if its detail panel is open.

Rule name:row--detailPanelExpanded


.MuiDataGrid-row--dragging

Styles applied to the floating special row reorder cell element when it is dragged.

Rule name:row--dragging


.MuiDataGrid-row--dynamicHeight

Styles applied to the row if it has dynamic row height.

Rule name:row--dynamicHeight


.MuiDataGrid-row--editable

Styles applied to the row element if the row is editable.

Rule name:row--editable


.MuiDataGrid-row--editing

Styles applied to the row element if the row is in edit mode.

Rule name:row--editing


.MuiDataGrid-row--lastVisible

Styles applied to the last visible row element on every page of the grid.

Rule name:row--lastVisible


.MuiDataGrid-rowCount

Styles applied to the footer row count element to show the total number of rows. Only works when pagination is disabled.

Rule name:rowCount


.MuiDataGrid-rowReorderCell

Styles applied to the root element of the row reorder cell

Rule name:rowReorderCell


.MuiDataGrid-rowReorderCell--draggable

Styles applied to the root element of the row reorder cell when dragging is allowed

Rule name:rowReorderCell--draggable


.MuiDataGrid-rowReorderCellContainer

Styles applied to the row reorder cell container element.

Rule name:rowReorderCellContainer


.MuiDataGrid-rowReorderCellPlaceholder

Styles applied to the row's draggable placeholder element inside the special row reorder cell.

Rule name:rowReorderCellPlaceholder


.MuiDataGrid-scrollArea

Styles applied to both scroll area elements.

Rule name:scrollArea


.MuiDataGrid-scrollArea--left

Styles applied to the left scroll area element.

Rule name:scrollArea--left


.MuiDataGrid-scrollArea--right

Styles applied to the right scroll area element.

Rule name:scrollArea--right


.MuiDataGrid-selectedRowCount

Styles applied to the footer selected row count element.

Rule name:selectedRowCount


.MuiDataGrid-sortIcon

Styles applied to the sort icon element.

Rule name:sortIcon


.MuiDataGrid-toolbarContainer

Styles applied to the toolbar container element.

Rule name:toolbarContainer


.MuiDataGrid-toolbarFilterList

Styles applied to the toolbar filter list element.

Rule name:toolbarFilterList


.MuiDataGrid-treeDataGroupingCell

Styles applied to the root of the grouping column of the tree data.

Rule name:treeDataGroupingCell


.MuiDataGrid-treeDataGroupingCellToggle

Styles applied to the toggle of the grouping cell of the tree data.

Rule name:treeDataGroupingCellToggle


.MuiDataGrid-virtualScroller

Styles applied to the virtualization container.

Rule name:virtualScroller


.MuiDataGrid-virtualScrollerContent

Styles applied to the virtualization content.

Rule name:virtualScrollerContent


.MuiDataGrid-virtualScrollerContent--overflowed

Styles applied to the virtualization content when its height is bigger than the virtualization container.

Rule name:virtualScrollerContent--overflowed


.MuiDataGrid-virtualScrollerRenderZone

Styles applied to the virtualization render zone.

Rule name:virtualScrollerRenderZone


.MuiDataGrid-withBorderColor

Styles applied to cells, column header and other elements that have border. Sets border color only.

Rule name:withBorderColor



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