DataGrid API

API reference docs for the React DataGrid component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Data Grid

Import

import { DataGrid } from '@toolpad-core/DataGrid';
// or
import { DataGrid } from '@toolpad-core';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the X DataGrid component are also available.

Name	Type	Description
dataProvider	{ createOne?: func, deleteOne?: func, fields?: object, getMany: func, getOne?: func, idField?: object, updateOne?: func }	The data provider to resolve the displayed data. This object must be referentially stable.
height	number	The height of the datagrid in pixels. If left `undefined`, it adopts the height of its parent.

The component cannot hold a ref.

Inheritance

While not explicitly documented above, the props of the X DataGrid component are also available in DataGrid. You can take advantage of this to target nested components.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Rule name	Description
.	actionsCell	Styles applied to the root element of the cell with type="actions".
.	aggregationColumnHeader	Styles applied to the root element of the column header when aggregated.
.	aggregationColumnHeader--alignCenter	Styles applied to the root element of the header when aggregation if `headerAlign="center"`.
.	aggregationColumnHeader--alignLeft	Styles applied to the root element of the header when aggregation if `headerAlign="left"`.
.	aggregationColumnHeader--alignRight	Styles applied to the root element of the header when aggregation if `headerAlign="right"`.
.	aggregationColumnHeaderLabel	Styles applied to the aggregation label in the column header when aggregated.
.	autoHeight	Styles applied to the root element if `autoHeight={true}`.
.	autosizing	Styles applied to the root element while it is being autosized.
.	booleanCell	Styles applied to the icon of the boolean cell.
.	cell	Styles applied to the cell element.
.	cell--editable	Styles applied to the cell element if the cell is editable.
.	cell--editing	Styles applied to the cell element if the cell is in edit mode.
.	cell--flex	Styles applied to the cell element in flex display mode.
.	cell--pinnedLeft	Styles applied to the cell element if it is pinned to the left.
.	cell--pinnedRight	Styles applied to the cell element if it is pinned to the right.
.	cell--rangeBottom	Styles applied to the cell element if it is at the bottom edge of a cell selection range.
.	cell--rangeLeft	Styles applied to the cell element if it is at the left edge of a cell selection range.
.	cell--rangeRight	Styles applied to the cell element if it is at the right edge of a cell selection range.
.	cell--rangeTop	Styles applied to the cell element if it is at the top edge of a cell selection range.
.	cell--selectionMode	Styles applied to the cell element if it is in a cell selection range.
.	cell--textCenter	Styles applied to the cell element if `align="center"`.
.	cell--textLeft	Styles applied to the cell element if `align="left"`.
.	cell--textRight	Styles applied to the cell element if `align="right"`.
.	cell--withLeftBorder	Styles applied the cell if `showColumnVerticalBorder={true}`.
.	cell--withRightBorder	Styles applied the cell if `showColumnVerticalBorder={true}`.
.	cellCheckbox	Styles applied to the cell checkbox element.
.	cellEmpty	Styles applied to the empty cell element.
.	cellSkeleton	Styles applied to the skeleton cell element.
.	checkboxInput	Styles applied to the selection checkbox element.
.	columnHeader	Styles applied to the column header element.
.	columnHeader--alignCenter	Styles applied to the column header if `headerAlign="center"`.
.	columnHeader--alignLeft	Styles applied to the column header if `headerAlign="left"`.
.	columnHeader--alignRight	Styles applied to the column header if `headerAlign="right"`.
.	columnHeader--dragging	Styles applied to the floating column header element when it is dragged.
.	columnHeader--emptyGroup	Styles applied to the empty column group header cell.
.	columnHeader--filledGroup	Styles applied to the column group header cell if not empty.
.	columnHeader--filtered	Styles applied to the column header if the column has a filter applied to it.
.	columnHeader--last	Styles applied to the last column header element.
.	columnHeader--moving	Styles applied to the column header if it is being dragged.
.	columnHeader--numeric	Styles applied to the column header if the type of the column is `number`.
.	columnHeader--pinnedLeft
.	columnHeader--pinnedRight
.	columnHeader--sortable	Styles applied to the column header if the column is sortable.
.	columnHeader--sorted	Styles applied to the column header if the column is sorted.
.	columnHeader--withLeftBorder
.	columnHeader--withRightBorder	Styles applied the column header if `showColumnVerticalBorder={true}`.
.	columnHeaderCheckbox	Styles applied to the header checkbox cell element.
.	columnHeaderDraggableContainer	Styles applied to the column header's draggable container element.
.	columnHeaders	Styles applied to the column headers.
.	columnHeaderTitle	Styles applied to the column header's title element;
.	columnHeaderTitleContainer	Styles applied to the column header's title container element.
.	columnHeaderTitleContainerContent	Styles applied to the column header's title excepted buttons.
.	columnSeparator	Styles applied to the column header separator element.
.	columnSeparator--resizable	Styles applied to the column header separator if the column is resizable.
.	columnSeparator--resizing	Styles applied to the column header separator if the column is being resized.
.	columnSeparator--sideLeft	Styles applied to the column header separator if the side is "left".
.	columnSeparator--sideRight	Styles applied to the column header separator if the side is "right".
.	columnsManagement	Styles applied to the columns management body.
.	columnsManagementFooter	Styles applied to the columns management footer element.
.	columnsManagementHeader	Styles applied to the columns management header element.
.	columnsManagementRow	Styles applied to the columns management row element.
.	container--bottom	Styles applied to the bottom container.
.	container--top	Styles applied to the top container.
.	detailPanel	Styles applied to the detail panel element.
.	detailPanels	Styles applied to the detail panels wrapper element.
.	detailPanelToggleCell	Styles applied to the detail panel toggle cell element.
.	detailPanelToggleCell--expanded	Styles applied to the detail panel toggle cell element if expanded.
.	editBooleanCell	Styles applied to root of the boolean edit component.
.	editInputCell	Styles applied to the root of the input component.
.	filterForm	Styles applied to the root of the filter form component.
.	filterFormColumnInput	Styles applied to the column input of the filter form component.
.	filterFormDeleteIcon	Styles applied to the delete icon of the filter form component.
.	filterFormLogicOperatorInput	Styles applied to the link operator input of the filter form component.
.	filterFormOperatorInput	Styles applied to the operator input of the filter form component.
.	filterFormValueInput	Styles applied to the value input of the filter form component.
.	filterIcon	Styles applied to the filter icon element.
.	footerCell	Styles applied to the root element of the cell inside a footer row.
.	footerContainer	Styles applied to the footer container element.
.	groupingCriteriaCell	Styles applied to the root element of the grouping criteria cell
.	groupingCriteriaCellToggle	Styles applied to the toggle of the grouping criteria cell
.	headerFilterRow	Styles applied to the column header filter row.
.	iconButtonContainer	Styles applied to the column header icon's container.
.	iconSeparator	Styles applied to the column header separator icon element.
.	main	Styles applied to the main container element.
.	main--hasPinnedRight	Styles applied to the main container element when it has right pinned columns.
.	menu	Styles applied to the menu element.
.	menuIcon	Styles applied to the menu icon element.
.	menuIconButton	Styles applied to the menu icon button element.
.	menuList	Styles applied to the menu list element.
.	menuOpen	Styles applied to the menu icon element if the menu is open.
.	overlay	Styles applied to the overlay element.
.	overlayWrapper	Styles applied to the overlay wrapper element.
.	overlayWrapperInner	Styles applied to the overlay wrapper inner element.
.	panel	Styles applied to the panel element.
.	panelContent	Styles applied to the panel content element.
.	panelFooter	Styles applied to the panel footer element.
.	panelHeader	Styles applied to the panel header element.
.	panelWrapper	Styles applied to the panel wrapper element.
.	paper	Styles applied to the paper element.
.	pinnedColumns	Styles applied to the pinned columns.
.	pinnedRows	Styles applied to the pinned rows container.
.	pinnedRows--bottom	Styles applied to the bottom pinned rows container.
.	pinnedRows--top	Styles applied to the top pinned rows container.
.	pinnedRowsRenderZone	Styles applied to pinned rows render zones.
.	root	Styles applied to the root element.
.	root--densityComfortable	Styles applied to the root element if density is "comfortable".
.	root--densityCompact	Styles applied to the root element if density is "compact".
.	root--densityStandard	Styles applied to the root element if density is "standard" (default).
.	root--disableUserSelection	Styles applied to the root element when user selection is disabled.
.	row	Styles applied to the row element.
.	row--detailPanelExpanded	Styles applied to the row if its detail panel is open.
.	row--dragging	Styles applied to the floating special row reorder cell element when it is dragged.
.	row--dynamicHeight	Styles applied to the row if it has dynamic row height.
.	row--editable	Styles applied to the row element if the row is editable.
.	row--editing	Styles applied to the row element if the row is in edit mode.
.	row--firstVisible	Styles applied to the first visible row element on every page of the grid.
.	row--lastVisible	Styles applied to the last visible row element on every page of the grid.
.	rowCount	Styles applied to the footer row count element to show the total number of rows. Only works when pagination is disabled.
.	rowReorderCell	Styles applied to the root element of the row reorder cell
.	rowReorderCell--draggable	Styles applied to the root element of the row reorder cell when dragging is allowed
.	rowReorderCellContainer	Styles applied to the row reorder cell container element.
.	rowReorderCellPlaceholder	Styles applied to the row's draggable placeholder element inside the special row reorder cell.
.	scrollArea	Styles applied to both scroll area elements.
.	scrollArea--left	Styles applied to the left scroll area element.
.	scrollArea--right	Styles applied to the right scroll area element.
.	scrollbar	Styles applied to the scrollbars.
.	scrollbar--horizontal	Styles applied to the horizontal scrollbar.
.	scrollbar--vertical	Styles applied to the horizontal scrollbar.
.	selectedRowCount	Styles applied to the footer selected row count element.
.	sortIcon	Styles applied to the sort icon element.
.	toolbarContainer	Styles applied to the toolbar container element.
.	toolbarFilterList	Styles applied to the toolbar filter list element.
.	treeDataGroupingCell	Styles applied to the root of the grouping column of the tree data.
.	treeDataGroupingCellToggle	Styles applied to the toggle of the grouping cell of the tree data.
.	virtualScroller	Styles applied to the virtualization container.
.	virtualScrollerContent	Styles applied to the virtualization content.
.	virtualScrollerContent--overflowed	Styles applied to the virtualization content when its height is bigger than the virtualization container.
.	virtualScrollerRenderZone	Styles applied to the virtualization render zone.
.	withBorderColor	Styles applied to cells, column header and other elements that have border. Sets border color only.
.	withVerticalBorder	Styles applied the grid if `showColumnVerticalBorder={true}`.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.