[DataGrid] Customize `FilterPanel` with props #3497

alexfauquette · 2021-12-22T16:09:21Z

Allows modifying the filter panel by using props. It should improve the DX. I let you provide any feedback on the interface. I will add test, after agreeing on how dev should customize this pannel :)

Docs: https://deploy-preview-3497--material-ui-x.netlify.app/components/data-grid/filtering/#customize-the-filter-panel-content

docs/src/pages/components/data-grid/filtering/CustomFilterPanel.tsx

packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx

m4theushw · 2021-12-27T17:25:41Z

packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx

+        sx={[
+          { flexShrink: 0, justifyContent: 'flex-end', marginRight: 0.5, marginBottom: 0.2 },
+          ...(Array.isArray(deleteIconContainerSx)
+            ? deleteIconContainerSx
+            : [deleteIconContainerSx]),
+        ]}


As we discussed, the prop could be renamed to deleteIconContainerProps and allow to override other props of the FormControl.

Suggested change

sx={[

{ flexShrink: 0, justifyContent: 'flex-end', marginRight: 0.5, marginBottom: 0.2 },

...(Array.isArray(deleteIconContainerSx)

? deleteIconContainerSx

: [deleteIconContainerSx]),

]}

{...deleteIconContainerProps}

sx={{

flexShrink: 0,

justifyContent: 'flex-end',

marginRight: 0.5,

marginBottom: 0.2,

...deleteIconContainerProps.sx

}}

Another alternative is to make the FormControl a styled component, then you don't need to care about spreading deleteIconContainerProps.sx, since it's done automatically.

const StyledFormControl = styled(FormControl)({ flexShrink: 0 }); <StyledFormControl {...deleteIconContainerProps} />

DanailH · 2021-12-29T14:40:22Z

docs/src/pages/components/data-grid/filtering/CustomFilterPanel.js

+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        // components={{


Remove commented-out code (or maybe it's still a WIP).

In fact, I was looking for a way to show all the customization options in the same code, and comment on those which are not used in the demo. But yes, that's not explicit enough.

flaviendelangle · 2022-01-05T10:37:31Z

packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx

+  hasLinkOperatorColumn?: boolean;
+  linkOperators?: (GridLinkOperator.And | GridLinkOperator.Or)[];
+  columnsSort?: 'asc' | 'desc';
+  deleteIconContainerSx?: SxProps<Theme>;


@mnajdova in the core how to you handle when you want the user to easily customize the style of nested elements with sx ?

Do you pass down the sx function like this or do you expose the classes and let the user nest inside the root sx ?

I would recommend using components and componentsProps for this. Then developers can do:

<GridFilterForm componentsProps={{ deleteIconContainer: { sx: /* ... */ } }} ... />

At least this is what we do in the @mui/base.

@mnajdova Do you mean using components props to let dev use a custom filter as follow?

const CustomFilterForm = (props) => <GridFilterForm componentsProps={{ deleteIconContainer: { sx: /* ... */ } }} {...props} /> <DataGrid ... components={{ filterForm: CustomFilterForm }}

For now, I tried to use nesting classes as follows. Considering that <FilterPanel /> is the only component user can have access to. The other components are considered as nested ones, and can only be customized by CSS selectors.

<DataGrid ... componentsProps={{ filterPanel: { sx: { "& .MuiDataGrid-filterForm": { ... }, "& .MuiDataGrid-closeIconController": { ... }, ... } } }}

Sorry, for some reason I have missed this comment. If the other nested components can only be customized by CSS selectors, why are you adding this new prop deleteIconContainerSx. It contradicts with the previous statement.

My point was that, we don't add first class props on the component for prop that should be passed on some nested elements, we prefer using componentsProps for this use-case.

github-actions · 2022-01-10T09:32:51Z

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

docs/src/pages/components/data-grid/filtering/filtering.md

packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx

Co-authored-by: Matheus Wichman <matheushw@outlook.com>

DanailH · 2022-02-02T10:16:24Z

packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx

+        {...baseFormControlProps}
+        {...valueInputProps}
+        className={clsx(
+          classes.valueInput,


Maybe this has been already answered but what about when the FilterFormValueInput is the select or the multi-select, will it always has that classes.valueInput class or should we change the class based on the component?

Not already answered. Modifying the class according to the input seems tricky.
We should add a property currentOperator.valueFormControlClass

In my opinion, it is overkilled compared to what most of the dev will probably do with the customization:

removing some option

modifying input size

About the size, classes.valueInput is useful to remove default one. To have customer size depending on the input component, I see two cases:

it is their own input, so they can do whatever they want

it is one of the provided input. They can distinguish single and multiple values with CSS controller, depending on MuiFormControl-root and MuiInput-root

I'm not sure if I'm on the same page here but classes.valueInput is applied to the FormControl that wraps the custom filter input component. In this context, FilterFormValueInput will always be a FormControl, unless the user changes it through the slots.

Yes, we are on the same page

For now, the FormControl is responsible for the width. So to customize the classes.valueInput must be used to add width:'unset'

joserodolfofreitas · 2022-02-04T10:43:15Z

docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx

+              },
+              valueInputProps: {
+                required: true,
+              },


Not sure this is the best way to customize the deleteIcon color.
But I think we could add a simple example for deleteIconProps too.

Suggested change

},

deleteIconProps: {

sx: {

"& .MuiSvgIcon-root": { color: "#f00" }

}

},

Yes, it's better than my reorder which was a bad accessibility practice

github-actions · 2022-02-08T12:24:08Z

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

siriwatknp · 2022-02-08T12:25:23Z

👋 The migration PR has been merged.

Please follow these steps to make sure that the contents are all updated. (Sorry for the inconvenience)

pull latest master from upstream to your branch
if your PR has changes on the *.md or demo files, you are likely to encounter conflict because all of them have been moved to the new folder.
2.1 revert the change on those markdown files you did
2.2 pull latest master from upstream (you should not see conflict)
2.3 make the changes again at docs/data/data-grid/*
run yarn docs:api
- you might see the changes in docs/pages/x/api/data-grid/* if your PR touches some of the components
- it is okay if there is no changes

If you are struggle with the steps above, feel free to tag @siriwatknp

m4theushw

I only found some small details to fix. Well done!

m4theushw · 2022-02-07T17:11:12Z

packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterForm.tsx

        variant="standard"
+        {...baseFormControlProps}


Suggested change

{...baseFormControlProps}

as={rootProps.components.BaseFormControl}

{...baseFormControlProps}

m4theushw · 2022-02-08T16:26:57Z

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

+The customization of the filter panel content can be performed by passing props to the default `<GridFilterPanel />` component.
+The available props allow to override:
+
+- The available `linkOperators` (can contains `GridLinkOperator.And` and `GridLinkOperator.Or`)


There's already "available" in the previous line.

Suggested change

- The available `linkOperators` (can contains `GridLinkOperator.And` and `GridLinkOperator.Or`)

- The `linkOperators` (can contains `GridLinkOperator.And` and `GridLinkOperator.Or`)

m4theushw · 2022-02-08T16:27:19Z

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

+- Any prop of the input components
+
+Input components can be [customized](/customization/how-to-customize/) by using two approaches.
+You can pass a `sx` prop to any input container or you can use css selectors on nested components of the filter panel.


Suggested change

You can pass a `sx` prop to any input container or you can use css selectors on nested components of the filter panel.

You can pass a `sx` prop to any input container or you can use CSS selectors on nested components of the filter panel.

m4theushw · 2022-02-08T16:28:11Z

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

+You can pass a `sx` prop to any input container or you can use css selectors on nested components of the filter panel.
+More details are available in the demo.
+
+| Props                    | Class                                     |


m4theushw · 2022-02-08T16:31:32Z

packages/grid/_modules_/grid/components/panel/filterPanel/GridFilterPanel.tsx

  React.useEffect(() => {
    if (items.length > 0) {
      lastFilterRef.current!.focus();
    }
  }, [items.length]);

  return (
-    <GridPanelWrapper>
+    <GridPanelWrapper sx={sx}>


We usually pass to the root all the remaining props.

mui-x/packages/grid/_modules_/grid/components/menu/GridMenu.tsx

Line 101 in 2bc8e32

{...other}

alexfauquette added 2 commits December 22, 2021 17:05

add props to filter panel

9afd3f4

add doc

129e939

alexfauquette self-assigned this Dec 22, 2021

set default values

0af7213

alexfauquette requested review from DanailH, flaviendelangle and m4theushw and removed request for DanailH and flaviendelangle December 22, 2021 18:20

m4theushw reviewed Dec 27, 2021

View reviewed changes

DanailH reviewed Dec 29, 2021

View reviewed changes

flaviendelangle mentioned this pull request Jan 4, 2022

[DataGridPro] Hide OR operator option from the linkOperators in Multi-column filtering #3386

Closed

2 tasks

flaviendelangle reviewed Jan 5, 2022

View reviewed changes

small PR feedbacks

93e7aa3

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

alexfauquette added 4 commits January 11, 2022 12:10

use class override for style modification

bd3fcdd

Merge remote-tracking branch 'upstream/master' into customize-filters

7651d6b

Merge remote-tracking branch 'upstream/master' into customize-filters

3c9de83

scripts

d421ad9

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

markdownlint

01dbe3e

alexfauquette requested review from m4theushw and flaviendelangle January 14, 2022 09:53

m4theushw reviewed Jan 15, 2022

View reviewed changes

alexfauquette and others added 3 commits January 17, 2022 16:47

Apply suggestions from code review

5b50bf0

Co-authored-by: Matheus Wichman <matheushw@outlook.com>

typing feedbacks and avoid breaking changes

3560f2b

update classes names

2855ab6

alexfauquette added 2 commits February 2, 2022 09:42

Merge remote-tracking branch 'upstream/master' into customize-filters

b2e6453

docs:typescript:formatted

7e659ab

DanailH reviewed Feb 2, 2022

View reviewed changes

joserodolfofreitas reviewed Feb 4, 2022

View reviewed changes

Jose feedback

6c6d6a9

alexfauquette requested a review from m4theushw February 7, 2022 09:37

alexfauquette added 4 commits February 7, 2022 11:15

mat feedbacks on typing

84f4e16

language

29bd314

yarn proptypes

6d5c487

fix lint

72d2886

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

Merge remote-tracking branch 'upstream/master' into customize-filters

64e7767

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

DanailH approved these changes Feb 8, 2022

View reviewed changes

m4theushw approved these changes Feb 8, 2022

View reviewed changes

alexfauquette added 6 commits February 8, 2022 17:39

feedbacks

04a5331

add files removed during migration

f10cb3d

Merge remote-tracking branch 'upstream/master' into customize-filters

7127c06

Fix demo migration

3c8dbf7

Merge remote-tracking branch 'upstream/master' into customize-filters

ec687de

Merge remote-tracking branch 'upstream/master' into customize-filters

cc8ef3e

alexfauquette merged commit 02213e8 into mui:master Feb 10, 2022

alexfauquette changed the title ~~[DataGrid] Customize FilterPanel with props~~ [DataGrid] Customize FilterPanel with props Feb 10, 2022

alexfauquette deleted the customize-filters branch February 10, 2022 13:27

cherniavskii mentioned this pull request Feb 10, 2022

v5.5.1 #3914

Merged

13 tasks

alexfauquette mentioned this pull request Feb 21, 2022

[DataGrid] Add the ability to hide the operators column of the filter panel #2740

Closed

2 tasks

flaviendelangle mentioned this pull request Mar 1, 2022

[DataGrid] GridFilterPanel UI Issue #4061

Closed

2 tasks

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] Customize `FilterPanel` with props #3497

[DataGrid] Customize `FilterPanel` with props #3497

alexfauquette commented Dec 22, 2021 •

edited

Loading

m4theushw Dec 27, 2021 •

edited

Loading

DanailH Dec 29, 2021

alexfauquette Jan 6, 2022

flaviendelangle Jan 5, 2022

mnajdova Jan 11, 2022

alexfauquette Jan 11, 2022 •

edited

Loading

mnajdova Jan 27, 2022

github-actions bot commented Jan 10, 2022

DanailH Feb 2, 2022

alexfauquette Feb 2, 2022

m4theushw Feb 3, 2022

alexfauquette Feb 3, 2022

joserodolfofreitas Feb 4, 2022 •

edited

Loading

alexfauquette Feb 7, 2022 •

edited

Loading

github-actions bot commented Feb 8, 2022

siriwatknp commented Feb 8, 2022 •

edited

Loading

m4theushw left a comment •

edited

Loading

m4theushw Feb 7, 2022

m4theushw Feb 8, 2022

m4theushw Feb 8, 2022

m4theushw Feb 8, 2022

m4theushw Feb 8, 2022

-              },
+              deleteIconProps: {
+                sx: {
+                  "& .MuiSvgIcon-root": { color: "#f00" }
+                }
+              },

	{...baseFormControlProps}
	as={rootProps.components.BaseFormControl}
	{...baseFormControlProps}

	- The available `linkOperators` (can contains `GridLinkOperator.And` and `GridLinkOperator.Or`)
	- The `linkOperators` (can contains `GridLinkOperator.And` and `GridLinkOperator.Or`)

	You can pass a `sx` prop to any input container or you can use css selectors on nested components of the filter panel.
	You can pass a `sx` prop to any input container or you can use CSS selectors on nested components of the filter panel.

[DataGrid] Customize FilterPanel with props #3497

[DataGrid] Customize FilterPanel with props #3497

Conversation

alexfauquette commented Dec 22, 2021 • edited Loading

m4theushw Dec 27, 2021 • 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

Choose a reason for hiding this comment

alexfauquette Jan 11, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jan 10, 2022

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

joserodolfofreitas Feb 4, 2022 • edited Loading

Choose a reason for hiding this comment

alexfauquette Feb 7, 2022 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Feb 8, 2022

siriwatknp commented Feb 8, 2022 • edited Loading

m4theushw left a comment • 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

[DataGrid] Customize `FilterPanel` with props #3497

[DataGrid] Customize `FilterPanel` with props #3497

alexfauquette commented Dec 22, 2021 •

edited

Loading

m4theushw Dec 27, 2021 •

edited

Loading

alexfauquette Jan 11, 2022 •

edited

Loading

joserodolfofreitas Feb 4, 2022 •

edited

Loading

alexfauquette Feb 7, 2022 •

edited

Loading

siriwatknp commented Feb 8, 2022 •

edited

Loading

m4theushw left a comment •

edited

Loading