Skip to content
Edit this page

XGrid API

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

Import

import { XGrid } from '@material-ui/x-grid';

Props

Name Type Default Description
apiRef GridApiRef The ref object that allows grid manipulation. Can be instantiated with 'useGridApiRef()'.
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.
className string Css classname to add on the outer container.
columns* GridColumns Set of columns of type 'GridColumns'.
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 GridSlotsComponentProps Overrideable components props dynamic passed to the component at rendering.
density Density standard Sets the density of the grid.
disableColumnMenu boolean false If true, the column menu is disabled.
disableColumnSelector boolean false If true, the column selector is disabled.
disableColumnResize boolean false If true, resizing columns is disabled.
disableExtendRowFullWidth boolean false If true, rows will not be extended to fill the full width of the grid container.
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.
error any An error that will turn the grid into its error state and display the error component.
editRowsModel GridEditRowsModel undefined Set the edit rows model of the grid.
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.
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
nonce string Nonce of the inline styles for Content Security Policy.
onCellClick (params: GridCellParams, event: React.MouseEvent) => void Callback fired when a click event comes from a cell element.
onCellDoubleClick (params: GridCellParams, event: React.MouseEvent) => void Callback fired when a double click event comes from a cell element.
onCellOver (params: GridCellParams, event: React.MouseEvent) => void Callback fired when a mouse over event comes from a cell element.
onCellOut (params: GridCellParams, event: React.MouseEvent) => void Callback fired when a mouse out comes from a cell element.
onCellEnter (params: GridCellParams, event: React.MouseEvent) => void Callback fired when a mouse enter event comes from a cell element.
onCellLeave (params: GridCellParams, event: React.MouseEvent) => void Callback fired when a mouse leave event comes from a cell element.
onCellModeChange (params: GridCellModeChangeParams) => void Callback fired when the cell mode changed.
onColumnHeaderClick (param: GridColumnHeaderParams, event: React.MouseEvent) => void Callback fired when a click event comes from a column header element.
onColumnHeaderDoubleClick (param: GridColumnHeaderParams, event: React.MouseEvent) => void Callback fired when a double click event comes from a column header element.
onColumnHeaderOver (param: GridColumnHeaderParams, event: React.MouseEvent) => void Callback fired when a mouseover event comes from a column header element.
onColumnHeaderOut (param: GridColumnHeaderParams, event: React.MouseEvent) => void Callback fired when a mouseout event comes from a column header element.
onColumnHeaderEnter (param: GridColumnHeaderParams, event: React.MouseEvent) => void Callback fired when a mouse enter event comes from a column header element.
onColumnHeaderLeave (param: GridColumnHeaderParams, event: React.MouseEvent) => void Callback fired when a mouse leave event comes from a column header element.
onColumnOrderChange (param: GridColumnOrderChangeParams, event: React.MouseEvent) => void Callback fired when a column is reordered.
onError (args: any) => void Callback fired when an exception is thrown in the grid, or when the showError API method is called.
onEditCellChange (params: GridEditCellParams) => void Callback fired when the edit cell value changed.
onEditCellChangeCommitted (params: GridEditCellParams) => void Callback fired when the cell changes are committed.
onEditRowModelChange (params: GridEditRowModelParams) => void Callback fired when the EditRowModel changed.
onFilterModelChange (params: GridFilterModelParams) => void Callback fired when the Filter model changes before the filters are applied.
onPageChange (param: GridPageChangeParams) => void Callback fired when the current page has changed.
onPageSizeChange (param: GridPageChangeParams) => void Callback fired when the page size has changed.
onRowClick (param: GridRowParams, event: React.MouseEvent) => void Callback fired when a click event comes from a row container element.
onRowDoubleClick (param: GridRowParams, event: React.MouseEvent) => void Callback fired when a double click event comes from a row container element.
onRowOver (param: GridRowParams, event: React.MouseEvent) => void Callback fired when a mouse over comes from a row container element.
onRowOut (param: GridRowParams, event: React.MouseEvent) => void Callback fired when a mouse out comes from a row container element.
onRowEnter (param: GridRowParams, event: React.MouseEvent) => void Callback fired when a mouse enter comes from a row container element.
onRowLeave (param: GridRowParams, event: React.MouseEvent) => void Callback fired when a mouse leave event comes from a row container element.
onRowSelected (param: GridRowSelectedParams) => void Callback fired when one row is selected.
onRowsScrollEnd (param: GridRowScrollEndParams) => void Callback fired when scrolling to the bottom of the grid viewport.
onSelectionModelChange (param: GridSelectionModelChangeParams) => void Callback fired when the selection state of one or multiple rows changes.
onSortModelChange (param: GridSortModelParams) => 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.
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.
rows* GridRowsProp Set of rows of type 'GridRowsProp'.
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

Api of the components props of type GridSlotsComponent

Name Type Default Description
ColumnMenu React.ElementType<GridColumnMenuProps> GridColumnMenu Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
ColumnsPanel React.ElementType ColumnsPanel GridColumns panel component rendered when clicking the columns button.
ErrorOverlay React.ElementType<ErrorOverlayProps> ErrorOverlay Error overlay component rendered above the grid when an error is caught.
FilterPanel React.ElementType FilterPanel Filter panel component rendered when clicking the filter button.
Footer React.ElementType GridFooter Footer component rendered at the bottom of the grid viewport.
Toolbar React.ElementType GridToolbar Toolbar component rendered above the grid column header bar.
PreferencesPanel React.ElementType PreferencesPanel PreferencesPanel component that renders the ColumnSelector or FilterPanel within a Panel component.
LoadingOverlay React.ElementType LoadingOverlay Loading overlay component rendered when the grid is in a loading state.
NoRowsOverlay React.ElementType NoRowsOverlay No rows overlay component rendered when the grid has no rows.
Pagination React.ElementType Pagination Pagination component rendered in the grid footer by default.
Panel React.ElementType<GridPanelProps> Panel Panel component wrapping the filters and columns panels.

Icons Slots

Name Type Default Description
ColumnMenuIcon React.ElementType TripleDotsVerticalIcon Icon displayed on the side of the column header title to display the filter input component.
ColumnFilteredIcon React.ElementType FilterAltIcon Icon displayed on the column header menu to show that a filer has been applied to the column.
ColumnSelectorIcon React.ElementType ColumnIcon Icon displayed on the column menu selector tab.
ColumnSortedAscendingIcon React.ElementType ArrowUpwardIcon Icon displayed on the side of the column header title when sorted in Ascending order.
ColumnSortedDescendingIcon React.ElementType ArrowDownwardIcon Icon displayed on the side of the column header title when sorted in Descending order.
ColumnResizeIcon React.ElementType SeparatorIcon Icon displayed in between two column headers that allows to resize the column header.
DensityCompactIcon React.ElementType ViewHeadlineIcon Icon displayed on the compact density option in the toolbar.
DensityStandardIcon React.ElementType TableRowsIcon Icon displayed on the standard density option in the toolbar.
DensityComfortableIcon React.ElementType ViewStreamIcon Icon displayed on the comfortable density option in the toolbar.
ExportIcon React.ElementType GridSaveAltIcon Icon displayed on the export button in the toolbar.
OpenFilterButtonIcon React.ElementType FilterListIcon Icon displayed on the open filter button present in the toolbar by default.

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-cellLeft Styles applied to the aligned left cell element.
.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