DataGridPremium API
API reference docs for the React DataGridPremium component. Learn about the props, CSS, and other APIs of this exported module.
Component demos
Import
import { DataGridPremium } from '@mui/x-data-grid-premium/DataGridPremium';
// or
import { DataGridPremium } from '@mui/x-data-grid-premium';
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 |