[data grid] Column Width Persistence Fails During Data Updates and Auto-Sizing

[itayeylath]

The problem in depth

Long Story Short: 🤝
I'm encountering an issue with MUI's DataGridPro where the column widths do not persist as expected when the grid's data is updated or when auto-sizing is applied via useEffect. Specifically, I'm trying to maintain user-resized column widths across data updates and page reloads, but the columns revert to their default sizes after new data is fetched.

Steps to Reproduce: 🪜
Implement a DataGridPro with columns that allow resizing.
Store the column widths in localStorage when resized by the user.
Use useEffect to auto-size columns based on the initial data load.
Fetch new data every 15 seconds, updating the grid's rows prop.
Observe that the column widths reset after each data update, ignoring the persisted values from localStorage.
Expected Behavior:
The column widths should remain consistent, reflecting user adjustments even after data updates or page reloads.

Actual Behavior: 😬
Column widths reset to their default values after data updates or when the component re-renders, disregarding the values stored in localStorage.

Code Instance:

useEffect(() => {
  if (data && gridApiRef.current && !columnWidthsInitialized) {
    gridApiRef.current.autosizeColumns({
      columns: ['id', 'exposureId', 'exposureType', 'severityLevel', 'createdAt', 'targetName', 'resourceIdentifier', 'agentId', ''],
      includeHeaders: true,
      includeOutliers: true,
      expand: true,
      outliersFactor: 1.5,
    });
    setColumnWidthsInitialized(true);
  }
}, [data, gridApiRef, columnWidthsInitialized]);

const handleColumnResize = (params: any) => {
  const { field, width } = params;
  const newWidths = { ...columnWidths, [field]: width };
  setColumnWidths(newWidths);
  localStorage.setItem('columnWidths', JSON.stringify(newWidths));
};

// Setting column widths from localStorage when component mounts
useEffect(() => {
  const storedWidths = localStorage.getItem('columnWidths');
  if (storedWidths) {
    setColumnWidths(JSON.parse(storedWidths));
  }
}, []);

Environment: 🪄
@mui/x-data-grid-pro: ^6.0.0
React: 18.2.0
Browser: Chrome 116

It looks like a common issue 🤷 😁
I believe this issue is similar to what's described in #4310, where column resizing and persistence aren't working as expected across data updates. Any guidance or fixes would be appreciated, as this is critical for maintaining a consistent user experience.

Thanks in advance! :)

Your environment

`npx @mui/envinfo`

    System:
    OS: Linux 6.5 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
    pnpm: 8.6.1 - /usr/local/share/npm-global/bin/pnpm
  Browsers:
    Chrome and Firefox
  npmPackages:
    @emotion/react: ^11.10.6 => 11.11.4 
    @emotion/styled: ^11.10.6 => 11.11.0 
    @mui/base:  5.0.0-beta.38 
    @mui/core-downloads-tracker:  5.15.12 
    @mui/icons-material: ^5.11.9 => 5.15.12 
    @mui/lab: 5.0.0-alpha.139 => 5.0.0-alpha.139 
    @mui/material: 5.11.16 => 5.11.16 
    @mui/private-theming:  5.15.12 
    @mui/styled-engine:  5.15.11 
    @mui/system: ^5.4.1 => 5.15.12 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.12 
    @mui/x-data-grid: ^6.0.1 => 6.19.6 
    @mui/x-data-grid-pro: ^6.0.4 => 6.19.6 
    @mui/x-date-pickers:  6.19.6 
    @mui/x-date-pickers-pro: ^6.3.0 => 6.19.6 
    @mui/x-license-pro: ^6.0.4 => 6.10.2 
    @types/react: ^18.0.26 => 18.2.64 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.3 => 4.9.5 

Search keywords: data grif, rendering layout, persistence column width
Order ID: 74059

[michelengelen]

Hey @itayeylath ... this seems like a duplicate to #14183 and is related to #11576 ... I'll close this one in favor of the beforementioned as @romgrk is already working on it! Thanks for opening this up! 👍🏼

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

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

[itayeylath]

Hey @itayeylath ... this seems like a duplicate to #14183 and is related to #11576 ... I'll close this one in favor of the beforementioned as @romgrk is already working on it! Thanks for opening this up! 👍🏼

1. Just to make sure- is @romgrk making an MUI solution or is own creative solution? :)
2. I'm trying to make it by my own and hope to fix it, is it relevant to share it with you?

[michelengelen]

Hey @itayeylath ... this seems like a duplicate to #14183 and is related to #11576 ... I'll close this one in favor of the beforementioned as @romgrk is already working on it! Thanks for opening this up! 👍🏼

1. Just to make sure- is @romgrk making an MUI solution or is own creative solution? :)

he is working on a solution that should fix it in the product.

2. I'm trying to make it by my own and hope to fix it, is it relevant to share it with you?

Any additional information regarding this can only help us in providing a better solution. So, yes: Please feel free to share whatever findings you have or make! 👍🏼