Migration from v6 to v7

This guide describes the changes needed to migrate the Data Grid from v6 to v7.

Start using the new release

In package.json, change the version of the data grid package to next.

-"@mui/x-data-grid": "^6.0.0",
+"@mui/x-data-grid": "next",

Since v7 is a major release, it contains changes that affect the public API. These changes were done for consistency, improved stability and to make room for new features. Described below are the steps needed to migrate from v6 to v7.

Breaking changes

Since v7 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 v6 to v7.

Removed props

• The deprecated props components and componentsProps have been removed. Use slots and slotProps instead. See components section for more details.
• The slots.preferencesPanel slot and the slotProps.preferencesPanel prop were removed. Use slots.panel and slotProps.panel instead.

Print export

• The print export will now only print the selected rows if there are any. If there are no selected rows, it will print all rows. This makes the print export consistent with the other exports. You can customize the rows to export by using the getRowsToExport function.

Selection

• The cell selection feature is now stable.

• The unstable_ prefix has been removed from the cell selection props listed below.

  Old name	New name
  unstable_cellSelection	cellSelection
  unstable_cellSelectionModel	cellSelectionModel
  unstable_onCellSelectionModelChange	onCellSelectionModelChange

• The unstable_ prefix has been removed from the cell selection API methods listed below.

  Old name	New name
  unstable_getCellSelectionModel	getCellSelectionModel
  unstable_getSelectedCellsAsArray	getSelectedCellsAsArray
  unstable_isCellSelected	isCellSelected
  unstable_selectCellRange	selectCellRange
  unstable_setCellSelectionModel	setCellSelectionModel

Filtering

• The getApplyFilterFnV7 in GridFilterOperator was renamed to getApplyFilterFn. If you use getApplyFilterFnV7 directly - rename it to getApplyFilterFn.

• The signature of the function returned by getApplyFilterFn has changed for performance reasons:

 const getApplyFilterFn: GetApplyFilterFn<any, unknown> = (filterItem) => {
   if (!filterItem.value) {
     return null;
   }

   const filterRegex = new RegExp(escapeRegExp(filterItem.value), 'i');
-  return (cellParams) => {
-    const { value } = cellParams;
+  return (value, row, colDef, apiRef) => {
     return value != null ? filterRegex.test(String(value)) : false;
   };
 }

• The getApplyQuickFilterFnV7 in GridColDef was renamed to getApplyQuickFilterFn. If you use getApplyQuickFilterFnV7 directly - rename it to getApplyQuickFilterFn.

• The signature of the function returned by getApplyQuickFilterFn has changed for performance reasons:

 const getGridStringQuickFilterFn: GetApplyQuickFilterFn<any, unknown> = (value) => {
   if (!value) {
     return null;
   }
   const filterRegex = new RegExp(escapeRegExp(value), 'i');
-  return (cellParams) => {
-    const { formattedValue } = cellParams;
+  return (value, row, column, apiRef) => {
+    let formattedValue = apiRef.current.getRowFormattedValue(row, column);
     return formattedValue != null ? filterRegex.test(formattedValue.toString()) : false;
   };
 };

• The Quick Filter now ignores hidden columns by default. See Including hidden columns section for more details.

Other exports

• The deprecated constants SUBMIT_FILTER_STROKE_TIME and SUBMIT_FILTER_DATE_STROKE_TIME are no longer exported. Use the filterDebounceMs prop to customize filter debounce time.

• The GridPreferencesPanel component is not exported anymore as it wasn't meant to be used outside of the Data Grid.