[DataGrid] Blank space in the scroll container

[hinsxd]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

https://codesandbox.io/s/data-grid-bug-388qz
When scrolling to bottom, the rows "jumped" and unnecessary spacing appears at the bottom.

Expected Behavior 🤔

Scrolls normally to the bottom, with the last item sticking to the bottom.

Steps to Reproduce 🕹

See codesandbox

Steps:

Context 🔦

Your Environment 🌎

Tech	Version
@material-ui/data-grid"	"^4.0.0-alpha.6"
React	16.13.1
Browser	macOS Chrome v85
TypeScript
etc.

[oliviertassinari]

When scrolling to bottom, the rows "jumped" and unnecessary spacing appears at the bottom.

I can observe the spacing that shouldn't be present, however, what do you mean by "jump" do you have a recording?

[hinsxd]

Yes here it is. I sometimes encounter this but sometimes don't.
https://imgur.com/Mqfpo0a

And this should be related too. I check DevTools and noticed that the last row is not rendered sometimes.
https://imgur.com/xXqpyVF

[hinsxd]

Is there a way to disable virtualization? Many users won't load more than 100 rows and virtualization seems overkill sometimes.

[oliviertassinari]

@hinsxd We could consider this option. However, I would recommend we wait for #193 to land before exploring it further. But in any case, we want to fix this bug.

[ZeeshanTamboli]

I will be looking into this. Let's see what I can find. Some code paths and context to look into could help me.

[royletron]

Hi @oliviertassinari I am also interested in disabling the virtualisation for small grids but with lots of UI elements. I am not entirely sure how it relates to #193 but would be eager to understand what is holding back the ability to set rowBuffer like we currently set columnBuffer?

For reference this is what we see with the scroll event, if we have a monitor high enough to show all 100 rows (which is what we set our pagination to anyway) then the performance is fine, it's just the scrolling into the virtual rows that is causing this epic event.

[oliviertassinari]

if we have a monitor high enough to show all 100 rows

@royletron this sounds related to #270. I was advocating that the overscan logic is suboptimal. I suspect that for large screens, we render way too many rows outside of the viewport. I was advocating that the height of the virtualization screen shouldn't be a variable in the equation, the height of the row, on the other hand, should.

Do you have a codesandbox with the display conditions so we can investigate?

[royletron]

@oliviertassinari I'll have a go and get back to you. We are using a few custom renderers on our columns which allow for interaction so it seems mounting those from the buffer is expensive.

[royletron]

@oliviertassinari check out https://codesandbox.io/s/mui-x-414-xlhsq

Particularly scrolling to the bottom of the grid.
Like I say, I understand that this is quite intensive, but our solution is to limit the number of rows shown at once, so controlling the virtualisation would be ideal.

[oliviertassinari]

@royletron Perfect. Note that renderCell expects a render function, not a component. The hooks work by chance inside them.

We have little room to improve. The core components weren't designed to render smoothly with x100 instances x10 Hz. If it were the objective, we would have made significantly different choices. I would recommend:

1. Developers: Rendering simpler components, not an edit all mode.
2. Material-UI: That we improve the overscan [RFC] Row virtualization overscanning tradeoff #270.
3. Material-UI/Developers: Testing different virtualization technics but I don't think that any will work with the currently rendered components

As for making the core component render more smoothly. You are using v4, they are getting a bit slower in v5 because we move from JSS to emotion/styled-components. Nothing major when you have a few instances in a page, but definitely noticeable when you render x100 multiple times per second. For us, the choice was a no brainer, more flexibility with the core components largely yield more adoption than more performance.

[oliviertassinari]

and unnecessary spacing appears at the bottom.

I believe we didn't solve this part of the issue. It can be seen it on https://master--material-ui-x.netlify.app/components/data-grid/demo/.

[m4theushw]

The unnecessary blank space at the bottom pointed by #414 (comment) was fixed in #2673 and released in the latest beta.