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.

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.

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;
   };
 };