[DataGrid] Distinguish removed filter in onFilterModelChange

[ThomasJanUta]

When removing a filter with the "x" in the filter panel, a callback "onFilterModelDelete" is triggered. Please add a prop to the XGrid API.

• I have searched the issues of this repository and believe that this is not a duplicate.
• I have looked at the code regarding the filter panel.

Summary 💡

Similar to onFilterModelChange a callback is triggered with the deleted filter model item { columnField: 'commodity', operatorValue: 'contains', value: 'rice' } as a prop type.
In contrast to onFilterModelChange, it can be clearly distinguished which filter model triggered the callback.

Motivation 🔦

In my project I have additional filters that are separate from the filter panel. The filters are managed separately from XGrid's filter model. I was successful aligning changes with the onFilterModelChange event. However, removing a filter in the panel cannot be clearly distinguised in the onFilterModelChange event. I ended up getting infinite loops, not getting the right filter model, or not being able to distinguish between deletions and value changes.

Contribute

I might be able to get this done myself and add this as a pull request. I was not successful finding out how the onFilterModelChange is triggered and how it is passed as a prop in the API. Hints with links to the code in regard to the implementation would help me, too.

Alternative implementation

I found a custom component in Material UI's storybook. However it is not documented and there are styling errors. How can I access the code for these stories?
If I could customize the filter panel directly I would not need additional filters that are separate from the filter panel.
Regarding my use case, I would not know how replace the selection with checkboxes or any other component or connect it to XGrid's filter model.
For my use case, the deletion event would suffice.

Order id 💳

Order '#24683'

[dtassone]

TBH, I do not see much value in adding onFilterModelDelete property. You can just use onFilterModelChange, keep the model in state, and when you delete a filter you can compare the model in state with the model in params, and see which filters were removed.

[oliviertassinari]

removing a filter in the panel cannot be clearly distinguised in the onFilterModelChange event.

See mui/material-ui#19959 for how we solve the exact same problem in the Autocomplete. We added a reason argument and which item in the state was changed.

I believe we can do the same here.