[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

[github-actions[bot]]

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