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 |
---|---|---|---|
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* | Columns | Set of columns of type 'Columns'. | |
columnBuffer | number | 2 | Number of columns rendered outside the grid viewport. |
columnTypes | ColumnTypesRecord | Extend native column types with your new column types. | |
components | GridComponentOverridesProp | Overrideable components. | |
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. |
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. |
error | any | An error that will turn the grid into its error state and display the error component. | |
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. | |
loading | boolean | false | If true , a loading overlay is displayed. |
localeText | LocaleText | 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 | (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. | |
onColumnHeaderClick | (param: ColParams) => void | Callback fired when a click event comes from a column header element. | |
onError | (args: any) => void | Callback fired when an exception is thrown in the grid, or when the showError API method is called. |
|
onPageChange | (param: PageChangeParams) => void | Callback fired when the current page has changed. | |
onPageSizeChange | (param: PageChangeParams) => void | Callback fired when the page size has changed. | |
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. | |
onSortModelChange | (param: SortModelParams) => 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 | 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. |
rows* | RowsProp | Set of rows of type 'RowsProp'. | |
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. |
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. |
showToolbar | boolean | false | If true , the default toolbar component is shown. |
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. |
sortingOrder | SortDirection[] | ['asc', 'desc', null] | The order of the sorting sequence. |
sortModel | SortModel | Set the sort model of 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-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:
- 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.