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.51k stars 1.31k forks source link

[data grid] autoHeight property affects calculating size of expanded columns #15253

Open tdq opened 1 day ago

tdq commented 1 day ago

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/wispy-fire-tn7d4l

Steps:

  1. Open demo
  2. Resize screen so all columns are visible and there is empty space between them and right pinned column
  3. Click Resize columns button couple of times and in this case it sets columns expanded but they are not fitting the whole available space.
  4. Click Switch auto height, so it will be set to true and click Resize columns again couple of times.

Basically the issue is that if autoHeight is set to false or not set at all, expanded columns are not able to take the whole available space. Empty space is exactly the same width as summary size of all pinned columns. Groups affecting first render. If groups are not set then at the beginning columns takes the whole available space, but after resizing empty space appears.

Current behavior

By calling apiRef.current.autosizeColumns({expand: true}), columns are not taking the whole available space

Expected behavior

By calling apiRef.current.autosizeColumns({expand: true}), columns should take the whole available space

Context

The task is to switch between two ways of expanding columns:

  1. User should be able to select expand columns by the whole content
  2. User should be able to select expand columns by their content

Your environment

npx @mui/envinfo Used browsers: FireFox, Chrome System: OS: macOS 15.1 Binaries: Node: 22.9.0 - /opt/homebrew/bin/node npm: 10.8.3 - /opt/homebrew/bin/npm pnpm: Not Found Browsers: Chrome: 130.0.6723.92 Edge: Not Found Safari: 18.1 npmPackages: @emotion/react: ^11.10.5 => 11.13.3 @emotion/styled: ^11.10.5 => 11.13.0 @mui/core-downloads-tracker: 5.16.7 @mui/icons-material: ^5.16.7 => 5.16.7 @mui/material: ^5.16.7 => 5.16.7 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/system: 5.16.7 @mui/types: 7.2.16 @mui/utils: 5.16.6 @mui/x-data-grid: 7.22.1 @mui/x-data-grid-premium: ^7.14.0 => 7.22.1 @mui/x-data-grid-pro: 7.22.1 @mui/x-date-pickers: ^7.14.0 => 7.22.1 @mui/x-internals: 7.21.0 @mui/x-license: 7.21.0 @types/react: 18.3.12 => 18.3.12 react: 18.3.1 => 18.3.1 react-dom: 18.3.1 => 18.3.1 typescript: 5.5.4 => 5.5.4

Search keywords: autoHeight datagrid Order ID: 81026

michelengelen commented 1 day ago

Using the autoHeight prop is deprecated, so please use the new flex parent container approach instead.

michelengelen commented 1 day ago

This is actually a regression as it was working for v6: Demo Thanks for opening it @tdq 🙇🏼

tdq commented 1 day ago

Thank you @michelengelen :)