[data grid] Adds a recipe for using non-native select in filter panel (…

…#10916)

docs/data/data-grid/filtering-recipes/UseNonNativeSelect.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+export default function UseNonNativeSelect() {
+  const { data } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        slotProps={{
+          baseSelect: {
+            native: false,
+          },
+        }}
+      />
+    </div>
+  );
+}

docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+export default function UseNonNativeSelect() {
+  const { data } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        slotProps={{
+          baseSelect: {
+            native: false,
+          },
+        }}
+      />
+    </div>
+  );
+}

docs/data/data-grid/filtering-recipes/UseNonNativeSelect.tsx.preview

@@ -0,0 +1,8 @@
+<DataGrid
+  {...data}
+  slotProps={{
+    baseSelect: {
+      native: false,
+    },
+  }}
+/>

docs/data/data-grid/filtering-recipes/filtering-recipes.md

@@ -13,3 +13,9 @@ Currently if you want to use the [Quick filter](/x/react-data-grid/filtering/qui
 A common use case is to have certain components positioned outside of the grid. Because of the way the grid context works this might not be a straining forward thing to do. The example below illustrates how this use case can be achieved.
 
 {{"demo": "QuickFilterOutsideOfGrid.js", "bg": "inline", "defaultCodeOpen": false}}
+
+## Use non-native select in filter panel
+
+If you do not want to use the native select in the filtering panel you can switch it to the `@mui/material/Select` component by using the `slotProps` property.
+
+{{"demo": "UseNonNativeSelect.js", "bg": "inline", "defaultCodeOpen": false}}