[data grid] Autosize flex column

[A-Degtyarev]

The problem in depth

Hi. I need to combine two behaviors:

1. after a first load, all columns must be fit on page, without scrollbar. It might be done with flex: 1 property.
2. After "Autosize columns" button was pushed, columns must be arranged like i used apiRef.current.autosizeColumns
   The main problem is impossibility of using flex and autosizeColumns: see example
   Is there a way to combine two views: fit to screen (with rather large amount of columns), and autosize by content?

Your environment

`npx @mui/envinfo`

  System:
    OS: macOS 13.1
  Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 130.0.6723.92
    Edge: Not Found
    Safari: 16.2
  npmPackages:
    @emotion/react: 11.11.4 => 11.11.4 
    @emotion/styled: 11.11.5 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.19 
    @mui/icons-material: 5.15.19 => 5.15.19 
    @mui/lab: 5.0.0-alpha.170 => 5.0.0-alpha.170 
    @mui/material: 5.15.19 => 5.15.19 
    @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:  6.20.1 
    @mui/x-data-grid-premium: 6.20.1 => 6.20.1 
    @mui/x-data-grid-pro:  6.20.1 
    @mui/x-date-pickers: 7.5.1 => 7.5.1 
    @mui/x-license-pro:  6.10.2 
    @mui/x-tree-view: 7.7.0 => 7.7.0 
    @types/react: 18.2.37 => 18.2.37 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    typescript: 5.4.5 => 5.4.5 

Search keywords: flex autosize width
Order ID: 94701

[michelengelen]

Which use case are ou trying to solve with this? There is a limit to how small you can make a column, so after a certain threshold this wouldn't make any sense anymore and become borderline usable (see screenshot):

It would honestly make more sense to define a default width, or simply run the autosizing on mount

[A-Degtyarev]

@michelengelen. i'm trying resolve next:
At first load, all table columns must be fit in screen width, like on the image below. It doesn't matter, what is inside the row.

When i press "Autosize columns", every column width arranges, as so content of column become fully visible, with horizontal scroll bar.

I think, it might be solved with new one property of GridAutosizeOptions, includeContent: false (default true)
But now, i'm trying resolve it with existing methods.

[michelengelen]

@A-Degtyarev I got what you are trying to do ... I just feel that it does not make that much sense, that's why I was asking what exact problem you are trying to solve here. Or to put it more specific: Why do the columns need to fit in the width of the data grid on first render?

[A-Degtyarev]

@michelengelen , I solved my task with ref, state and setting up flex:0 in new State: look at my example in the 1st post.
But i think, that this solution is not pretty.

[michelengelen]

It's still not making any sense to me why you have to do that, but ok.
I am almost certain that this is not possible with the given methods of the grid atm, but let's ask the team: @mui/xgrid thoughts?

[cherniavskii]

I don't think column autosizing not working with flex columns was intentional.
It should rather behave like regular resizing – once the column's dimension is changed, the flex for this column is ignored.

@romgrk any objections to making autosizing work with flex columns?

[romgrk]

No objection.

[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

@A-Degtyarev 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.