From 78c3f9ed41c8ec6e98694dff2787cef49341d69d Mon Sep 17 00:00:00 2001 From: michel Date: Fri, 26 Apr 2024 15:02:19 +0200 Subject: [PATCH 01/10] adjusted the code example --- docs/data/data-grid/filtering/quick-filter.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/data-grid/filtering/quick-filter.md b/docs/data/data-grid/filtering/quick-filter.md index fb43ebab0de8a..e9bd7e7d4b0ac 100644 --- 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: ['ab'], }, }, }} From 47360c1d98a35d8d23c76795d67c6bce171f45f9 Mon Sep 17 00:00:00 2001 From: michel Date: Mon, 3 Jun 2024 14:32:37 +0200 Subject: [PATCH 02/10] added a valueFormatter to the year column --- packages/x-data-grid-generator/src/hooks/useMovieData.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/x-data-grid-generator/src/hooks/useMovieData.ts b/packages/x-data-grid-generator/src/hooks/useMovieData.ts index 5ed7504920302..59fdabc3aacfc 100644 --- a/packages/x-data-grid-generator/src/hooks/useMovieData.ts +++ b/packages/x-data-grid-generator/src/hooks/useMovieData.ts @@ -49,6 +49,7 @@ const COLUMNS: GridColDef[] = [ field: 'year', headerName: 'Year', type: 'number', + valueFormatter: (value) => `${value}`, availableAggregationFunctions: ['max', 'min'], }, { From 3c7fab5aacbe1d76b2709127c6e21d1093ded41d Mon Sep 17 00:00:00 2001 From: michel Date: Mon, 3 Jun 2024 14:33:12 +0200 Subject: [PATCH 03/10] changed dataSet to movie data --- docs/data/data-grid/filtering/QuickFilteringGrid.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/docs/data/data-grid/filtering/QuickFilteringGrid.tsx b/docs/data/data-grid/filtering/QuickFilteringGrid.tsx index c55663c35e259..219d0c42f4cb5 100644 --- 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( From ec9fd862ce5674ac08629da5d5ff352494796cdd Mon Sep 17 00:00:00 2001 From: michel Date: Mon, 3 Jun 2024 14:33:41 +0200 Subject: [PATCH 04/10] changed dataSet to movie data and changed the initial quickfilter value --- .../filtering/QuickFilteringInitialize.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/docs/data/data-grid/filtering/QuickFilteringInitialize.tsx b/docs/data/data-grid/filtering/QuickFilteringInitialize.tsx index d71f54958e77d..81579778817d9 100644 --- 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, - }); +export default function QuickFilteringGrid() { + 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() { Date: Mon, 3 Jun 2024 15:25:57 +0200 Subject: [PATCH 05/10] changed dataSet to movie data, extracted methods into callbacks --- .../QuickFilteringExcludeHiddenColumns.tsx | 103 ++++++++++-------- 1 file changed, 58 insertions(+), 45 deletions(-) diff --git a/docs/data/data-grid/filtering/QuickFilteringExcludeHiddenColumns.tsx b/docs/data/data-grid/filtering/QuickFilteringExcludeHiddenColumns.tsx index 46597a6ecba94..4486c52f22a60 100644 --- 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 VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse']; -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' }, -]; +export default function QuickFilteringGrid() { + const data = useMovieData(); -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 columns = React.useMemo( + () => data.columns.filter((column) => VISIBLE_FIELDS.includes(column.field)), + [data.columns], + ); -export default function QuickFilteringExcludeHiddenColumns() { const [filterModel, setFilterModel] = React.useState({ items: [], quickFilterExcludeHiddenColumns: true, - quickFilterValues: ['1'], + quickFilterValues: ['War'], }); const [columnVisibilityModel, setColumnVisibilityModel] = - React.useState({}); + React.useState({ 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 ( - setColumnVisibilityModel(() => ({ id: (event.target as any).checked })) - } + checked={columnVisibilityModel.year} + onChange={toggleYearColumn} control={} - label="Show ID column" + label="Show company column" /> - setFilterModel((model) => ({ - ...model, - quickFilterExcludeHiddenColumns: (event.target as any).checked, - })) - } + onChange={toggleExcludeHiddenColumns} control={} label="Exclude hidden columns" /> setFilterModel(newModel)} - slotProps={{ toolbar: { showQuickFilter: true } }} + onFilterModelChange={handleFilterModelChange} columnVisibilityModel={columnVisibilityModel} - onColumnVisibilityModelChange={(newModel) => - setColumnVisibilityModel(newModel) - } + onColumnVisibilityModelChange={handleColumnVisibilityChange} /> From 6bd671b137ee8cbebcf862427de648ee582bfb02 Mon Sep 17 00:00:00 2001 From: michel Date: Mon, 3 Jun 2024 16:54:37 +0200 Subject: [PATCH 06/10] fixed naming --- .../data-grid/filtering/QuickFilteringExcludeHiddenColumns.tsx | 2 +- docs/data/data-grid/filtering/QuickFilteringInitialize.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/data-grid/filtering/QuickFilteringExcludeHiddenColumns.tsx b/docs/data/data-grid/filtering/QuickFilteringExcludeHiddenColumns.tsx index 4486c52f22a60..07ae5379b7eff 100644 --- a/docs/data/data-grid/filtering/QuickFilteringExcludeHiddenColumns.tsx +++ b/docs/data/data-grid/filtering/QuickFilteringExcludeHiddenColumns.tsx @@ -12,7 +12,7 @@ import { useMovieData } from '@mui/x-data-grid-generator'; const VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse']; -export default function QuickFilteringGrid() { +export default function QuickFilteringExcludeHiddenColumns() { const data = useMovieData(); const columns = React.useMemo( diff --git a/docs/data/data-grid/filtering/QuickFilteringInitialize.tsx b/docs/data/data-grid/filtering/QuickFilteringInitialize.tsx index 81579778817d9..6038f7153a4da 100644 --- a/docs/data/data-grid/filtering/QuickFilteringInitialize.tsx +++ b/docs/data/data-grid/filtering/QuickFilteringInitialize.tsx @@ -5,7 +5,7 @@ import { useMovieData } from '@mui/x-data-grid-generator'; const VISIBLE_FIELDS = ['title', 'company', 'director', 'year', 'cinematicUniverse']; -export default function QuickFilteringGrid() { +export default function QuickFilteringInitialize() { const data = useMovieData(); // Otherwise filter will be applied on fields such as the hidden column id From db0a75852abeddc2d53564fbaf93fcec45df311a Mon Sep 17 00:00:00 2001 From: michel Date: Mon, 3 Jun 2024 16:56:25 +0200 Subject: [PATCH 07/10] changed the description of the hidden columns section --- docs/data/data-grid/filtering/quick-filter.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/data/data-grid/filtering/quick-filter.md b/docs/data/data-grid/filtering/quick-filter.md index e9bd7e7d4b0ac..b6548ca9c65ed 100644 --- 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: ['ab'], + 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, try hiding the `company` column. 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}} From fed3ddedaa0a40b68e6d44486e0f93d518da6fc6 Mon Sep 17 00:00:00 2001 From: michel Date: Mon, 3 Jun 2024 16:56:35 +0200 Subject: [PATCH 08/10] docs generation --- .../QuickFilteringExcludeHiddenColumns.js | 98 +++++++++++-------- .../data-grid/filtering/QuickFilteringGrid.js | 10 +- .../filtering/QuickFilteringInitialize.js | 13 +-- 3 files changed, 64 insertions(+), 57 deletions(-) diff --git a/docs/data/data-grid/filtering/QuickFilteringExcludeHiddenColumns.js b/docs/data/data-grid/filtering/QuickFilteringExcludeHiddenColumns.js index f2dfefdc34c61..74746adaa6f96 100644 --- 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 ( - setColumnVisibilityModel(() => ({ id: event.target.checked })) - } + checked={columnVisibilityModel.year} + onChange={toggleYearColumn} control={} - label="Show ID column" + label="Show company column" /> - setFilterModel((model) => ({ - ...model, - quickFilterExcludeHiddenColumns: event.target.checked, - })) - } + onChange={toggleExcludeHiddenColumns} control={} label="Exclude hidden columns" /> setFilterModel(newModel)} - slotProps={{ toolbar: { showQuickFilter: true } }} + onFilterModelChange={handleFilterModelChange} columnVisibilityModel={columnVisibilityModel} - onColumnVisibilityModelChange={(newModel) => - setColumnVisibilityModel(newModel) - } + onColumnVisibilityModelChange={handleColumnVisibilityChange} /> diff --git a/docs/data/data-grid/filtering/QuickFilteringGrid.js b/docs/data/data-grid/filtering/QuickFilteringGrid.js index c55663c35e259..219d0c42f4cb5 100644 --- 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/QuickFilteringInitialize.js b/docs/data/data-grid/filtering/QuickFilteringInitialize.js index d71f54958e77d..6038f7153a4da 100644 --- 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() { Date: Mon, 3 Jun 2024 17:19:59 +0200 Subject: [PATCH 09/10] fixed valueFormatter for the year column definition in movie data --- packages/x-data-grid-generator/src/hooks/useMovieData.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/x-data-grid-generator/src/hooks/useMovieData.ts b/packages/x-data-grid-generator/src/hooks/useMovieData.ts index 59fdabc3aacfc..7820a7471fde2 100644 --- a/packages/x-data-grid-generator/src/hooks/useMovieData.ts +++ b/packages/x-data-grid-generator/src/hooks/useMovieData.ts @@ -49,7 +49,7 @@ const COLUMNS: GridColDef[] = [ field: 'year', headerName: 'Year', type: 'number', - valueFormatter: (value) => `${value}`, + valueFormatter: (value) => (typeof value === 'number' ? `${value}` : ''), availableAggregationFunctions: ['max', 'min'], }, { From 06ededf40ffa5a9f9512f3567230b3de1513ffb8 Mon Sep 17 00:00:00 2001 From: Michel Engelen <32863416+michelengelen@users.noreply.github.com> Date: Tue, 4 Jun 2024 11:34:44 +0200 Subject: [PATCH 10/10] Update docs/data/data-grid/filtering/quick-filter.md Co-authored-by: Bilal Shafi Signed-off-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com> --- docs/data/data-grid/filtering/quick-filter.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/data-grid/filtering/quick-filter.md b/docs/data/data-grid/filtering/quick-filter.md index b6548ca9c65ed..1519734bae1a5 100644 --- a/docs/data/data-grid/filtering/quick-filter.md +++ b/docs/data/data-grid/filtering/quick-filter.md @@ -47,7 +47,7 @@ To include hidden columns in the quick filter, set `filterModel.quickFilterExclu /> ``` -In the demo below, try hiding the `company` column. You'll only see 5 results because rows where the `company` value is `'Warner Bros.'` are excluded. +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}}