diff --git a/docs/data/material/components/table/DataTable.js b/docs/data/material/components/table/DataTable.js
index 3290483d3b6962..084ff21cccd9c7 100644
--- a/docs/data/material/components/table/DataTable.js
+++ b/docs/data/material/components/table/DataTable.js
@@ -34,17 +34,15 @@ const rows = [
   { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
 ];
 
+const paginationModel = { page: 0, pageSize: 5 };
+
 export default function DataTable() {
   return (
     <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={{ border: 0 }}
diff --git a/docs/data/material/components/table/DataTable.tsx b/docs/data/material/components/table/DataTable.tsx
index 905f56c0a795b7..1343ddcbb2b935 100644
--- a/docs/data/material/components/table/DataTable.tsx
+++ b/docs/data/material/components/table/DataTable.tsx
@@ -34,17 +34,15 @@ const rows = [
   { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
 ];
 
+const paginationModel = { page: 0, pageSize: 5 };
+
 export default function DataTable() {
   return (
     <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={{ border: 0 }}
diff --git a/docs/data/material/components/table/DataTable.tsx.preview b/docs/data/material/components/table/DataTable.tsx.preview
index 594e38d89a8569..876664a4a842c2 100644
--- 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' }}
-/>
\ No newline at end of file
+<Paper sx={{ height: 400, width: '100%' }}>
+  <DataGrid
+    rows={rows}
+    columns={columns}
+    initialState={{ pagination: { paginationModel } }}
+    pageSizeOptions={[5, 10]}
+    checkboxSelection
+    sx={{ border: 0 }}
+  />
+</Paper>
\ No newline at end of file