[data grid] column resize issue with tree data

[toddsmith-adsk]

Steps to reproduce

Steps:

1. Open this link to live example: (example)
2. Expand all items in the Group tree column

Current behavior

Columns are not wide enough

Example from my own app

paused in debugger after call to root.classList.add(gridClasses.autosizing);

Expected behavior

Wider columns that fit all the data

Context

No response

Your environment

npx @mui/envinfo

System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 18.19.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.7.1 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (127.0.2651.105)
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.5
    @emotion/styled: ^11.13.0 => 11.13.5
    @mui/base:  5.0.0-beta.62
    @mui/core-downloads-tracker:  6.1.8
    @mui/icons-material: ^6.1.7 => 6.1.8
    @mui/lab: ^6.0.0-beta.15 => 6.0.0-beta.16
    @mui/material: ^6.1.7 => 6.1.8
    @mui/private-theming:  6.1.8
    @mui/styled-engine:  6.1.8
    @mui/system:  6.1.8
    @mui/types:  7.2.19
    @mui/utils:  6.1.8
    @mui/x-data-grid: ^7.22.2 => 7.22.3
    @mui/x-data-grid-premium: ^7.22.2 => 7.22.3
    @mui/x-data-grid-pro:  7.22.3
    @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.6.3 => 5.7.2

Search keywords: column resize tree data
Order ID: 86253

[michelengelen]

Ok, I just tested this and it indeed is a bit unexpected that it's not properly respecting the expanded cells. The reason is actually a race condition. The autosizing happens before the new rows are showing.

As a workaround you can wrap the autosizing in a timeout:

const handleRowExpansionChange: GridEventListener<'rowExpansionChange'> = (params: any) => {
  console.log('rowExpansionChange: ', params);

  setTimeout(
    () =>
      apiRef.current.autosizeColumns({
        columns: ['__tree_data_group__'],
        includeOutliers: true,
      }),
    0,
  );
};

I'll add this to the board so that the team can pick it up and properly handle it.
Thanks for opening it! 👍🏼

[toddsmith-adsk]

Adding the timeout event with a 1s delay did not resolve the issue.

[michelengelen]

Adding the timeout event with a 1s delay did not resolve the issue.

Seems like the leaf row is not calculated correctly ... might be a different bug though.