[data grid] `autosizeColumns` on `columnVisibilityModelChange` fails

[ddecrulle]

Steps to reproduce

https://stackblitz.com/edit/react-qsqwfi?file=Demo.tsx

Steps:

1. Manage Columns
2. Remove one column

Current behavior

I want to resize my grid when column visibility changes. So, I tried to run autosizeColumns when the columnVisibilityModelChange event is fired. However, when a column is removed, this results in the following error:

Error: Cannot read properties of undefined (reading 'computedWidth')

It appears that the autosizeColumns function attempts to access the computedWidth of a column that has already been removed.

Expected behavior

No error in console

Context

I tried the same behavior without controlling the value of columnVisibilityModel, and it worked as expected without any errors.

Your environment

npx @mui/envinfo

``` System: OS: macOS 15.0.1 Binaries: Node: 22.6.0 - /opt/homebrew/bin/node npm: 10.8.2 - /opt/homebrew/bin/npm pnpm: 9.4.0 - /opt/homebrew/bin/pnpm Browsers: Chrome: 129.0.6668.100 Edge: Not Found Safari: 18.0.1 npmPackages: @emotion/react: ^11.11.3 => 11.11.3 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: ^5.0.0-beta.58 => 5.0.0-beta.58 @mui/core-downloads-tracker: 6.1.3 @mui/icons-material: 5.14.15 => 5.14.15 @mui/material: ^6.1.3 => 6.1.3 @mui/private-theming: 6.1.3 @mui/styled-engine: 6.1.3 @mui/system: ^6.1.3 => 6.1.3 @mui/types: 7.2.17 @mui/utils: 6.1.3 @mui/x-data-grid: ^7.19.0 => 7.19.0 @mui/x-internals: 7.18.0 @types/react: ^18.2.43 => 18.2.57 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 styled-components: 6.1.8 typescript: ^5.4.5 => 5.4.5 ```

Search keywords: autosizeColumns, columnVisibilityModelChange

[michelengelen]

@KenanYusuf could you have a look into this? This might just be a race condition or a false order of execution.

[michelengelen]

Sry, I just had a look and you can just call the autosizing on every render, or when the model changes in state:

React.useEffect(() => {
  apiRef.current.autosizeColumns({
    expand: true,
    includeHeaders: true,
    includeOutliers: false,
  });
}, [columnVisibilityModel]);

This will fix it!

[michelengelen]

Sry again. It will still throw an error when you hide a column with the column management panel. Showing it through that or hiding from the column menu works though! 🤷🏼

[ddecrulle]

I haven’t found a solution for this issue yet except in uncontrolled mode for columnVisibility. Once it’s resolved, do you have any recommendations for the best approach? Should I select the columnVisibilityModel from the state or subscribe to the event?

First approach :

const columnVisibilityModel = useGridSelector(
    apiRef,
    gridColumnVisibilityModelSelector
);

useEffect(() => {
    apiRef.current.autosizeColumns(autosizeOptions);
}, [columnVisibilityModel]);

Second Approach :

useGridApiEventHandler(apiRef, "columnVisibilityModelChange", () => {
    apiRef.current.autosizeColumns(autosizeOptions);
});