[website] Use MUI X Data Grid v7-beta

docs/data/material/components/table/DataTable.js

@@ -17,8 +17,7 @@ const columns = [
     description: 'This column has a value getter and is not sortable.',
     sortable: false,
     width: 160,
-    valueGetter: (params) =>
-      `${params.row.firstName || ''} ${params.row.lastName || ''}`,
+    valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`,
   },
 ];
 

docs/data/material/components/table/DataTable.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
 
 const columns: GridColDef[] = [
   { field: 'id', headerName: 'ID', width: 70 },
@@ -17,8 +17,7 @@ const columns: GridColDef[] = [
     description: 'This column has a value getter and is not sortable.',
     sortable: false,
     width: 160,
-    valueGetter: (params: GridValueGetterParams) =>
-      `${params.row.firstName || ''} ${params.row.lastName || ''}`,
+    valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`,
   },
 ];
 

docs/data/material/components/table/table.md

@@ -33,6 +33,12 @@ This constraint makes building rich data tables challenging.
 The [`DataGrid` component](/x/react-data-grid/) is designed for use-cases that are focused on handling large amounts of tabular data.
 While it comes with a more rigid structure, in exchange, you gain more powerful features.
 
+:::warning
+The demo below uses the v7 version of the `@mui/x-data-grid` package which is currently in beta.
+We plan to release the stable version soon.
+The documentation is available at [next.mui.com](https://next.mui.com/x/react-data-grid/).
+:::
+
 {{"demo": "DataTable.js", "bg": "inline"}}
 
 ## Dense table

docs/package.json

@@ -46,10 +46,10 @@
     "@mui/types": "workspace:^",
     "@mui/utils": "workspace:^",
     "@mui/x-charts": "6.19.5",
-    "@mui/x-data-grid": "6.19.6",
-    "@mui/x-data-grid-generator": "6.19.6",
-    "@mui/x-data-grid-premium": "6.19.6",
-    "@mui/x-data-grid-pro": "6.19.6",
+    "@mui/x-data-grid": "7.0.0-beta.6",
+    "@mui/x-data-grid-generator": "7.0.0-beta.6",
+    "@mui/x-data-grid-premium": "7.0.0-beta.6",
+    "@mui/x-data-grid-pro": "7.0.0-beta.6",
     "@mui/x-date-pickers": "6.19.6",
     "@mui/x-date-pickers-pro": "6.19.6",
     "@mui/x-license-pro": "6.10.2",

docs/src/components/home/XGridGlobalStyles.tsx

@@ -18,6 +18,7 @@ export default function XGridGlobalStyles({
               border: 'none',
               fontSize: '0.75rem',
               borderRadius: '0px',
+              '--DataGrid-rowBorderColor': (theme.vars || theme).palette.grey[200],
               // toolbar
               // style GridToolbar
               '& .MuiDataGrid-toolbarContainer': {
@@ -51,9 +52,6 @@ export default function XGridGlobalStyles({
               '& .MuiDataGrid-menuIcon svg': {
                 fontSize: '1rem',
               },
-              '& .MuiDataGrid-columnHeaders': {
-                borderColor: (theme.vars || theme).palette.grey[200],
-              },
               '& .MuiDataGrid-columnSeparator': {
                 color: (theme.vars || theme).palette.grey[200],
                 '&:hover': {
@@ -66,10 +64,6 @@ export default function XGridGlobalStyles({
               '& .MuiDataGrid-virtualScroller': {
                 backgroundColor: (theme.vars || theme).palette.grey[50],
               },
-              '& .MuiDataGrid-cell': {
-                borderBottom: '1px solid',
-                borderColor: (theme.vars || theme).palette.grey[200],
-              },
               '& .MuiDataGrid-editInputCell': {
                 fontSize: '0.75rem',
                 '& > input': {
@@ -118,6 +112,7 @@ export default function XGridGlobalStyles({
         theme.applyDarkStyles({
           [selector]: {
             '& .MuiDataGrid-root': {
+              '--DataGrid-rowBorderColor': alpha(theme.palette.primaryDark[500], 0.5),
               '& .MuiDataGrid-toolbarContainer': {
                 '& > button': {
                   borderColor: (theme.vars || theme).palette.divider,
@@ -129,9 +124,6 @@ export default function XGridGlobalStyles({
               '& .MuiIconButton-root:not(.Mui-disabled)': {
                 color: (theme.vars || theme).palette.primary[300],
               },
-              '& .MuiDataGrid-columnHeaders': {
-                borderColor: (theme.vars || theme).palette.divider,
-              },
               '& .MuiDataGrid-columnSeparator': {
                 color: (theme.vars || theme).palette.primaryDark[400],
                 '&:hover': {
@@ -143,9 +135,6 @@ export default function XGridGlobalStyles({
               '& .MuiDataGrid-virtualScroller': {
                 backgroundColor: (theme.vars || theme).palette.primaryDark[900],
               },
-              '& .MuiDataGrid-cell': {
-                borderColor: alpha(theme.palette.primaryDark[500], 0.5),
-              },
               '& .MuiTablePagination-root': {
                 '& .MuiIconButton-root': {
                   '&:not([disabled])': {

docs/src/components/productX/XGridFullDemo.tsx

@@ -269,8 +269,8 @@ export default function XGridFullDemo() {
           <DataGridPro
             {...data}
             density="compact"
-            components={{
-              Toolbar: GridToolbar,
+            slots={{
+              toolbar: GridToolbar,
             }}
             loading={loading}
             checkboxSelection

docs/src/components/productX/XHero.tsx

@@ -163,16 +163,13 @@ export default function XHero() {
                   '& .MuiDataGrid-root': {
                     border: 0,
                     color: 'text.secondary',
+                    '--DataGrid-rowBorderColor': (theme) => theme.palette.grey[200],
                     '& .MuiCheckbox-root': {
                       p: 0.5,
                       '& > svg': {
                         fontSize: '1.25rem',
                       },
                     },
-                    '& .MuiDataGrid-columnHeaders': {
-                      borderBottom: '1px solid',
-                      borderColor: 'grey.200',
-                    },
                     [`& .MuiDataGrid-columnHeader:focus, & .MuiDataGrid-columnHeader:focus-within`]:
                       {
                         outline: 'none',
@@ -188,22 +185,6 @@ export default function XHero() {
                     '& button, & button > svg': {
                       fontSize: 16,
                     },
-                    '& .MuiDataGrid-cell': {
-                      fontSize: '0.875rem',
-                      color: 'text.secondary',
-                      borderBottom: '1px solid',
-                      borderColor: 'grey.200',
-                    },
-                    '& .MuiDataGrid-viewport': {
-                      '& .MuiDataGrid-cell': {
-                        fontSize: '0.875rem',
-                        color: 'text.secondary',
-                      },
-                      '& .MuiInputBase-input': {
-                        fontSize: '0.875rem',
-                        px: 0.5,
-                      },
-                    },
                     '& .MuiChip-root.Rejected': {
                       color: red[800],
                       backgroundColor: red[50],
@@ -232,12 +213,7 @@ export default function XHero() {
                 (theme) =>
                   theme.applyDarkStyles({
                     '& .MuiDataGrid-root': {
-                      '& .MuiDataGrid-columnHeaders': {
-                        borderColor: 'divider',
-                      },
-                      '& .MuiDataGrid-cell': {
-                        borderColor: alpha(theme.palette.primaryDark[600], 0.5),
-                      },
+                      '--DataGrid-rowBorderColor': alpha(theme.palette.primaryDark[600], 0.5),
                       '& .MuiChip-root.Rejected': {
                         color: red[200],
                         backgroundColor: alpha(red[900], 0.2),

docs/src/components/productX/XTheming.tsx

@@ -40,7 +40,7 @@ export default function XTheming() {
     const columns: Array<GridColDef> = [
       {
         field: 'desk',
-        headerName: 'desk',
+        headerName: 'Desk',
         width: customized ? 72 : 100,
         sortable: false,
         editable: true,
@@ -65,6 +65,7 @@ export default function XTheming() {
         sortable: false,
         editable: true,
         ...(customized && {
+          display: 'flex',
           renderCell: (params: GridCellParams) => {
             return <ProgressBar value={Number(params.value)!} />;
           },
@@ -81,6 +82,7 @@ export default function XTheming() {
         sortable: false,
         editable: true,
         ...(customized && {
+          display: 'flex',
           renderCell: (params: GridCellParams) => {
             return <Status status={(params.value || '').toString()} />;
           },