DataGrid API
The API documentation of the DataGrid React component. Learn more about the props and the CSS customization points.
Import
import { DataGrid } from '@mui/x-data-grid';
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'. | |
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. |
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. | |
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. |
disableColumnSelector | boolean | false | If true , the column selector 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. |
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: MouseEvent<React.FocusEvent>) => void | Callback fired when the active element leaves a cell. | |
onCellClick | (params: GridCellParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a click event comes from a cell element. | |
onCellDoubleClick | (params: GridCellParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a double click event comes from a cell element. | |
onCellFocusOut | (params: GridCellParams, event?: MuiEvent |
Callback fired when a cell loses focus. | |
onCellKeyDown | (params: GridCellParams, event: MouseEvent<React.KeyboardEvent>) => void | Callback fired when a keydown event comes from a cell element. | |
onCellOver | (params: GridCellParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a mouse over event comes from a cell element. | |
onCellOut | (params: GridCellParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a mouse out comes from a cell element. | |
onCellEnter | (params: GridCellParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a mouse enter event comes from a cell element. | |
onCellLeave | (params: GridCellParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a mouse leave event comes from a cell element. | |
onColumnHeaderClick | (params: GridColumnHeaderParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a click event comes from a column header element. | |
onColumnHeaderDoubleClick | (params: GridColumnHeaderParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a double click event comes from a column header element. | |
onColumnHeaderOver | (params: GridColumnHeaderParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a mouseover event comes from a column header element. | |
onColumnHeaderOut | (params: GridColumnHeaderParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a mouseout event comes from a column header element. | |
onColumnHeaderEnter | (params: GridColumnHeaderParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a mouse enter event comes from a column header element. | |
onColumnHeaderLeave | (params: GridColumnHeaderParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a mouse leave event comes from a column header element. | |
onColumnOrderChange | (params: GridColumnOrderChangeParams, event: MouseEvent<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: MouseEvent<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: MouseEvent<React.MouseEvent>) => void | Callback fired when a click event comes from a row container element. | |
onRowDoubleClick | (params: GridRowParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a double click event comes from a row container element. | |
onRowOver | (params: GridRowParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a mouse over comes from a row container element. | |
onRowOut | (params: GridRowParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a mouse out comes from a row container element. | |
onRowEnter | (params: GridRowParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a mouse enter comes from a row container element. | |
onRowLeave | (params: GridRowParams, event: MouseEvent<React.MouseEvent>) => void | Callback fired when a mouse leave event comes from a row container element. | |
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. | |
page | number | 1 | Set the current page. |
pageSize | number | 100 | Set the number of rows in one page. |
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. |
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.