DataGridPro API

The API documentation of the DataGridPro React component. Learn more about the props, slots and CSS customization points.

Import

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

Component name

The name MuiDataGridPro can be used when providing default props or style overrides in the theme.

Props

Name	Type	Default	Description
columns*	GridColumns		Set of columns of type 'GridColumns'.
rows*	GridRowsProp		Set of rows of type 'GridRowsProp'.
apiRef	GridApiRef		The ref object that allows grid manipulation. Can be instantiated with 'useGridApiRef()'.
aria-label	string		The label of the grid.
aria-labelledby	string		The id of the element containing a label for the grid.
autoHeight	boolean	false	If true, the grid height is dynamic and follow the number of rows in the grid.
autoPageSize	boolean	false	If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.
checkboxSelection	boolean	false	If true, the grid get a first column with a checkbox that allows to select rows.
checkboxSelectionVisibleOnly	boolean	false	If true, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with checkboxSelection. It only works if the pagination is enabled.
classes	GridClasses		Override or extend the styles applied to the component. See CSS API below for more details.
className	string		CSS classname to add on the outer container.
columnBuffer	number	2	Number of columns rendered outside the grid viewport.
columnTypes	GridColumnTypesRecord		Extend native column types with your new column types.
components	GridSlotsComponent		Overrideable components slots.
componentsProps	GridSlotsComponentsProps		Overrideable components props dynamically passed to the component at rendering.
density	Density	standard	Sets the density of the grid.
disableColumnFilter	boolean	false	If true, column filters are disabled.
disableColumnMenu	boolean	false	If true, the column menu is disabled.
disableColumnReorder	boolean	false	If true, reordering columns is disabled.
disableColumnSelector	boolean	false	If true, the column selector is disabled.
disableColumnResize	boolean	false	If true, resizing columns is disabled.
disableDensitySelector	boolean	false	If true, the density selector is disabled.
disableExtendRowFullWidth	boolean	false	If true, rows will not be extended to fill the full width of the grid container.
disableMultipleColumnsFiltering	boolean	false	If true, filtering with multiple columns is disabled.
disableMultipleColumnsSorting	boolean	false	If true, sorting with multiple columns is disabled.
disableMultipleSelection	boolean	false	If true, multiple selection using the CTRL or CMD key is disabled.
disableSelectionOnClick	boolean	false	If true, the selection on click on a row or cell is disabled.
disableVirtualization	boolean	false	If true, the virtualization is disabled.
error	any		An error that will turn the grid into its error state and display the error component.
editMode	GridEditMode	'cell'	Controls whether to use the cell or row editing.
editRowsModel	GridEditRowsModel	undefined	Set the edit rows model of the grid.
filterMode	GridFeatureMode	'client'	Filtering can be processed on the server or client-side. Set it to server if you would like to handle filtering on the server-side.
filterModel	GridFilterModel		Set the filter model of the grid.
getCellClassName	(params: GridCellParams) => string		Function that applies CSS classes dynamically on cells.
getRowClassName	(params: GridRowParams) => string		Function that applies CSS classes dynamically on rows.
getRowId	GridRowIdGetter	(row)=> row.id	A function that allows the grid to retrieve the row id.
headerHeight	number	56	Set the height in pixel of the column headers in the grid.
hideFooter	boolean	false	If true, the footer component is hidden.
hideFooterPagination	boolean	false	If true, the pagination component in the footer is hidden.
hideFooterRowCount	boolean	false	If true, the row count in the footer is hidden.
hideFooterSelectedRowCount	boolean	false	If true, the selected row count in the footer is hidden.
icons	IconsOptions		Set of icons used in the grid.
isCellEditable	(params: GridCellParams) => boolean		Callback fired when a cell is rendered, returns true if the cell is editable.
isRowSelectable	(params: GridRowParams) => boolean		Determines if a row can be selected.
loading	boolean	false	If true, a loading overlay is displayed..
localeText	GridLocaleText		Set of text labels used in the grid. You can find all the translation keys supported in the source in the GitHub repository.
logger	Logger	null	Pass a custom logger in the components that implements the 'Logger' interface.
logLevel	string | false	false	Allows to pass the logging level or false to turn off logging.
nonce	string		Nonce of the inline styles for Content Security Policy.
onCellBlur	(params: GridCellParams, event: MuiEvent<React.FocusEvent>) => void		Callback fired when the active element leaves a cell.
onCellClick	(params: GridCellParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a click event comes from a cell element.
onCellDoubleClick	(params: GridCellParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a double click event comes from a cell element.
onCellFocusOut	(params: GridCellParams, event?: MuiEvent) => void		Callback fired when a cell loses focus.
onCellKeyDown	(params: GridCellParams, event: MuiEvent<React.KeyboardEvent>) => void		Callback fired when a keydown event comes from a cell element.
onCellOver	(params: GridCellParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a mouse over event comes from a cell element.
onCellOut	(params: GridCellParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a mouse out comes from a cell element.
onCellEnter	(params: GridCellParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a mouse enter event comes from a cell element.
onCellLeave	(params: GridCellParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a mouse leave event comes from a cell element.
onColumnHeaderClick	(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a click event comes from a column header element.
onColumnHeaderDoubleClick	(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a double click event comes from a column header element.
onColumnHeaderOver	(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a mouseover event comes from a column header element.
onColumnHeaderOut	(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a mouseout event comes from a column header element.
onColumnHeaderEnter	(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a mouse enter event comes from a column header element.
onColumnHeaderLeave	(params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a mouse leave event comes from a column header element.
onColumnOrderChange	(params: GridColumnOrderChangeParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a column is reordered.
onColumnResize	(params: GridColumnResizeParams, event: MuiEvent<{}>) => void		Callback fired while a column is being resized.
onColumnWidthChange	(params: GridColumnResizeParams, event: MuiEvent<{}>) => void		Callback fired when the width of a column is changed.
onColumnVisibilityChange	(params: GridColumnVisibilityChangeParams, event: MuiEvent<{}>) => void		Callback fired when a column visibility changes.
onError	(args: any) => void		Callback fired when an exception is thrown in the grid, or when the showError API method is called.
onEditCellPropsChange	(params: GridEditCellPropsParams, event: MuiEvent<React.SyntheticEvent>) => void		Callback fired when the edit cell value changes.
onCellEditCommit	(params: GridCellEditCommitParams, event: MuiEvent<React.SyntheticEvent>) => void		Callback fired when the cell changes are committed.
onCellEditStart	(params: GridCellParams, event: React.SyntheticEvent) => void		Callback fired when the cell turns to edit mode.
onCellEditStop	(params: GridCellParams, event: React.SyntheticEvent) => void		Callback fired when the cell turns to view mode.
onRowEditCommit	(id: GridRowId, event: MouseEvent<React.SyntheticEvent>) => void		Callback fired when the row changes are committed.
onRowEditStart	(params: GridRowParams, event: React.SyntheticEvent) => void		Callback fired when the row turns to edit mode.
onRowEditStop	(params: GridRowParams, event: React.SyntheticEvent) => void		Callback fired when the row turns to view mode.
onEditRowsModelChange	(editRowsModel: GridEditRowsModel, details?: any) => void		Callback fired when the editRowsModel changes.
onFilterModelChange	(model: GridFilterModel) => void		Callback fired when the Filter model changes before the filters are applied.
onPageChange	(page: number) => void		Callback fired when the current page has changed.
onPageSizeChange	(pageSize: number) => void		Callback fired when the page size has changed.
onResize	(containerSize: ElementSize, event: MuiEvent<{}>) => void		Callback fired when the grid is being resized.
onRowClick	(params: GridRowParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a click event comes from a row container element.
onRowDoubleClick	(params: GridRowParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a double click event comes from a row container element.
onRowOver	(params: GridRowParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a mouse over comes from a row container element.
onRowOut	(params: GridRowParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a mouse out comes from a row container element.
onRowEnter	(params: GridRowParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a mouse enter comes from a row container element.
onRowLeave	(params: GridRowParams, event: MuiEvent<React.MouseEvent>) => void		Callback fired when a mouse leave event comes from a row container element.
onRowsScrollEnd	(params: GridRowScrollEndParams, event: MuiEvent<{}>) => void		Callback fired when scrolling to the bottom of the grid viewport.
onSelectionModelChange	(model: GridSelectionModel) => void		Callback fired when the selection state of one or multiple rows changes.
onSortModelChange	(model: GridSortModel) => void		Callback fired when the sort model changes before a column is sorted.
onViewportRowsChange	(params: GridViewportRowsChangeParams) => void		Callback fired when the rows in the viewport change.
page	number	1	Set the current page.
pageSize	number	100	Set the number of rows in one page.
pagination	boolean	false	If true, pagination is enabled.
paginationMode	GridFeatureMode	'client'	Pagination can be processed on the server or client-side. Set it to 'client' if you would like to handle the pagination on the client-side. Set it to 'server' if you would like to handle the pagination on the server-side.
rowCount	number		Set the total number of rows, if it is different than the length of the value rows prop.
rowHeight	number	52	Set the height in pixel of a row in the grid.
rowsPerPageOptions	number[]	[25, 50, 100]	Select the pageSize dynamically using the component UI.
scrollbarSize	number	15	Set the height/width of the grid inner scrollbar.
scrollEndThreshold	number	80	Set the area at the bottom of the grid viewport where onRowsScrollEnd is called.
selectionModel	GridSelectionModel		Set the selection model of the grid.
showCellRightBorder	boolean	false	If true, the right border of the cells are displayed.
showColumnRightBorder	boolean	false	If true, the right border of the column headers are displayed.
sortingMode	GridFeatureMode	'client'	Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.
sortingOrder	GridSortDirection[]	['asc', 'desc', null]	The order of the sorting sequence.
sortModel	GridSortModel		Set the sort model of the grid.

The ref is forwarded to the root element.

Slots

You can use the slots API to override nested components or to inject extra props.

Name	Type	Default	Description
Checkbox	elementType	Checkbox	Checkbox component used in the grid for both header and cells. By default, it uses the Material-UI core Checkbox component.
ColumnFilteredIcon	elementType	FilterAltIcon	Icon displayed on the column header menu to show that a filter has been applied to the column.
ColumnMenu	elementType<GridColumnMenuProps>	GridColumnMenu	Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
ColumnMenuIcon	elementType	TripleDotsVerticalIcon	Icon displayed on the side of the column header title to display the filter input component.
ColumnResizeIcon	elementType	SeparatorIcon	Icon displayed in between two column headers that allows to resize the column header.
ColumnSelectorIcon	elementType	ColumnIcon	Icon displayed on the column menu selector tab.
ColumnSortedAscendingIcon	elementType	ArrowUpwardIcon	Icon displayed on the side of the column header title when sorted in ascending order.
ColumnSortedDescendingIcon	elementType	ArrowDownwardIcon	Icon displayed on the side of the column header title when sorted in descending order.
ColumnsPanel	elementType	ColumnsPanel	GridColumns panel component rendered when clicking the columns button.
ColumnUnsortedIcon	React.ElementType | null	GridColumnUnsortedIcon	Icon displayed on the side of the column header title when unsorted.
DensityComfortableIcon	elementType	ViewStreamIcon	Icon displayed on the "comfortable" density option in the toolbar.
DensityCompactIcon	elementType	ViewHeadlineIcon	Icon displayed on the compact density option in the toolbar.
DensityStandardIcon	elementType	TableRowsIcon	Icon displayed on the standard density option in the toolbar.
ErrorOverlay	elementType<ErrorOverlayProps>	ErrorOverlay	Error overlay component rendered above the grid when an error is caught.
ExportIcon	elementType	GridSaveAltIcon	Icon displayed on the export button in the toolbar.
FilterPanel	elementType	FilterPanel	Filter panel component rendered when clicking the filter button.
Footer	elementType	GridFooter	Footer component rendered at the bottom of the grid viewport.
LoadingOverlay	elementType	LoadingOverlay	Overlay component rendered when the grid is in a loading state.
NoResultsOverlay	elementType	NoResultsOverlay	Overlay component rendered when the grid has no results after filtering.
NoRowsOverlay	elementType	NoRowsOverlay	Overlay component rendered when the grid has no rows.
OpenFilterButtonIcon	elementType	FilterListIcon	Icon displayed on the open filter button present in the toolbar by default.
Pagination	elementType	Pagination	Pagination component rendered in the grid footer by default.
Panel	elementType<GridPanelProps>	Panel	Panel component wrapping the filters and columns panels.
PreferencesPanel	elementType	PreferencesPanel	PreferencesPanel component that renders the ColumnSelector or FilterPanel within a Panel component.
Toolbar	elementType	GridToolbar	Toolbar component rendered above the grid column header bar.

CSS

Rule name	Global class	Description
root	.MuiDataGrid-root	Styles applied to the root element.
	.MuiDataGrid-mainGridContainer	Styles applied to the main container element.
	.MuiDataGrid-overlay	Styles applied to the outer overlay element.
	.MuiDataGrid-columnsContainer	Styles applied to the outer columns container element.
	.MuiDataGrid-columnHeaderWrapper	Styles applied to the outer columns header cells container element.
columnHeader	.MuiDataGrid-columnHeader	Styles applied to the header cell element.
cell	.MuiDataGrid-cell	Styles applied to the cell element.
	.MuiDataGrid-columnHeaderCheckbox	Styles applied to the header checkbox cell element.
	.MuiDataGrid-cellCheckbox	Styles applied to the cell checkbox element.
	.MuiDataGrid-columnHeader--sortable	Styles applied to the sortable header cell element.
	.MuiDataGrid-sortIcon	Styles applied to the sort icon element.
	.MuiDataGrid-columnHeader--alignCenter	Styles applied to the centered header cell element.
	.MuiDataGrid-columnHeader--alignRight	Styles applied to the aligned right header cell element.
	.MuiDataGrid-columnHeaderTitle	Styles applied to the header cell title element.
	.MuiDataGrid-columnSeparator	Styles applied to the header cell separator element.
	.MuiDataGrid-iconSeparator	Styles applied to the header cell separator icon element.
	.MuiDataGrid-dataContainer	Styles applied to the data container element.
	.MuiDataGrid-window	Styles applied to the window element.
	.MuiDataGrid-viewport	Styles applied to the viewport element.
row	.MuiDataGrid-row	Styles applied to the row element.
	.MuiDataGrid-cell--withRenderer	Styles applied to the customized cell element.
	.MuiDataGrid-withBorder	Styles applied to the cell element that has right border displayed.
	.MuiDataGrid-cell--textLeft	Styles applied to the aligned left cell element.
	.MuiDataGrid-cell--textRight	Styles applied to the aligned right cell element.
	.MuiDataGrid-cell--textCenter	Styles applied to the centered cell element.
	.MuiDataGrid-rowCount	Styles applied to the footer row count element.
	.MuiDataGrid-selectedRowCount	Styles applied to the footer selected row count element.

You can override the style of the component thanks to one of these customization points:

• With a rule name of the classes object prop.
• With a global class name.
• With a theme and an overrides property.

If that's not sufficient, you can check the implementation of the component style for more detail.

Demos

• DataGridPro