[data grid] Filter Panel Customization

[rajeshreddy-bheemireddy]

The problem in depth

We are trying to customize the Filters options on the datagrid, currently, we need a Apply Filters button in the footer where we can fill all the filters and apply the filters so that we can fetch new sets of data and display them on the grid.
Current functionality is on change of the filter the data is getting filtered on the page level we don't need that.
Could you please point out to me any example or reference where I can find this type of functionality?
I see there is a closed issue related to this but I did not get much information from that.

Closed issue: Link

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.

     Using Chrome browser.

  Output from `npx @mui/envinfo` goes here.

   System:
    OS: macOS 13.3.1
  Binaries:
    Node: 20.1.0 - ~/.nvm/versions/node/v20.1.0/bin/node
    Yarn: Not Found
    npm: 9.6.4 - ~/.nvm/versions/node/v20.1.0/bin/npm
  Browsers:
    Chrome: 121.0.6167.160
    Edge: Not Found
    Safari: 16.4
  npmPackages:
    @emotion/react: ^11.9.0 => 11.11.1 
    @emotion/styled: ^11.8.1 => 11.11.0 
    @mui/base:  5.0.0-beta.13 
    @mui/core-downloads-tracker:  5.14.7 
    @mui/icons-material: ^5.8.0 => 5.14.7 
    @mui/lab: ^5.0.0-alpha.83 => 5.0.0-alpha.142 
    @mui/material: ^5.10.17 => 5.14.7 
    @mui/private-theming:  5.14.7 
    @mui/styled-engine:  5.14.7 
    @mui/system:  5.14.7 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.15 
    @mui/x-data-grid:  6.17.0 
    @mui/x-data-grid-premium: ^6.16.2 => 6.17.0 
    @mui/x-data-grid-pro: ^6.3.0 => 6.17.0 
    @mui/x-license-pro: ^6.0.4 => 6.10.2 
    @types/react: ^17.0.0 => 17.0.65 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: ^5.3.0 => 5.3.11 
    typescript: ^3.9.3 => 3.9.10

Search keywords: Filter Panel, GridToolbarFilterButton, Filter Footer
Order ID: 75705

[michelengelen]

Hey @rajeshreddy-bheemireddy
We do have documentation about how to customize your filter panel. In your case you would probably need a fully customized filter panel that holds the state on the filters on its own and then passes it on submit, correct?

If that's the case you can build a fully customized panel by just replacing the default one like this:

<DataGrid
  rows={rows}
  columns={columns}
  slots={{
    filterPanel: YourCustomFilterPanel,
  }}
/>

There is a page in our documentation about how to build custom subcomponents as well. You can find it here: Custom Subcomponents

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.