[data grid] Performance Issues and UI flickering when rendering large data nested mui data grid premium (with grouping key)

[vshubham09]

The problem in depth

Description

I am experiencing flickering and height adjustment issues when expanding inner tables or grids inside the DataGridPremium component. When expanding rows that contain nested tables or grids (used as detail panels or accordions), the UI flickers, and the height adjustment is not smooth, which results in a jarring user experience.

Steps to Reproduce

1. Create a DataGridPremium with expandable rows that include inner tables or grids as detail panels (refer https://codesandbox.io/p/sandbox/pqm9hy).
2. Click on a row to expand it.
3. Observe the flickering and height adjustment behavior when the inner content is loaded.

I have attached a video for steps and issue as well.

Expected Behavior

• The height adjustment should be smooth when expanding or collapsing detail panels.
• Page should be performant even if rendering large amount of rows in detail panels.
• There should be no flickering when the inner table or grid content is rendered.

Actual Behavior

• The UI flickers when expanding the inner table/grid.
• The height adjustment is not smooth, causing a noticeable jump in the UI.

CodeSandbox

You can find a live example and code that reproduces the issue here: CodeSandbox Link

CodeSandbox Live Preview

Issue Video

In our case it is more problematic given the amount of data that we have to show. Please help us with the next steps.

Environment

• Material UI Version: latest
• Browser: [e.g., Chrome, Firefox]
• Operating System: [e.g., Windows, macOS]

Please let me know if any additional information is needed.

Your environment

`npx @mui/envinfo`

  System:
    OS: macOS 14.6
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 130.0.6723.60
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4
    @emotion/styled: ^11.11.5 => 11.11.5
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.19
    @mui/icons-material: ^5.15.19 => 5.15.19
    @mui/material: ^5.15.19 => 5.15.19
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system:  5.15.15
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-data-grid:  7.6.1
    @mui/x-data-grid-premium: ^7.6.1 => 7.6.1
    @mui/x-data-grid-pro:  7.6.1
    @mui/x-date-pickers: ^7.6.1 => 7.6.1
    @mui/x-date-pickers-pro: ^7.6.1 => 7.6.1
    @mui/x-license:  7.6.1
    @types/react: 18.0.9 => 18.0.9
    react: ^18.1.0 => 18.2.0
    react-dom: ^18.1.0 => 18.2.0
    typescript: 4.6.4 => 4.6.4

Search keywords: data grid, nested, performance, large rows Order ID: 74736

[michelengelen]

TBH this looks a lot like it is to be expected to behave like this, since the virtualization logic only renders what should be visible (with a buffer of a few rows). The problem here is that the nested grid has no defined dimensions and can expand at will.

The only thing I could see here where we could have a look into is the fact that the expansion happens after the virtualization kicks in and only renders a few rows instead of the whole set.

@romgrk is this something we should check?

[romgrk]

Yes, the nested grid without dimensions is a problem. It means the grid can't do virtualization.

I think from what I see in your example, tree data is what you're looking for, or maybe row grouping. Are those features better for your use-case? If not, then you need to set dimensions as described in the docs.

[vshubham09]

We are currently using row grouping as shared in the example as well. I am more concerned about the performance in case of nested rows or in our case row grouping. Like what all best practices should be considered.

Also the given example doesn't entirely depict the problem, I believe due to sudden height changes or as we expand any given row group the group content flashes for a moment.

[michelengelen]

The flashing only happens if you use a grid that has a dynamic height. With the example from the row grouping docs page: if you remove the wrapping div giving the grid dimensions to render in and calculate the virtualization it will also flash briefly when opening a group that exceeds the initial height:

https://github.com/user-attachments/assets/00382761-b2c7-4784-a956-b4f685d29a63

Thats simply because the virtualization will render the amount that would fit the grid under normal conditions, but since it grows after opening the group it has to recalculate. This is to be expected.

So we would advice you to use intrinsic dimensions for this.

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.