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.