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 '/packages/grid/x-data-grid-pro/src/DataGridPro';
// or
import { DataGridPro } from '/packages/grid/x-data-grid-pro/src';
Learn about the difference by reading this guide on minimizing bundle size.

Props

columnsRequired

Set of columns of type GridColDef[].

Type:

Array<object>

rowsRequired

Set of rows of type GridRowsProp.

Type:

Array<object>

apiRef

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

Type:

{ current: object }

aria-label

The label of the grid.

Type:

string

aria-labelledby

The id of the element containing a label for the grid.

Type:

string

autoHeight

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

Type:

bool

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

cellModesModel

Controls the modes of the cells.

Type:

object

checkboxSelection

If true, the grid get a first column with a checkbox that allows to select rows.

Type:

bool

checkboxSelectionVisibleOnly

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.

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 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 grid. If defined, the grid will ignore the hide property in GridColDef.

Type:

object

components

Overridable components.

Type:

object

componentsProps

Overridable components props dynamically passed to the component at rendering.

Type:

object

defaultGroupingExpansionDepth

If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.

Type:

number

Default:

0

density

Set the density of the grid.

Type:

'comfortable' | 'compact' | 'standard'

Default:

"standard"

detailPanelExpandedRowIds

The row ids to show the detail panel.

Type:

Array<number | string>

disableChildrenFiltering

If true, the filtering will only be applied to the top level rows when grouping rows with the treeData prop.

Type:

bool

disableChildrenSorting

If true, the sorting will only be applied to the top level rows when grouping rows with the treeData prop.

Type:

bool

disableColumnFilter

If true, column filters are disabled.

Type:

bool

disableColumnMenu

If true, the column menu is disabled.

Type:

bool

disableColumnPinning

If true, the column pinning is disabled.

Type:

bool

disableColumnReorder

If true, reordering columns is disabled.

Type:

bool

disableColumnResize

If true, resizing columns is disabled.

Type:

bool

disableColumnSelector

If true, hiding/showing columns is disabled.

Type:

bool

disableDensitySelector

If true, the density selector is disabled.

Type:

bool

disableMultipleColumnsFiltering

If true, filtering with multiple columns is disabled.

Type:

bool

disableMultipleColumnsSorting

If true, sorting with multiple columns is disabled.

Type:

bool

disableMultipleRowSelection

If true, multiple selection using the Ctrl or CMD key is disabled.

Type:

bool

disableRowSelectionOnClick

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

Type:

bool

disableVirtualization

If true, the virtualization is disabled.

Type:

bool

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, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }

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 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.


getDetailPanelHeight

Function that returns the height of the row detail panel.

Type:

func

Default:

"() => 500"

Signature:

function(params: GridRowParams) => number | string

Returns: The height in pixels or "auto" to use the content height.


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.


getTreeDataPath

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.

Type:

func

Signature:

function(row: R) => Array
  • row The row from which we want the path.

Returns: The path to the row.


groupingColDef

The grouping column used by the tree data.

Type:

func | object

hideFooter

If true, the footer component is hidden.

Type:

bool

hideFooterPagination

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

Type:

bool

hideFooterRowCount

If true, the row count in the footer is hidden. It has no effect if the pagination is enabled.

Type:

bool

Default:

false

hideFooterSelectedRowCount

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

Type:

bool

initialState

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.

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.


isGroupExpandedByDefault

Determines if a group should be expanded after its creation. This prop takes priority over the defaultGroupingExpansionDepth prop.

Type:

func

Signature:

function(node: GridGroupNode) => boolean
  • node The node of the group to test.

Returns: A boolean indicating if the group is expanded.


isRowSelectable

Determines if a row can be selected.

Type:

func

Signature:

function(params: GridRowParams) => boolean

Returns: A boolean indicating if the cell is selectable.


keepColumnPositionIfDraggedOutside

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.

Type:

bool

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

loading

If true, a loading overlay is displayed.

Type:

bool

localeText

Set the locale text of the 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.

onColumnResize

Callback fired while a column is being resized.

Type:

func

Signature:

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

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.

onColumnWidthChange

Callback fired when the width of a column is changed.

Type:

func

Signature:

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

onDetailPanelExpandedRowIdsChange

Callback fired when the detail panel of a row is opened or closed.

Type:

func

Signature:

function(ids: Array, details: GridCallbackDetails) => void
  • ids The ids of the rows which have the detail panel open.
  • details Additional details for this callback.

onFetchRows

Callback fired when rowCount is set and the next batch of virtualized rows is rendered.

Type:

func

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.

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.

onPinnedColumnsChange

Callback fired when the pinned columns have changed.

Type:

func

Signature:

function(pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => void
  • pinnedColumns The changed pinned columns.
  • 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 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.

onRowOrderChange

Callback fired when a row is being reordered.

Type:

func

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.

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.

onRowsScrollEnd

Callback fired when scrolling to the bottom of the grid viewport.

Type:

func

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.

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]

pagination

If true, pagination is enabled.

Type:

bool

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 }

pinnedColumns

The column fields to display pinned to left or right.

Type:

{ left?: Array<string>, right?: Array<string> }

pinnedRows

Rows data to pin on top or bottom.

Type:

{ bottom?: Array<object>, top?: Array<object> }

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 grid.

Type:

number

Default:

52

rowModesModel

Controls the modes of the rows.

Type:

object

rowReordering

If true, the reordering of rows is enabled.

Type:

bool

rowSelection

If false, the row selection mode is disabled.

Type:

bool

Default:

true

rowSelectionModel

Sets the row selection model of the grid.

Type:

Array<number | string> | number | string

rowsLoadingMode

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"

Type:

'client' | 'server'

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 grid inner scrollbar.

Type:

number

scrollEndThreshold

Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called.

Type:

number

Default:

80

showCellVerticalBorder

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

Type:

bool

showColumnVerticalBorder

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

Type:

bool

slotProps

Overridable components props dynamically passed to the component at rendering.

Type:

object

slots

Overridable components.

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 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

throttleRowsMs

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.

Type:

number

Default:

0

treeData

If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop.

Type:

bool

unstable_headerFilters

If true, enables the data grid filtering on header feature.

Type:

bool

unstable_ignoreValueFormatterDuringExport

If true, the 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.

CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.


.MuiDataGrid-actionsCellactionsCell

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


.MuiDataGrid-aggregationColumnHeaderaggregationColumnHeader

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


.MuiDataGrid-aggregationColumnHeader--alignLeftaggregationColumnHeader--alignLeft

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


.MuiDataGrid-aggregationColumnHeader--alignCenteraggregationColumnHeader--alignCenter

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


.MuiDataGrid-aggregationColumnHeader--alignRightaggregationColumnHeader--alignRight

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


.MuiDataGrid-aggregationColumnHeaderLabelaggregationColumnHeaderLabel

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


.MuiDataGrid-autoHeightautoHeight

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


.MuiDataGrid-booleanCellbooleanCell

Styles applied to the icon of the boolean cell.


.MuiDataGrid-cell--editablecell--editable

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


.MuiDataGrid-cell--editingcell--editing

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


.MuiDataGrid-cell--textCentercell--textCenter

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


.MuiDataGrid-cell--textLeftcell--textLeft

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


.MuiDataGrid-cell--textRightcell--textRight

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


.MuiDataGrid-cell--withRenderercell--withRenderer

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


.MuiDataGrid-cell--rangeTopcell--rangeTop

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


.MuiDataGrid-cell--rangeBottomcell--rangeBottom

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


.MuiDataGrid-cell--rangeLeftcell--rangeLeft

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


.MuiDataGrid-cell--rangeRightcell--rangeRight

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


.MuiDataGrid-cellcell

Styles applied to the cell element.


.MuiDataGrid-cellContentcellContent

Styles applied to the element that wraps the cell content.


.MuiDataGrid-cellCheckboxcellCheckbox

Styles applied to the cell checkbox element.


.MuiDataGrid-cellSkeletoncellSkeleton

Styles applied to the skeleton cell element.


.MuiDataGrid-checkboxInputcheckboxInput

Styles applied to the selection checkbox element.


.MuiDataGrid-columnHeader--alignCentercolumnHeader--alignCenter

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


.MuiDataGrid-columnHeader--alignLeftcolumnHeader--alignLeft

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


.MuiDataGrid-columnHeader--alignRightcolumnHeader--alignRight

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


.MuiDataGrid-columnHeader--draggingcolumnHeader--dragging

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


.MuiDataGrid-columnHeader--movingcolumnHeader--moving

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


.MuiDataGrid-columnHeader--numericcolumnHeader--numeric

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


.MuiDataGrid-columnHeader--sortablecolumnHeader--sortable

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


.MuiDataGrid-columnHeader--sortedcolumnHeader--sorted

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


.MuiDataGrid-columnHeader--filteredcolumnHeader--filtered

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


.MuiDataGrid-columnHeadercolumnHeader

Styles applied to the column header element.


.MuiDataGrid-columnGroupHeadercolumnGroupHeader

Styles applied to the column group header element.


.MuiDataGrid-columnHeaderCheckboxcolumnHeaderCheckbox

Styles applied to the header checkbox cell element.


.MuiDataGrid-columnHeaderDraggableContainercolumnHeaderDraggableContainer

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


.MuiDataGrid-rowReorderCellPlaceholderrowReorderCellPlaceholder

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


.MuiDataGrid-columnHeaderDropZonecolumnHeaderDropZone

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


.MuiDataGrid-columnHeaderTitlecolumnHeaderTitle

Styles applied to the column header's title element;


.MuiDataGrid-columnHeaderTitleContainercolumnHeaderTitleContainer

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


.MuiDataGrid-columnHeaderTitleContainerContentcolumnHeaderTitleContainerContent

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


.MuiDataGrid-columnHeader--filledGroupcolumnHeader--filledGroup

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


.MuiDataGrid-columnHeader--emptyGroupcolumnHeader--emptyGroup

Styles applied to the empty column group header cell.


.MuiDataGrid-columnHeader--showColumnBordercolumnHeader--showColumnBorder

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


.MuiDataGrid-columnHeaderscolumnHeaders

Styles applied to the column headers.


.MuiDataGrid-columnHeadersInnercolumnHeadersInner

Styles applied to the column headers's inner element.


.MuiDataGrid-columnHeadersInner--scrollablecolumnHeadersInner--scrollable

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


.MuiDataGrid-columnSeparator--resizablecolumnSeparator--resizable

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


.MuiDataGrid-columnSeparator--resizingcolumnSeparator--resizing

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


.MuiDataGrid-columnSeparator--sideLeftcolumnSeparator--sideLeft

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


.MuiDataGrid-columnSeparator--sideRightcolumnSeparator--sideRight

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


.MuiDataGrid-columnSeparatorcolumnSeparator

Styles applied to the column header separator element.


.MuiDataGrid-columnsPanelcolumnsPanel

Styles applied to the columns panel element.


.MuiDataGrid-columnsPanelRowcolumnsPanelRow

Styles applied to the columns panel row element.


.MuiDataGrid-detailPaneldetailPanel

Styles applied to the detail panel element.


.MuiDataGrid-detailPanelsdetailPanels

Styles applied to the detail panels wrapper element.


.MuiDataGrid-detailPanelToggleCelldetailPanelToggleCell

Styles applied to the detail panel toggle cell element.


.MuiDataGrid-detailPanelToggleCell--expandeddetailPanelToggleCell--expanded

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


.MuiDataGrid-footerCellfooterCell

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


.MuiDataGrid-panelpanel

Styles applied to the panel element.


.MuiDataGrid-panelHeaderpanelHeader

Styles applied to the panel header element.


.MuiDataGrid-panelWrapperpanelWrapper

Styles applied to the panel wrapper element.


.MuiDataGrid-panelContentpanelContent

Styles applied to the panel content element.


.MuiDataGrid-panelFooterpanelFooter

Styles applied to the panel footer element.


.MuiDataGrid-paperpaper

Styles applied to the paper element.


.MuiDataGrid-editBooleanCelleditBooleanCell

Styles applied to root of the boolean edit component.


.MuiDataGrid-filterFormfilterForm

Styles applied to the root of the filter form component.


.MuiDataGrid-filterFormDeleteIconfilterFormDeleteIcon

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


.MuiDataGrid-filterFormLogicOperatorInputfilterFormLogicOperatorInput

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


.MuiDataGrid-filterFormColumnInputfilterFormColumnInput

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


.MuiDataGrid-filterFormOperatorInputfilterFormOperatorInput

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


.MuiDataGrid-filterFormValueInputfilterFormValueInput

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


.MuiDataGrid-editInputCelleditInputCell

Styles applied to the root of the input component.


.MuiDataGrid-filterIconfilterIcon

Styles applied to the filter icon element.


.MuiDataGrid-footerContainerfooterContainer

Styles applied to the footer container element.


.MuiDataGrid-iconButtonContainericonButtonContainer

Styles applied to the column header icon's container.


.MuiDataGrid-iconSeparatoriconSeparator

Styles applied to the column header separator icon element.


.MuiDataGrid-headerFilterRowheaderFilterRow

Styles applied to the column header filter row.


.MuiDataGrid-mainmain

Styles applied to the main container element.


.MuiDataGrid-menumenu

Styles applied to the menu element.


.MuiDataGrid-menuIconmenuIcon

Styles applied to the menu icon element.


.MuiDataGrid-menuIconButtonmenuIconButton

Styles applied to the menu icon button element.


.MuiDataGrid-menuOpenmenuOpen

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


.MuiDataGrid-menuListmenuList

Styles applied to the menu list element.


.MuiDataGrid-overlayWrapperoverlayWrapper

Styles applied to the overlay wrapper element.


.MuiDataGrid-overlayWrapperInneroverlayWrapperInner

Styles applied to the overlay wrapper inner element.


.MuiDataGrid-overlayoverlay

Styles applied to the overlay element.


.MuiDataGrid-virtualScrollervirtualScroller

Styles applied to the virtualization container.


.MuiDataGrid-virtualScrollerContentvirtualScrollerContent

Styles applied to the virtualization content.


.MuiDataGrid-virtualScrollerContent--overflowedvirtualScrollerContent--overflowed

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


.MuiDataGrid-virtualScrollerRenderZonevirtualScrollerRenderZone

Styles applied to the virtualization render zone.


.MuiDataGrid-pinnedColumnspinnedColumns

Styles applied to the pinned columns.


.MuiDataGrid-pinnedColumns--leftpinnedColumns--left

Styles applied to the left pinned columns.


.MuiDataGrid-pinnedColumns--rightpinnedColumns--right

Styles applied to the right pinned columns.


.MuiDataGrid-pinnedColumnHeaderspinnedColumnHeaders

Styles applied to the pinned column headers.


.MuiDataGrid-pinnedColumnHeaders--leftpinnedColumnHeaders--left

Styles applied to the left pinned column headers.


.MuiDataGrid-pinnedColumnHeaders--rightpinnedColumnHeaders--right

Styles applied to the right pinned column headers.


.MuiDataGrid-rootroot

Styles applied to the root element.


.MuiDataGrid-root--densityStandardroot--densityStandard

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


.MuiDataGrid-root--densityComfortableroot--densityComfortable

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


.MuiDataGrid-root--densityCompactroot--densityCompact

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


.MuiDataGrid-root--disableUserSelectionroot--disableUserSelection

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


.MuiDataGrid-row--editablerow--editable

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


.MuiDataGrid-row--editingrow--editing

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


.MuiDataGrid-row--draggingrow--dragging

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


.MuiDataGrid-row--lastVisiblerow--lastVisible

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


.MuiDataGrid-row--dynamicHeightrow--dynamicHeight

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


.MuiDataGrid-row--detailPanelExpandedrow--detailPanelExpanded

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


.MuiDataGrid-rowrow

Styles applied to the row element.


.MuiDataGrid-rowCountrowCount

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


.MuiDataGrid-rowReorderCellContainerrowReorderCellContainer

Styles applied to the row reorder cell container element.


.MuiDataGrid-rowReorderCellrowReorderCell

Styles applied to the root element of the row reorder cell


.MuiDataGrid-rowReorderCell--draggablerowReorderCell--draggable

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


.MuiDataGrid-scrollAreascrollArea

Styles applied to both scroll area elements.


.MuiDataGrid-scrollArea--leftscrollArea--left

Styles applied to the left scroll area element.


.MuiDataGrid-scrollArea--rightscrollArea--right

Styles applied to the right scroll area element.


.MuiDataGrid-selectedRowCountselectedRowCount

Styles applied to the footer selected row count element.


.MuiDataGrid-sortIconsortIcon

Styles applied to the sort icon element.


.MuiDataGrid-toolbarContainertoolbarContainer

Styles applied to the toolbar container element.


.MuiDataGrid-toolbarFilterListtoolbarFilterList

Styles applied to the toolbar filter list element.


.MuiDataGrid-withBorderColorwithBorderColor

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


.MuiDataGrid-cell--withRightBordercell--withRightBorder

Styles applied the cell if `showColumnVerticalBorder={true}`.


.MuiDataGrid-columnHeader--withRightBordercolumnHeader--withRightBorder

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


.MuiDataGrid-treeDataGroupingCelltreeDataGroupingCell

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


.MuiDataGrid-treeDataGroupingCellToggletreeDataGroupingCellToggle

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


.MuiDataGrid-groupingCriteriaCellgroupingCriteriaCell

Styles applied to the root element of the grouping criteria cell


.MuiDataGrid-groupingCriteriaCellTogglegroupingCriteriaCellToggle

Styles applied to the toggle of the grouping criteria cell


.MuiDataGrid-pinnedRowspinnedRows

Styles applied to the pinned rows container.


.MuiDataGrid-pinnedRows--toppinnedRows--top

Styles applied to the top pinned rows container.


.MuiDataGrid-pinnedRows--bottompinnedRows--bottom

Styles applied to the bottom pinned rows container.


.MuiDataGrid-pinnedRowsRenderZonepinnedRowsRenderZone

Styles applied to pinned rows render zones.


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

Slots

baseButton

Default: Button

Description: The custom Button component used in the grid.


baseCheckbox

Default: Checkbox

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


baseChip

Default: Chip

Description: The custom Chip component used in the grid.


baseFormControl

Default: FormControl

Description: The custom FormControl component used in the grid.


baseIconButton

Default: IconButton

Description: The custom IconButton component used in the grid.


baseInputAdornment

Default: InputAdornment

Description: The custom InputAdornment component used in the grid.


baseInputLabel

Default: InputLabel

Description: The custom InputLabel component used in the grid.


basePopper

Default: Popper

Description: The custom Popper component used in the grid.


baseSelect

Default: Select

Description: The custom Select component used in the grid.


baseSelectOption

Default: MenuItem

Description: The custom SelectOption component used in the grid.


baseSwitch

Default: Switch

Description: The custom Switch component used in the grid.


baseTextField

Default: TextField

Description: The custom TextField component used in the grid.


baseTooltip

Default: Tooltip

Description: The custom Tooltip component used in the grid.


booleanCellFalseIcon

Default: GridCloseIcon

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


booleanCellTrueIcon

Default: GridCheckIcon

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


cell

Default: GridCell

Description: Component rendered for each cell.


columnFilteredIcon

Default: GridFilterAltIcon

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


columnHeaderFilterIconButton

Default: GridColumnHeaderFilterIconButton

Description: Filter icon component rendered in each column header.


columnHeaders

Default: DataGridColumnHeaders

Description: Component responsible for rendering the column headers.


columnMenu

Default: GridColumnMenu

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


columnMenuClearIcon

Default: GridClearIcon

Description: Icon displayed in column menu for clearing values


columnMenuFilterIcon

Default: GridFilterAltIcon

Description: Icon displayed in column menu for filter


columnMenuHideIcon

Default: GridVisibilityOffIcon

Description: Icon displayed in column menu for hiding column


columnMenuIcon

Default: GridTripleDotsVerticalIcon

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


columnMenuManageColumnsIcon

Default: GridViewColumnIcon

Description: Icon displayed in column menu for showing all columns


columnMenuPinLeftIcon

Default: GridPushPinLeftIcon

Description: Icon displayed in column menu for left pinning


columnMenuPinRightIcon

Default: GridPushPinRightIcon

Description: Icon displayed in column menu for right pinning


columnMenuSortAscendingIcon

Default: GridArrowUpwardIcon

Description: Icon displayed in column menu for ascending sort


columnMenuSortDescendingIcon

Default: GridArrowDownwardIcon

Description: Icon displayed in column menu for descending sort


columnReorderIcon

Default: GridDragIcon

Description: Icon displayed on the column reorder button.


columnResizeIcon

Default: GridSeparatorIcon

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


columnSelectorIcon

Default: GridColumnIcon

Description: Icon displayed on the column menu selector tab.


columnSortedAscendingIcon

Default: GridArrowUpwardIcon

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


columnSortedDescendingIcon

Default: GridArrowDownwardIcon

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


columnUnsortedIcon

Default: GridColumnUnsortedIcon

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


columnsPanel

Default: GridColumnsPanel

Description: GridColumns panel component rendered when clicking the columns button.


densityComfortableIcon

Default: GridViewStreamIcon

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


densityCompactIcon

Default: GridViewHeadlineIcon

Description: Icon displayed on the compact density option in the toolbar.


densityStandardIcon

Default: GridTableRowsIcon

Description: Icon displayed on the standard density option in the toolbar.


detailPanelCollapseIcon

Default: GridRemoveIcon

Description: Icon displayed on the detail panel toggle column when expanded.


detailPanelExpandIcon

Default: GridAddIcon

Description: Icon displayed on the detail panel toggle column when collapsed.


exportIcon

Default: GridSaveAltIcon

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


filterPanel

Default: GridFilterPanel

Description: Filter panel component rendered when clicking the filter button.


filterPanelAddIcon

Default: GridAddIcon

Description: Icon displayed for deleting the filter from filter panel.


filterPanelDeleteIcon

Default: GridDeleteIcon

Description: Icon displayed for deleting the filter from filter panel.


filterPanelRemoveAllIcon

Default: GridDeleteForeverIcon

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


footer

Default: GridFooter

Description: Footer component rendered at the bottom of the grid viewport.


groupingCriteriaCollapseIcon

Default: GridExpandMoreIcon

Description: Icon displayed on the grouping column when the children are expanded


groupingCriteriaExpandIcon

Default: GridKeyboardArrowRight

Description: Icon displayed on the grouping column when the children are collapsed


headerFilterCell

Default: GridHeaderFilterCell

Description: Component responsible for showing menu adornment in Header filter row


headerFilterMenu

Default: GridHeaderFilterMenu

Description: Component responsible for showing menu in Header filter row


loadIcon

Default: GridLoadIcon

Description: Icon displayed on the input while processing.


loadingOverlay

Default: GridLoadingOverlay

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


moreActionsIcon

Default: GridMoreVertIcon

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


noResultsOverlay

Default: GridNoResultsOverlay

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


noRowsOverlay

Default: GridNoRowsOverlay

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


openFilterButtonIcon

Default: GridFilterListIcon

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


pagination

Default: Pagination

Description: Pagination component rendered in the grid footer by default.


panel

Default: GridPanel

Description: Panel component wrapping the filters and columns panels.


preferencesPanel

Default: GridPreferencesPanel

Description: PreferencesPanel component rendered inside the Header component.


quickFilterClearIcon

Default: GridCloseIcon

Description: Icon displayed on the quick filter reset input.


quickFilterIcon

Default: GridSearchIcon

Description: Icon displayed on the quick filter input.


row

Default: GridRow

Description: Component rendered for each row.


rowReorderIcon

Default: GridDragIcon

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


skeletonCell

Default: GridSkeletonCell

Description: Component rendered for each skeleton cell.


toolbar

Default: null

Description: Toolbar component rendered inside the Header component.


treeDataCollapseIcon

Default: GridExpandMoreIcon

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


treeDataExpandIcon

Default: GridKeyboardArrowRight

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


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