mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.52k stars 1.31k forks source link

[question] DataGrid row virtualization issue, rows not appearing on scroll #12010

Closed ttackett06 closed 8 months ago

ttackett06 commented 9 months ago

The problem in depth

When using the DataGrid component, only a subset of the rows are being displayed properly (as expected with virtualization), but upon scrolling down, additional rows are not being displayed. I know the rows are there, because if I click on a dropdown link in the sidebar, a subset of the rows will appear in the blank space of the DataGrid, and all other rows will not appear. Seems as though the scroll is not triggering the rows to display, only the click of a dropdown link.

Your environment

`npx @mui/envinfo` ``` System: OS: Linux 3.10 CentOS Linux 7 (Core) Binaries: Node: 16.20.0 - /usr/bin/node Yarn: Not Found npm: 8.19.4 - /usr/bin/npm Browsers: Chrome: 119.0.6045.199 npmPackages: @emotion/react: latest => 11.11.1 @emotion/styled: latest => 11.11.0 @mui/base: 5.0.0-beta.20 @mui/core-downloads-tracker: 5.14.14 @mui/envinfo: ^2.0.12 => 2.0.12 @mui/icons-material: ^5.14.14 => 5.14.14 @mui/lab: ^5.0.0-alpha.149 => 5.0.0-alpha.149 @mui/material: ^5.14.14 => 5.14.14 @mui/private-theming: 5.14.14 @mui/styled-engine: 5.14.14 @mui/styles: ^5.14.14 => 5.14.14 @mui/system: 5.14.14 @mui/types: 7.2.6 @mui/utils: 5.14.14 @mui/x-data-grid: ^6.16.2 => 6.16.2 @mui/x-data-grid-generator: ^6.16.2 => 6.16.2 @mui/x-data-grid-premium: ^6.16.2 => 6.16.2 @mui/x-data-grid-pro: 6.16.2 @mui/x-license-pro: 6.10.2 @mui/x-tree-view: 6.0.0-alpha.1 @types/react: 17.0.66 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 styled-components: ^5.3.10 => 5.3.11 ```

Search keywords: DataGrid, Virtualization, Scroll Order ID: 66765

romgrk commented 9 months ago

Can you fill the npx @mui/envinfo section? Where are you seeing this? With which version (library & browser)?

ttackett06 commented 9 months ago

Yes, sorry about that...I have updated the @mui/envinfo section.

romgrk commented 9 months ago

Could you test with the latest version? Could you also provide a reproduction case? Are you seeing this on the docs, or in a project of yours? If you see this in a project it's important that we get a reproduction case.

ttackett06 commented 8 months ago

I am seeing it in a project of mine...I have been unable to reproduce the error with mock data. The latest version does not seem to be helping the issue. We are not using Lazy Loading

romgrk commented 8 months ago

We need much more details to be able to help you. A reproduction case is particularly important because it helps us assert where the problem is. If you can't reproduce it outside your environment, it might be caused by code or customization you have added that we are not aware of.

In the very rare cases where it's impossible to provide a reproduction, we at least need screenshots, stacktraces, and a detailed description of your use-case and what you're doing with the datagrid.

ttackett06 commented 8 months ago

I was finally able to recreate the issue using CodeSandbox...we are using our own custom CommonGrid which is included in the sandbox. Here is a link:

https://codesandbox.io/p/sandbox/naughty-galois-r6m98z

romgrk commented 8 months ago

The link leads to a sandbox that doesn't exist, or the permissions for that link may not be set properly for sharing.

ttackett06 commented 8 months ago

My apologies...I believe I have fixed the permissions now

romgrk commented 8 months ago

There seems to be an issue with the rowThreshold prop. If it's removed, virtualization works again. What value do you set to it? What if you set it to its default value?

ttackett06 commented 8 months ago

Thank you so much...this fixed the issue!

github-actions[bot] commented 8 months ago

:warning: This issue has been closed. If you have a similar problem, please open a new issue and provide details about your specific problem. If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @ttackett06? Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.