DataGridPremium API
API reference docs for the React DataGridPremium component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { DataGridPremium } from '@mui/x-data-grid-premium/DataGridPremium';
// or
import { DataGridPremium } from '@mui/x-data-grid-premium';Learn about the difference by reading this guide on minimizing bundle size.
| Name | Type | Default | Description |
|---|---|---|---|
| columns* | Array<object> | - | Set of columns of type GridColDef[]. |
| rows* | Array<object> | - | Set of rows of type GridRowsProp. |
| aggregationFunctions | object | GRID_AGGREGATION_FUNCTIONS | Aggregation functions available on the grid. |
| aggregationModel | object | - | Set the aggregation model of the grid. |
| aggregationRowsScope | 'all' | 'filtered' | "filtered" | Rows used to generate the aggregated value. If |
| apiRef | { current: object } | - | The ref object that allows grid manipulation. Can be instantiated with |
| aria-label | string | - | The label of the grid. |
| aria-labelledby | string | - | The id of the element containing a label for the grid. |
| autoHeight | bool | - | If |
| autoPageSize | bool | - | If |
| cellModesModel | object | - | Controls the modes of the cells. |
| checkboxSelection | bool | - | If |
| checkboxSelectionVisibleOnly | bool | false | If |
| classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
| clipboardCopyCellDelimiter | string | '\t' | The character used to separate cell values when copying to the clipboard. |
| columnBuffer | number | 3 | Number of extra columns to be rendered before/after the visible slice. |
| columnHeaderHeight | number | 56 | Sets the height in pixel of the column headers in the grid. |
| columnThreshold | number | 3 | Number of rows from the |
| columnVisibilityModel | object | - | Set the column visibility model of the grid. If defined, the grid will ignore the |
| components | object | - | Overridable components. |
| componentsProps | object | - | Overridable components props dynamically passed to the component at rendering. |
| defaultGroupingExpansionDepth | number | 0 | If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded. |
| density | 'comfortable' | 'compact' | 'standard' | "standard" | Set the density of the grid. |
| detailPanelExpandedRowIds | Array<number | string> | - | The row ids to show the detail panel. |
| disableAggregation | bool | - | If |
| disableChildrenFiltering | bool | - | If |
| disableChildrenSorting | bool | - | If |
| disableClipboardPaste | bool | - | If |
| disableColumnFilter | bool | - | If |
| disableColumnMenu | bool | - | If |
| disableColumnPinning | bool | - | If |
| disableColumnReorder | bool | - | If |
| disableColumnResize | bool | - | If |
| disableColumnSelector | bool | - | If |
| disableDensitySelector | bool | - | If |
| disableMultipleColumnsFiltering | bool | - | If |
| disableMultipleColumnsSorting | bool | - | If |
| disableMultipleRowSelection | bool | - | If |
| disableRowGrouping | bool | - | If |
| disableRowSelectionOnClick | bool | - | If |
| disableVirtualization | bool | - | If |
| editMode | 'cell' | 'row' | "cell" | Controls whether to use the cell or row editing. |
| experimentalFeatures | { ariaV7?: bool, clipboardPaste?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool } | - | Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to |
| filterDebounceMs | number | 150 | The milliseconds delay to wait after a keystroke before triggering filtering. |
| filterMode | 'client' | 'server' | "client" | Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side. |
| filterModel | { items: Array<{ field: string, id?: number | string, operator: string, value?: any }>, logicOperator?: 'and' | 'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and' | 'or', quickFilterValues?: array } | - | Set the filter model of the grid. |
| getAggregationPosition | func | `(groupNode) => groupNode == null ? 'footer' : 'inline'` | Determines the position of an aggregated value. Signature: function(groupNode: GridGroupNode) => GridAggregationPosition | null
Returns: Position of the aggregated value (if |
| getCellClassName | func | - | Function that applies CSS classes dynamically on cells. Signature: function(params: GridCellParams) => string
Returns: The CSS class to apply to the cell. |
| getDetailPanelContent | func | - | Function that returns the element to render in row detail. Signature: function(params: GridRowParams) => React.JSX.Element
Returns: The row detail element. |
| getDetailPanelHeight | func | "() => 500" | Function that returns the height of the row detail panel. Signature: function(params: GridRowParams) => number | string
Returns: The height in pixels or "auto" to use the content height. |
| getEstimatedRowHeight | func | - | Function that returns the estimated height for a row. Only works if dynamic row height is used. Once the row height is measured this value is discarded. Signature: function(params: GridRowHeightParams) => number | null
Returns: The estimated row height value. If |
| getRowClassName | func | - | Function that applies CSS classes dynamically on rows. Signature: function(params: GridRowClassNameParams) => string
Returns: The CSS class to apply to the row. |
| getRowHeight | func | - | Function that sets the row height per row. Signature: function(params: GridRowHeightParams) => GridRowHeightReturnValue
Returns: The row height value. If |
| getRowId | func | - | Return the id of a given GridRowModel. |
| getRowSpacing | func | - | Function that allows to specify the spacing between rows. Signature: function(params: GridRowSpacingParams) => GridRowSpacing
Returns: The row spacing values. |
| getTreeDataPath | func | - | Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element. Signature: function(row: R) => Array
Returns: The path to the row. |
| groupingColDef | func | object | - | The grouping column used by the tree data. |
| hideFooter | bool | - | If |
| hideFooterPagination | bool | - | If |
| hideFooterRowCount | bool | false | If |
| hideFooterSelectedRowCount | bool | - | If |
| initialState | object | - | The initial state of the DataGridPremium. The data in it is set in the state on initialization but isn't controlled. If one of the data in |
| isCellEditable | func | - | Callback fired when a cell is rendered, returns true if the cell is editable. Signature: function(params: GridCellParams) => boolean
Returns: A boolean indicating if the cell is editable. |
| isGroupExpandedByDefault | func | - | Determines if a group should be expanded after its creation. This prop takes priority over the Signature: function(node: GridGroupNode) => boolean
Returns: A boolean indicating if the group is expanded. |
| isRowSelectable | func | - | Determines if a row can be selected. Signature: function(params: GridRowParams) => boolean
Returns: A boolean indicating if the cell is selectable. |
| keepColumnPositionIfDraggedOutside | bool | - | If |
| keepNonExistentRowsSelected | bool | - | If |
| loading | bool | - | If |
| localeText | object | - | Set the locale text of the grid. You can find all the translation keys supported in the source in the GitHub repository. |
| logger | { debug: func, error: func, info: func, warn: func } | console | Pass a custom logger in the components that implements the Logger interface. |
| logLevel | 'debug' | 'error' | 'info' | 'warn' | false | "error" ("warn" in dev mode) | Allows to pass the logging level or false to turn off logging. |
| nonce | string | - | Nonce of the inline styles for Content Security Policy. |
| onAggregationModelChange | func | - | Callback fired when the row grouping model changes. Signature: function(model: GridAggregationModel, details: GridCallbackDetails) => void
|
| onCellClick | func | - | Callback fired when any cell is clicked. Signature: function(params: GridCellParams, event: MuiEvent
|
| onCellDoubleClick | func | - | Callback fired when a double click event comes from a cell element. Signature: function(params: GridCellParams, event: MuiEvent
|
| onCellEditStart | func | - | Callback fired when the cell turns to edit mode. Signature: function(params: GridCellParams, event: MuiEvent
|
| onCellEditStop | func | - | Callback fired when the cell turns to view mode. Signature: function(params: GridCellParams, event: MuiEvent
|
| onCellKeyDown | func | - | Callback fired when a keydown event comes from a cell element. Signature: function(params: GridCellParams, event: MuiEvent
|
| onCellModesModelChange | func | - | Callback fired when the Signature: function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void
|
| onClipboardCopy | func | - | Callback called when the data is copied to the clipboard. Signature: function(data: string) => void
|
| onClipboardPasteEnd | func | - | Callback fired when the clipboard paste operation ends. |
| onClipboardPasteStart | func | - | Callback fired when the clipboard paste operation starts. |
| onColumnHeaderClick | func | - | Callback fired when a click event comes from a column header element. Signature: function(params: GridColumnHeaderParams, event: MuiEvent
|
| onColumnHeaderDoubleClick | func | - | Callback fired when a double click event comes from a column header element. Signature: function(params: GridColumnHeaderParams, event: MuiEvent
|
| onColumnHeaderEnter | func | - | Callback fired when a mouse enter event comes from a column header element. Signature: function(params: GridColumnHeaderParams, event: MuiEvent
|
| onColumnHeaderLeave | func | - | Callback fired when a mouse leave event comes from a column header element. Signature: function(params: GridColumnHeaderParams, event: MuiEvent
|
| onColumnHeaderOut | func | - | Callback fired when a mouseout event comes from a column header element. Signature: function(params: GridColumnHeaderParams, event: MuiEvent
|
| onColumnHeaderOver | func | - | Callback fired when a mouseover event comes from a column header element. Signature: function(params: GridColumnHeaderParams, event: MuiEvent
|
| onColumnOrderChange | func | - | Callback fired when a column is reordered. Signature: function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
|
| onColumnResize | func | - | Callback fired while a column is being resized. Signature: function(params: GridColumnResizeParams, event: MuiEvent
|
| onColumnVisibilityModelChange | func | - | Callback fired when the column visibility model changes. Signature: function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => void
|
| onColumnWidthChange | func | - | Callback fired when the width of a column is changed. Signature: function(params: GridColumnResizeParams, event: MuiEvent
|
| onDetailPanelExpandedRowIdsChange | func | - | Callback fired when the detail panel of a row is opened or closed. Signature: function(ids: Array
|
| onExcelExportStateChange | func | - | Callback fired when the state of the Excel export changes. Signature: function(inProgress: string) => void
|
| onFetchRows | func | - | Callback fired when rowCount is set and the next batch of virtualized rows is rendered. Signature: function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
|
| onFilterModelChange | func | - | Callback fired when the Filter model changes before the filters are applied. Signature: function(model: GridFilterModel, details: GridCallbackDetails) => void
|
| onMenuClose | func | - | Callback fired when the menu is closed. Signature: function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
|
| onMenuOpen | func | - | Callback fired when the menu is opened. Signature: function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
|
| onPaginationModelChange | func | - | Callback fired when the pagination model has changed. Signature: function(model: GridPaginationModel, details: GridCallbackDetails) => void
|
| onPinnedColumnsChange | func | - | Callback fired when the pinned columns have changed. Signature: function(pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => void
|
| onPreferencePanelClose | func | - | Callback fired when the preferences panel is closed. Signature: function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
|
| onPreferencePanelOpen | func | - | Callback fired when the preferences panel is opened. Signature: function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
|
| onProcessRowUpdateError | func | - | Callback called when Signature: function(error: any) => void
|
| onResize | func | - | Callback fired when the grid is resized. Signature: function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => void
|
| onRowClick | func | - | Callback fired when a row is clicked. Not called if the target clicked is an interactive element added by the built-in columns. Signature: function(params: GridRowParams, event: MuiEvent
|
| onRowDoubleClick | func | - | Callback fired when a double click event comes from a row container element. Signature: function(params: GridRowParams, event: MuiEvent
|
| onRowEditCommit | func | - | Callback fired when the row changes are committed. Signature: function(id: GridRowId, event: MuiEvent
|
| onRowEditStart | func | - | Callback fired when the row turns to edit mode. Signature: function(params: GridRowParams, event: MuiEvent
|
| onRowEditStop | func | - | Callback fired when the row turns to view mode. Signature: function(params: GridRowParams, event: MuiEvent
|
| onRowGroupingModelChange | func | - | Callback fired when the row grouping model changes. Signature: function(model: GridRowGroupingModel, details: GridCallbackDetails) => void
|
| onRowModesModelChange | func | - | Callback fired when the Signature: function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void
|
| onRowOrderChange | func | - | Callback fired when a row is being reordered. Signature: function(params: GridRowOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
|
| onRowSelectionModelChange | func | - | Callback fired when the selection state of one or multiple rows changes. Signature: function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void
|
| onRowsScrollEnd | func | - | Callback fired when scrolling to the bottom of the grid viewport. Signature: function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void
|
| onSortModelChange | func | - | Callback fired when the sort model changes before a column is sorted. Signature: function(model: GridSortModel, details: GridCallbackDetails) => void
|
| pageSizeOptions | Array<number | { label: string, value: number }> | [25, 50, 100] | Select the pageSize dynamically using the component UI. |
| pagination | bool | - | If |
| paginationMode | 'client' | 'server' | "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. |
| paginationModel | { page: number, pageSize: number } | - | The pagination model of type GridPaginationModel which refers to current |
| pinnedColumns | { left?: Array<string>, right?: Array<string> } | - | The column fields to display pinned to left or right. |
| pinnedRows | { bottom?: Array<object>, top?: Array<object> } | - | Rows data to pin on top or bottom. |
| processRowUpdate | func | - | Callback called before updating a row with new values in the row and cell editing. Signature: function(newRow: R, oldRow: R) => Promise
Returns: The final values to update the row. |
| rowBuffer | number | 3 | Number of extra rows to be rendered before/after the visible slice. |
| rowCount | number | - | Set the total number of rows, if it is different from the length of the value |
| rowGroupingColumnMode | 'multiple' | 'single' | 'single' | If |
| rowGroupingModel | Array<string> | - | Set the row grouping model of the grid. |
| rowHeight | number | 52 | Sets the height in pixel of a row in the grid. |
| rowModesModel | object | - | Controls the modes of the rows. |
| rowReordering | bool | - | If |
| rowSelection | bool | true | If |
| rowSelectionModel | Array<number | string> | number | string | - | Sets the row selection model of the grid. |
| rowsLoadingMode | 'client' | 'server' | - | Loading rows can be processed on the server or client-side. Set it to 'client' if you would like enable infnite loading. Set it to 'server' if you would like to enable lazy loading. * @default "client" |
| rowSpacingType | 'border' | 'margin' | "margin" | Sets the type of space between rows added by |
| rowThreshold | number | 3 | Number of rows from the |
| scrollbarSize | number | - | Override the height/width of the grid inner scrollbar. |
| scrollEndThreshold | number | 80 | Set the area in |
| showCellVerticalBorder | bool | - | If |
| showColumnVerticalBorder | bool | - | If |
| slotProps | object | - | Overridable components props dynamically passed to the component at rendering. |
| slots | object | - | Overridable components. |
| sortingMode | 'client' | 'server' | "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 | Array<'asc' | 'desc'> | ['asc', 'desc', null] | The order of the sorting sequence. |
| sortModel | Array<{ field: string, sort?: 'asc' | 'desc' }> | - | Set the sort model of the grid. |
| sx | Array<func | object | bool> | func | object | - | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. |
| throttleRowsMs | number | 0 | If positive, the Grid will throttle updates coming from |
| treeData | bool | - | If |
| unstable_cellSelection | bool | - | If |
| unstable_cellSelectionModel | object | - | Set the cell selection model of the grid. |
| unstable_headerFilters | bool | - | If |
| unstable_ignoreValueFormatterDuringExport | { clipboardExport?: bool, csvExport?: bool } | bool | : false | If |
| unstable_onCellSelectionModelChange | func | - | Callback fired when the selection state of one or multiple cells changes. Signature: function(cellSelectionModel: GridCellSelectionModel, details: GridCallbackDetails) => void
|
| unstable_splitClipboardPastedText | func | - | The function is used to split the pasted text into rows and cells. Signature: function(text: string) => void
|
ref is forwarded to the root element.| Slot name | Class name | Default component | Description |
|---|---|---|---|
| baseButton | Button | The custom Button component used in the grid. | |
| baseCheckbox | Checkbox | The custom Checkbox component used in the grid for both header and cells. | |
| baseChip | Chip | The custom Chip component used in the grid. | |
| baseFormControl | FormControl | The custom FormControl component used in the grid. | |
| baseIconButton | IconButton | The custom IconButton component used in the grid. | |
| baseInputAdornment | InputAdornment | The custom InputAdornment component used in the grid. | |
| baseInputLabel | InputLabel | The custom InputLabel component used in the grid. | |
| basePopper | Popper | The custom Popper component used in the grid. | |
| baseSelect | Select | The custom Select component used in the grid. | |
| baseSelectOption | MenuItem | The custom SelectOption component used in the grid. | |
| baseSwitch | Switch | The custom Switch component used in the grid. | |
| baseTextField | TextField | The custom TextField component used in the grid. | |
| baseTooltip | Tooltip | The custom Tooltip component used in the grid. | |
| booleanCellFalseIcon | GridCloseIcon | Icon displayed on the boolean cell to represent the false value. | |
| booleanCellTrueIcon | GridCheckIcon | Icon displayed on the boolean cell to represent the true value. | |
| cell | GridCell | Component rendered for each cell. | |
| columnFilteredIcon | GridFilterAltIcon | Icon displayed on the column header menu to show that a filter has been applied to the column. | |
| columnHeaderFilterIconButton | GridColumnHeaderFilterIconButton | Filter icon component rendered in each column header. | |
| columnHeaders | DataGridColumnHeaders | Component responsible for rendering the column headers. | |
| columnMenu | GridColumnMenu | Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers. | |
| columnMenuAggregationIcon | GridFunctionsIcon | Icon displayed in column menu for aggregation | |
| columnMenuClearIcon | GridClearIcon | Icon displayed in column menu for clearing values | |
| columnMenuFilterIcon | GridFilterAltIcon | Icon displayed in column menu for filter | |
| columnMenuGroupIcon | GridGroupWorkIcon | Icon displayed in column menu for grouping | |
| columnMenuHideIcon | GridVisibilityOffIcon | Icon displayed in column menu for hiding column | |
| columnMenuIcon | GridTripleDotsVerticalIcon | Icon displayed on the side of the column header title to display the filter input component. | |
| columnMenuManageColumnsIcon | GridViewColumnIcon | Icon displayed in column menu for showing all columns | |
| columnMenuPinLeftIcon | GridPushPinLeftIcon | Icon displayed in column menu for left pinning | |
| columnMenuPinRightIcon | GridPushPinRightIcon | Icon displayed in column menu for right pinning | |
| columnMenuSortAscendingIcon | GridArrowUpwardIcon | Icon displayed in column menu for ascending sort | |
| columnMenuSortDescendingIcon | GridArrowDownwardIcon | Icon displayed in column menu for descending sort | |
| columnMenuUngroupIcon | GridWorkspacesIcon | Icon displayed in column menu for ungrouping | |
| columnReorderIcon | GridDragIcon | Icon displayed on the column reorder button. | |
| columnResizeIcon | GridSeparatorIcon | Icon displayed in between two column headers that allows to resize the column header. | |
| columnSelectorIcon | GridColumnIcon | Icon displayed on the column menu selector tab. | |
| columnSortedAscendingIcon | GridArrowUpwardIcon | Icon displayed on the side of the column header title when sorted in ascending order. | |
| columnSortedDescendingIcon | GridArrowDownwardIcon | Icon displayed on the side of the column header title when sorted in descending order. | |
| columnUnsortedIcon | GridColumnUnsortedIcon | Icon displayed on the side of the column header title when unsorted. | |
| columnsPanel | GridColumnsPanel | GridColumns panel component rendered when clicking the columns button. | |
| densityComfortableIcon | GridViewStreamIcon | Icon displayed on the "comfortable" density option in the toolbar. | |
| densityCompactIcon | GridViewHeadlineIcon | Icon displayed on the compact density option in the toolbar. | |
| densityStandardIcon | GridTableRowsIcon | Icon displayed on the standard density option in the toolbar. | |
| detailPanelCollapseIcon | GridRemoveIcon | Icon displayed on the detail panel toggle column when expanded. | |
| detailPanelExpandIcon | GridAddIcon | Icon displayed on the detail panel toggle column when collapsed. | |
| exportIcon | GridSaveAltIcon | Icon displayed on the open export button present in the toolbar by default. | |
| filterPanel | GridFilterPanel | Filter panel component rendered when clicking the filter button. | |
| filterPanelAddIcon | GridAddIcon | Icon displayed for deleting the filter from filter panel. | |
| filterPanelDeleteIcon | GridDeleteIcon | Icon displayed for deleting the filter from filter panel. | |
| filterPanelRemoveAllIcon | GridDeleteForeverIcon | Icon displayed for deleting all the active filters from filter panel. | |
| footer | GridFooter | Footer component rendered at the bottom of the grid viewport. | |
| footerRowCount | GridRowCount | Row count component rendered in the footer | |
| groupingCriteriaCollapseIcon | GridExpandMoreIcon | Icon displayed on the grouping column when the children are expanded | |
| groupingCriteriaExpandIcon | GridKeyboardArrowRight | Icon displayed on the grouping column when the children are collapsed | |
| headerFilterCell | GridHeaderFilterCell | Component responsible for showing menu adornment in Header filter row | |
| headerFilterMenu | GridHeaderFilterMenu | Component responsible for showing menu in Header filter row | |
| loadIcon | GridLoadIcon | Icon displayed on the input while processing. | |
| loadingOverlay | GridLoadingOverlay | Loading overlay component rendered when the grid is in a loading state. | |
| moreActionsIcon | GridMoreVertIcon | Icon displayed on the actions column type to open the menu. | |
| noResultsOverlay | GridNoResultsOverlay | No results overlay component rendered when the grid has no results after filtering. | |
| noRowsOverlay | GridNoRowsOverlay | No rows overlay component rendered when the grid has no rows. | |
| openFilterButtonIcon | GridFilterListIcon | Icon displayed on the open filter button present in the toolbar by default. | |
| pagination | Pagination | Pagination component rendered in the grid footer by default. | |
| panel | GridPanel | Panel component wrapping the filters and columns panels. | |
| preferencesPanel | GridPreferencesPanel | PreferencesPanel component rendered inside the Header component. | |
| quickFilterClearIcon | GridCloseIcon | Icon displayed on the quick filter reset input. | |
| quickFilterIcon | GridSearchIcon | Icon displayed on the quick filter input. | |
| row | GridRow | Component rendered for each row. | |
| rowReorderIcon | GridDragIcon | Icon displayed on the reorder column type to reorder a row. | |
| skeletonCell | GridSkeletonCell | Component rendered for each skeleton cell. | |
| toolbar | null | Toolbar component rendered inside the Header component. | |
| treeDataCollapseIcon | GridExpandMoreIcon | Icon displayed on the tree data toggling column when the children are expanded | |
| treeDataExpandIcon | GridKeyboardArrowRight | Icon displayed on the tree data toggling column when the children are collapsed |