[docs][table] Make the data grid blend in

oliviertassinari · Aug 27, 2024 · 4f494ad · 4f494ad
1 parent a32add2
commit 4f494ad
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 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 },
@@ -35,7 +36,7 @@ const rows = [
 
 export default function DataTable() {
   return (
-    <div style={{ height: 400, width: '100%' }}>
+    <Paper sx={{ height: 400, width: '100%' }}>
       <DataGrid
         rows={rows}
         columns={columns}
@@ -46,8 +47,8 @@ export default function DataTable() {
         }}
         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 },
@@ -35,7 +36,7 @@ const rows = [
 
 export default function DataTable() {
   return (
-    <div style={{ height: 400, width: '100%' }}>
+    <Paper sx={{ height: 400, width: '100%' }}>
       <DataGrid
         rows={rows}
         columns={columns}
@@ -46,8 +47,8 @@ export default function DataTable() {
         }}
         pageSizeOptions={[5, 10]}
         checkboxSelection
-        sx={{ overflow: 'clip' }}
+        sx={{ border: 0 }}
       />
-    </div>
+    </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