[data grid] I would like to display the data-grid filter panel elsewhere

[jvskriubakken]

The problem in depth

I do not like how the filter panel is displayed by default, as it hides the first rows in the grid. Making it difficult for the user to see if he/she is happy with the search result.

Therefore I would like to display it rather inlined above (in the grid toolbar) or below (in the grid footer) the grid. Also the possibility to render it completely somewhere else.

But I struggle to find any good examples on this.

Your environment

System:
    OS: macOS 14.2.1
  Binaries:
    Node: 18.20.2 - /usr/local/bin/node
    npm: 10.5.0 - /usr/local/bin/npm
    pnpm: 8.15.4 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 126.0.6478.62
    Edge: Not Found
    Safari: 17.2.1
  npmPackages:
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.19 
    @mui/icons-material: 5.15.15 => 5.15.15 
    @mui/lab: 5.0.0-alpha.170 => 5.0.0-alpha.170 
    @mui/material: 5.15.19 => 5.15.19 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine-sc: npm:@mui/styled-engine-sc@latest => 6.0.0-alpha.17 
    @mui/styles: 5.15.19 => 5.15.19 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-charts: 7.6.2 => 7.6.2 
    @mui/x-data-grid:  7.6.2 
    @mui/x-data-grid-premium: 7.6.2 => 7.6.2 
    @mui/x-data-grid-pro:  7.6.2 
    @mui/x-date-pickers:  7.6.2 
    @mui/x-date-pickers-pro: 7.6.2 => 7.6.2 
    @mui/x-license:  7.6.1 
    @mui/x-tree-view: 7.6.2 => 7.6.2 
    @types/react: 18.3.1 => 18.3.1 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    styled-components: 6.1.8 => 6.1.8 
    typescript: 5.4.5 => 5.4.5 

Search keywords: data grid filter panel
Order ID: 54140

[harshanimmala-sureify]

You can use GridFilterPanel component. This would allow you to render the same component outside. You can disable the existing panel via props.

[michelengelen]

You can change the anchor of the filterpanel. This can also be one that is outside of the grid afaik. Here is the respective docs page: Custom filter panel position