[data grid] Double click column border to autosize grid column width not working.

[mschaefer-gresham]

Steps to reproduce

Double clicking a grid column to autosize it does not work most of the time. The below example is a fork from a grid example on the MUI website. With 5 rows the autosizing of 'Last name' does not work. But if you remove all but one column, then autosizing works.

2024-04-10_14-17-08.mp4

https://codesandbox.io/p/sandbox/thirsty-lovelace-cwwsp7?file=%2Fsrc%2FDemo.tsx%3A37%2C77

Current behavior

Double clicking column border to autosize does not work.

Expected behavior

It should work.

Context

Trying to autosize a column based on the width of the data in this column's rows.

Your environment

My example is a forked CodeBox from the MUI website.

Search keywords: autosize column width grid double-click
Order ID: 45466

[michelengelen]

Hey @mschaefer-gresham
For this to always work you would need to pass autosizeOptions to the grid.

autosizeOptions={{
  includeOutliers: true,
  includeHeaders: true,
}}

I am not 100% sure what kind of algorithm is used when the defaults, includeOutliers: false and includeHeaders: false are used, but this will make sure that the columns are always autosized to fit the content (when there is enough space for it)

[michelengelen]

@mschaefer-gresham does that fix your use case?

[mschaefer-gresham]

@michelengelen thank you. This appears to solve the issue.

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

@mschaefer-gresham: 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.