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

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}`;
+    }
+  }}
 />