[data grid] implement maxWidth to auto resizing

[itamaryatom]

The problem in depth

I have a data-grid and show it with a skeleton while fetching data. When data is fetched after rendering the it I use autosizeColumns on all the columns to fit their new content.
I have a column with paths that are sometime very long (around 1000px) so they need to have a limit when auto resizing (around 400px).

I have tried:

• adding maxWidth: 400px to the colDef, but now it can't be manually resized more than that, which is bad for me.
• adding to the colDef width: 400 and only auto resizing columns with the default width (which I saw is 100px). I would like to avoid this solution because it has potential for future unexpected bugs.
• creating custom property initialMaxWidth on the colDefs and adding custom logic inside an useEffect to reset their size to initialMaxWidth if they are wider after rendering the auto resize. This is both flaky and ugly.

Here is a showcase implementing the first two solutions I've tried which are mentioned above.

Is there a clean and simple way to implement these requirements with DataGrid?
Thanks In advance.

Your environment

System:
OS: macOS 15.1.1
Binaries:
Node: 23.3.0 - ~/.nvm/versions/node/v23.3.0/bin/node
npm: 10.9.0 - ~/.nvm/versions/node/v23.3.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 131.0.6778.86
npmPackages:
@emotion/react: ^11.13.3 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/core-downloads-tracker: 6.1.6
@mui/icons-material: ^6.1.2 => 6.1.6
@mui/material: ^6.1.2 => 6.1.6
@mui/private-theming: 6.1.7
@mui/styled-engine: 6.1.6
@mui/styles: ^6.1.7 => 6.1.7
@mui/system: 6.1.6
@mui/types: 7.2.19
@mui/utils: 6.1.7
@mui/x-charts: ^7.22.2 => 7.22.2
@mui/x-charts-vendor: 7.20.0
@mui/x-data-grid: 7.22.2
@mui/x-data-grid-pro: ^7.22.2 => 7.22.2
@mui/x-date-pickers: ^7.22.2 => 7.22.2
@mui/x-internals: 7.21.0
@mui/x-license: 7.21.0
@types/react: ^18.3.3 => 18.3.12
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.5.3 => 5.6.3

Search keywords: maxWidth, inititialMaxWidth, max, width
Order ID: 66WEN3-MLDMV

[michelengelen]

Hey @itamaryatom .... thanks for opening an issue here.
I don't think what you are trying to achieve is possible with the given features.

It does make sense though to include new options for the autosizing feature like maxAutoWidth and minAutoWidth tbh. There is only one problem that might occur when using it together with the expand option. If used together how should the grid behave? expand and ignore the max width, or does the max width take precedence?

Thoughts @mui/xgrid ?

[cherniavskii]

While not exactly what you're looking for, if only some are too wide then includeOutliers: false (default value) could work. Here's an example: https://codesandbox.io/p/sandbox/data-grid-initial-max-width-forked-85q8lv

Did you try that?