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.16k stars 1.3k forks source link

Autoresize does not properly resize columns that are scrolled far off screen when the resize is requested #15048

Open Blargel opened 2 days ago

Blargel commented 2 days ago

Steps to reproduce

Link to live example: (required) https://codesandbox.io/p/sandbox/condescending-paper-lfpgkq?from-embed=&workspaceId=ff0972be-f965-4d9b-9731-28487014ad71

Steps:

  1. Make sure your viewport is narrow enough that a large portion of the columns cannot be displayed and must be scrolled
  2. Click the autosize columns button
  3. Scroll the columns all the way to the right and observe that the last few columns have not been resized properly

Current behavior

Columns that are far outside of the viewport at the time the resize is requested are not resized properly. The narrower your viewport, the more columns will be improperly resized. If your viewport happens to be wide enough, the resizing will work fine.

Expected behavior

All columns should be resized correctly regardless of viewport

Context

I am displaying a data grid with a large amount of columns. The rows are fetched from a server and then the columns are resized automatically once fetching is complete. I would like for the columns to properly resize themselves instead of hardcoding some minimum widths to the columns which I am currently doing to work around the issue.

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: 129.0.6668.101 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.3 @mui/icons-material: ^6.0.0 => 6.1.3 @mui/material: ^6.0.0 => 6.1.3 @mui/private-theming: 6.1.3 @mui/styled-engine: 6.1.3 @mui/system: ^6.0.0 => 6.1.3 @mui/types: 7.2.18 @mui/utils: 6.1.3 @mui/x-data-grid: ^7.3.0 => 7.20.0 @mui/x-data-grid-pro: ^7.4.0 => 7.20.0 @mui/x-date-pickers: ^7.1.1 => 7.20.0 @mui/x-date-pickers-pro: ^7.3.1 => 7.20.0 @mui/x-internals: 7.20.0 @mui/x-license: ^7.2.0 => 7.20.0 @types/react: ^18.3.1 => 18.3.11 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 typescript: ^5.5.0 => 5.6.3 ```

This was tested on Firefox and Chrome.

Search keywords: datagrid autoresize resize

Order ID or Support Key

89478 (sorry for the edit, the person with the receipt wasn't available to give it to me until just now)

KenanYusuf commented 23 hours ago

This indeed looks like a bug - I will add it to the board for prioritisation.