Migration from v8 to v9

This guide describes the changes needed to migrate the Data Grid from v8 to v9.

Introduction

This is a reference guide for upgrading @mui/x-data-grid from v8 to v9.

Start using the new release

In package.json, change the version of the Data Grid package to next.

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

-"@mui/x-data-grid-pro": "^8.x.x",
+"@mui/x-data-grid-pro": "next",

-"@mui/x-data-grid-premium": "^8.x.x",
+"@mui/x-data-grid-premium": "next",

Breaking changes

Stabilized `experimentalFeatures`

The charts experimental feature flag has been removed. The charts integration is now controlled solely by the chartsIntegration prop on DataGridPremium.

If you were using experimentalFeatures={{ charts: true }}, you can remove it.

 <DataGridPremium
-  experimentalFeatures={{ charts: true }}
   chartsIntegration
   slots={{ chartsPanel: GridChartsPanel }}
 />

You can use this codemod to automatically remove the charts property from experimentalFeatures:

npx @mui/x-codemod@next v9.0.0/data-grid/remove-stabilized-experimentalFeatures <path>

Behavioral changes

Pagination numbers are formatted by default.

To disable the pagination formatting, provide the key and value to localeText prop:

 <DataGrid
+  localeText={{
+    paginationDisplayedRows: ({ from, to, count, estimated }) => {
+      if (!estimated) {
+        return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+      }
+      const estimatedLabel =
+        estimated && estimated > to
+          ? `around ${estimated}`
+          : `more than ${to}`;
+      return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
+    }
+  }}
 />