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.56k stars 1.33k forks source link

[data grid] disableColumnMenu prop causes incorrect auto resize measurements on header #15266

Open Blargel opened 3 weeks ago

Blargel commented 3 weeks ago

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/stupefied-hawking-6vsm9f

Steps:

  1. Ensure "Include Headers" is checked.
  2. Click "Autosize columns" button.
  3. Observe that the column headers are ever so slightly too narrow to display the header text entirely.

Current behavior

When the Data Grid has the prop disableColumnMenu set to true, and a column is sortable, the header width for that column is measured slightly incorrectly during resize, causing the text to be cut off. If you remove the disableColumnMenu prop, or you make a column not sortable, the text will not be cut off after resizing.

Expected behavior

The header text should not be cut off after resizing regardless of the disableColumnMenu prop and the sortability of the column.

Context

I have the disableColumnMenu prop set on the DataGrid because I have a different UI to handle the same options outside of the DataGrid. I am loading the data for the rows from a server and then resizing afterwards. When the data is empty, all sortable columns have their text cut off.

Your environment

npx @mui/envinfo ``` System: OS: macOS 14.6.1 Binaries: Node: Not Found npm: 10.9.0 - ~/projects/platform-web/node_modules/.bin/npm pnpm: Not Found Browsers: Chrome: 130.0.6723.92 Edge: Not Found Safari: 17.6 npmPackages: @emotion/react: ^11.11.4 => 11.13.3 @emotion/styled: ^11.11.0 => 11.13.0 @mui/core-downloads-tracker: 6.1.6 @mui/icons-material: ^6.0.0 => 6.1.6 @mui/material: ^6.0.0 => 6.1.6 @mui/private-theming: 6.1.6 @mui/styled-engine: 6.1.6 @mui/system: ^6.0.0 => 6.1.6 @mui/types: 7.2.19 @mui/utils: 6.1.6 @mui/x-data-grid: ^7.3.0 => 7.22.1 @mui/x-data-grid-pro: ^7.4.0 => 7.22.1 @mui/x-date-pickers: ^7.1.1 => 7.22.1 @mui/x-date-pickers-pro: ^7.3.1 => 7.22.1 @mui/x-internals: 7.21.0 @mui/x-license: ^7.2.0 => 7.21.0 @types/react: ^18.3.1 => 18.3.12 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 typescript: ^5.5.0 => 5.6.3 ```

Tested on Firefox and Chrome

Search keywords: datagrid autoresize resize disableColumnMenu header sortable Order ID: 89478

k-rajat19 commented 3 weeks ago

this looks like a regression it is working in v6 https://v6.mui.com/x/react-data-grid/column-dimensions/#autosizing @michelengelen what do you think?

michelengelen commented 2 weeks ago

I think this is more likely a bug, then a regression. The test cases are a bit skewed since they deviate from each other. I aligned them and noticed that the autosizing probably misses to add the menu dimensions:

v6 (working):

https://github.com/user-attachments/assets/0e0d4e06-2375-42d6-a95c-996daedb0f82

v7 (broken):

https://github.com/user-attachments/assets/f082a915-13a6-4e85-b973-db736c59478f

Adding it to the board! 👍🏼