[DataGrid] Add quick filtering engine #4317

alexfauquette · 2022-03-30T16:23:36Z

The quick filter model I took is the following:

It uses a list of values to filter and it can returns

rows that contain all the values (default behavior)
rows that contain at least one of the values

It's applied after the basic filtering because it makes more comparisons than the basic one.

For now, they both work together (filtered rows must pass both the quick and the basic filtering) This decision is to avoid strange behaviors such as: "When a user set a quick filter value, it reset the filter panel" or "When the quick filter is activated, the filter panel does not have effect"

For now, I added properties in the filterModel. I'm not sure if it is the correct way to do that or if filtering should add another model quickFilterModel

To support row grouping, the signature of the internal method shouldApplyFilter is modified. instead of taking a filter item as an input, it takes the columnField

Demo: https://deploy-preview-4317--material-ui-x.netlify.app/x/react-data-grid/filtering/#quick-filter

TODO

Tests
support singleSelect columns
Evaluate the feasibility of date columns

Changelog

You can now add a quick filtering search bar to your grid. To so, either pass showQuickFilter prop to the <GridToolbar /> or use the <GridToolbarQuickFilter /> component in your custom toolbar.

More information about how to customize the filtering logic in the documentation

mui-bot · 2022-03-30T16:34:25Z

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	280.4	684.6	433.2	459.52	138.851
Sort 100k rows	ms	509.7	1,223	1,223	928.64	258.539
Select 100k rows	ms	192.1	300.5	235.9	249.66	41.074
Deselect 100k rows	ms	122.4	267.1	193.6	198.68	59.742

Generated by 🚫 dangerJS against 754022a

packages/grid/x-data-grid/src/models/gridFilterItem.ts

packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx

docs/data/data-grid/filtering/QuickFilteringCustomizedGrid.tsx

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

packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx

m4theushw · 2022-04-05T16:15:46Z

packages/grid/x-data-grid/src/models/colDef/gridColDef.ts

+    colDef: GridStateColDef,
+    apiRef: React.MutableRefObject<GridApiCommunity>,


Is there a use case where colDef and apiRef need to be accessed?

colDef could be redundant since the function is defined inside the column definition.

For most of the cases it's uselesse. But I had to add those arguments for the single-select column.

From a word in the quick search, I search in valueOptions the values that have a label corresponding to the word
So I need colDef to access the valueOptions. and I need the api to apply the valueParser as follow

valueFormatter({ value: option, field, api })

The code is taken form how the GridFilterInputSingleSelect renders options

In the case maybe deprecate the apiRef (or api) since we are going to remove it from GridValueFormatterParams in v6

The code is taken form how the GridFilterInputSingleSelect renders options

This makes me think that maybe singleSelect should have a default value formatter in v6. This would avoid having to duplicate code.

@m4theushw I added this to #3287

packages/grid/x-data-grid/src/models/gridFilterItem.ts

packages/grid/x-data-grid/src/models/gridFilterModel.ts

packages/grid/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx

packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx

github-actions · 2022-04-27T09:41:25Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2022-04-29T08:02:33Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2022-05-05T14:56:35Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

m4theushw

I left some minor visual suggestions. Otherwise, it looks good to me to be released. Good job! How about enabling it in the demo in https://mui.com/x/react-data-grid/demo/?

m4theushw · 2022-05-06T14:03:12Z

packages/grid/x-data-grid/src/components/containers/GridToolbarContainer.tsx

@@ -27,6 +27,7 @@ const GridToolbarContainerRoot = styled('div', {
 })(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
+  flexWrap: 'wrap',
  padding: theme.spacing(0.5, 0.5, 0),


The input bottom border touches the column headers if we leave as 0px.

Suggested change

padding: theme.spacing(0.5, 0.5, 0),

padding: theme.spacing(0.5),

If I do that, it will also modify the Toolbar even when there is no quick filter

What about adding paddingBottom:theme.spacing(0.5) to the quick filter component?

IMO the bottom padding should be there since the beginning. The already existent buttons also touch the border.

packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx

alexfauquette · 2022-05-06T15:09:45Z

The quick filter seems to work well with demo data. It will be even more interesting when we will get real data 👍

duttakapil21 · 2022-05-18T11:18:29Z

packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx

+import * as React from 'react';
+import PropTypes from 'prop-types';
+import TextField, { TextFieldProps } from '@mui/material/TextField';
+import SearchIcon from '@mui/icons-material/Search';


Our app started failing to compile this morning because it couldn't resolve @mui/icons-material, seems like it is not added in the dependencies of this module. We had to separately install @mui/icons-material to get our app working again. We are not using Material Icons in our project at all either, is this an absolute necessity to fetch and use the SearchIcon from Material Icons in this package?

This has been reported in #4906
The fix will be available in next release

Co-authored-by: José Rodolfo Freitas <joserodolfo.freitas@gmail.com>

alexfauquette added 5 commits March 30, 2022 15:56

aff quick filter logic

7f3e501

add the component

6306109

update defautl col def

f9f1276

fixes

2fb5288

documentation

1f5e6bf

alexfauquette added 4 commits March 31, 2022 12:44

support row grouping filter

d632bd6

run scripts

3d91292

fix typescript

b10e885

fix proptypes

18a3783

alexfauquette marked this pull request as ready for review March 31, 2022 12:31

yarn docs:api

38af3ad

alexfauquette requested review from m4theushw and flaviendelangle March 31, 2022 15:37

flaviendelangle reviewed Apr 1, 2022

View reviewed changes

alexfauquette added 6 commits April 1, 2022 13:57

smaal fixes

f71e1a6

flaviens idea to keep hook code clean

eb02b14

remove useless type

b22e58b

support single select

18ee00f

add labels

bad0fd9

script

b807e99

m4theushw reviewed Apr 5, 2022

View reviewed changes

alexfauquette added 4 commits April 6, 2022 16:08

add tests

5d14e6a

debounce the quick filter input

2f9ebb9

scripts

62362df

feedbacks

48e1272

alexfauquette force-pushed the quick-filter branch from e5cadb6 to 48e1272 Compare April 6, 2022 15:55

alexfauquette added 3 commits April 6, 2022 17:59

stop exporting removed type

5638410

typo fixes

663af5a

l10n

4178ba3

m4theushw mentioned this pull request Apr 27, 2022

[discussion] Preparing v6 #3287

Closed

41 tasks

flaviendelangle mentioned this pull request Apr 28, 2022

[Data Grid] Ctrl + F does not work on dataGrid #4681

Closed

2 tasks

alexfauquette added 3 commits April 28, 2022 17:58

feedbacks

4271fb6

prettier

e273095

Merge remote-tracking branch 'upstream/master' into quick-filter

ad137fa

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 28, 2022

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Apr 29, 2022

alexfauquette added 3 commits May 2, 2022 15:33

Merge remote-tracking branch 'upstream/master' into quick-filter

85700fd

Mat feedbacks

c5efa4f

Merge remote-tracking branch 'upstream/master' into quick-filter

9cca6c9

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 3, 2022

alexfauquette requested review from m4theushw and joserodolfofreitas May 3, 2022 13:26

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 5, 2022

m4theushw approved these changes May 6, 2022

View reviewed changes

alexfauquette added 3 commits May 6, 2022 16:38

Merge remote-tracking branch 'upstream/master' into quick-filter

77a970e

CSS fixes

63954a9

add quick filter to demos

39c3ade

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 6, 2022

alexfauquette added 2 commits May 9, 2022 10:12

fix demo

321e4a0

Merge remote-tracking branch 'upstream/master' into quick-filter

754022a

alexfauquette merged commit 192fb98 into mui:master May 10, 2022

alexfauquette deleted the quick-filter branch May 10, 2022 09:16

duttakapil21 reviewed May 18, 2022

View reviewed changes

alexfauquette added a commit to alexfauquette/mui-x that referenced this pull request Aug 26, 2022

[DataGrid] Add quick filtering engine (mui#4317)

a9de009

Co-authored-by: José Rodolfo Freitas <joserodolfo.freitas@gmail.com>

oliviertassinari added the component: data grid This is the name of the generic UI component, not the React module! label Jan 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Add quick filtering engine #4317

[DataGrid] Add quick filtering engine #4317

alexfauquette commented Mar 30, 2022 •

edited

Loading

mui-bot commented Mar 30, 2022 •

edited

Loading

m4theushw Apr 5, 2022

alexfauquette Apr 6, 2022

alexfauquette Apr 6, 2022

flaviendelangle Apr 6, 2022

m4theushw Apr 6, 2022 •

edited

Loading

alexfauquette Apr 6, 2022

github-actions bot commented Apr 27, 2022

github-actions bot commented Apr 29, 2022

github-actions bot commented May 5, 2022

m4theushw left a comment

m4theushw May 6, 2022

alexfauquette May 6, 2022

m4theushw May 6, 2022

alexfauquette commented May 6, 2022

duttakapil21 May 18, 2022

alexfauquette May 18, 2022

		colDef: GridStateColDef,
		apiRef: React.MutableRefObject<GridApiCommunity>,

	padding: theme.spacing(0.5, 0.5, 0),
	padding: theme.spacing(0.5),

[DataGrid] Add quick filtering engine #4317

[DataGrid] Add quick filtering engine #4317

Conversation

alexfauquette commented Mar 30, 2022 • edited Loading

TODO

Changelog

mui-bot commented Mar 30, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

m4theushw Apr 6, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Apr 27, 2022

github-actions bot commented Apr 29, 2022

github-actions bot commented May 5, 2022

m4theushw left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexfauquette commented May 6, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexfauquette commented Mar 30, 2022 •

edited

Loading

mui-bot commented Mar 30, 2022 •

edited

Loading

m4theushw Apr 6, 2022 •

edited

Loading