[DataGrid] Make column autosizing work with dynamic row height

[cherniavskii]

Exploration of #10669

Demo: https://codesandbox.io/s/vigilant-bouman-57jg8d?file=/src/demo.tsx
It doesn't work great with calling autosizeColumns on resize, but it might be feasible for double-click autosizing.

Preview: https://deploy-preview-10693--material-ui-x.netlify.app/x/react-data-grid/column-dimensions/#autosizing-with-dynamic-row-height

[mui-bot]

Deploy preview: https://deploy-preview-10693--material-ui-x.netlify.app/

Updated pages:

• docs/data/data-grid/column-dimensions/column-dimensions.md

Generated by 🚫 dangerJS against b5de0b0

[cherniavskii]

@romgrk What do you think?

[romgrk]

Looks ok, I feel like there's going to be edge-cases that we haven't thought of but if it works let's do it.

[cherniavskii]

@romgrk Yes, I thought we might avoid some edge cases if maxWidth is set on the column.
Initially, my idea was to make maxWidth required for autosizing to work with dynamic row height.
But on second thought, maybe recommending setting maxWidth in the docs would be enough?

Another option would be for the data grid to automatically limit the column width to not exceed the grid width when dynamic row height is being used.

[romgrk]

Recommending maxWidth seems enough.

I woudn't do the other option but I'm not opposed to it.

[romgrk]

We know what to whitespace: nowrap because we assume a certain layout for the cells, but for custom rendered cells this might not work. There is no general solution to that though, let's just wait until someone has that problem.