[docs] Add section explaining how to keep the selection while filteri…

…ng (#15185)

Signed-off-by: Armin Mehinovic <[email protected]>
Co-authored-by: Sycamore <[email protected]>

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>
+  );
+}

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>
+  );
+}

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,
+    },
+  }}
+/>

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.