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.54k stars 1.32k forks source link

[data grid] Autosize not resizing columns properly when rows are fetched asynchronously #14754

Open Astro-Virens opened 1 month ago

Astro-Virens commented 1 month ago

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/elastic-poitras-zlvs3v

Steps:

  1. Datagrid has the autoSizeOnMount property set to true, autosizeOptions contains expand: true
  2. Data is fetched

Current behavior

Columns do not fit the datagrid and horizontal scrollbar is visible when data is fetched asynchronously. Problem seems to happen only when there's a certain number of rows. In the example, it's 10. Under 10, the autosize feature works well.

Expected behavior

All columns should fit inside the datagrid without horizontal scrollbar showing.

Context

This is especially annoying when the last column is aligned to the right, hiding important information. The user should be able to view the column without having to scroll.

Your environment

npx @mui/envinfo ``` System: OS: Windows 10 10.0.19044 Binaries: Node: 21.7.1 - C:\Program Files\nodejs\node.EXE npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: 128.0.6613.138 npmPackages: @emotion/react: 11.13.0 => 11.13.0 @emotion/styled: 11.13.0 => 11.13.0 @mui/core-downloads-tracker: 6.1.0 @mui/icons-material: 6.1 => 6.1.0 @mui/material: 6.1 => 6.1.0 @mui/private-theming: 6.1.0 @mui/styled-engine: 6.1.0 @mui/system: 6.1 => 6.1.0 @mui/types: 7.2.16 @mui/utils: 6.1 => 6.1.0 @mui/x-charts: 7.17.0 => 7.17.0 @mui/x-charts-vendor: 7.16.0 @mui/x-data-grid: 7.17.0 => 7.17.0 @mui/x-date-pickers: 7.17.0 => 7.17.0 @mui/x-internals: 7.17.0 @types/react: 18.3.3 => 18.3.3 react: 18.3.1 => 18.3.1 react-dom: 18.3.1 => 18.3.1 typescript: 5.4.5 => 5.4.5 ```

Search keywords: DataGrid Autosize

michelengelen commented 1 month ago

Thanks for reporting this @Astro-Virens ... it looks like autosizing is broken atm. It is reproducible in the docs as well: Autosizing

I'll add this to the board.

michelengelen commented 1 month ago

It's actually also a regression, as this was working in v6.

k-rajat19 commented 1 month ago

@Astro-Virens have you tried the approach used in this doc section, I think it will resolve the issue?

Astro-Virens commented 1 month ago

@Astro-Virens have you tried the approach used in this doc section, I think it will resolve the issue?

Thank you for your comment! While it does work, @michelengelen is still correct in saying it was working correctly in v6. Here's the same live example in the issue description, but using DataGrid Pro v6.18 : https://codesandbox.io/p/sandbox/great-shaw-q6qcmx?workspaceId=75e68ec4-eb1d-43d2-b477-1f75b2deccbd