Skip to content

DataGridPro API

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

Import

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

Component name

The name MuiDataGrid 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. It has no effect if the pagination is enabled.
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.
onCellClick (params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void Callback fired when a click event comes from a cell element.
onCellDoubleClick (params: GridCellParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => 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>, details: GridCallbackDetails) => void Callback fired when a keydown event comes from a cell element.
onColumnHeaderClick (params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void Callback fired when a click event comes from a column header element.
onColumnHeaderDoubleClick (params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void Callback fired when a double click event comes from a column header element.
onColumnHeaderOver (params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void Callback fired when a mouseover event comes from a column header element.
onColumnHeaderOut (params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void Callback fired when a mouseout event comes from a column header element.
onColumnHeaderEnter (params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void Callback fired when a mouse enter event comes from a column header element.
onColumnHeaderLeave (params: GridColumnHeaderParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void Callback fired when a mouse leave event comes from a column header element.
onColumnOrderChange (params: GridColumnOrderChangeParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void Callback fired when a column is reordered.
onColumnResize (params: GridColumnResizeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void Callback fired while a column is being resized.
onColumnWidthChange (params: GridColumnResizeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void Callback fired when the width of a column is changed.
onColumnVisibilityChange (params: GridColumnVisibilityChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => 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>, details: GridCallbackDetails) => void Callback fired when the edit cell value changes.
onCellEditCommit (params: GridCellEditCommitParams, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => void Callback fired when the cell changes are committed.
onCellEditStart (params: GridCellParams, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => void Callback fired when the cell turns to edit mode.
onCellEditStop (params: GridCellParams, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => void Callback fired when the cell turns to view mode.
onRowEditCommit (id: GridRowId, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => void Callback fired when the row changes are committed.
onRowEditStart (params: GridRowParams, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => void Callback fired when the row turns to edit mode.
onRowEditStop (params: GridRowParams, event: MuiEvent<React.SyntheticEvent>, details: GridCallbackDetails) => void Callback fired when the row turns to view mode.
onEditRowsModelChange (editRowsModel: GridEditRowsModel, details: GridCallbackDetails) => 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<{}>, details: GridCallbackDetails) => void Callback fired when the grid is being resized.
onRowClick (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void Callback fired when a click event comes from a row container element.
onRowDoubleClick (params: GridRowParams, event: MuiEvent<React.MouseEvent>, details: GridCallbackDetails) => void Callback fired when a double click event comes from a row container element.
onRowsScrollEnd (params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => 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 0 The zero-based index of 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
Cell elementType Checkbox Component rendered for each cell.
Checkbox elementType Checkbox Checkbox component used in the grid for both header and cells. By default, it uses the MUI 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.
MoreActionsIcon elementType MoreVertIcon Icon displayed on the actions column type to open the menu.
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.
Row elementType Component rendered for each row.
Toolbar elementType GridToolbar Toolbar component rendered above the grid column header bar.

CSS

Rule name Global class Description
autoHeight .MuiDataGrid-autoHeight Styles applied to the root element if autoHeight={true}.
booleanCell .MuiDataGrid-booleanCell Styles applied to the icon of the boolean cell.
cell--editable .MuiDataGrid-cell--editable Styles applied to the cell element if the cell is editable.
cell--editing .MuiDataGrid-cell--editing Styles applied to the cell element if the cell is in edit mode.
cell--textCenter .MuiDataGrid-cell--textCenter Styles applied to the cell element if align="center".
cell--textLeft .MuiDataGrid-cell--textLeft Styles applied to the cell element if align="left".
cell--textRight .MuiDataGrid-cell--textRight Styles applied to the cell element if align="right".
cell--withRenderer .MuiDataGrid-cell--withRenderer Styles applied to the cell element if the cell has a custom renderer.
cell .MuiDataGrid-cell Styles applied to the cell element.
cellCheckbox .MuiDataGrid-cellCheckbox Styles applied to the cell checkbox element.
checkboxInput .MuiDataGrid-checkboxInput Styles applied to the selection checkbox element.
columnHeader--alignCenter .MuiDataGrid-columnHeader--alignCenter Styles applied to the column header if headerAlign="center".
columnHeader--alignLeft .MuiDataGrid-columnHeader--alignLeft Styles applied to the column header if headerAlign="left".
columnHeader--alignRight .MuiDataGrid-columnHeader--alignRight Styles applied to the column header if headerAlign="right".
columnHeader--dragging .MuiDataGrid-columnHeader--dragging Styles applied to the floating column header element when it is dragged.
columnHeader--moving .MuiDataGrid-columnHeader--moving Styles applied to the column header if it is being dragged.
columnHeader--numeric .MuiDataGrid-columnHeader--numeric Styles applied to the column header if the type of the column is number.
columnHeader--sortable .MuiDataGrid-columnHeader--sortable Styles applied to the column header if the column is sortable.
columnHeader--sorted .MuiDataGrid-columnHeader--sorted Styles applied to the column header if the column is sorted.
columnHeader .MuiDataGrid-columnHeader Styles applied to the column header element.
columnHeaderCheckbox .MuiDataGrid-columnHeaderCheckbox Styles applied to the header checkbox cell element.
columnHeaderDraggableContainer .MuiDataGrid-columnHeaderDraggableContainer Styles applied to the column header's draggable container element.
columnHeaderDropZone .MuiDataGrid-columnHeaderDropZone Styles applied to the column headers wrapper if a column is being dragged.
columnHeaderTitle .MuiDataGrid-columnHeaderTitle Styles applied to the column header's title element;
columnHeaderTitleContainer .MuiDataGrid-columnHeaderTitleContainer Styles applied to the column header's title container element.
columnHeaderWrapper .MuiDataGrid-columnHeaderWrapper Styles applied to the column header's wrapper element.
columnsContainer .MuiDataGrid-columnsContainer Styles applied to the outer columns container element.
columnSeparator--resizable .MuiDataGrid-columnSeparator--resizable Styles applied to the column header separator if the column is resizable.
columnSeparator--resizing .MuiDataGrid-columnSeparator--resizing Styles applied to the column header separator if the column is being resized.
columnSeparator .MuiDataGrid-columnSeparator Styles applied to the column header separator element.
dataContainer .MuiDataGrid-dataContainer Styles applied to the data container element.
editBooleanCell .MuiDataGrid-editBooleanCell Styles applied to root of the boolean edit component.
editInputCell .MuiDataGrid-editInputCell Styles applied to the root of the input component.
filterIcon .MuiDataGrid-filterIcon Styles applied to the filter icon element.
footerContainer .MuiDataGrid-footerContainer Styles applied to the footer container element.
iconButtonContainer .MuiDataGrid-iconButtonContainer Styles applied to the column header icon's container.
iconSeparator .MuiDataGrid-iconSeparator Styles applied to the column header separator icon element.
main .MuiDataGrid-main Styles applied to the main container element.
menuIcon .MuiDataGrid-menuIcon Styles applied to the menu icon element.
menuIconButton .MuiDataGrid-menuIconButton Styles applied to the menu icon button element.
menuOpen .MuiDataGrid-menuOpen Styles applied to the menu icon element if the menu is open.
overlay .MuiDataGrid-overlay Styles applied to the overlay element.
renderingZone .MuiDataGrid-renderingZone Styles applied to the rendering zone element.
root .MuiDataGrid-root Styles applied to the root element.
row--editable .MuiDataGrid-row--editable Styles applied to the row element if the row is editable.
row--editing .MuiDataGrid-row--editing Styles applied to the row element if the row is in edit mode.
row .MuiDataGrid-row Styles applied to the row element.
rowCount .MuiDataGrid-rowCount Styles applied to the footer row count element.
scrollArea .MuiDataGrid-scrollArea Styles applied to both scroll area elements.
scrollAreaLeft .MuiDataGrid-scrollAreaLeft Styles applied to the left scroll area element.
scrollAreaRight .MuiDataGrid-scrollAreaRight Styles applied to the right scroll area element.
selectedRowCount .MuiDataGrid-selectedRowCount Styles applied to the footer selected row count element.
sortIcon .MuiDataGrid-sortIcon Styles applied to the sort icon element.
toolbarContainer .MuiDataGrid-toolbarContainer Styles applied to the toolbar container element.
viewport .MuiDataGrid-viewport Styles applied to the viewport element.
window .MuiDataGrid-window Styles applied to the window element.
windowContainer .MuiDataGrid-windowContainer Styles applied to the window container element.
withBorder .MuiDataGrid-withBorder Styles applied to both the cell and the column header if showColumnRightBorder={true}.

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

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

Demos