[data grid] Column autosizing calculated on old data instead of new data

[frans-sqills]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-e7tkn5?file=Demo.tsx

Current behavior

The community version of data grid uses the old data set to set the --DataGrid-rowWidth css variable when using the autosizeColumns functionality, resulting in inconsistencies between the header and data rows.

Row exceeds header length:

Header exceeds row length:

The pro version does set the --DataGrid-rowWidth based on the new data, as shown in the screenshot below. The pro version above the community version below, both using the same data but different widths:

Expected behavior

The community version should also set the --DataGrid-rowWidth based on the new data just like the pro version does.

Context

The live example is a fork of autosizing asynchronously with extended data and the community version added below to the pro version, both use the same logic to retrieve the data and execute the autosizeColumns.

With the browser inspector open, clicking the refresh button I see the style attribute of the MuiDataGrid-root div refreshed immediately for the community version which is too soon. With the pro version the style attribute of the MuiDataGrid-root div is refreshed after the new data is loaded.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.5
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 125.0.6422.113
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @emotion/react:  11.11.4 
    @emotion/styled:  11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.17 
    @mui/icons-material:  5.15.17 
    @mui/lab:  5.0.0-alpha.170 
    @mui/material:  5.15.17 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-data-grid:  7.4.0 
    @mui/x-date-pickers:  7.4.0 
    @types/react:  18.3.2 
    react:  18.3.1 
    react-dom:  18.3.1 
    typescript: >=5.4.5 => 5.4.5 

Search keywords: Autosizing

[romgrk]

I'm unable to reproduce an issue with the steps above, would it be possible to explain which steps to take to experience any of the issues you list?

[frans-sqills]

Please have a look at the example here https://stackblitz.com/edit/react-e7tkn5. After retrieval of the data the CSS var --DataGrid-rowWidth should be calculated and set based on the widest row. The pro version does this correctly but the community version sets the --DataGrid-rowWidth based on the widest row of the old data and not of the newly retrieved data.

Some examples:

First data retrieval after opening the example, the header and hover backgrounds of the community version do not cover the "Branding", "Representative" and "Rating" columns on the far right:

After clicking refetch data,
either the widest row is smaller thus the header and hover backgrounds exceed the widest row (the row underline does not cover the full width)

or the widest row is wider thus the header and hover backgrounds does not cover the "Rating" column on the far right:

[romgrk]

Still can't reproduce, can you fill the env info section? You have the instructions in the top comment.

[frans-sqills]

I have added the env info section in the top comment

[romgrk]

@mui/xgrid Can someone on macOS take this one? Might have an impact.

[MBilalShafi]

@mui/xgrid Can someone on macOS take this one? Might have an impact.

I'll check it out.

[MBilalShafi]

After a few tries, I was finally able to reproduce this error. It didn't reproduce so easily for me.

To reproduce I needed to meet these conditions:

1. Use one of Edge or Safari browsers
2. It only reproduces on a specific screen width (roughly when 4 columns are visible after autoSize) I needed to resize the window several times to reproduce.

When it reproduces, this useEnhancedEffect doesn't get triggered after the autosizeColumns action.

mui-x/packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts

Lines 306 to 324 in 7566a1d

	useEnhancedEffect(() => {
	if (!root) {
	return;
	}
	const set = (k: string, v: string) => root.style.setProperty(k, v);
	set('--DataGrid-width', `${dimensions.viewportOuterSize.width}px`);
	set('--DataGrid-hasScrollX', `${Number(dimensions.hasScrollX)}`);
	set('--DataGrid-hasScrollY', `${Number(dimensions.hasScrollY)}`);
	set('--DataGrid-scrollbarSize', `${dimensions.scrollbarSize}px`);
	set('--DataGrid-rowWidth', `${dimensions.rowWidth}px`);
	set('--DataGrid-columnsTotalWidth', `${dimensions.columnsTotalWidth}px`);
	set('--DataGrid-leftPinnedWidth', `${dimensions.leftPinnedWidth}px`);
	set('--DataGrid-rightPinnedWidth', `${dimensions.rightPinnedWidth}px`);
	set('--DataGrid-headerHeight', `${dimensions.headerHeight}px`);
	set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
	set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
	set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
	set('--height', `${dimensions.rowHeight}px`);
	}, [root, dimensions]);

Since the autosizeColumns has already resized the individual columns, but the root CSS variables are not updated, it yields a weird UX.

I suspect it's because of the non-reactive nature of the dimensions dependency of this useEnhnacedEffect. Probably using the dimensions selectors along with useGridSelector will fix it (by making it reactive).

@froons can you reproduce it consistently or on a specific screen width? Also which browser do use to reproduce it?

---

Update: I tried to make the dimensions reactive and the error doesn't reproduce for me anymore.
@Frooons can you check if it still reproduces for you in this codesandbox: https://codesandbox.io/p/sandbox/gifted-lederberg-l4vx2h

[frans-sqills]

@MBilalShafi To answer the first question, I am able to reproduce it consistently using Chrome and Safari where the table has to be wider than the screen width.
And for the second question, the issue does not reproduce for me anymore in the codesandbox!

[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.

@Frooons: 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.