[docs] Adds a recipe for the checkboxSelectionVisibleOnly prop (#12646

)

Signed-off-by: Michel Engelen <[email protected]>
Co-authored-by: Andrew Cherniavskii <[email protected]>

docs/data/data-grid/row-selection/CheckboxSelectionVisibleOnlyGrid.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import Box from '@mui/material/Box';
+
+export default function CheckboxSelectionVisibleOnlyGrid() {
+  const [checkboxSelectionVisibleOnly, setCheckboxSelectionVisibleOnly] =
+    React.useState(false);
+
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 300,
+    maxColumns: 5,
+  });
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Box sx={{ mb: 1 }}>
+        <FormControlLabel
+          label="checkboxSelectionVisibleOnly"
+          control={
+            <Switch
+              checked={checkboxSelectionVisibleOnly}
+              onChange={(event) =>
+                setCheckboxSelectionVisibleOnly(event.target.checked)
+              }
+            />
+          }
+        />
+      </Box>
+      <div style={{ height: 400 }}>
+        <DataGridPro
+          {...data}
+          initialState={{
+            ...data.initialState,
+            pagination: { paginationModel: { pageSize: 50 } },
+          }}
+          pageSizeOptions={[5, 10, 25, 50, 100]}
+          pagination
+          checkboxSelection
+          checkboxSelectionVisibleOnly={checkboxSelectionVisibleOnly}
+        />
+      </div>
+    </div>
+  );
+}

docs/data/data-grid/row-selection/CheckboxSelectionVisibleOnlyGrid.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import Box from '@mui/material/Box';
+
+export default function CheckboxSelectionVisibleOnlyGrid() {
+  const [checkboxSelectionVisibleOnly, setCheckboxSelectionVisibleOnly] =
+    React.useState(false);
+
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 300,
+    maxColumns: 5,
+  });
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Box sx={{ mb: 1 }}>
+        <FormControlLabel
+          label="checkboxSelectionVisibleOnly"
+          control={
+            <Switch
+              checked={checkboxSelectionVisibleOnly}
+              onChange={(event) =>
+                setCheckboxSelectionVisibleOnly(event.target.checked)
+              }
+            />
+          }
+        />
+      </Box>
+      <div style={{ height: 400 }}>
+        <DataGridPro
+          {...data}
+          initialState={{
+            ...data.initialState,
+            pagination: { paginationModel: { pageSize: 50 } },
+          }}
+          pageSizeOptions={[5, 10, 25, 50, 100]}
+          pagination
+          checkboxSelection
+          checkboxSelectionVisibleOnly={checkboxSelectionVisibleOnly}
+        />
+      </div>
+    </div>
+  );
+}

docs/data/data-grid/row-selection/row-selection.md

@@ -64,6 +64,13 @@ Always set the `checkboxSelection` prop to `true` even when providing a custom c
 Otherwise, the data grid might remove your column.
 :::
 
+### Visible rows selection [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+
+By default, when you click the "Select All" checkbox, all rows in the data grid are selected.
+If you want to change this behavior and only select the rows that are currently visible on the page, you can use the `checkboxSelectionVisibleOnly` prop.
+
+{{"demo": "CheckboxSelectionVisibleOnlyGrid.js", "bg": "inline"}}
+
 ## Usage with server-side pagination
 
 Using the controlled selection with `paginationMode="server"` may result in selected rows being lost when the page is changed.