[data grid] Improve support of long cells content

[oliviertassinari]

Summary 💡

This issue is a continuation of #1040. We might have an opportunity to improve the UX for end-users when using a table. This surfaced with @prakhargupta1 when using a Toolpad app https://github.com/mui/mui-toolpad/issues/1484.

Facts:

1. When the content of the cell overflow, end-users only have one option: resize the column width to see the content.
2. Column resizing is a Pro feature, so not available for community users https://mui.com/x/react-data-grid/column-dimensions/#resizing.
3. Developers can use getRowHeight auto: https://mui.com/x/react-data-grid/row-height/#dynamic-row-height to wrap a row.

Problems

1. Cell expander. For some use cases, it's better to have a single line per row to quickly scan the data. So getRowHeight auto isn't an option. Resizing the columns is painful so isn't an option either. A cell expander would improve the UX but the problem is that it's not easy to pull off. e.g. https://github.com/mui/mui-x/issues/1040#issuecomment-780484281:

   

2. Wrapping configuration per column. A hybrid cell wrapping tradeoff is possible for some use cases: keep a single line for more of the cells but wrap a few. This requires setting getRowHeight auto and forcing some of the cells to overflow on a single line. The problem is that it's not easy to pull off:

Some like Elastic UI go as far as allowing end-users to configure it, not just developers:

Options

For pain 1. we could either:

• Do nothing, leave the developer to figure this out on their own. This is what Toolpad will need to figure out.
• Add a demo in the docs to implement this.
• Add a boolean for developers to enable a cell expander automatically, shown to end-users when the cell overflow.

For pain 2. we could either:

• Do nothing, leave the developer to figure this out on their own. This is what Toolpad will need to figure out.
• Add a demo in the docs to implement this.
• Add a boolean for each row to say if it can overflow or not
• Allow end-users to configure which column should wrap.

Examples 🌈

• https://elastic.github.io/eui/#/tabular-content/data-grid

• Airtable

• Metabase https://mui.metabaseapp.com/question/6-mui-store-customer-domains?start=2022-12-05&end=2022-12-12

• Notion https://www.notion.so/mui-org/Tech-stack-applications-8e56f66afb4b466d97e7c448fa4d7383

• Retool https://retool.com/components/table

Motivation 🔦

Improve the browsing experience

[cherniavskii]

Related issue: https://github.com/mui/mui-x/issues/2851

[oliviertassinari]

Once we solve this, we might want to revert #7682.

[cherniavskii]

@gerdadesign Can you look into this one?