From 05172a085fdd679da6a5cfade6d8f2d140aa8b45 Mon Sep 17 00:00:00 2001
From: Andrew Cherniavskyi <andrew@mui.com>
Date: Wed, 9 Oct 2024 18:55:43 +0200
Subject: [PATCH] set min height when there are no rows

---
 docs/data/data-grid/layout/FlexGrid.js          | 12 ++++++++++--
 docs/data/data-grid/layout/FlexGrid.tsx         | 12 ++++++++++--
 docs/data/data-grid/layout/FlexGrid.tsx.preview | 11 -----------
 3 files changed, 20 insertions(+), 15 deletions(-)
 delete mode 100644 docs/data/data-grid/layout/FlexGrid.tsx.preview

diff --git a/docs/data/data-grid/layout/FlexGrid.js b/docs/data/data-grid/layout/FlexGrid.js
index b4a52de337c2..75c8d9fe8bc3 100644
--- a/docs/data/data-grid/layout/FlexGrid.js
+++ b/docs/data/data-grid/layout/FlexGrid.js
@@ -16,6 +16,8 @@ export default function FlexGrid() {
     maxColumns: 6,
   });
 
+  const rows = data.rows.slice(0, nbRows);
+
   return (
     <Box sx={{ width: '100%' }}>
       <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
@@ -26,8 +28,14 @@ export default function FlexGrid() {
           Add a row
         </Button>
       </Stack>
-      <div style={{ display: 'flex', flexDirection: 'column' }}>
-        <DataGrid {...data} rows={data.rows.slice(0, nbRows)} loading={loading} />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: rows.length === 0 ? 200 : undefined,
+        }}
+      >
+        <DataGrid {...data} rows={rows} loading={loading} />
       </div>
     </Box>
   );
diff --git a/docs/data/data-grid/layout/FlexGrid.tsx b/docs/data/data-grid/layout/FlexGrid.tsx
index b4a52de337c2..75c8d9fe8bc3 100644
--- a/docs/data/data-grid/layout/FlexGrid.tsx
+++ b/docs/data/data-grid/layout/FlexGrid.tsx
@@ -16,6 +16,8 @@ export default function FlexGrid() {
     maxColumns: 6,
   });
 
+  const rows = data.rows.slice(0, nbRows);
+
   return (
     <Box sx={{ width: '100%' }}>
       <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
@@ -26,8 +28,14 @@ export default function FlexGrid() {
           Add a row
         </Button>
       </Stack>
-      <div style={{ display: 'flex', flexDirection: 'column' }}>
-        <DataGrid {...data} rows={data.rows.slice(0, nbRows)} loading={loading} />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: rows.length === 0 ? 200 : undefined,
+        }}
+      >
+        <DataGrid {...data} rows={rows} loading={loading} />
       </div>
     </Box>
   );
diff --git a/docs/data/data-grid/layout/FlexGrid.tsx.preview b/docs/data/data-grid/layout/FlexGrid.tsx.preview
deleted file mode 100644
index 8d70b80ecd3e..000000000000
--- a/docs/data/data-grid/layout/FlexGrid.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-<Stack direction="row" spacing={1} sx={{ mb: 1 }}>
-  <Button size="small" onClick={removeRow}>
-    Remove a row
-  </Button>
-  <Button size="small" onClick={addRow}>
-    Add a row
-  </Button>
-</Stack>
-<div style={{ display: 'flex', flexDirection: 'column' }}>
-  <DataGrid {...data} rows={data.rows.slice(0, nbRows)} loading={loading} />
-</div>
\ No newline at end of file