[docs] adjusted the code example for quickFilterValues (#12919)

Signed-off-by: Michel Engelen <[email protected]> Co-authored-by: Bilal Shafi <[email protected]>
mui · Jun 4, 2024 · 4317cf2 · 4317cf2
1 parent 7b7589a
commit 4317cf2
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 121 deletions.
diff --git a/docs/data/data-grid/filtering/QuickFilteringExcludeHiddenColumns.js b/docs/data/data-grid/filtering/QuickFilteringExcludeHiddenColumns.js
@@ -1,74 +1,90 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import { randomTraderName, randomEmail } from '@mui/x-data-grid-generator';
-import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { DataGrid, GridToolbar } from '@mui/x-data-grid';
+import { useMovieData } from '@mui/x-data-grid-generator';
 
-const columns = [
-  { field: 'id', headerName: 'ID', width: 80 },
-  { field: 'name', headerName: 'Name', width: 150 },
-  { field: 'email', headerName: 'Email', width: 150 },
-  { field: 'age', headerName: 'Age', type: 'number' },
-];
-
-const rows = [
-  { id: 1, name: randomTraderName(), email: randomEmail(), age: 25 },
-  { id: 2, name: randomTraderName(), email: randomEmail(), age: 36 },
-  { id: 3, name: randomTraderName(), email: randomEmail(), age: 19 },
-  { id: 4, name: randomTraderName(), email: randomEmail(), age: 28 },
-  { id: 5, name: randomTraderName(), email: randomEmail(), age: 23 },
-  { id: 6, name: randomTraderName(), email: randomEmail(), age: 27 },
-  { id: 7, name: randomTraderName(), email: randomEmail(), age: 18 },
-  { id: 8, name: randomTraderName(), email: randomEmail(), age: 31 },
-  { id: 9, name: randomTraderName(), email: randomEmail(), age: 24 },
-  { id: 10, name: randomTraderName(), email: randomEmail(), age: 35 },
-];
+const VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse'];
 
 export default function QuickFilteringExcludeHiddenColumns() {
+  const data = useMovieData();
+
+  const columns = React.useMemo(
+    () => data.columns.filter((column) => VISIBLE_FIELDS.includes(column.field)),
+    [data.columns],
+  );
+
   const [filterModel, setFilterModel] = React.useState({
     items: [],
     quickFilterExcludeHiddenColumns: true,
-    quickFilterValues: ['1'],
+    quickFilterValues: ['War'],
   });
 
-  const [columnVisibilityModel, setColumnVisibilityModel] = React.useState({});
+  const [columnVisibilityModel, setColumnVisibilityModel] = React.useState({
+    company: false,
+  });
+
+  const handleFilterModelChange = React.useCallback(
+    (newModel) => setFilterModel(newModel),
+    [],
+  );
+
+  const handleColumnVisibilityChange = React.useCallback(
+    (newModel) => setColumnVisibilityModel(newModel),
+    [],
+  );
+
+  const toggleYearColumn = React.useCallback(
+    (event) => setColumnVisibilityModel(() => ({ company: event.target.checked })),
+    [],
+  );
+
+  const toggleExcludeHiddenColumns = React.useCallback(
+    (event) =>
+      setFilterModel((model) => ({
+        ...model,
+        quickFilterExcludeHiddenColumns: event.target.checked,
+      })),
+    [],
+  );
 
   return (
     <Box sx={{ width: 1 }}>
       <FormControlLabel
-        checked={columnVisibilityModel.id !== false}
-        onChange={(event) =>
-          setColumnVisibilityModel(() => ({ id: event.target.checked }))
-        }
+        checked={columnVisibilityModel.year}
+        onChange={toggleYearColumn}
         control={<Switch color="primary" />}
-        label="Show ID column"
+        label="Show company column"
       />
       <FormControlLabel
         checked={filterModel.quickFilterExcludeHiddenColumns}
-        onChange={(event) =>
-          setFilterModel((model) => ({
-            ...model,
-            quickFilterExcludeHiddenColumns: event.target.checked,
-          }))
-        }
+        onChange={toggleExcludeHiddenColumns}
         control={<Switch color="primary" />}
         label="Exclude hidden columns"
       />
       <Box sx={{ height: 400 }}>
         <DataGrid
+          {...data}
           columns={columns}
-          rows={rows}
+          initialState={{
+            filter: {
+              filterModel,
+            },
+          }}
           disableColumnFilter
+          disableColumnSelector
           disableDensitySelector
           slots={{ toolbar: GridToolbar }}
+          slotProps={{
+            toolbar: {
+              showQuickFilter: true,
+            },
+          }}
           filterModel={filterModel}
-          onFilterModelChange={(newModel) => setFilterModel(newModel)}
-          slotProps={{ toolbar: { showQuickFilter: true } }}
+          onFilterModelChange={handleFilterModelChange}
           columnVisibilityModel={columnVisibilityModel}
-          onColumnVisibilityModelChange={(newModel) =>
-            setColumnVisibilityModel(newModel)
-          }
+          onColumnVisibilityModelChange={handleColumnVisibilityChange}
         />
       </Box>
     </Box>

diff --git a/docs/data/data-grid/filtering/QuickFilteringExcludeHiddenColumns.tsx b/docs/data/data-grid/filtering/QuickFilteringExcludeHiddenColumns.tsx
@@ -1,82 +1,95 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import {
   DataGrid,
-  GridToolbar,
-  GridRowsProp,
-  GridColDef,
-  GridFilterModel,
   GridColumnVisibilityModel,
+  GridFilterModel,
+  GridToolbar,
 } from '@mui/x-data-grid';
-import { randomTraderName, randomEmail } from '@mui/x-data-grid-generator';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
+import { useMovieData } from '@mui/x-data-grid-generator';
 
-const columns: GridColDef[] = [
-  { field: 'id', headerName: 'ID', width: 80 },
-  { field: 'name', headerName: 'Name', width: 150 },
-  { field: 'email', headerName: 'Email', width: 150 },
-  { field: 'age', headerName: 'Age', type: 'number' },
-];
-
-const rows: GridRowsProp = [
-  { id: 1, name: randomTraderName(), email: randomEmail(), age: 25 },
-  { id: 2, name: randomTraderName(), email: randomEmail(), age: 36 },
-  { id: 3, name: randomTraderName(), email: randomEmail(), age: 19 },
-  { id: 4, name: randomTraderName(), email: randomEmail(), age: 28 },
-  { id: 5, name: randomTraderName(), email: randomEmail(), age: 23 },
-  { id: 6, name: randomTraderName(), email: randomEmail(), age: 27 },
-  { id: 7, name: randomTraderName(), email: randomEmail(), age: 18 },
-  { id: 8, name: randomTraderName(), email: randomEmail(), age: 31 },
-  { id: 9, name: randomTraderName(), email: randomEmail(), age: 24 },
-  { id: 10, name: randomTraderName(), email: randomEmail(), age: 35 },
-];
+const VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse'];
 
 export default function QuickFilteringExcludeHiddenColumns() {
+  const data = useMovieData();
+
+  const columns = React.useMemo(
+    () => data.columns.filter((column) => VISIBLE_FIELDS.includes(column.field)),
+    [data.columns],
+  );
+
   const [filterModel, setFilterModel] = React.useState<GridFilterModel>({
     items: [],
     quickFilterExcludeHiddenColumns: true,
-    quickFilterValues: ['1'],
+    quickFilterValues: ['War'],
   });
 
   const [columnVisibilityModel, setColumnVisibilityModel] =
-    React.useState<GridColumnVisibilityModel>({});
+    React.useState<GridColumnVisibilityModel>({ company: false });
+
+  const handleFilterModelChange = React.useCallback(
+    (newModel: GridFilterModel) => setFilterModel(newModel),
+    [],
+  );
+
+  const handleColumnVisibilityChange = React.useCallback(
+    (newModel: GridColumnVisibilityModel) => setColumnVisibilityModel(newModel),
+    [],
+  );
+
+  const toggleYearColumn = React.useCallback(
+    (event: React.SyntheticEvent) =>
+      setColumnVisibilityModel(() => ({ company: (event.target as any).checked })),
+    [],
+  );
+
+  const toggleExcludeHiddenColumns = React.useCallback(
+    (event: React.SyntheticEvent) =>
+      setFilterModel((model) => ({
+        ...model,
+        quickFilterExcludeHiddenColumns: (event.target as any).checked,
+      })),
+    [],
+  );
 
   return (
     <Box sx={{ width: 1 }}>
       <FormControlLabel
-        checked={columnVisibilityModel.id !== false}
-        onChange={(event) =>
-          setColumnVisibilityModel(() => ({ id: (event.target as any).checked }))
-        }
+        checked={columnVisibilityModel.year}
+        onChange={toggleYearColumn}
         control={<Switch color="primary" />}
-        label="Show ID column"
+        label="Show company column"
       />
       <FormControlLabel
         checked={filterModel.quickFilterExcludeHiddenColumns}
-        onChange={(event) =>
-          setFilterModel((model) => ({
-            ...model,
-            quickFilterExcludeHiddenColumns: (event.target as any).checked,
-          }))
-        }
+        onChange={toggleExcludeHiddenColumns}
         control={<Switch color="primary" />}
         label="Exclude hidden columns"
       />
       <Box sx={{ height: 400 }}>
         <DataGrid
+          {...data}
           columns={columns}
-          rows={rows}
+          initialState={{
+            filter: {
+              filterModel,
+            },
+          }}
           disableColumnFilter
+          disableColumnSelector
           disableDensitySelector
           slots={{ toolbar: GridToolbar }}
+          slotProps={{
+            toolbar: {
+              showQuickFilter: true,
+            },
+          }}
           filterModel={filterModel}
-          onFilterModelChange={(newModel) => setFilterModel(newModel)}
-          slotProps={{ toolbar: { showQuickFilter: true } }}
+          onFilterModelChange={handleFilterModelChange}
           columnVisibilityModel={columnVisibilityModel}
-          onColumnVisibilityModelChange={(newModel) =>
-            setColumnVisibilityModel(newModel)
-          }
+          onColumnVisibilityModelChange={handleColumnVisibilityChange}
         />
       </Box>
     </Box>

diff --git a/docs/data/data-grid/filtering/QuickFilteringGrid.js b/docs/data/data-grid/filtering/QuickFilteringGrid.js
@@ -1,16 +1,12 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import { useDemoData } from '@mui/x-data-grid-generator';
+import { useMovieData } from '@mui/x-data-grid-generator';
 
-const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+const VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse'];
 
 export default function QuickFilteringGrid() {
-  const { data } = useDemoData({
-    dataSet: 'Employee',
-    visibleFields: VISIBLE_FIELDS,
-    rowLength: 100,
-  });
+  const data = useMovieData();
 
   // Otherwise filter will be applied on fields such as the hidden column id
   const columns = React.useMemo(

diff --git a/docs/data/data-grid/filtering/QuickFilteringGrid.tsx b/docs/data/data-grid/filtering/QuickFilteringGrid.tsx
@@ -1,16 +1,12 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import { useDemoData } from '@mui/x-data-grid-generator';
+import { useMovieData } from '@mui/x-data-grid-generator';
 
-const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+const VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse'];
 
 export default function QuickFilteringGrid() {
-  const { data } = useDemoData({
-    dataSet: 'Employee',
-    visibleFields: VISIBLE_FIELDS,
-    rowLength: 100,
-  });
+  const data = useMovieData();
 
   // Otherwise filter will be applied on fields such as the hidden column id
   const columns = React.useMemo(

diff --git a/docs/data/data-grid/filtering/QuickFilteringInitialize.js b/docs/data/data-grid/filtering/QuickFilteringInitialize.js
@@ -1,16 +1,12 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import { useDemoData } from '@mui/x-data-grid-generator';
+import { useMovieData } from '@mui/x-data-grid-generator';
 
-const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+const VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse'];
 
 export default function QuickFilteringInitialize() {
-  const { data } = useDemoData({
-    dataSet: 'Employee',
-    visibleFields: VISIBLE_FIELDS,
-    rowLength: 100,
-  });
+  const data = useMovieData();
 
   // Otherwise filter will be applied on fields such as the hidden column id
   const columns = React.useMemo(
@@ -23,11 +19,10 @@ export default function QuickFilteringInitialize() {
       <DataGrid
         {...data}
         initialState={{
-          ...data.initialState,
           filter: {
             filterModel: {
               items: [],
-              quickFilterValues: ['ab'],
+              quickFilterValues: ['Disney', 'Star'],
             },
           },
         }}

diff --git a/docs/data/data-grid/filtering/QuickFilteringInitialize.tsx b/docs/data/data-grid/filtering/QuickFilteringInitialize.tsx
@@ -1,16 +1,12 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import { useDemoData } from '@mui/x-data-grid-generator';
+import { useMovieData } from '@mui/x-data-grid-generator';
 
-const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+const VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse'];
 
 export default function QuickFilteringInitialize() {
-  const { data } = useDemoData({
-    dataSet: 'Employee',
-    visibleFields: VISIBLE_FIELDS,
-    rowLength: 100,
-  });
+  const data = useMovieData();
 
   // Otherwise filter will be applied on fields such as the hidden column id
   const columns = React.useMemo(
@@ -23,11 +19,10 @@ export default function QuickFilteringInitialize() {
       <DataGrid
         {...data}
         initialState={{
-          ...data.initialState,
           filter: {
             filterModel: {
               items: [],
-              quickFilterValues: ['ab'],
+              quickFilterValues: ['Disney', 'Star'],
             },
           },
         }}

diff --git a/docs/data/data-grid/filtering/quick-filter.md b/docs/data/data-grid/filtering/quick-filter.md
@@ -19,7 +19,7 @@ The quick filter values can be initialized by setting the `filter.filterModel.qu
     filter: {
       filterModel: {
         items: [],
-        quickFilterValues: ['quick', 'filter'],
+        quickFilterValues: ['Disney', 'Star'],
       },
     },
   }}
@@ -47,8 +47,8 @@ To include hidden columns in the quick filter, set `filterModel.quickFilterExclu
 />
 ```
 
-In the demo below, try hiding the `ID` column. You will see no results, because there are no visible columns that contain `1`.
-Once you disable the `Exclude hidden columns` switch, the rows with `ID` containing `1` will be shown, even though the column is hidden.
+In the demo below, the `company` column is hidden. You'll only see 5 results because rows where the `company` value is `'Warner Bros.'` are excluded.
+However, when you disable the `Exclude hidden columns` switch, the rows containing `'Warner'` in the `company` field will be displayed again, even though the column remains hidden.
 
 {{"demo": "QuickFilteringExcludeHiddenColumns.js", "bg": "inline", "defaultCodeOpen": false}}