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.
Set of columns of type GridColDef[].
Type:Array<GridColDef
The id of the active chart.
Type:string
Aggregation functions available on the grid.
Type:Record
| Record
Default:GRID_AGGREGATION_FUNCTIONS when `dataSource` is not provided, `{}` when `dataSource` is provided
Set the aggregation model of the grid.
Type:GridAggregationModel
Rows used to generate the aggregated value.
If filtered, the aggregated values are generated using only the rows currently passing the filtering process.
If all, the aggregated values are generated using all the rows.
Type:'all'
| 'filtered'
Default:"filtered"
If true, the AI Assistant is enabled.
Type:bool
Default:false
The index of the active AI Assistant conversation.
Type:number
The conversations with the AI Assistant.
Type:Array<{ id?: string, prompts: Array<{ createdAt: Date, helperText?: string, response?: PromptResponse, value: string, variant?: any
| any
| any }>, title?: string }>
The suggestions of the AI Assistant.
Type:Array<{ value: string }>
If true, the AI Assistant is allowed to pick up values from random cells from each column to build the prompt context.
Type:bool
The aria-label of the Data Grid.
Type:string
The id of the element containing a label for the Data Grid.
Type:string
If true, the Data Grid height is dynamic and takes as much space as it needs to display all rows.
Use it instead of a flex parent container approach, if:
- you don't need to set a minimum or maximum height for the Data Grid
- you want to avoid the scrollbar flickering when the content changes
Type:bool
Default: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.
Type:bool
Default:false
If true, columns are autosized after the datagrid is mounted.
Type:bool
Default:false
The options for autosize when user-initiated.
Type:{ columns?: Array<string>, disableColumnVirtualization?: bool, expand?: bool, includeHeaderFilters?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number }
Controls the modes of the cells.
Type:GridCellModesModel
If true, the cell selection mode is enabled.
Type:bool
Default:false
If true, a fill handle is shown at the bottom-right corner of the cell selection.
Dragging the fill handle fills target cells with the values from selected cells.
Requires cellSelection to be enabled.
Type:bool
Default:false
Set the cell selection model of the grid.
Type:GridCellSelectionModel
If true, the charts integration feature is enabled.
Type:bool
Default:false
Definition of the column rendered when the checkboxSelection prop is enabled.
Type:GridCheckboxSelectionColDef
If true, the Data Grid will display an extra column with checkboxes for selecting rows.
Type:bool
Default:false
If true, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with checkboxSelection.
It only works if the pagination is enabled.
Type:bool
Default:false
Override or extend the styles applied to the component.
See CSS classes API below for more details.
Type:Partial
The character used to separate cell values when copying to the clipboard.
Type:string
Default:'\t'
Column region in pixels to render before/after the viewport
Type:number
Default:150
The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.
Type:number
Default:150
Sets the height in pixels of the column group headers in the Data Grid.
Inherits the columnHeaderHeight value if not set.
Type:number
Type:Array<GridColumnGroup>
Sets the height in pixel of the column headers in the Data Grid.
Type:number
Default:56
Set the column visibility model of the Data Grid.
If defined, the Data Grid will ignore the hide property in GridColDef.
Type:GridColumnVisibilityModel
Data source object.
Type:{ getAggregatedValue?: func, getChildrenCount?: func, getGroupKey?: func, getRows: func, updateRow?: func }
Data source cache object.
Type:{ clear: func, get: func, set: func }
If positive, the Data Grid will periodically revalidate data source rows by re-fetching them from the server when the cache entry has expired.
If the refetched rows are different from the current rows, the grid will update the rows.
Set to 0 to disable polling.
Type:number
Default: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.
Type:number
Default:0
Set the density of the Data Grid.
Type:'comfortable'
| 'compact'
| 'standard'
Default:"standard"
The row ids to show the detail panel.
Type:{ add: func, clear: func, delete: func, difference: func, entries: func, forEach: func, has: func, intersection: func, isDisjointFrom: func, isSubsetOf: func, isSupersetOf: func, keys: func, size: number, symmetricDifference: func, union: func, values: func }
If true, aggregation is disabled.
Type:bool
Default:false
If true, column autosizing on header separator double-click is disabled.
Type:bool
Default:false
If true, the filtering will only be applied to the top level rows when grouping rows with the treeData prop.
Type:bool
Default:false
If true, the sorting will only be applied to the top level rows when grouping rows with the treeData prop.
Type:bool
Default:false
If true, the clipboard paste is disabled.
Type:bool
Default:false
If true, column filters are disabled.
Type:bool
Default:false
If true, the column menu is disabled.
Type:bool
Default:false
If true, the column pinning is disabled.
Type:bool
Default:false
If true, reordering columns is disabled.
Type:bool
Default:false
If true, resizing columns is disabled.
Type:bool
Default:false
If true, hiding/showing columns is disabled.
Type:bool
Default:false
If true, the column sorting feature will be disabled.
Type:bool
Default:false
If true, the density selector is disabled.
Type:bool
Default:false
If true, eval() is not used for performance optimization.
Type:bool
Default:false
If true, filtering with multiple columns is disabled.
Type:bool
Default:false
If true, the sorting with multiple columns is disabled.
Type:bool
Default:false
If true, multiple selection using the Ctrl/CMD or Shift key is disabled.
The MIT DataGrid will ignore this prop, unless checkboxSelection is enabled.
Type:bool
Default:false (`!props.checkboxSelection` for MIT Data Grid)
If true, the pivoting feature is disabled.
Type:bool
Default:false
If true, the row grouping is disabled.
Type:bool
Default:false
If true, the Data Grid will not use the exclude model optimization when selecting all rows.
Type:bool
Default:false
If true, the selection on click on a row or cell is disabled.
Type:bool
Default:false
If true, the virtualization is disabled.
Type:bool
Default:false
Controls whether to use the cell or row editing.
Type:'cell'
| 'row'
Default:"cell"
Use if the actual rowCount is not known upfront, but an estimation is available.
If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
Applicable only with paginationMode="server" and when rowCount="-1"
Type:number
Unstable features, breaking changes might be introduced.
For each feature, if the flag is not explicitly set to true, then the feature is fully disabled, and neither property nor method calls will have any effect.
Type:{ virtualizerLayoutMode?: 'controlled'
| 'uncontrolled', warnIfFocusStateIsNotSynced?: bool }
The milliseconds delay to wait after a keystroke before triggering filtering.
Type:number
Default:150
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.
Type:'client'
| 'server'
Default:"client"
Set the filter model of the Data Grid.
Type:{ items: Array<{ field: string, id?: number
| string, operator: '!='
| '<'
| '<='
| '='
| '>'
| '>='
| 'after'
| 'before'
| 'contains'
| 'doesNotContain'
| 'doesNotEqual'
| 'endsWith'
| 'equals'
| 'is'
| 'isAnyOf'
| 'isEmpty'
| 'isNotEmpty'
| 'not'
| 'onOrAfter'
| 'onOrBefore'
| 'startsWith'
| {}, value?: any }>, logicOperator?: 'and'
| 'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and'
| 'or', quickFilterValues?: Array<any> }
Determines the position of an aggregated value.
Type:func
Default:(groupNode) => (groupNode.depth === -1 ? 'footer' : 'inline')
function(groupNode: GridGroupNode) => GridAggregationPosition | nullgroupNodeThe current group.
Function that applies CSS classes dynamically on cells.
Type:func
function(params: GridCellParams) => stringparamsWith all properties from GridCellParams.
Function that returns the element to render in row detail.
Type:func
function(params: GridRowParams) => ReactNodeparamsWith all properties from GridRowParams.
Function that returns the height of the row detail panel.
Type:func
Default:"() => 500"
function(params: GridRowParams) => number | 'auto'paramsWith all properties from GridRowParams.
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.
Type:func
function(params: GridRowHeightParams) => number | nullparamsWith all properties from GridRowHeightParams.
Allows to generate derived columns from actual columns that will be used for pivoting. Useful e.g. for date columns to generate year, quarter, month, etc.
Type:func
Default:{defaultGetPivotDerivedColumns | undefined} Creates year and quarter columns for date columns if not in server side mode.
function(column: GridColDef, getLocaleText: GridLocaleTextApi['getLocaleText']) => Array | undefined columnThe column to generate derived columns for.getLocaleTextThe function to get the locale text.
Function that applies CSS classes dynamically on rows.
Type:func
function(params: GridRowClassNameParams) => stringparamsWith all properties from GridRowClassNameParams.
Function that sets the row height per row.
Type:func
function(params: GridRowHeightParams) => GridRowHeightReturnValueparamsWith all properties from GridRowHeightParams.
Return the id of a given GridRowModel. Ensure the reference of this prop is stable to avoid performance implications. It could be done by either defining the prop outside of the component or by memoizing it.
Type:func
function(row: R) => GridRowIdFunction that allows to specify the spacing between rows.
Type:func
function(params: GridRowSpacingParams) => GridRowSpacingparamsWith all properties from GridRowSpacingParams.
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.
Type:func
function(row: R) => readonly ArrayrowThe row from which we want the path.
The grouping column used by the tree data.
Type:{}
Override the height of the header filters.
Type:number
If true, the header filters feature is enabled.
Type:bool
Default:false
If true, the footer component is hidden.
Type:bool
Default:false
If true, the pagination component in the footer is hidden.
Type:bool
Default:false
If true, the row count in the footer is hidden.
It has no effect if the pagination is enabled.
Type:bool
Default:false
If true, the selected row count in the footer is hidden.
Type:bool
Default:false
Map of grid events to their undo/redo handlers.
Type:Record
Default:Handlers for `rowEditStop`, `cellEditStop` and `clipboardPasteEnd` events
The maximum size of the history stack. Set to 0 to disable the undo/redo feature.
Type:number
Default:30
List of grid events after which the history stack items should be re-validated.
Type:Array<'activeChartIdChange'
| 'activeStrategyProcessorChange'
| 'aggregationLookupSet'
| 'aggregationModelChange'
| 'aiAssistantActiveConversationIndexChange'
| 'aiAssistantConversationsChange'
| 'cellClick'
| 'cellDoubleClick'
| 'cellDragEnter'
| 'cellDragOver'
| 'cellEditStart'
| 'cellEditStop'
| 'cellFocusIn'
| 'cellFocusOut'
| 'cellKeyDown'
| 'cellKeyUp'
| 'cellModeChange'
| 'cellModesModelChange'
| 'cellMouseDown'
| 'cellMouseOver'
| 'cellMouseUp'
| 'cellSelectionChange'
| 'chartSynchronizationStateChange'
| 'clipboardCopy'
| 'clipboardPasteEnd'
| 'clipboardPasteStart'
| 'columnGroupHeaderBlur'
| 'columnGroupHeaderFocus'
| 'columnGroupHeaderKeyDown'
| 'columnHeaderBlur'
| 'columnHeaderClick'
| 'columnHeaderContextMenu'
| 'columnHeaderDoubleClick'
| 'columnHeaderDragEnd'
| 'columnHeaderDragEndNative'
| 'columnHeaderDragEnter'
| 'columnHeaderDragOver'
| 'columnHeaderDragStart'
| 'columnHeaderEnter'
| 'columnHeaderFocus'
| 'columnHeaderKeyDown'
| 'columnHeaderLeave'
| 'columnHeaderOut'
| 'columnHeaderOver'
| 'columnIndexChange'
| 'columnOrderChange'
| 'columnResize'
| 'columnResizeStart'
| 'columnResizeStop'
| 'columnSeparatorDoubleClick'
| 'columnSeparatorMouseDown'
| 'columnVisibilityModelChange'
| 'columnWidthChange'
| 'columnsChange'
| 'debouncedResize'
| 'densityChange'
| 'detailPanelsExpandedRowIdsChange'
| 'excelExportStateChange'
| 'fetchRows'
| 'filterModelChange'
| 'filteredRowsSet'
| 'headerFilterBlur'
| 'headerFilterClick'
| 'headerFilterKeyDown'
| 'headerFilterMouseDown'
| 'headerSelectionCheckboxChange'
| 'menuClose'
| 'menuOpen'
| 'paginationMetaChange'
| 'paginationModelChange'
| 'pinnedColumnsChange'
| 'pivotModeChange'
| 'pivotModelChange'
| 'pivotPanelOpenChange'
| 'preferencePanelClose'
| 'preferencePanelOpen'
| 'redo'
| 'renderedRowsIntervalChange'
| 'resize'
| 'rootMount'
| 'rowClick'
| 'rowCountChange'
| 'rowDoubleClick'
| 'rowDragEnd'
| 'rowDragOver'
| 'rowDragStart'
| 'rowEditStart'
| 'rowEditStop'
| 'rowExpansionChange'
| 'rowGroupingModelChange'
| 'rowModesModelChange'
| 'rowMouseEnter'
| 'rowMouseLeave'
| 'rowMouseOut'
| 'rowMouseOver'
| 'rowOrderChange'
| 'rowSelectionChange'
| 'rowSelectionCheckboxChange'
| 'rowsScrollEnd'
| 'rowsScrollEndIntersection'
| 'rowsSet'
| 'scrollPositionChange'
| 'sidebarClose'
| 'sidebarOpen'
| 'sortModelChange'
| 'sortedRowsSet'
| 'stateChange'
| 'strategyAvailabilityChange'
| 'undo'
| 'unmount'
| 'viewportInnerSizeChange'
| 'virtualScrollerContentSizeChange'
| 'virtualScrollerTouchMove'
| 'virtualScrollerWheel'>
Default:['columnsChange', 'rowsSet', 'sortedRowsSet', 'filteredRowsSet', 'paginationModelChange']
If true, the diacritics (accents) are ignored when filtering or quick filtering.
E.g. when filter value is cafe, the rows with café will be visible.
Type:bool
Default:false
If true, the Data Grid will not use valueFormatter when exporting to CSV or copying to clipboard.
If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export.
Type:bool
| bool
| { clipboardExport?: bool, csvExport?: bool }
Default:false
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 initialState is also being controlled, then the control state wins.
Type:GridInitialStatePremium
Callback fired when a cell is rendered, returns true if the cell is editable.
Type:func
function(params: GridCellParams) => booleanparamsWith all properties from GridCellParams.
Determines if a group should be expanded after its creation.
This prop takes priority over the defaultGroupingExpansionDepth prop.
Type:func
function(node: GridGroupNode) => booleannodeThe node of the group to test.
Indicates whether a row is reorderable.
Type:func
function(params: @param {R} params.row The row model of the row that the current cell belongs to.
* @param {GridTreeNode} params.rowNode The node of the row that the current cell belongs to.
* ) => booleanparamsWith all properties from the row.
Determines if a row can be selected.
Type:func
function(params: GridRowParams) => booleanparamsWith all properties from GridRowParams.
Indicates if a row reorder attempt is valid.
Can be used to disable certain row reorder operations based on the context.
The internal validation is still applied, preventing unsupported use-cases.
Use isValidRowReorder() to add additional validation rules to the default ones.
Type:func
function(context: ReorderValidationContext) => booleancontextThe context object containing all information about the reorder operation.
If true, moving the mouse pointer outside the grid before releasing the mouse button
in a column re-order action will not cause the column to jump back to its original position.
Type:bool
Default:false
If true, the selection model will retain selected rows that do not exist.
Useful when using server side pagination and row selections need to be retained
when changing pages.
Type:bool
Default:false
The label of the Data Grid.
If the showToolbar prop is true, the label will be displayed in the toolbar and applied to the aria-label attribute of the grid.
If the showToolbar prop is false, the label will not be visible but will be applied to the aria-label attribute of the grid.
Type:string
Used together with dataSource to enable lazy loading.
If enabled, the grid stops adding paginationModel to the data requests (getRows)
and starts sending start and end values depending on the loading mode and the scroll position.
Type:bool
Default:false
If positive, the Data Grid will throttle data source requests on rendered rows interval change.
Type:number
Default:500
If true, displays the data in a list view.
Use in combination with listViewColumn.
Type:bool
Definition of the column rendered when the listView prop is enabled.
Type:{ align?: 'center'
| 'left'
| 'right', cellClassName?: func
| string, display?: 'flex'
| 'text', field: string, renderCell?: func }
If true, a loading overlay is displayed.
Type:bool
Default:false
Set the locale text of the Data Grid. You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
Type:Partial
Pass a custom logger in the components that implements the Logger interface.
Type:{ debug: func, error: func, info: func, warn: func }
Default:console
Allows to pass the logging level or false to turn off logging.
Type:'debug'
| 'error'
| 'info'
| 'warn'
| bool
Default:"error" ("warn" in dev mode)
If set to "always", the multi-sorting is applied without modifier key. Otherwise, the modifier key is required for multi-sorting to be applied.
Type:'always'
| 'withModifierKey'
Default:"withModifierKey"
Nonce of the inline styles for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute).
Type:string
Callback fired when the active chart changes.
Type:func
function(activeChartId: string) => voidactiveChartIdThe new active chart id.
Callback fired when the row grouping model changes.
Type:func
function(model: GridAggregationModel, details: GridCallbackDetails) => voidmodelThe aggregated columns.detailsAdditional details for this callback.
Callback fired when the AI Assistant active conversation index changes.
Type:func
function(aiAssistantActiveConversationIndex: number) => voidaiAssistantActiveConversationIndexThe new active conversation index.
Callback fired when the AI Assistant conversations change.
Type:func
function(conversations: Array) => void conversationsThe new AI Assistant conversations.
Callback fired before the clipboard paste operation starts. Use it to confirm or cancel the paste operation.
Type:func
function(params: @param {Array>} params.data The raw pasted data split by rows and cells.
* ) => Promise paramsParams passed to the callback.
Callback fired when any cell is clicked.
Type:func
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridCellParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when a double click event comes from a cell element.
Type:func
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridCellParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the cell turns to edit mode.
Type:func
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridCellParams.eventThe event that caused this prop to be called.
Callback fired when the cell turns to view mode.
Type:func
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridCellParams.eventThe event that caused this prop to be called.
Callback fired when a keydown event comes from a cell element.
Type:func
function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridCellParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the cellModesModel prop changes.
Type:func
function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => voidcellModesModelObject containing which cells are in "edit" mode.detailsAdditional details for this callback.
Callback fired when the selection state of one or multiple cells changes.
Type:func
function(cellSelectionModel: GridCellSelectionModel, details: GridCallbackDetails) => voidcellSelectionModelObject in the shape of GridCellSelectionModel containing the selected cells.detailsAdditional details for this callback.
Callback called when the data is copied to the clipboard.
Type:func
function(params: string, event: { defaultMuiPrevented?: boolean | undefined; }, details: GridCallbackDetails) => void Callback fired when the clipboard paste operation ends.
Type:func
function(params: { oldRows: Map; newRows: Map; }, event: { defaultMuiPrevented?: boolean | undefined; }, details: GridCallbackDetails) => void Callback fired when the clipboard paste operation starts.
Type:func
function(params: { data: Array>; }, event: { defaultMuiPrevented?: boolean | undefined; }, details: GridCallbackDetails) => void Callback fired when a click event comes from a column header element.
Type:func
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnHeaderParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when a contextmenu event comes from a column header element.
Type:func
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnHeaderParams.eventThe event object.
Callback fired when a double click event comes from a column header element.
Type:func
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnHeaderParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when a mouse enter event comes from a column header element.
Type:func
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnHeaderParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when a mouse leave event comes from a column header element.
Type:func
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnHeaderParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when a mouseout event comes from a column header element.
Type:func
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnHeaderParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when a mouseover event comes from a column header element.
Type:func
function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnHeaderParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when a column is reordered.
Type:func
function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridColumnOrderChangeParams.eventThe event object.detailsAdditional details for this callback.
Callback fired while a column is being resized.
Type:func
function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnResizeParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the column visibility model changes.
Type:func
function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => voidmodelThe new model.detailsAdditional details for this callback.
Callback fired when the width of a column is changed.
Type:func
function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridColumnResizeParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when a data source request fails.
Type:func
function(error: GridGetRowsError | GridUpdateRowError) => voiderrorThe data source error object.
Callback fired when the density changes.
Type:func
function(density: GridDensity) => voiddensityNew density value.
Callback fired when the detail panel of a row is opened or closed.
Type:func
function(ids: Array, details: GridCallbackDetails) => void idsThe ids of the rows which have the detail panel open.detailsAdditional details for this callback.
Callback fired when the state of the Excel export changes.
Type:func
function(inProgress: string) => voidinProgressIndicates if the task is in progress.
Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
Type:func
function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridFetchRowsParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the Filter model changes before the filters are applied.
Type:func
function(model: GridFilterModel, details: GridCallbackDetails) => voidmodelWith all properties from GridFilterModel.detailsAdditional details for this callback.
Callback fired when the menu is closed.
Type:func
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridMenuParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the menu is opened.
Type:func
function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridMenuParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the pagination meta has changed.
Type:func
function(paginationMeta: GridPaginationMeta) => voidpaginationMetaUpdated pagination meta.
Callback fired when the pagination model has changed.
Type:func
function(model: GridPaginationModel, details: GridCallbackDetails) => voidmodelUpdated pagination model.detailsAdditional details for this callback.
Callback fired when the pinned columns have changed.
Type:func
function(pinnedColumns: GridPinnedColumnFields, details: GridCallbackDetails) => voidpinnedColumnsThe changed pinned columns.detailsAdditional details for this callback.
Callback fired when the pivot active state changes.
Type:func
function(isPivotActive: boolean) => voidisPivotActiveWhether the data grid is in pivot mode.
Callback fired when the pivot model changes.
Type:func
function(pivotModel: GridPivotModel) => voidpivotModelThe new pivot model.
Callback fired when the pivot side panel open state changes.
Type:func
function(pivotPanelOpen: boolean) => voidpivotPanelOpenWhether the pivot side panel is visible.
Callback fired when the preferences panel is closed.
Type:func
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridPreferencePanelParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the preferences panel is opened.
Type:func
function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridPreferencePanelParams.eventThe event object.detailsAdditional details for this callback.
Callback called when processRowUpdate() throws an error or rejects.
Type:func
function(error: any) => voiderrorThe error thrown.
The function to be used to process the prompt.
Type:func
function(prompt: string, promptContext: string, conversationId: string) => PromisepromptThe prompt to be processed.promptContextThe prompt context.conversationIdThe id of the conversation the prompt is part of. If not passed, prompt response will return a new conversation id that can be used to continue the newly started conversation.
Callback fired when a redo operation is executed.
Type:func
function(params: { eventName: keyof GridEventLookup; data: any; }, event: { defaultMuiPrevented?: boolean | undefined; }, details: GridCallbackDetails) => void Callback fired when the Data Grid is resized.
Type:func
function(params: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => voideventThe event object.detailsAdditional details for this callback.
Callback fired when a row is clicked. Not called if the target clicked is an interactive element added by the built-in columns.
Type:func
function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridRowParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the row count has changed.
Type:func
function(count: number) => voidcountUpdated row count.
Callback fired when a double click event comes from a row container element.
Type:func
function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from RowParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the row turns to edit mode.
Type:func
function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridRowParams.eventThe event that caused this prop to be called.
Callback fired when the row turns to view mode.
Type:func
function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void paramsWith all properties from GridRowParams.eventThe event that caused this prop to be called.
Callback fired when the row grouping model changes.
Type:func
function(model: GridRowGroupingModel, details: GridCallbackDetails) => voidmodelColumns used as grouping criteria.detailsAdditional details for this callback.
Callback fired when the rowModesModel prop changes.
Type:func
function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => voidrowModesModelObject containing which rows are in "edit" mode.detailsAdditional details for this callback.
Callback fired when a row is being reordered.
Type:func
function(params: GridRowOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridRowOrderChangeParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the selection state of one or multiple rows changes.
Type:func
function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => voidrowSelectionModelWith all the row ids GridSelectionModel.detailsAdditional details for this callback.
Callback fired when scrolling to the bottom of the grid viewport.
Type:func
function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridRowScrollEndParams.eventThe event object.detailsAdditional details for this callback. Prefer to use {@link https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading Server-side data-Infinite loading} unless it doesn't fulfill your needs.
Callback fired when the sidebar is closed.
Type:func
function(params: GridSidebarParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridSidebarParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the sidebar is opened.
Type:func
function(params: GridSidebarParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparamsWith all properties from GridSidebarParams.eventThe event object.detailsAdditional details for this callback.
Callback fired when the sort model changes before a column is sorted.
Type:func
function(model: GridSortModel, details: GridCallbackDetails) => voidmodelWith all properties from GridSortModel.detailsAdditional details for this callback.
Callback fired when an undo operation is executed.
Type:func
function(params: { eventName: keyof GridEventLookup; data: any; }, event: { defaultMuiPrevented?: boolean | undefined; }, details: GridCallbackDetails) => void Select the pageSize dynamically using the component UI.
Type:Array<number
| { label: string, value: number }>
Default:[25, 50, 100]
If true, pagination is enabled.
Type:bool
Default:false
The extra information about the pagination state of the Data Grid.
Only applicable with paginationMode="server".
Type:{ hasNextPage?: bool }
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.
Type:'client'
| 'server'
Default:"client"
The pagination model of type GridPaginationModel which refers to current page and pageSize.
Type:{ page: number, pageSize: number }
The column fields to display pinned to left or right.
Type:GridPinnedColumnFields
Sets the type of separator between pinned columns and non-pinned columns.
Type:'border'
| 'border-and-shadow'
| 'shadow'
Default:'border-and-shadow'
Rows data to pin on top or bottom.
Type:{ bottom?: Array<any>, top?: Array<any> }
Sets the type of separator between pinned rows and non-pinned rows.
Type:'border'
| 'border-and-shadow'
Default:'border-and-shadow'
If true, the data grid will show data in pivot mode using the pivotModel.
Type:bool
Default:false
The column definition overrides for the columns generated by the pivoting feature.
Pass either a partial column definition to apply the same overrides to all pivot columns, or a callback to apply different overrides to each pivot column.
For server-side pivoting, only the PivotingColDefCallback signature is supported, and the prop is required.
Type:func
| { align?: 'center'
| 'left'
| 'right', cellClassName?: func
| string, description?: string, display?: 'flex'
| 'text', field?: string, flex?: number, headerAlign?: 'center'
| 'left'
| 'right', headerClassName?: func
| string, headerName?: string, maxWidth?: number, minWidth?: number, resizable?: bool, sortingOrder?: Array<'asc'
| 'desc'>, width?: number }
Default:undefined
The pivot model of the grid.
Will be used to generate the pivot data.
In case of pivotActive being false, the pivot model is still used to populate the pivot panel.
Type:{ columns: Array<{ field: string, hidden?: bool, sort?: 'asc'
| 'desc' }>, rows: Array<{ field: string, hidden?: bool }>, values: Array<{ aggFunc: string, field: string, hidden?: bool }> }
If true, the pivot side panel is visible.
Type:bool
Default:false
Callback called before updating a row with new values in the row and cell editing.
Type:func
function(newRow: R, oldRow: R, params: { rowId: GridRowId }) => R | PromisenewRowRow object with the new values.oldRowRow object with the old values.paramsAdditional parameters.
The milliseconds throttle delay for resizing the grid.
Type:number
Default:60
Row region in pixels to render before/after the viewport
Type:number
Default:150
Set the total number of rows, if it is different from the length of the value rows prop.
If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
Only works with paginationMode="server", ignored when paginationMode="client".
Type:number
If single, all the columns that are grouped are represented in the same grid column.
If multiple, each column that is grouped is represented in its own grid column.
Type:'multiple'
| 'single'
Default:'single'
Set the row grouping model of the grid.
Type:Array<string>
Sets the height in pixel of a row in the Data Grid.
Type:number
Default:52
Controls the modes of the rows.
Type:GridRowModesModel
If true, the reordering of rows is enabled.
Type:bool
Default:false
Set of rows of type GridRowsProp.
Type:Array<any>
Default:[]
If false, the row selection mode is disabled.
Type:bool
Default:true
Sets the row selection model of the Data Grid.
Type:{ ids: { add: func, clear: func, delete: func, difference: func, entries: func, forEach: func, has: func, intersection: func, isDisjointFrom: func, isSubsetOf: func, isSupersetOf: func, keys: func, size: number, symmetricDifference: func, union: func, values: func }, type: 'exclude'
| 'include' }
When rowSelectionPropagation.descendants is set to true.
- Selecting a parent selects all its filtered descendants automatically.
- Deselecting a parent row deselects all its filtered descendants automatically.
When rowSelectionPropagation.parents is set to true
- Selecting all the filtered descendants of a parent selects the parent automatically.
- Deselecting a descendant of a selected parent deselects the parent automatically.
Works with tree data and row grouping on the client-side only.
Type:{ descendants?: bool, parents?: bool }
Default:{ parents: true, descendants: true }
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.
Type:'client'
| 'server'
Default:"client"
Sets the type of space between rows added by getRowSpacing.
Type:'border'
| 'margin'
Default:"margin"
If true, the Data Grid will auto span the cells over the rows having the same value.
Type:bool
Default:false
Override the height/width of the Data Grid inner scrollbar.
Type:number
Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called.
If combined with lazyLoading, it defines the area where the next data request is triggered.
Type:number
Default:80
Updates the tree path in a row model. Used when reordering rows across different parents in tree data.
Type:func
function(path: Array, row: R) => R pathThe new path for the row.rowThe row model to update.
If true, vertical borders will be displayed between cells.
Type:bool
Default:false
If true, vertical borders will be displayed between column header items.
Type:bool
Default:false
If true, the toolbar is displayed.
Type:bool
Default:false
Overridable components props dynamically passed to the component at rendering.
Type:GridPremiumSlotProps
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.
Type:'client'
| 'server'
Default:"client"
The order of the sorting sequence.
Type:Array<'asc'
| 'desc'>
Default:['asc', 'desc', null]
Set the sort model of the Data Grid.
Type:Array<{ field: string, sort: 'asc'
| 'desc' }>
The function is used to split the pasted text into rows and cells.
Type:func
Default:(pastedText, delimiter = '\t') => { const text = pastedText.replace(/\r?\n$/, ''); return text.split(/\r\n|\n|\r/).map((row) => row.split(delimiter)); }
function(text: string, delimiter: string) => Array> | null textThe text pasted from the clipboard.delimiterThe delimiter used to split the text. Default is the tab character and can be set with theclipboardCopyCellDelimiterprop.
Type:CSSProperties
Sets the tab navigation behavior for the Data Grid. - "none": No Data Grid specific tab navigation. Pressing the tab key will move the focus to the next element in the tab sequence. - "content": Pressing the tab key will move the focus to the next cell in the same row or the first cell in the next row. Shift+Tab will move the focus to the previous cell in the same row or the last cell in the previous row. Tab navigation is not enabled for the header. - "header": Pressing the tab key will move the focus to the next column group, column header or header filter. Shift+Tab will move the focus to the previous column group, column header or header filter. Tab navigation is not enabled for the content. - "all": Combines the "content" and "header" behavior.
Type:'all'
| 'content'
| 'header'
| 'none'
Default:"none"
If positive, the Data Grid will throttle updates coming from apiRef.current.updateRows and apiRef.current.setRows.
It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each individual update.
Type:number
Default:0
If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop.
Type:bool
Default:false
If true, the Data Grid enables column virtualization when getRowHeight is set to () => 'auto'.
By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.
For datasets with a large number of columns, this can cause performance issues.
The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally.
Type:bool
Default:false
ref is forwarded to the root element.Component rendered when AI Assistant panel is open. Only needed when `aiAssistant` prop is passed to the grid. Pass `GridAiAssistantPanel` to render the default AI Assistant panel.
Default component: null
Icon used for the AI Assistant panel close button
Default component: GridCloseIcon
Icon used for the AI Assistant panel history icon
Default component: GridHistoryIcon
Icon used for the AI Assistant panel new conversation button
Default component: GridAddIcon
The custom Autocomplete component used in the grid for both header and cells.
Default component: Autocomplete
The custom Badge component used in the grid for both header and cells.
Default component: Badge
The custom Checkbox component used in the grid for both header and cells.
Default component: Checkbox
The custom CircularProgress component used in the grid.
Default component: CircularProgress
The custom LinearProgress component used in the grid.
Default component: LinearProgress
The custom Textarea component used in the grid for multiline text editing.
Default component: InputBase with multiline
Icon displayed on the boolean cell to represent the false value.
Default component: GridCloseIcon
Icon displayed on the boolean cell to represent the true value.
Default component: GridCheckIcon
Icon used for the add button in the charts configuration panel menu
Default component: GridAddIcon
Icon used for the move down button in the charts configuration panel menu
Default component: GridExpandMoreIcon
Icon used for the move to bottom button in the charts configuration panel menu
Default component: GridMoveToBottomIcon
Icon used for the move to top button in the charts configuration panel menu
Default component: GridMoveToTopIcon
Icon used for the move up button in the charts configuration panel menu
Default component: GridExpandLessIcon
Icon used for the remove button in the charts configuration panel menu
Default component: GridDeleteIcon
Component rendered when charts panel is open. Only needed when `chartsIntegration` prop is passed to the grid. Pass `GridChartsPanel` to render the default charts panel.
Default component: null
Icon used for the clear button in the sidebar search field in the charts configuration panel
Default component: GridClearIcon
Icon used for the search icon in the sidebar search field in the charts configuration panel
Default component: GridSearchIcon
Icon used for the sync button in the charts configuration panel when sync is disabled
Default component: GridSyncDisabledIcon
Icon used for the sync button in the charts configuration panel when sync is enabled
Default component: GridSyncIcon
Icon displayed in the collapsible to indicate if it is open or closed.
Default component: GridExpandMoreIcon
Icon displayed on the column header menu to show that a filter has been applied to the column.
Default component: GridFilterAltIcon
Filter icon component rendered in each column header.
Default component: GridColumnHeaderFilterIconButton
Component responsible for rendering the column headers.
Default component: GridColumnHeaders
Sort icon component rendered in each column header.
Default component: GridColumnHeaderSortIcon
Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
Default component: GridColumnMenu
Icon displayed in column menu for aggregation
Default component: GridFunctionsIcon
Icon displayed in column menu for clearing values
Default component: GridClearIcon
Icon displayed in column menu for hiding column
Default component: GridVisibilityOffIcon
Icon displayed on the side of the column header title to display the filter input component.
Default component: GridTripleDotsVerticalIcon
Icon displayed in column menu for showing all columns
Default component: GridViewColumnIcon
Icon displayed in column menu for left pinning
Default component: GridPushPinLeftIcon
Icon displayed in column menu for right pinning
Default component: GridPushPinRightIcon
Icon displayed in column menu for ascending sort
Default component: GridArrowUpwardIcon
Icon displayed in column menu for descending sort
Default component: GridArrowDownwardIcon
Icon displayed in column menu for ungrouping
Default component: GridWorkspacesIcon
Icon displayed in between two column headers that allows to resize the column header.
Default component: GridSeparatorIcon
Component used inside Grid Columns panel to manage columns.
Default component: GridColumnsManagement
Icon displayed on the side of the column header title when sorted in ascending order.
Default component: GridArrowUpwardIcon
Icon displayed on the side of the column header title when sorted in descending order.
Default component: GridArrowDownwardIcon
GridColumns panel component rendered when clicking the columns button.
Default component: GridColumnsPanel
Icon displayed on the side of the column header title when unsorted.
Default component: GridColumnUnsortedIcon
Icon displayed on the "comfortable" density option in the toolbar.
Default component: GridViewStreamIcon
Icon displayed on the compact density option in the toolbar.
Default component: GridViewHeadlineIcon
Icon displayed on the standard density option in the toolbar.
Default component: GridTableRowsIcon
Icon displayed on the detail panel toggle column when expanded.
Default component: GridRemoveIcon
Icon displayed on the detail panel toggle column when collapsed.
Default component: GridAddIcon
Component responsible for rendering the detail panels.
Default component: GridDetailPanels
Component rendered when pivot mode is enabled but no rows are defined.
Default component: GridEmptyPivotOverlay
Icon displayed on the open export button present in the toolbar by default.
Default component: GridDownloadIcon
Filter panel component rendered when clicking the filter button.
Default component: GridFilterPanel
Icon displayed for deleting the filter from filter panel.
Default component: GridAddIcon
Icon displayed for deleting the filter from filter panel.
Default component: GridDeleteIcon
Icon displayed for deleting all the active filters from filter panel.
Default component: GridDeleteForeverIcon
Footer component rendered at the bottom of the grid viewport.
Default component: GridFooter
Row count component rendered in the footer
Default component: GridRowCount
Icon displayed on the grouping column when the children are expanded
Default component: GridExpandMoreIcon
Icon displayed on the grouping column when the children are collapsed
Default component: GridKeyboardArrowRight
Component responsible for showing menu adornment in Header filter row
Default component: GridHeaderFilterCell
Component responsible for showing menu in Header filter row
Default component: GridHeaderFilterMenu
Loading overlay component rendered when the grid is in a loading state.
Default component: GridLoadingOverlay
Icon displayed on the long text cell popup to collapse the content.
Default component: GridLongTextCellCollapseIcon
Icon displayed on the long text cell to expand the content.
Default component: GridLongTextCellExpandIcon
Icon displayed to indicate that a menu item is selected.
Default component: GridCheckIcon
Icon displayed on the `actions` column type to open the menu.
Default component: GridMoreVertIcon
No columns overlay component rendered when the grid has no columns.
Default component: GridNoColumnsOverlay
No results overlay component rendered when the grid has no results after filtering.
Default component: GridNoResultsOverlay
No rows overlay component rendered when the grid has no rows.
Default component: GridNoRowsOverlay
Icon displayed on the open filter button present in the toolbar by default.
Default component: GridFilterListIcon
Icon displayed in the pivot menu for adding a field to a pivot section.
Default component: GridAddIcon
Icon displayed in the pivot menu to signify a pivot section is selected.
Default component: GridCheckIcon
Icon displayed in the pivot menu for moving a field down.
Default component: GridExpandMoreIcon
Icon displayed in the pivot menu for moving a field to the bottom.
Default component: GridMoveToBottomIcon
Icon displayed in the pivot menu for moving a field to the top.
Default component: GridMoveToTopIcon
Icon displayed in the pivot menu for moving a field up.
Default component: GridExpandLessIcon
Icon displayed in the pivot menu for removing a field from the pivot.
Default component: GridDeleteIcon
Icon used for the clear button in the sidebar search field
Default component: GridClearIcon
Icon used for the search icon in the sidebar search field
Default component: GridSearchIcon
Icon used on the toggle button of the changes list
Default component: GridExpandMoreIcon
Icon used to display sort descending changes
Default component: GridArrowDownwardIcon
Icon used for the button that starts and stops recording the prompt
Default component: GridMicIcon
Icon used for when speech recognition is not supported
Default component: GridMicOffIcon
Icon displayed on the `reorder` column type to reorder a row.
Default component: GridDragIcon
Icon displayed on the tree data toggling column when the children are expanded
Default component: GridExpandMoreIcon
Icon displayed on the tree data toggling column when the children are collapsed
Default component: GridKeyboardArrowRight
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.