Autoresize does not properly resize columns that are scrolled far off screen when the resize is requested

[Blargel]

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:

1. Make sure your viewport is narrow enough that a large portion of the columns cannot be displayed and must be scrolled
2. Click the autosize columns button
3. 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.

Your environment

npx @mui/envinfo

  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 

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)

[KenanYusuf]

This indeed looks like a bug - I will add it to the board for prioritisation.

[ppaskaris-plooto]

For anyone looking for a workaround in the interim, here's what I'm using.

  const autosizeColumns = useCallback(() => {
    if (apiRef.current == null) {
      return;
    }
    // DataGrid currently shrinks off-screen columns despite it turning off virtualization to
    // compute cell widths. To work around this, we will peek into the virtualization layer and only
    // request it autosize columns that are actually being rendered.
    //
    // See: https://github.com/mui/mui-x/issues/15048
    let columns: Array<string>;
    const gridVirtualizationColumnEnabled = gridVirtualizationColumnEnabledSelector(
      apiRef.current.state,
      apiRef.current.instanceId
    );
    if (gridVirtualizationColumnEnabled) {
      const gridRenderContextColumns = gridRenderContextColumnsSelector(
        apiRef.current.state,
        apiRef.current.instanceId
      );
      const visibleColumns = gridVisibleColumnDefinitionsSelector(
        apiRef.current.state,
        apiRef.current.instanceId
      );
      columns = visibleColumns
        .filter(
          (_, index) =>
            index >= gridRenderContextColumns.firstColumnIndex &&
            index <= gridRenderContextColumns.lastColumnIndex
        )
        .map((column) => column.field);
    }
    apiRef.current.autosizeColumns({ ...AutosizeOptions, columns });
  }, [apiRef]);

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Blargel How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.