[data-grid] Dynamic row height with column virtualization

[yukinko-iwasaki]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I have been trying to enable dynamic rowHeight in my dataGrid component.
This seems to disable the column virtualization. This hurts the performance of our app. I was wondering if there is any workaround to enable both dynamic height and the column virtualization.

Examples 🌈

https://codesandbox.io/s/mui-x-issue-template-forked-uekql7?file=/src/App.tsx

Here is the sandbox which renders 100 columns. We can see that all the columns are in the DOM when the dynamic row height is enabled.

Motivation 🔦

I need to enable dynamic row height to display long text data within the table.
However, this disables the column virtualization and it hurts our performance.

Order ID 💳 (optional)

51377

[cherniavskii]

Hi @yukinko-iwasaki
Indeed, column virtualization is disabled when using dynamic row height. This is expected:

Note that, due to the implementation adopted, the virtualization of the columns is also disabled to force all columns to be rendered at the same time.
https://mui.com/x/react-data-grid/row-height/#dynamic-row-height

We are exploring alternative solutions for the long content of the cell in #7323

You might find these demos useful as an alternative solution for long content in the cell without using dynamic row height:

• viewing multiline content https://mui.com/x/react-data-grid/column-definition/#expand-cell-renderer
• editing multiline content https://mui.com/x/react-data-grid/recipes-editing/#multiline-editing

[m4theushw]

We could explore an alternative path of allowing to specify which column should be used for dynamic row height, then re-enable column virtualization but always render this column, keeping it hidden. The row height would be determined only by the height of this column.