[data grid] autosizeOnMount is broken on 7.23.1

[tim-mit]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/vitejs-vite-79ndlodu?file=src%2FApp.tsx
2. Notice how the columns do not fill the width of the datagrid container
3. Compare to this example using @mui/x-data-grid-pro@7.20.0 where the behaviour is to fill the container width - https://stackblitz.com/edit/vitejs-vite-gzdzhavp?file=src%2FApp.tsx

Current behavior

When using autosizeOnMount the column widths are not correctly calculated, and the width of the container isn't covered.

Expected behavior

On previous versions, e.g. 7.20.0, the columns would fill the width of the container.

Context

The columns should be equally spaced out using the flex rules across the width of the container.

Your environment

npx @mui/envinfo

I've tested on Chrome and Safari, the same behaviour occurs on both.

  System:
    OS: macOS 15.1
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.109
    Edge: Not Found
    Safari: 18.1
  npmPackages:
    @emotion/react: ^11.11.3 => 11.14.0 
    @emotion/styled: ^11.11.0 => 11.14.0 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.16.9 
    @mui/icons-material: ^5.15.2 => 5.16.9 
    @mui/lab: ^5.0.0-alpha.158 => 5.0.0-alpha.174 
    @mui/material: ^5.15.14 => 5.16.9 
    @mui/private-theming:  6.1.10 
    @mui/styled-engine:  6.1.10 
    @mui/system:  6.1.10 
    @mui/types:  7.2.19 
    @mui/utils:  5.16.8 
    @mui/x-data-grid:  7.20.0 
    @mui/x-data-grid-pro: ^7.20.0 => 7.20.0 
    @mui/x-date-pickers:  7.23.1 
    @mui/x-date-pickers-pro: ^7.16.0 => 7.23.1 
    @mui/x-internals:  7.23.0 
    @mui/x-license: ^7.7.1 => 7.23.0 
    @mui/x-license-pro: ^6.10.2 => 6.10.2 
    @mui/x-tree-view: ^7.21.0 => 7.23.0 
    @types/react: ^18.2.45 => 18.3.14 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    typescript: ^5.3.3 => 5.7.2 

Search keywords: datagrid autosizeOnMount
Order ID: 103743

[michelengelen]

Hey @tim-mit ... this is a regression that got introduced with #15712 (in v7) and #15465 (in v8-alpha).

The problem here is the flex: 0 property which gets added during first run.

I'll add it to the board! 👍🏼

cc @cherniavskii

[cherniavskii]

On previous versions, e.g. 7.20.0, the columns would fill the width of the container.

I don't think this has something to do with autosizing. Before 7.23.1, column autosizing ignored flex columns – this is the reason they fill the full width of the container, regardless of autosizeOnMount value.

When using autosizeOnMount the column widths are not correctly calculated, and the width of the container isn't covered.

This is expected behavior. By default, autosizing doesn't try to fill the full width of the data grid, it measures the cell content and sets the column width for the content to fit.
It sounds like you're looking for the autosizeOptions={{ expand: true }} option, here's a demo showing it in action: https://stackblitz.com/edit/vitejs-vite-dvyx7orn
Is this what you're looking for?

[tobalsgithub]

fwiw, my team ran into this today after jumping from version 7.17.0 to 7.23.2. We had been using autosizeOnMount to ensure columns spanned the full width of the table, and using flex on each column to control the relative width of columns compared to each other. This was giving us the behavior we want.

Whether the behavior before was broken and is now fixed, or whether a regression was introduced here, I can't really comment on, but either way something that was working for us stopped working.

It's not entirely clear from the documentation how all these fields interact. I'm sure that the first time we implemented the datagrid we just stole some example from somewhere without fully understanding each field, got the behavior we wanted, and moved on 😄

After adding autosizeOptions={{ expand: true }} to the datagrid props, the grid does fill the full width of the table, but the columns don't respect their flex property anymore. If I then take out autosizeOnMount, I get the behavior I want, that I had before, where the flex property on each column is respected, and all the cells together fill the full table container area.

Anyway, I hope this helps anyone else who runs into this, and provides a bit of context as to where the confusion might be coming from.

[tim-mit]

The autosizeOptions={{ expand: true }} option does do what we want, yes.

Much the same as @tobalsgithub has mentioned, we've got the flex columns and autosizeOnMount used throughout our codebase and I think it was lifted from documentation at some point in the past.

Before 7.23.1, column autosizing ignored flex columns – this is the reason they fill the full width of the container, regardless of autosizeOnMount value.

This seems like a breaking change? I'm happy that there is a solution (setting autosizeOptions), but the previous behaviour of ignoring flex columns was arguably better in that it still allowed these to fill the remaining container width as expected.

I wasn't able to find any docs explaining what the possible values of the autosizeOptions prop are. It is probably worth adding a note on https://mui.com/x/react-data-grid/column-dimensions with detail of these, and noting that autosize and flex props don't play together?

[michelengelen]

Good point @tim-mit ... I'll add this to the board for the team to check if a note about that could be added.
cc @samuelsycamore