[data grid] filter apply only when click on button of "apply button"

[andytsoi1]

Summary 💡

The current x-data-grid filter panel is filtering after user input, but I don't want it to filter every time user input, I want to have a "apply filter" button on the footer, so it only filters when user click that button.

Examples 🌈

No response

Motivation 🔦

When we do backend filter, we don't want to waste network api request when user have not finish the filter selection and submitting meaning less api request.

Search keywords: datagrid GridPanelPanel filter

[cherniavskii]

Related issue: the filters are always applied when the user opens the filter panel. This can be avoided.

We can explore two options here:

1. Operate on the local state in the filter panel, and update the global filter state when necessary (on "Apply" button click or as you type (default)). This can also solve the issue described above.
2. Put the applyFilters() behind a prop:

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

   Line 318 in ddd95ee

   apiRef.current.unstable_applyFilters();

   
   This way, the grid filter state will always be updated, but the filters won't be applied automatically.
   With this approach, we need to revert the grid filter state if the user closes the filter panel without applying the filters.

Side note: creating a custom filter panel is hard – there's no way to reuse the logic from GridFilterPanel.
This is a higher priority than applying filters on button click.

[ngal-r7]

Hello,
Please let us know what is required for this feature to be implemented. The current behavior is impractical to use for server-side filtering.
Thanks

[andytsoi1]

Hello, Please let us know what is required for this feature to be implemented. The current behavior is impractical to use for server-side filtering. Thanks

Should have a optional param for it, so it doesn't trigger the search onChange, but trigger on click of the "apply" filter button

[jdalzatec]

As a workaround, you can set a debounce (debounceMs) to wait some milliseconds to make the request to the server. But yes, having a button to apply filters would be much nicer.

[barrar]

This is a valuable key feature. When using server side filtering logic some operations can take quite a while. It's best to only trigger an update when necessary, such as when an apply button is clicked.

[jerichardson-r7]

Hey @cherniavskii I saw you moved this into Ready 🙂 does this mean this feature is likely to be worked on soon? We're having issues that an apply button would solve.

[kfowler1337]

Any update on this being added? M team would be interested in using this. It is less than ideal having filters be applied every time one is added when dealing with server side filtering.