[docs][table] Make the data grid blend in (#43489)

mui · Aug 28, 2024 · f859062 · f859062
1 parent 20fa6b9
commit f859062
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 29 deletions.
diff --git a/docs/data/material/components/table/DataTable.js b/docs/data/material/components/table/DataTable.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { DataGrid } from '@mui/x-data-grid';
+import Paper from '@mui/material/Paper';
 
 const columns = [
   { field: 'id', headerName: 'ID', width: 70 },
@@ -33,21 +34,19 @@ const rows = [
   { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
 ];
 
+const paginationModel = { page: 0, pageSize: 5 };
+
 export default function DataTable() {
   return (
-    <div style={{ height: 400, width: '100%' }}>
+    <Paper sx={{ height: 400, width: '100%' }}>
       <DataGrid
         rows={rows}
         columns={columns}
-        initialState={{
-          pagination: {
-            paginationModel: { page: 0, pageSize: 5 },
-          },
-        }}
+        initialState={{ pagination: { paginationModel } }}
         pageSizeOptions={[5, 10]}
         checkboxSelection
-        sx={{ overflow: 'clip' }}
+        sx={{ border: 0 }}
       />
-    </div>
+    </Paper>
   );
 }
diff --git a/docs/data/material/components/table/DataTable.tsx b/docs/data/material/components/table/DataTable.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { DataGrid, GridColDef } from '@mui/x-data-grid';
+import Paper from '@mui/material/Paper';
 
 const columns: GridColDef[] = [
   { field: 'id', headerName: 'ID', width: 70 },
@@ -33,21 +34,19 @@ const rows = [
   { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
 ];
 
+const paginationModel = { page: 0, pageSize: 5 };
+
 export default function DataTable() {
   return (
-    <div style={{ height: 400, width: '100%' }}>
+    <Paper sx={{ height: 400, width: '100%' }}>
       <DataGrid
         rows={rows}
         columns={columns}
-        initialState={{
-          pagination: {
-            paginationModel: { page: 0, pageSize: 5 },
-          },
-        }}
+        initialState={{ pagination: { paginationModel } }}
         pageSizeOptions={[5, 10]}
         checkboxSelection
-        sx={{ overflow: 'clip' }}
+        sx={{ border: 0 }}
       />
-    </div>
+    </Paper>
   );
 }
diff --git a/docs/data/material/components/table/DataTable.tsx.preview b/docs/data/material/components/table/DataTable.tsx.preview
@@ -1,12 +1,10 @@
-<DataGrid
-  rows={rows}
-  columns={columns}
-  initialState={{
-    pagination: {
-      paginationModel: { page: 0, pageSize: 5 },
-    },
-  }}
-  pageSizeOptions={[5, 10]}
-  checkboxSelection
-  sx={{ overflow: 'clip' }}
-/>
+<Paper sx={{ height: 400, width: '100%' }}>
+  <DataGrid
+    rows={rows}
+    columns={columns}
+    initialState={{ pagination: { paginationModel } }}
+    pageSizeOptions={[5, 10]}
+    checkboxSelection
+    sx={{ border: 0 }}
+  />
+</Paper>
diff --git a/docs/data/material/components/table/table.md b/docs/data/material/components/table/table.md
@@ -34,7 +34,7 @@ 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.
 
-{{"demo": "DataTable.js", "bg": "outlined"}}
+{{"demo": "DataTable.js", "bg": true}}
 
 ## Dense table