search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.04k stars 1.24k forks source link

[data grid] How to autosize and header filters work well? #13802

Open mauro-ni opened 1 month ago

mauro-ni commented 1 month ago

The problem in depth

Header filters and autosize don't work well together. When a column as a short header and short content then header filter is unusable: autosize should consider the presence of header filters.

Please look at first column in the following example: https://stackblitz.com/edit/react-gx1hi5-rafoe7?file=Demo.js

Is there a way to tell the library to consider header filters? Is this a bug?

Many thanks in advance for your help, Mauro

Your environment

`npx @mui/envinfo` ``` I'm using Google Chrome 126.0.6478.127 System: OS: macOS 14.5 Binaries: Node: 22.4.1 - /usr/local/bin/node npm: 10.8.1 - /usr/local/bin/npm pnpm: Not Found Browsers: Chrome: 126.0.6478.127 Edge: Not Found Safari: 17.5 npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/base: 5.0.0-beta.45 @mui/core-downloads-tracker: 5.16.0 @mui/icons-material: 5.16.0 => 5.16.0 @mui/lab: ^5.0.0-alpha.171 => 5.0.0-alpha.171 @mui/material: ^5.16.0 => 5.16.0 @mui/private-theming: 5.16.0 @mui/styled-engine: 5.15.14 @mui/system: ^5.16.0 => 5.16.0 @mui/types: 7.2.14 @mui/utils: 5.16.0 @mui/x-data-grid: 7.9.0 @mui/x-data-grid-premium: ^7.9.0 => 7.9.0 @mui/x-data-grid-pro: 7.9.0 @mui/x-date-pickers: 7.9.0 @mui/x-date-pickers-pro: ^7.9.0 => 7.9.0 @mui/x-internals: 7.9.0 @mui/x-license: ^7.9.0 => 7.9.0 @mui/x-tree-view: ^7.9.0 => 7.9.0 @types/react: 18.0.14 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: 5.1.6 ```

Search keywords: datagrid autosize header filters Order ID: 47709

MBilalShafi commented 1 month ago

Hey @mauro-ni,

Thanks for reporting. I can confirm the auto size functionality doesn't support sizing based on the header filter row content as of now. I'll move this to the board for the team to prioritize.

Having said that, would you prefer to have this functionality on by default, or opt-in using something like autosizeOptions.includeHeaderFilters?

mauro-ni commented 1 month ago

Hi @MBilalShafi , many thanks for the reply.

Personally, I think that this functionality should be on by default when the headerFilters prop is set to true. Maybe in order to give developers more control on it, it could be useful define autosizeOptions.includeHeaderFilters and set it to true be default.

What do you think?

Many thanks again, Mauro

mauro-ni commented 3 weeks ago

Good morning, is there any update on this issue? When will it be addressed?

Many thanks, Mauro

MBilalShafi commented 3 weeks ago

Hey Mauro,

The issue is already in the pipeline, a team member would pick it up as soon as bandwidth is available. You could fire a PR yourself if you want; that's the fastest way to have the feature available sooner.

Thank you.