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:

• 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

• DataGrid