feat: update @mui/x-data-grid to 7

refinedev · Nov 15, 2024 · 1f65aa8 · 1f65aa8
1 parent a8bbc70
commit 1f65aa8
Show file tree

Hide file tree

Showing 135 changed files with 548 additions and 558 deletions.
diff --git a/documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md b/documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md
@@ -190,7 +190,7 @@ export const PostList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };

diff --git a/documentation/blog/2022-08-23-mui-usedatagrid.md b/documentation/blog/2022-08-23-mui-usedatagrid.md
@@ -214,8 +214,7 @@ const EmployeeList: React.FC = () => {
         headerName: "Full Name",
         minWidth: 150,
         flex: 1,
-        valueGetter: (params) =>
-          `${params.row.first_name || ""} ${params.row.last_name || ""}`,
+        valueGetter: (_, row) => `${first_name || ""} ${last_name || ""}`,
       },
       {
         field: "email",
@@ -482,8 +481,8 @@ const EmployeeList: React.FC = () => {
         headerName: "Full Name",
         minWidth: 150,
         flex: 1,
-        valueGetter: (params) =>
-          `${params.row.first_name || ""} ${params.row.last_name || ""}`,
+        valueGetter: (_, row) =>
+          `${row.first_name || ""} ${row.last_name || ""}`,
       },
       {
         field: "email",
@@ -653,8 +652,8 @@ const EmployeeList: React.FC = () => {
         headerName: "Full Name",
         minWidth: 150,
         flex: 1,
-        valueGetter: (params) =>
-          `${params.row.first_name || ""} ${params.row.last_name || ""}`,
+        valueGetter: (_, row) =>
+          `${row.first_name || ""} ${row.last_name || ""}`,
       },
       {
         field: "email",

diff --git a/documentation/blog/2022-12-23-dynamic-hook-form.md b/documentation/blog/2022-12-23-dynamic-hook-form.md
@@ -231,7 +231,7 @@ Finally, declare the `<DataGrid>` component within the `List` component and add
 
 return (
 <List>
-<DataGrid {...dataGridProps} columns={columns} autoHeight />
+<DataGrid {...dataGridProps} columns={columns} />
 </List>
 );
 ```

diff --git a/documentation/docs/getting-started/example/sandpack.tsx b/documentation/docs/getting-started/example/sandpack.tsx
@@ -873,6 +873,7 @@ export const ProductList = () => {
           const value = row?.category;
           return value;
         },
+        display: "flex",
         renderCell: function render({ value }) {
           return categoryLoading ? (
             <>{translate("loading")}</>
@@ -888,6 +889,7 @@ export const ProductList = () => {
         headerName: translate("products.fields.price"),
         minWidth: 100,
         maxWidth: 150,
+        display: "flex",
         renderCell: ({ value }) => {
           return (
             <NumberField
@@ -902,6 +904,7 @@ export const ProductList = () => {
         field: "actions",
         headerName: translate("table.actions"),
         sortable: false,
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -921,7 +924,7 @@ export const ProductList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };
@@ -1171,6 +1174,7 @@ export const CategoryList: React.FC = () => {
         field: "actions",
         headerName: translate("table.actions"),
         sortable: false,
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -1190,7 +1194,7 @@ export const CategoryList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };

diff --git a/documentation/docs/guides-concepts/authentication/auth-pages/mui.tsx b/documentation/docs/guides-concepts/authentication/auth-pages/mui.tsx
@@ -19,7 +19,7 @@ export function MaterialUIAuth() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
       }}
       startRoute="/login"
       files={{

diff --git a/documentation/docs/guides-concepts/forms/server-side-validation-mui.tsx b/documentation/docs/guides-concepts/forms/server-side-validation-mui.tsx
@@ -17,7 +17,7 @@ export default function ServerSideValidationMui() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
         "react-router-dom": "latest",
         "react-router": "latest",
         "react-hook-form": "^7.43.5",

diff --git a/documentation/docs/guides-concepts/general-concepts/auth-pages/mui.tsx b/documentation/docs/guides-concepts/general-concepts/auth-pages/mui.tsx
@@ -19,7 +19,7 @@ export function MaterialUIAuth() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
       }}
       startRoute="/login"
       files={{

diff --git a/documentation/docs/guides-concepts/general-concepts/layout/mui.tsx b/documentation/docs/guides-concepts/general-concepts/layout/mui.tsx
@@ -20,7 +20,7 @@ export function MaterialUILayout() {
         "@mui/lab": "^6.0.0-beta.14",
         "@mui/material": "^6.1.6",
         "@mui/system": "latest",
-        "@mui/x-data-grid": "^6.6.0",
+        "@mui/x-data-grid": "^7.22.2",
       }}
       startRoute="/my-products"
       files={{
@@ -133,6 +133,7 @@ export const ProductList = () => {
         field: "actions",
         headerName: "Actions",
         sortable: false,
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -150,7 +151,7 @@ export const ProductList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };

diff --git a/...ntation/docs/ui-integrations/material-ui/components/basic-views/create/index.md b/...ntation/docs/ui-integrations/material-ui/components/basic-views/create/index.md
@@ -864,6 +864,7 @@ const SampleList = () => {
           return value;
         },
         minWidth: 300,
+        display: "flex",
         renderCell: function render({ value }) {
           return categoryIsLoading ? (
             <>Loading...</>
@@ -876,6 +877,7 @@ const SampleList = () => {
         field: "createdAt",
         headerName: "Created At",
         minWidth: 250,
+        display: "flex",
         renderCell: function render({ value }) {
           return <RefineMui.DateField value={value} />;
         },
@@ -886,7 +888,7 @@ const SampleList = () => {
 
   return (
     <RefineMui.List>
-      <MuiXDataGrid.DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <MuiXDataGrid.DataGrid {...dataGridProps} columns={columns} />
     </RefineMui.List>
   );
 };

diff --git a/...mentation/docs/ui-integrations/material-ui/components/basic-views/edit/index.md b/...mentation/docs/ui-integrations/material-ui/components/basic-views/edit/index.md
@@ -1383,6 +1383,7 @@ const SampleList = () => {
           return value;
         },
         minWidth: 300,
+        display: "flex",
         renderCell: function render({ value }) {
           return categoryIsLoading ? (
             <>Loading...</>
@@ -1395,13 +1396,15 @@ const SampleList = () => {
         field: "createdAt",
         headerName: "Created At",
         minWidth: 250,
+        display: "flex",
         renderCell: function render({ value }) {
           return <RefineMui.DateField value={value} />;
         },
       },
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -1419,7 +1422,7 @@ const SampleList = () => {
 
   return (
     <RefineMui.List>
-      <MuiXDataGrid.DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <MuiXDataGrid.DataGrid {...dataGridProps} columns={columns} />
     </RefineMui.List>
   );
 };

diff --git a/...mentation/docs/ui-integrations/material-ui/components/basic-views/list/index.md b/...mentation/docs/ui-integrations/material-ui/components/basic-views/list/index.md
@@ -47,6 +47,7 @@ const SampleList = () => {
           return value;
         },
         minWidth: 300,
+        display: "flex",
         renderCell: function render({ value }) {
           return categoryIsLoading ? (
             <>Loading...</>
@@ -59,6 +60,7 @@ const SampleList = () => {
         field: "createdAt",
         headerName: "Created At",
         minWidth: 250,
+        display: "flex",
         renderCell: function render({ value }) {
           return <DateField value={value} />;
         },
@@ -69,7 +71,7 @@ const SampleList = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };

diff --git a/...mentation/docs/ui-integrations/material-ui/components/basic-views/show/index.md b/...mentation/docs/ui-integrations/material-ui/components/basic-views/show/index.md
@@ -998,6 +998,7 @@ const SampleList = () => {
           return value;
         },
         minWidth: 300,
+        display: "flex",
         renderCell: function render({ value }) {
           return categoryIsLoading ? (
             <>Loading...</>
@@ -1010,13 +1011,15 @@ const SampleList = () => {
         field: "createdAt",
         headerName: "Created At",
         minWidth: 250,
+        display: "flex",
         renderCell: function render({ value }) {
           return <RefineMui.DateField value={value} />;
         },
       },
       {
         field: "actions",
         headerName: "Actions",
+        display: "flex",
         renderCell: function render({ row }) {
           return (
             <>
@@ -1034,7 +1037,7 @@ const SampleList = () => {
 
   return (
     <RefineMui.List>
-      <MuiXDataGrid.DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <MuiXDataGrid.DataGrid {...dataGridProps} columns={columns} />
     </RefineMui.List>
   );
 };

diff --git a/...ation/docs/ui-integrations/material-ui/components/buttons/clone-button/index.md b/...ation/docs/ui-integrations/material-ui/components/buttons/clone-button/index.md
@@ -31,6 +31,7 @@ const columns: GridColDef[] = [
   {
     field: "actions",
     headerName: "Actions",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-next-line
       return <CloneButton size="small" recordItemId={row.id} />;
@@ -46,7 +47,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };

diff --git a/...tion/docs/ui-integrations/material-ui/components/buttons/create-button/index.md b/...tion/docs/ui-integrations/material-ui/components/buttons/create-button/index.md
@@ -35,7 +35,7 @@ const PostsList: React.FC = () => {
   return (
     // highlight-next-line
     <List headerButtons={<CreateButton />}>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };

diff --git a/...tion/docs/ui-integrations/material-ui/components/buttons/delete-button/index.md b/...tion/docs/ui-integrations/material-ui/components/buttons/delete-button/index.md
@@ -33,6 +33,7 @@ const columns: GridColDef[] = [
   {
     field: "actions",
     headerName: "Actions",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-next-line
       return <DeleteButton size="small" recordItemId={row.id} />;
@@ -48,7 +49,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };

diff --git a/...tation/docs/ui-integrations/material-ui/components/buttons/edit-button/index.md b/...tation/docs/ui-integrations/material-ui/components/buttons/edit-button/index.md
@@ -29,6 +29,7 @@ const columns: GridColDef[] = [
   {
     field: "actions",
     headerName: "Actions",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-next-line
       return <EditButton size="small" recordItemId={row.id} />;
@@ -44,7 +45,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };

diff --git a/...tion/docs/ui-integrations/material-ui/components/buttons/export-button/index.md b/...tion/docs/ui-integrations/material-ui/components/buttons/export-button/index.md
@@ -46,7 +46,7 @@ const PostsList: React.FC = () => {
       }
       // highlight-end
     >
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };

diff --git a/...tion/docs/ui-integrations/material-ui/components/buttons/import-button/index.md b/...tion/docs/ui-integrations/material-ui/components/buttons/import-button/index.md
@@ -46,7 +46,7 @@ const PostsList: React.FC = () => {
       }
       // highlight-end
     >
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };

diff --git a/...tation/docs/ui-integrations/material-ui/components/buttons/show-button/index.md b/...tation/docs/ui-integrations/material-ui/components/buttons/show-button/index.md
@@ -29,6 +29,7 @@ const columns: GridColDef[] = [
   {
     field: "actions",
     headerName: "Actions",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-next-line
       return <ShowButton size="small" recordItemId={row.id} />;
@@ -44,7 +45,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };

diff --git a/...ation/docs/ui-integrations/material-ui/components/fields/boolean-field/index.md b/...ation/docs/ui-integrations/material-ui/components/fields/boolean-field/index.md
@@ -32,6 +32,7 @@ const columns: GridColDef[] = [
   {
     field: "status",
     headerName: "Published",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-start
       return (
@@ -57,7 +58,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };

diff --git a/...entation/docs/ui-integrations/material-ui/components/fields/date-field/index.md b/...entation/docs/ui-integrations/material-ui/components/fields/date-field/index.md
@@ -31,6 +31,7 @@ const columns: GridColDef[] = [
   {
     field: "createdAt",
     headerName: "Created At",
+    display: "flex",
     renderCell: function render({ row }) {
       // highlight-start
       return <DateField format="LLL" value={row.createdAt} />;
@@ -46,7 +47,7 @@ const PostsList: React.FC = () => {
 
   return (
     <List>
-      <DataGrid {...dataGridProps} columns={columns} autoHeight />
+      <DataGrid {...dataGridProps} columns={columns} />
     </List>
   );
 };