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

Import

import { DataGridPro } from '@mui/x-data-grid-pro/DataGridPro';
// or
import { DataGridPro } from '@mui/x-data-grid-pro';
// or
import { DataGridPro } from '@mui/x-data-grid-premium';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Required

Set of columns of type GridColDef[].

Type:Array<object>


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

Type:{ current: object }


The label of the Data Grid.

Type:string


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

Type:string


Deprecated

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

Type:bool

Default:false


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

Type:bool

Default:false


If true, columns are autosized after the datagrid is mounted.

Type:bool

Default:false


The options for autosize when user-initiated.

Type:{ columns?: Array<string>, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }


Controls the modes of the cells.

Type:object


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

Type:bool

Default:false


If true, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with checkboxSelection. It only works if the pagination is enabled.

Type:bool

Default:false


Override or extend the styles applied to the component.

See CSS classes API below for more details.

Type:object


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

Type:string

Default:'\t'


Column region in pixels to render before/after the viewport

Type:number

Default:150


Sets the height in pixels of the column group headers in the Data Grid. Inherits the columnHeaderHeight value if not set.

Type:number


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

Type:number

Default:56


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

Type:object


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


Set the density of the Data Grid.

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

Default:"standard"


The row ids to show the detail panel.

Type:Array<number
| string>


If true, column autosizing on header separator double-click is disabled.

Type:bool

Default:false


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

Type:bool

Default:false


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

Type:bool

Default:false


If true, column filters are disabled.

Type:bool

Default:false


If true, the column menu is disabled.

Type:bool

Default:false


If true, the column pinning is disabled.

Type:bool

Default:false


If true, reordering columns is disabled.

Type:bool

Default:false


If true, resizing columns is disabled.

Type:bool

Default:false


If true, hiding/showing columns is disabled.

Type:bool

Default:false


If true, the column sorting feature will be disabled.

Type:bool

Default:false


If true, the density selector is disabled.

Type:bool

Default:false


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

Type:bool

Default:false


If true, filtering with multiple columns is disabled.

Type:bool

Default:false


If true, the sorting with multiple columns is disabled.

Type:bool

Default:false


If true, multiple selection using the Ctrl/CMD or Shift key is disabled. The MIT DataGrid will ignore this prop, unless checkboxSelection is enabled.

Type:bool

Default:false (`!props.checkboxSelection` for MIT Data Grid)


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

Type:bool

Default:false


If true, the virtualization is disabled.

Type:bool

Default:false


Controls whether to use the cell or row editing.

Type:'cell'
| 'row'

Default:"cell"


Use if the actual rowCount is not known upfront, but an estimation is available. If some rows have children (for instance in the tree data), this number represents the amount of top level rows. Applicable only with paginationMode="server" and when rowCount="-1"

Type:number


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


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

Type:number

Default:150


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"


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 }


Function that applies CSS classes dynamically on cells.

Type:func

Signature:
function(params: GridCellParams) => string

Returns: The CSS class to apply to the cell.


Function that returns the element to render in row detail.

Type:func

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

Returns: The row detail element.


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.


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.


Function that applies CSS classes dynamically on rows.

Type:func

Signature:
function(params: GridRowClassNameParams) => string

Returns: The CSS class to apply to the row.


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.


Return the id of a given GridRowModel.

Type:func


Function that allows to specify the spacing between rows.

Type:func

Signature:
function(params: GridRowSpacingParams) => GridRowSpacing

Returns: The row spacing values.


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.


The grouping column used by the tree data.

Type:func
| object


Override the height of the header filters.

Type:number


If true, the header filters feature is enabled.

Type:bool

Default:false


If true, the footer component is hidden.

Type:bool

Default:false


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

Type:bool

Default:false


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

Type:bool

Default:false


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

Type:bool

Default:false


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


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


If select, a group header checkbox in indeterminate state (like "Select All" checkbox) will select all the rows under it. If deselect, it will deselect all the rows under it. Works only if checkboxSelection is enabled.

Type:'deselect'
| 'select'

Default:"deselect"


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


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.


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.


Determines if a row can be selected.

Type:func

Signature:
function(params: GridRowParams) => boolean

Returns: A boolean indicating if the row is selectable.


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

Default:false


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


If true, a loading overlay is displayed.

Type:bool

Default:false


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


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

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

Default:console


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 of the inline styles for Content Security Policy.

Type:string


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.

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.

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.

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.

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.

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.

Callback called when the data is copied to the clipboard.

Type:func

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

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.

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

Type:func

Signature:
function(params: GridColumnHeaderParams, event: MuiEvent) => void
  • params With all properties from GridColumnHeaderParams.
  • event The event object.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Callback fired when the density changes.

Type:func

Signature:
function(density: GridDensity) => void
  • density New density value.

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.

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.

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.

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.

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.

Callback fired when the pagination meta has changed.

Type:func

Signature:
function(paginationMeta: GridPaginationMeta) => void
  • paginationMeta Updated pagination meta.

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.

Callback fired when the pinned columns have changed.

Type:func

Signature:
function(pinnedColumns: GridPinnedColumnFields, details: GridCallbackDetails) => void
  • pinnedColumns The changed pinned columns.
  • details Additional details for this callback.

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.

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.

Callback called when processRowUpdate throws an error or rejects.

Type:func

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

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.

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.

Callback fired when the row count has changed.

Type:func

Signature:
function(count: number) => void
  • count Updated row count.

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.

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.

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.

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.

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.

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.

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.

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.

Select the pageSize dynamically using the component UI.

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

Default:[25, 50, 100]


If true, pagination is enabled.

Type:bool

Default:false


The extra information about the pagination state of the Data Grid. Only applicable with paginationMode="server".

Type:{ hasNextPage?: bool }


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"


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

Type:{ page: number, pageSize: number }


The column fields to display pinned to left or right.

Type:object


Rows data to pin on top or bottom.

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


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

Type:func

Signature:
function(newRow: R, oldRow: R, params: { rowId: GridRowId }) => Promise | R
  • newRow Row object with the new values.
  • oldRow Row object with the old values.
  • params Additional parameters.

Returns: The final values to update the row.


The milliseconds throttle delay for resizing the grid.

Type:number

Default:60


Row region in pixels to render before/after the viewport

Type:number

Default:150


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. Only works with paginationMode="server", ignored when paginationMode="client".

Type:number


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

Type:number

Default:52


Controls the modes of the rows.

Type:object


Deprecated

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


If true, the reordering of rows is enabled.

Type:bool

Default:false


Set of rows of type GridRowsProp.

Type:Array<object>

Default:[]


If false, the row selection mode is disabled.

Type:bool

Default:true


Sets the row selection model of the Data Grid.

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


When rowSelectionPropagation.descendants is set to true. - Selecting a parent selects all its filtered descendants automatically. - Deselecting a parent row deselects all its filtered descendants automatically.
When rowSelectionPropagation.parents is set to true - Selecting all the filtered descendants of a parent selects the parent automatically. - Deselecting a descendant of a selected parent deselects the parent automatically.
Works with tree data and row grouping on the client-side only.

Type:{ descendants?: bool, parents?: bool }

Default:{ parents: false, descendants: false }


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'


Sets the type of space between rows added by getRowSpacing.

Type:'border'
| 'margin'

Default:"margin"


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

Type:number


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

Type:number

Default:80


If true, vertical borders will be displayed between cells.

Type:bool

Default:false


If true, vertical borders will be displayed between column header items.

Type:bool

Default:false


Overridable components props dynamically passed to the component at rendering.

Type:object


Overridable components.

See Slots API below for more details.

Type:object


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"


The order of the sorting sequence.

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

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


Set the sort model of the Data Grid.

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


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


If positive, the Data 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


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

Type:bool

Default:false


Definition of the column rendered when the unstable_listView prop is enabled.

Type:{ align?: 'center'
| 'left'
| 'right', cellClassName?: func
| string, display?: 'flex'
| 'text', field: string, renderCell?: func }


If true, displays the data in a list view. Use in combination with unstable_listColumn.

Type:bool


If true, the Data Grid will auto span the cells over the rows having the same value.

Type:bool

Default:false


The ref is forwarded to the root element.

Slots

Component responsible for showing menu adornment in Header filter row

Default component: GridHeaderFilterCell


Component responsible for showing menu in Header filter row

Default component: GridHeaderFilterMenu


The custom Chip component used in the grid.

Default component: Chip


Component rendered for each cell.

Class name: .MuiDataGridPro-cell

Default component: GridCell


Component rendered for each skeleton cell.

Default component: GridSkeletonCell


Filter icon component rendered in each column header.

Default component: GridColumnHeaderFilterIconButton


Sort icon component rendered in each column header.

Default component: GridColumnHeaderSortIcon


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

Default component: GridColumnMenu


Component responsible for rendering the column headers.

Class name: .MuiDataGridPro-columnHeaders

Default component: GridColumnHeaders


Component responsible for rendering the detail panels.

Class name: .MuiDataGridPro-detailPanels

Default component: GridDetailPanels


Footer component rendered at the bottom of the grid viewport.

Default component: GridFooter


Row count component rendered in the footer

Default component: GridRowCount


Toolbar component rendered inside the Header component.

Default component: null


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

Default component: GridLoadingOverlay


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

Default component: GridNoResultsOverlay


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

Default component: GridNoRowsOverlay


Pagination component rendered in the grid footer by default.

Default component: Pagination


Filter panel component rendered when clicking the filter button.

Default component: GridFilterPanel


GridColumns panel component rendered when clicking the columns button.

Default component: GridColumnsPanel


Component used inside Grid Columns panel to manage columns.

Class name: .MuiDataGridPro-columnsManagement

Default component: GridColumnsManagement


Panel component wrapping the filters and columns panels.

Class name: .MuiDataGridPro-panel

Default component: GridPanel


Component rendered for each row.

Class name: .MuiDataGridPro-row

Default component: GridRow


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

Default component: Badge


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

Default component: Checkbox


The custom Divider component used in the grid.

Default component: Divider


The custom InputAdornment component used in the grid.

Default component: InputAdornment


The custom TextField component used in the grid.

Default component: TextField


The custom FormControl component used in the grid.

Default component: FormControl


The custom Select component used in the grid.

Default component: Select


The custom Button component used in the grid.

Default component: Button


The custom IconButton component used in the grid.

Default component: IconButton


The custom Tooltip component used in the grid.

Default component: Tooltip


The custom Popper component used in the grid.

Default component: Popper


The custom InputLabel component used in the grid.

Default component: InputLabel


The custom SelectOption component used in the grid.

Default component: MenuItem


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

Default component: GridCheckIcon


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

Default component: GridCloseIcon


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

Default component: GridTripleDotsVerticalIcon


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

Default component: GridFilterListIcon


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

Default component: GridFilterAltIcon


Icon displayed on the column menu selector tab.

Default component: GridColumnIcon


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

Default component: GridColumnUnsortedIcon


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

Default component: GridArrowUpwardIcon


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

Default component: GridArrowDownwardIcon


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

Default component: GridSeparatorIcon


Icon displayed on the compact density option in the toolbar.

Default component: GridViewHeadlineIcon


Icon displayed on the standard density option in the toolbar.

Default component: GridTableRowsIcon


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

Default component: GridViewStreamIcon


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

Default component: GridSaveAltIcon


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

Default component: GridMoreVertIcon


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

Default component: GridKeyboardArrowRight


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

Default component: GridExpandMoreIcon


Icon displayed on the grouping column when the children are collapsed

Default component: GridKeyboardArrowRight


Icon displayed on the grouping column when the children are expanded

Default component: GridExpandMoreIcon


Icon displayed on the detail panel toggle column when collapsed.

Default component: GridAddIcon


Icon displayed on the detail panel toggle column when expanded.

Default component: GridRemoveIcon


Icon displayed for deleting the filter from filter panel.

Default component: GridAddIcon


Icon displayed for deleting the filter from filter panel.

Default component: GridDeleteIcon


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

Default component: GridDeleteForeverIcon


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

Default component: GridDragIcon


Icon displayed on the quick filter input.

Default component: GridSearchIcon


Icon displayed on the quick filter reset input.

Default component: GridCloseIcon


Icon displayed in column menu for hiding column

Default component: GridVisibilityOffIcon


Icon displayed in column menu for ascending sort

Default component: GridArrowUpwardIcon


Icon displayed in column menu for descending sort

Default component: GridArrowDownwardIcon


Icon displayed in column menu for filter

Default component: GridFilterAltIcon


Icon displayed in column menu for showing all columns

Default component: GridViewColumnIcon


Icon displayed in column menu for clearing values

Default component: GridClearIcon


Icon displayed on the input while processing.

Default component: GridLoadIcon


Icon displayed on the column reorder button.

Default component: GridDragIcon


Icon displayed in column menu for left pinning

Default component: GridPushPinLeftIcon


Icon displayed in column menu for right pinning

Default component: GridPushPinRightIcon


CSS classes

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

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

Rule name:actionsCell


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

Rule name:aggregationColumnHeader


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

Rule name:aggregationColumnHeader--alignCenter


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

Rule name:aggregationColumnHeader--alignLeft


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

Rule name:aggregationColumnHeader--alignRight


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

Rule name:aggregationColumnHeaderLabel


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

Rule name:autoHeight


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

Rule name:autosizing


Styles applied to the icon of the boolean cell.

Rule name:booleanCell


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

Rule name:cell--editable


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

Rule name:cell--editing


Styles applied to the cell element in flex display mode.

Rule name:cell--flex


Styles applied to the cell element if it is pinned to the left.

Rule name:cell--pinnedLeft


Styles applied to the cell element if it is pinned to the right.

Rule name:cell--pinnedRight


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

Rule name:cell--rangeBottom


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

Rule name:cell--rangeLeft


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

Rule name:cell--rangeRight


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

Rule name:cell--rangeTop


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

Rule name:cell--selectionMode


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

Rule name:cell--textCenter


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

Rule name:cell--textLeft


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

Rule name:cell--textRight


Styles applied the cell if showColumnVerticalBorder={true}.

Rule name:cell--withLeftBorder


Styles applied the cell if showColumnVerticalBorder={true}.

Rule name:cell--withRightBorder


Styles applied to the cell checkbox element.

Rule name:cellCheckbox


Styles applied to the empty cell element.

Rule name:cellEmpty


Styles applied to the skeleton cell element.

Rule name:cellSkeleton


Styles applied to the selection checkbox element.

Rule name:checkboxInput


Styles applied to the column header element.

Rule name:columnHeader


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

Rule name:columnHeader--alignCenter


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

Rule name:columnHeader--alignLeft


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

Rule name:columnHeader--alignRight


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

Rule name:columnHeader--dragging


Styles applied to the empty column group header cell.

Rule name:columnHeader--emptyGroup


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

Rule name:columnHeader--filledGroup


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

Rule name:columnHeader--filtered


Styles applied to the last column header element.

Rule name:columnHeader--last


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

Rule name:columnHeader--moving


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

Rule name:columnHeader--numeric


Rule name:columnHeader--pinnedLeft


Rule name:columnHeader--pinnedRight


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

Rule name:columnHeader--sortable


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

Rule name:columnHeader--sorted


Rule name:columnHeader--withLeftBorder


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

Rule name:columnHeader--withRightBorder


Styles applied to the header checkbox cell element.

Rule name:columnHeaderCheckbox


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

Rule name:columnHeaderDraggableContainer


Styles applied to the column header's title element;

Rule name:columnHeaderTitle


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

Rule name:columnHeaderTitleContainer


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

Rule name:columnHeaderTitleContainerContent


Styles applied to the column header separator element.

Rule name:columnSeparator


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

Rule name:columnSeparator--resizable


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

Rule name:columnSeparator--resizing


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

Rule name:columnSeparator--sideLeft


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

Rule name:columnSeparator--sideRight


Styles applied to the columns management footer element.

Rule name:columnsManagementFooter


Styles applied to the columns management header element.

Rule name:columnsManagementHeader


Styles applied to the columns management row element.

Rule name:columnsManagementRow


Styles applied to the bottom container.

Rule name:container--bottom


Styles applied to the top container.

Rule name:container--top


Styles applied to the detail panel element.

Rule name:detailPanel


Styles applied to the detail panel toggle cell element.

Rule name:detailPanelToggleCell


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

Rule name:detailPanelToggleCell--expanded


Styles applied to root of the boolean edit component.

Rule name:editBooleanCell


Styles applied to the root of the input component.

Rule name:editInputCell


Styles applied to the root of the filter form component.

Rule name:filterForm


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

Rule name:filterFormColumnInput


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

Rule name:filterFormDeleteIcon


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

Rule name:filterFormLogicOperatorInput


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

Rule name:filterFormOperatorInput


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

Rule name:filterFormValueInput


Styles applied to the filter icon element.

Rule name:filterIcon


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

Rule name:footerCell


Styles applied to the footer container element.

Rule name:footerContainer


Styles applied to the root element of the grouping criteria cell

Rule name:groupingCriteriaCell


Styles applied to the toggle of the grouping criteria cell

Rule name:groupingCriteriaCellToggle


Styles applied to the column header filter row.

Rule name:headerFilterRow


Styles applied to the column header icon's container.

Rule name:iconButtonContainer


Styles applied to the column header separator icon element.

Rule name:iconSeparator


Styles applied to the main container element.

Rule name:main


Styles applied to the main container element when it has right pinned columns.

Rule name:main--hasPinnedRight


Styles applied to the menu element.

Rule name:menu


Styles applied to the menu icon element.

Rule name:menuIcon


Styles applied to the menu icon button element.

Rule name:menuIconButton


Styles applied to the menu list element.

Rule name:menuList


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

Rule name:menuOpen


Styles applied to the overlay element.

Rule name:overlay


Styles applied to the overlay wrapper element.

Rule name:overlayWrapper


Styles applied to the overlay wrapper inner element.

Rule name:overlayWrapperInner


Styles applied to the panel content element.

Rule name:panelContent


Styles applied to the panel footer element.

Rule name:panelFooter


Styles applied to the panel header element.

Rule name:panelHeader


Styles applied to the panel wrapper element.

Rule name:panelWrapper


Styles applied to the paper element.

Rule name:paper


Styles applied to the pinned columns.

Rule name:pinnedColumns


Styles applied to the pinned rows container.

Rule name:pinnedRows


Styles applied to the bottom pinned rows container.

Rule name:pinnedRows--bottom


Styles applied to the top pinned rows container.

Rule name:pinnedRows--top


Styles applied to pinned rows render zones.

Rule name:pinnedRowsRenderZone


Styles applied to the root element.

Rule name:root


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

Rule name:root--densityComfortable


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

Rule name:root--densityCompact


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

Rule name:root--densityStandard


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

Rule name:root--disableUserSelection


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

Rule name:row--detailPanelExpanded


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

Rule name:row--dragging


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

Rule name:row--dynamicHeight


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

Rule name:row--editable


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

Rule name:row--editing


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

Rule name:row--firstVisible


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

Rule name:row--lastVisible


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

Rule name:rowCount


Styles applied to the root element of the row reorder cell

Rule name:rowReorderCell


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

Rule name:rowReorderCell--draggable


Styles applied to the row reorder cell container element.

Rule name:rowReorderCellContainer


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

Rule name:rowReorderCellPlaceholder


Styles applied to the skeleton row element.

Rule name:rowSkeleton


Styles applied to both scroll area elements.

Rule name:scrollArea


Styles applied to the left scroll area element.

Rule name:scrollArea--left


Styles applied to the right scroll area element.

Rule name:scrollArea--right


Styles applied to the scrollbars.

Rule name:scrollbar


Styles applied to the horizontal scrollbar.

Rule name:scrollbar--horizontal


Styles applied to the horizontal scrollbar.

Rule name:scrollbar--vertical


Styles applied to the footer selected row count element.

Rule name:selectedRowCount


Styles applied to the sort icon element.

Rule name:sortIcon


Styles applied to the toolbar container element.

Rule name:toolbarContainer


Styles applied to the toolbar filter list element.

Rule name:toolbarFilterList


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

Rule name:treeDataGroupingCell


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

Rule name:treeDataGroupingCellToggle


Styles applied to the virtualization container.

Rule name:virtualScroller


Styles applied to the virtualization content.

Rule name:virtualScrollerContent


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

Rule name:virtualScrollerContent--overflowed


Styles applied to the virtualization render zone.

Rule name:virtualScrollerRenderZone


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

Rule name:withBorderColor


Styles applied the grid if showColumnVerticalBorder={true}.

Rule name:withVerticalBorder



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

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.