From c75774c322493eacdce86e1d932c149315a0b514 Mon Sep 17 00:00:00 2001
From: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Date: Wed, 30 Oct 2024 19:13:15 +0100
Subject: [PATCH] [docs] Add section explaining how to keep the selection while
 filtering (#15185)

Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
Co-authored-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com>
---
 .../KeepNonExistentRowsSelected.js            | 30 +++++++++++++++++++
 .../KeepNonExistentRowsSelected.tsx           | 30 +++++++++++++++++++
 .../KeepNonExistentRowsSelected.tsx.preview   | 14 +++++++++
 .../data-grid/row-selection/row-selection.md  |  7 +++++
 4 files changed, 81 insertions(+)
 create mode 100644 docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.js
 create mode 100644 docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.tsx
 create mode 100644 docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.tsx.preview

diff --git a/docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.js b/docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.js
new file mode 100644
index 0000000000000..ed3ae91344e34
--- /dev/null
+++ b/docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.js
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { DataGrid, GridToolbar } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function KeepNonExistentRowsSelected() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        checkboxSelection
+        disableRowSelectionOnClick
+        keepNonExistentRowsSelected
+        slots={{
+          toolbar: GridToolbar,
+        }}
+        slotProps={{
+          toolbar: {
+            showQuickFilter: true,
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.tsx b/docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.tsx
new file mode 100644
index 0000000000000..ed3ae91344e34
--- /dev/null
+++ b/docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { DataGrid, GridToolbar } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+export default function KeepNonExistentRowsSelected() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 6,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        checkboxSelection
+        disableRowSelectionOnClick
+        keepNonExistentRowsSelected
+        slots={{
+          toolbar: GridToolbar,
+        }}
+        slotProps={{
+          toolbar: {
+            showQuickFilter: true,
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.tsx.preview b/docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.tsx.preview
new file mode 100644
index 0000000000000..b3ad7e26a5efe
--- /dev/null
+++ b/docs/data/data-grid/row-selection/KeepNonExistentRowsSelected.tsx.preview
@@ -0,0 +1,14 @@
+<DataGrid
+  {...data}
+  checkboxSelection
+  disableRowSelectionOnClick
+  keepNonExistentRowsSelected
+  slots={{
+    toolbar: GridToolbar,
+  }}
+  slotProps={{
+    toolbar: {
+      showQuickFilter: true,
+    },
+  }}
+/>
\ No newline at end of file
diff --git a/docs/data/data-grid/row-selection/row-selection.md b/docs/data/data-grid/row-selection/row-selection.md
index 02f4a9ec20787..84210a5a343d8 100644
--- a/docs/data/data-grid/row-selection/row-selection.md
+++ b/docs/data/data-grid/row-selection/row-selection.md
@@ -36,6 +36,13 @@ In the demo below only rows with quantity above 50,000 can be selected:
 
 {{"demo": "DisableRowSelection.js", "bg": "inline"}}
 
+## Row selection with filtering
+
+By default, when the rows are filtered the selection is cleared from the rows that don't meet the filter criteria.
+To keep those rows selected even when they're not visible, set the `keepNonExistentRowsSelected` prop.
+
+{{"demo": "KeepNonExistentRowsSelected.js", "bg": "inline"}}
+
 ## Controlled row selection
 
 Use the `rowSelectionModel` prop to control the selection.