Migration from v5 to v6
This guide describes the changes needed to migrate the Data Grid from v5 to v6.
Start using the alpha release
In package.json, change the version of the data grid package to next.
-"@mui/x-data-grid": "latest",
+"@mui/x-data-grid": "next",
Using next ensures that it will always use the latest v6 alpha release, but you can also use a fixed version, like 6.0.0-alpha.0.
Breaking changes
Since v6 is a major release, it contains some changes that affect the public API. These changes were done for consistency, improve stability and make room for new features. Below are described the steps you need to make to migrate from v5 to v6.
Renamed props
To avoid confusion with the props that will be added for the cell selection feature, some props related to row selection were renamed to have "row" in their name. The renamed props are the following:
Old name New name selectionModelrowSelectionModelonSelectionModelChangeonRowSelectionModelChangedisableSelectionOnClickdisableRowSelectionOnClickdisableMultipleSelectiondisableMultipleRowSelection
Removed props
- The
disableIgnoreModificationsIfProcessingPropsprop was removed and its behavior whentruewas incorporated as the default behavior. The old behavior can be restored by usingapiRef.current.stopRowEditMode({ ignoreModifications: true })orapiRef.current.stopCellEditMode({ ignoreModifications: true }). - The
onColumnVisibilityChangeprop was removed. UseonColumnVisibilityModelChangeinstead.
State access
- The
gridSelectionStateSelectorselector was renamed togridRowSelectionStateSelector. - The
gridColumnsSelectorselector was removed. Use more specific grid columns selectors instead. - The
allGridColumnsFieldsSelectorselector was removed. UsegridColumnFieldsSelectorinstead. - The
allGridColumnsSelectorselector was removed. UsegridColumnDefinitionsSelectorinstead. - The
visibleGridColumnsSelectorselector was removed. UsegridVisibleColumnDefinitionsSelectorinstead. - The
filterableGridColumnsSelectorselector was removed. UsegridFilterableColumnDefinitionsSelectorinstead. - The
filterableGridColumnsIdsSelectorselector was removed. UsegridFilterableColumnLookupSelectorinstead. - The
visibleGridColumnsLengthSelectorselector was removed. UsegridVisibleColumnDefinitionsSelectorinstead. - The
gridColumnsMetaSelectorselector was removed. UsegridColumnsTotalWidthSelectororgridColumnPositionsSelectorinstead. - The
getGridNumericColumnOperatorsselector was removed. UsegetGridNumericOperatorsinstead. - The
gridVisibleRowsSelectorselector was removed. UsegridVisibleSortedRowIdsSelectorinstead. - The
gridRowGroupingStateSelectorselector was removed. - The
gridFilterStateSelectorselector was removed. - The
gridRowsStateSelectorselector was removed. - The
gridSortingStateSelectorselector was removed.
Events
- The
selectionChangeevent was renamed torowSelectionChange. - The
rowsScrollevent was renamed toscrollPositionChange. - The
columnVisibilityChangeevent was removed. UsecolumnVisibilityModelChangeinstead. - The
cellNavigationKeyDownevent was removed. UsecellKeyDownand check the key provided in the event argument. - The
columnHeaderNavigationKeyDownevent was removed. UsecolumnHeaderKeyDownand check the key provided in the event argument. - The
GridCallbackDetails['api']was removed from event details. Use theapiRefreturned byuseGridApiContextoruseGridApiRefinstead.
Columns
- The
GridColDef['hide']property was removed. UseGridColDef['columnVisibility']instead.
Rows
- The
GridRowParams['getValue']property was removed. Useparams.rowinstead. - The
GridCellParams['getValue']property was removed. Useparams.rowinstead. - The
GridActionsCellProps['api']property was removed. UseuseGridApiContexthook instead to getapiRef. - The
GridActionsCellProps['getValue']property was removed. Useparams.rowinstead. - The
GridFooterCellProps['getValue']property was removed. Useparams.rowinstead.
apiRef methods
The
apiRef.current.updateColumnmethod was removed. UseapiRef.current.updateColumnsinstead.The
apiRef.current.getColumnsMetamethod was removed. UsegridColumnsTotalWidthSelectororgridColumnPositionsSelectorselectors instead.The
apiRef.current.getRowIndexmethod was removed. UseapiRef.current.getRowIndexRelativeToVisibleRowsinstead.Some internal undocumented
apiRefmethods and properties were removed.If you don't use undocumented properties - you can skip the list below. Otherwise, please check the list and open an issue if there's something missing in the
apiRef.List of removed undocumented methods and properties
getLoggerwindowRefunstable_cachesunstable_eventManagerunstable_requestPipeProcessorsApplicationunstable_registerPipeProcessorunstable_registerPipeApplierunstable_storeDetailPanelHeightunstable_detailPanelHasAutoHeightunstable_calculateColSpanunstable_rowHasAutoHeightunstable_getLastMeasuredRowIndexunstable_getViewportPageSizeunstable_updateGridDimensionsRefunstable_getRenderContextunstable_registerStrategyProcessorunstable_applyStrategyProcessorunstable_getActiveStrategyunstable_setStrategyAvailabilityunstable_setCellEditingEditCellValueunstable_getRowWithUpdatedValuesFromCellEditingunstable_setRowEditingEditCellValueunstable_getRowWithUpdatedValuesFromRowEditingunstable_runPendingEditCellValueMutationunstable_moveFocusToRelativeCellunstable_updateControlStateunstable_registerControlState
Filtering
- The
GridFilterItem['columnField']was renamed toGridFilterItem['field'] - The
GridFilterItem['operatorValue']was renamed toGridFilterItem['operator'] - The
GridFilterItem['operator']is now required.
Other exports
- The
useGridApihook was removed. UseapiRef.currentinstead. - The
useGridStatehook was removed. UseapiRef.current.state,apiRef.current.setStateandapiRef.current.forceUpdateinstead. - The
getGridColDefutility function was removed. - The
GridValueGetterFullParamstype was removed. - The
GridSortModelParamsinterface was removed. - The
GridApiReftype was removed. UseReact.MutableRefObject<GridApi>instead. - The
GridCellValuetype was removed. Useanyor theVgeneric passed to most interfaces. - The
GridRowDatatype was removed. UseGridRowModelinstead.