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!
Make sure your viewport is narrow enough that a large portion of the columns cannot be displayed and must be scrolled
Click the autosize columns button
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.
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:
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
``` 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 ```npx @mui/envinfo
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)