[data grid] Column flex width jumps after grid is displayed

[Chochuat]

Steps to reproduce

Link to live example: Example

Steps:

1. Load/Refresh the page
2. See the subtle jump in layerCount(last) column

Current behavior

There is a subtle jump in the last column if the previous columns use flex.

Recorded video (loom): Video

Expected behavior

There is no jump

Context

I have a DataGrid with multiple columns of varying widths. Since I do not know in advance how wide the content of each cell will be, I set the flex property to 1 or 2, allowing the DataGrid to automatically calculate the widths. However, I know that the last column should have no flex and should be positioned at the very right end of the table. I would like to remove or at least minimize the subtle jump of the last column. Is there anything I can do to achieve this?

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22621
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.3.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.14.1 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (125.0.2535.92)
  npmPackages:
    @mui/material: ^5.0.3 => 5.15.5 
    @mui/utils: ^5.2.3 => 5.15.14 
    @mui/x-data-grid: ^7.2.0 => 7.3.0 
    @types/react: ^17.0.24 => 17.0.75 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: 4.8.3 => 4.8.3 

Search keywords: datagrid, flex, column, jump

[michelengelen]

Hey @Chochuat ... I am not able to reproduce the issue you mentioned here.
I can see the "jump" in your video, but it is not reproducing on my local machine, on stackblitz or codesandbox. I did even try to use FF and Safari, but without success.

Could you try to provide a demo that always shows this behavior?

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.