[DataGrid] Allow for truncated and multiline content in grid cells

[DanailH]

Fixes #3587

I added 2 snaps to make sure that we don't break it again.
To fix this I had to wrap the content of the cell in a div element. If a renderCell is provided its return value won't be wrapped in that div element.

Storybook: https://deploy-preview-3955--material-ui-x.netlify.app/storybook/?path=/story/datagridpro-test-styling--truncated-cell-text-snap

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	322.8	604	343.6	399.5	105.325
Sort 100k rows	ms	609.6	922	891.8	826.4	118.463
Select 100k rows	ms	207.7	499.9	224.7	290.2	109.609
Deselect 100k rows	ms	118.6	214.9	172.2	170.22	30.741

Generated by 🚫 dangerJS against 0f5bffc

[cherniavskii]

What if we introduce GridColDef.noWrap that defaults to true?
Then we can do something like this:

const content = children != null ? children : valueToRender?.toString();
// ...

{noWrap ? <div className={classes.content}>{content}</div> : content}

This will allow to control whether the content is wrapped or not, regardless renderCell presence.
It should be backwards-compatible as well.
Does it make sense?

[DanailH]

@cherniavskii I was thinking of adding another option to the GridColDef to distinguish the 2 but without it looks cleaner. Also with it, additional configuration will probably be needed for the bug to be actually fixed. With the current solution, there are no regressions and both cases (truncated and multiline) will work.

[cherniavskii]

Also with it, additional configuration will probably be needed for the bug to be actually fixed

If you mean #3587, then it will be fixed by default with no configuration.

With the current solution, there are no regressions

What about the one you mentioned in PR description?

It can only impact the case where a renderCell is provided with long text content. In that case, the text won't overflow but break and fit into the cell

[cherniavskii]

Adding noWrap option has one advantage - no need to use renderCell to enable text wrapping

[DanailH]

What about the one you mentioned in PR description?

It can only impact the case where a renderCell is provided with long text content. In that case, the text won't overflow but break and fit into the cell

that is already fixed by keeping the whiteSpace: 'nowrap'

[m4theushw]

@cherniavskii Whether we add noWrap or not, it could be a prop in GridCell. This avoids adding more options to GridColDef that are only used in a small part of the grid.

[cherniavskii]

that is already fixed by keeping the whiteSpace: 'nowrap'

Ok, I didn't notice that change. It's great then!

@m4theushw

Whether we add noWrap or not, it could be a prop in GridCell

I like this!
This can be done separately thought, since this PR is 100% backwards compatible now :)

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[m4theushw]

Looks good.