[DataGrid] Allow to filter non-filterable columns programmatically #11538

MBilalShafi · 2024-01-01T13:26:39Z

Handles colDef.filterable part of [data grid] v7 API: Make the behavior of GridColDef flags consistent #10552
Fixes [data grid] Filtering on non filterable columns yield weird behavior #11527

ToDos:

Update tests
Update docs (added a section specific to filter, another generic covering the broader concept covered in the other PR, could possibly be added to the upcoming FAQ page too)
Update migration guide (this generic one added in the other PR should serve the broader concept)

Doc: https://deploy-preview-11538--material-ui-x.netlify.app/x/react-data-grid/filtering/#read-only-filters
Example usage: https://codesandbox.io/p/sandbox/bold-platform-9jg53c?file=%2Fsrc%2FDemo.tsx%3A41%2C9

Changelog

Breaking changes

Non-filterable columns could now be filtered programmatically by controlling or initialing filterModel, or by updating the filterModel by API method apiRef.current.setFilterModel.

mui-bot · 2024-01-01T13:31:03Z

Deploy preview: https://deploy-preview-11538--material-ui-x.netlify.app/

Updated pages:

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

Generated by 🚫 dangerJS against 81497f6

MBilalShafi · 2024-01-02T06:47:36Z

docs/data/data-grid/filtering/ReadOnlyFilters.js

Since the MIT Grid allows one filter at a max, I have allowed clearing the read-only filter by adding a filter on another column. Users can prevent this by controlling the filter and not updating the filterModel on filterModelChange.

MBilalShafi · 2024-01-02T10:13:13Z

packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx

@@ -232,6 +238,7 @@ const GridFilterForm = React.forwardRef<HTMLDivElement, GridFilterFormProps>(
    const classes = useUtilityClasses(rootProps);
    const valueRef = React.useRef<any>(null);
    const filterSelectorRef = React.useRef<HTMLInputElement>(null);
+    const multiFilterOperator = filterModel.logicOperator ?? GridLogicOperator.And;


Solves https://codesandbox.io/p/sandbox/zealous-shamir-jktxkz?file=%2Fsrc%2FDemo.tsx%3A20%2C11 i.e filterModel.logicOperator is undefined on initializing multiple filters. This issue is on next and not on master. Let me know if there's a better fix you are aware of.

Shouldn't it be Or by default?

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

Lines 16 to 18 in 243ae70

* @default `GridLogicOperator.Or`

*/

logicOperator?: GridLogicOperator;

Interesting point. @cherniavskii
I feel this @default GridLogicOperator.Or statement is incorrect. Because if you check the current behavior on https://mui.com/x/react-data-grid/filtering/multi-filters/ it's GridLogicOperator.And (try adding 2-3 filters without touching logic operator)
Any guesses if I should update the default value on this prop or the default behavior on the attached demo is incorrect?

Indeed, here we set the default logic operator:

mui-x/packages/grid/x-data-grid/src/hooks/features/filter/gridFilterState.ts

Lines 8 to 10 in 69f1ca4

export const getDefaultGridFilterModel: () => GridFilterModel = () => ({

items: [],

logicOperator: GridLogicOperator.And,

Feel free to update the jsdoc to reflect the actual default value 👍🏻

MBilalShafi · 2024-01-02T10:24:29Z

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

@@ -103,6 +103,26 @@ You can use the `onFilterModelChange` prop to listen to changes to the filters a

 {{"demo": "ControlledFilters.js", "bg": "inline", "defaultCodeOpen": false}}

+### Read-only filters
+
+You can initialize the `filterModel`, set the `filterModel` prop, or use `apiRef.current.setFilterModel` to define the filters for columns with `colDef.filterable` set to `false`. These filters will be applied but the user won't be able to change them.


A small possible positive side effect would be this kind of filtering will now be possible in read-only mode without tweaking groupingColDef.

packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx

MBilalShafi · 2024-01-10T10:52:42Z

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

@@ -127,6 +127,26 @@ In the example below, the _rating_ column can not be filtered.

 {{"demo": "DisableFilteringGridSomeColumns.js", "bg": "inline", "defaultCodeOpen": false}}

+### Filter non-filterable columns programmatically


Update in context of #11512 (comment)
Sidenote: I've kept internal variable naming to have the keyword readOnly for better understanding. The alternative disabled may also convey not visible at all, so to me readOnly is the more readable naming choice (on a dx perspective).
Let me know if there's a disagreement.

github-actions · 2024-01-10T19:42:07Z

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

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

cherniavskii · 2024-01-11T20:06:43Z

docs/pages/x/api/date-pickers/desktop-date-range-picker.json

@@ -205,30 +205,6 @@
      "default": "ArrowDropDown",
      "class": null
    },
-    {


@alexfauquette This seems to be a side-effect of #11303, some items are reordered for no reason after yarn docs:api. Any idea why this happens?

@michaldudak Should we sort them in a specific order?

IMO slots order should reflect the source. Usually we want to have the root slot at the top. Or we could sort them alphabetically but place 'root' at the top.

By the way it can be a configuration parameter: sortingStrategy: { porps, classes, slots } with either the sort callback or null if no sorting

Co-authored-by: Andrew Cherniavskii <[email protected]> Signed-off-by: Bilal Shafi <[email protected]>

[DataGrid] Introduce read-only filters

f876266

MBilalShafi added breaking change component: data grid This is the name of the generic UI component, not the React module! feature: Filtering Related to the data grid Filtering feature v7.x labels Jan 1, 2024

MBilalShafi mentioned this pull request Jan 1, 2024

[data grid] v7 API: Make the behavior of GridColDef flags consistent #10552

Closed

5 tasks

MBilalShafi commented Jan 2, 2024

View reviewed changes

Fix issue of not initializing operator

0197ca8

MBilalShafi commented Jan 2, 2024

View reviewed changes

MBilalShafi mentioned this pull request Jan 3, 2024

[DataGrid] Allow to programmatically sort unsortable columns #11512

Merged

2 tasks

Add tests and run proptypes

73ec029

MBilalShafi requested review from romgrk and cherniavskii January 3, 2024 15:57

MBilalShafi marked this pull request as ready for review January 3, 2024 15:58

Fix the test for JSDom

bd97d9b

MBilalShafi commented Jan 10, 2024

View reviewed changes

packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx Outdated Show resolved Hide resolved

MBilalShafi added 2 commits January 10, 2024 15:13

Merge branch 'next' into fix-10552/filterable

02174e6

Update documentation

2fbdec1

MBilalShafi commented Jan 10, 2024

View reviewed changes

MBilalShafi changed the title ~~[DataGrid] Introduce read-only filters~~ [DataGrid] Allow to filter non-filterable columns programmatically Jan 10, 2024

Use filterableColumnsLookup

c2f354c

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

MBilalShafi added 2 commits January 11, 2024 13:25

Merge branch 'next' into fix-10552/filterable

1aeb33a

docs:api

243ae70

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

cherniavskii approved these changes Jan 11, 2024

View reviewed changes

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

fd6b776

Co-authored-by: Andrew Cherniavskii <[email protected]> Signed-off-by: Bilal Shafi <[email protected]>

MBilalShafi added 2 commits January 12, 2024 22:49

Merge branch 'next' into fix-10552/filterable

19386b1

:(

81497f6

MBilalShafi merged commit 1a841bb into mui:next Jan 13, 2024
17 checks passed

MBilalShafi deleted the fix-10552/filterable branch January 13, 2024 15:06

MBilalShafi mentioned this pull request Jan 13, 2024

[DataGrid] Fix incorrect default value for filterModel.logicOperator #11673

Merged

alexfauquette mentioned this pull request Jan 15, 2024

[code-infra] Refined docs generation mui/material-ui#40603

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Allow to filter non-filterable columns programmatically #11538

[DataGrid] Allow to filter non-filterable columns programmatically #11538

MBilalShafi commented Jan 1, 2024 •

edited

Loading

mui-bot commented Jan 1, 2024 •

edited

Loading

MBilalShafi Jan 2, 2024

MBilalShafi Jan 2, 2024

cherniavskii Jan 11, 2024

MBilalShafi Jan 12, 2024 •

edited

Loading

cherniavskii Jan 12, 2024

MBilalShafi Jan 2, 2024 •

edited

Loading

MBilalShafi Jan 10, 2024 •

edited

Loading

github-actions bot commented Jan 10, 2024

cherniavskii Jan 11, 2024

alexfauquette Jan 12, 2024

michaldudak Jan 16, 2024

alexfauquette Jan 16, 2024

	* @default `GridLogicOperator.Or`
	*/
	logicOperator?: GridLogicOperator;

	export const getDefaultGridFilterModel: () => GridFilterModel = () => ({
	items: [],
	logicOperator: GridLogicOperator.And,

		@@ -127,6 +127,26 @@ In the example below, the _rating_ column can not be filtered.

		{{"demo": "DisableFilteringGridSomeColumns.js", "bg": "inline", "defaultCodeOpen": false}}

		### Filter non-filterable columns programmatically

[DataGrid] Allow to filter non-filterable columns programmatically #11538

[DataGrid] Allow to filter non-filterable columns programmatically #11538

Conversation

MBilalShafi commented Jan 1, 2024 • edited Loading

Changelog

Breaking changes

mui-bot commented Jan 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MBilalShafi Jan 12, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MBilalShafi Jan 2, 2024 • edited Loading

Choose a reason for hiding this comment

MBilalShafi Jan 10, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Jan 10, 2024

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

MBilalShafi commented Jan 1, 2024 •

edited

Loading

mui-bot commented Jan 1, 2024 •

edited

Loading

MBilalShafi Jan 12, 2024 •

edited

Loading

MBilalShafi Jan 2, 2024 •

edited

Loading

MBilalShafi Jan 10, 2024 •

edited

Loading