Skip to content

DataGrid API

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

Import

import { DataGrid } from '@material-ui/data-grid';

Props

Name Type Default Description
rows* RowsProp Set of rows of type 'RowsProp'.
columns* Columns Set of columns of type 'Columns'.
columnTypes ColumnTypesRecord Extend native column types with your new column types.
components GridComponentOverridesProp Overrideable components.
loading boolean false If true, a loading overlay is displayed.
className string Css classname to add on the outer container.
error any An error that will turn the grid into its error state and display the error component.
autoHeight boolean false If true, the grid height is dynamic and follow the number of rows in the grid.
rowHeight number 52 Set the height in pixel of a row in the grid.
headerHeight number 56 Set the height in pixel of the column headers in the grid.
scrollbarSize number 15 Set the height/width of the grid inner scrollbar.
columnBuffer number 2 Number of columns rendered outside the grid viewport.
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.
disableExtendRowFullWidth boolean false If true, rows will not be extended to fill the full width of the grid container.
sortingOrder SortDirection[] ['asc', 'desc', null] The order of the sorting sequence.
pageSize number 100 Set the number of rows in one page.
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.
rowsPerPageOptions number[] [25, 50, 100] Select the pageSize dynamically using the component UI.
paginationMode FeatureMode '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.
page number 1 Set the current page.
sortingMode FeatureMode '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.
hideFooter boolean false If true, the footer component 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.
hideFooterPagination boolean false If true, the pagination component in the footer is hidden.
checkboxSelection boolean false If true, the grid get a first column with a checkbox that allows to select rows.
disableSelectionOnClick boolean false If true, the selection on click on a row or cell is disabled.
logger Logger null Pass a custom logger in the components that implements the 'Logger' interface.
logLevel string false false
sortModel SortModel Set the sort model of the grid.
onCellClick (param: CellParams) => void Callback fired when a click event comes from a cell element.
onCellHover (param: CellParams) => void Callback fired when a hover event comes from a cell element.
onRowClick (param: RowParams) => void Callback fired when a click event comes from a row container element.
onRowHover (param: RowParams) => void Callback fired when a hover event comes from a row container element.
onRowSelected (param: RowSelectedParams) => void Callback fired when one row is selected.
onSelectionChange (param: SelectionChangeParams) => void Callback fired when the selection state of one or multiple rows changes.
onColumnHeaderClick (param: ColParams) => void Callback fired when a click event comes from a column header element.
onSortModelChange (param: SortModelParams) => void Callback fired when the sort model changes before a column is sorted.
onPageChange (param: PageChangeParams) => void Callback fired when the current page has changed.
onPageSizeChange (param: PageChangeParams) => void Callback fired when the page size has changed.
onError (args: any) => void Callback fired when an exception is thrown in the grid, or when the showError API method is called.
icons IconsOptions Set of icons used in the grid.

The ref is forwarded to the root element.

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-colCellWrapper Styles applied to the outer columns header cells container element.
.MuiDataGrid-colCell Styles applied to the header cell element.
.MuiDataGrid-cell Styles applied to the cell element.
.MuiDataGrid-colCellCheckbox Styles applied to the header checkbox cell element.
.MuiDataGrid-cellCheckbox Styles applied to the cell checkbox element.
.MuiDataGrid-colCellSortable Styles applied to the sortable header cell element.
.MuiDataGrid-sortIcon Styles applied to the sort icon element.
.MuiDataGrid-colCellCenter Styles applied to the centered header cell element.
.MuiDataGrid-colCellRight Styles applied to the aligned right header cell element.
.MuiDataGrid-colCellTitle 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.
.MuiDataGrid-row Styles applied to the row element.
.Mui-selected Styles applied to the selected row element.
.MuiDataGrid-cellWithRenderer Styles applied to the customised cell element.
.MuiDataGrid-withBorder Styles applied to the cell element that has right border displayed.
.MuiDataGrid-cellRight Styles applied to the aligned right cell element.
.MuiDataGrid-cellCenter Styles applied to the centered cell element.
.MuiDataGrid-footer Styles applied to the footer 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:

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

Demos