Scrolling in a t-table that implements virtual scrolling and lazy loading bugs out the header of the t-table

[televicDev]

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://primeng-tablevirtualscroll-demo-6scvvq.stackblitz.io

Current behavior
While scrolling a basic p-table that implements virtual scrolling and lazy loading, it looks like the header doesn't stick to the top of the t-table. I did some investigating myself (in a work-related project) and think this bug is caused by the cdk-virtual-scroll.

The bug really shows itself when scrolling up and down really fast in the part of the t-table where the currently loaded rows collide with the empty (to be loaded by the lazyLoadEvent) rows, I added a screencapture of the stackblitz to make it as clear as possible.

Expected behavior
The header of the t-table does not move when scrolling.

Minimal reproduction of the problem with instructions
I used the primeNG official demo fork to reproduce this problem, I also added some html/css and inline styling to set the height of the p-table. While running the stackblitz, scroll through the p-table and when you're about to hit a lazyLoadingEvent, start scrolling up and down really fast, the table header should start to move. Even easier to reproduce if you click in the middle of the scrollbar and then, before the records can load, start scrolling up and down really fast. Both cases were recorded in the following screencapture:

What is the motivation / use case for changing the behavior?
If I use the p-table component in my work-project, the behavior becomes much worse, to the degree where I cannot upgrade my project to version 12.1.1.

Please tell us about your environment:
OS: Windows 10
Browser: Google Chrome
Can be reproduced in stackblitz, so all other environment information should be accessible there.

• Angular version:
  Angular version: 12.X

• PrimeNG version:
  PrimeNG version: 12.1.1

• Browser:
  Chrome: Version 93.0.4577.82 (Official Build) (64-bit)

• Language: N/A

• Node (for AoT issues): node --version = N/A

[Laurent02]

I'm having the same issue, blocking us from upgrading to 12.1.x. If you edit the provided stackblitz above you can see it doesn't happen yet in 12.0.x. We really want some of the other fixes related to the frozen columns in 12.1, but this bug is also blocking for us so at this point it's "choose your poison" 😅

[FlockoD]

The problem is also reproducible on the PrimeNG demo page: https://www.primefaces.org/primeng/showcase/#/table/virtualscroll

[pieter98]

Running into the same issue here! 😅

[Yoerids]

Same issue here.
Please fix ASAP.

[Klaas088]

We also have the same problem. Hopefully there will be a solution soon...
It is an annoying problem !!

[Undestor]

Same here..

[condrag]

I have same issue, I upgraded to v12.2.0 and issue still exists.

[giesmininkas]

This also happens without lazy loading enabled

[maxschroers]

Same issue here! From my point of view, moving the whole table inside CdkVirtualScrollViewportComponent was not a good idea, because you will always run into an issue repositioning either the header or footer while scrolling, due to operations in the Angular lifecycle hooks, which can take some time to be executed.

I created a small example as well: https://stackblitz.com/edit/primeng-tablevirtualscroll-demo-uv5h92?file=src/app/app.component.html

Header and footer both clipping. Furthermore the footer is often not even inside the viewport.

Will there be a fix available in PrimeNg v12.x?

[mcrtricolor]

Hello. This still happens using prime 13.0.1 and angular 13.0.3. For the record i have the table placed in a ion-col from ionic.

If you scroll slowly it does it well, but if you go a little strong on the scroll the header dissapears or go down with all the rows, depending on whether you go up or down.

[nexus]

I'm facing the same issue.

[marianofischer-edsa]

I have same issue, I upgraded to v13.1.0 and issue still exists.

[alyssa-farley]

We are running into the same exact issue with v13.1.0. This makes the table look very unprofessional. We need virtual scrolling because we have large amounts of data to display. Part of the reason we picked the PrimeNG table is because of the virtual scrolling.
We only see this behavior when scrolling (quickly) with the mouse wheel.
Could we please get a fix for this or at least a timeline for when a fix might be available?

[Georg632]

We have the same issue with virtual scrolling!

It gets worse the more complicated the page becomes:

Timeline would be awesome.. or at least any reaction.

[juergen666]

Same here :-(
When could this be resolved?
I would be very thankful for help in short future

lg
Klamsi

[wondie]

Same here in version 13.2.0 of primeng.

[Gadziu1]

Same here in version 13.2.0

[mcrtricolor]

I'm not even seeing this problem fix in the future milestones.. I wonder if they noticed it.

It's a huge problem.

[wondie]

@mcrtricolor it is a huge problem that I decided not to use primeng table and moved on the material table which also has exactly the same problem. The better thing in material table is that I can keep the header to stick after their jump using scroll event. There is no similar scroll event for primeng table onLazyLoad event is not called every time on scroll.

[Restoro]

@yigitfindikli Any update on this? This makes your product unusable.

[hanyska]

Any updates?

[Krazyhawk]

I ran into this issue as well in version 12.2.3. Keep in mind this is hacky, and not an "angular" way to do it, but I have a workaround that is working for my project/team. I found that if you "slow down" the wheel speed of the cdk-virtual-scroll-viewport, even slightly, the thead works as it should without any jumping.

I took the following function from this post.

changeWheelSpeed(container, speedY) {
    var scrollY = 0;
    var handleScrollReset = function() {
        scrollY = container.scrollTop;
    };
    var handleMouseWheel = function(e) {
        e.preventDefault();
        scrollY += speedY * e.deltaY
        if (scrollY < 0) {
            scrollY = 0;
        } else {
            var limitY = container.scrollHeight - container.clientHeight;
            if (scrollY > limitY) {
                scrollY = limitY;
            }
        }
        container.scrollTop = scrollY;
    };

    var removed = false;
    container.addEventListener('mouseup', handleScrollReset, false);
    container.addEventListener('mousedown', handleScrollReset, false);
    container.addEventListener('mousewheel', handleMouseWheel, false);

    return function() {
        if (removed) {
            return;
        }
        container.removeEventListener('mouseup', handleScrollReset, false);
        container.removeEventListener('mousedown', handleScrollReset, false);
        container.removeEventListener('mousewheel', handleMouseWheel, false);
        removed = true;
    };
}

I implement it in the ngAfterViewInit function:

ngAfterViewInit(): void {
    const el = document.querySelector<HTMLElement>('.cdk-virtual-scroll-viewport');
    this.changeWheelSpeed(el, 0.99);
}

It is far from an elegant solution, but if you are, like me, needing an immediate solution to the problem, this should solve it.

[Laurent02]

@Krazyhawk This fix does not really seem to work for us. It slightly reduces the issue, but it's still very much noticeable sadly enough.

@yigitfindikli Can we please get an update and fix version on this? We want to help where possible, but any feedback/guidance would be appreciated.

[Krazyhawk]

@Krazyhawk This fix does not really seem to work for us. It slightly reduces the issue, but it's still very much noticeable sadly enough.

Sorry to hear that :/ I hope there is an official solution soon.

[Laurent02]

@yigitfindikli I dived a bit deeper into this issue, and created a fix for it. Can you please provide feedback? Thank you!

[wondie]

@Laurent02 thank you! I tried to install your pull request using npm i https://github.com/Laurent02/primeng.git
but found an error:

An unhandled exception occurred: ENOENT: no such file or directory, lstat 'myApp\node_modules\primeng\resources'
See "UserPath\AppData\Local\Temp\ng-GegY9q\angular-errors.log" for further details.

It looks like many of the other components such as pTemplate, pTable are not recognized. Maybe I didn't follow the right step to install. Could you please advise me on how to install it?

[Laurent02]

@Laurent02 thank you! I tried to install your pull request using npm i https://github.com/Laurent02/primeng.git but found an error:

An unhandled exception occurred: ENOENT: no such file or directory, lstat 'myApp\node_modules\primeng\resources'
See "UserPath\AppData\Local\Temp\ng-GegY9q\angular-errors.log" for further details.

It looks like many of the other components such as pTemplate, pTable are not recognized. Maybe I didn't follow the right step to install. Could you please advise me on how to install it?

The error you see there makes me think you only built the code, but not the styles. Did you run "npm run build-lib"?

[wondie]

npm run build-lib

I didn't do npm run build-lib. Actually the command does not work

[Laurent02]

npm run build-lib

I didn't do npm run build-lib. Actually the command does not work

Okay, you'll have to do that. You should first install the dependencies (npm i), then I had to change the .browserslistrc file because of an Angular issue (remove the iOS and Safari values). Then, I had to comment out a polyfill (web-animations-js) in polyfills.ts and then the command should work, provided you have gulp installed of course.

[wondie]

@Laurent02 It didn't work out for me. I have no experience on gulp. I guess I have to wait until your pull request is merged and released.

[sotjdisc]

Is there an update on this issue?

[jonathan-fortin]

Hi,

We have the same issue with virtual scrolling.

Grid.mov

Is there an update on this issue ?

[waviest06]

@yigitfindikli Any updates here? So many people affected by that… Can we count on primeng for our projects?

[Laurent02]

@yigitfindikli Any updates here? So many people affected by that… Can we count on primeng for our projects?

They assured me in their Discord channel that we can. Almost two months ago....
We ended up building the branch with the fix ourselves and pushing it to our own repository, but that's not desirable on the long term obviously. We needed the fix for our release though, as I'm sure many here are too.

[waviest06]

The user experience caused by this bug is awful.. But the luck of response from primetek is even worse.

[jonathan-fortin]

Yes, we are in the same situation.

We need a fix to release our app. We had a performance issue with grids, so we switched to virtual scrolling, but we can't release in such a state.

[draco2007]

The user experience caused by this bug is awful.. But the luck of response from primetek is even worse.

Not the first and not the last case. The change to this flex-layout table was a realy bad decission. It might solved some issues with frozen columns and rows but it made everything else much worse. There are 3-5 major bugs with this change.

And they made this change in a minor version (12.1.x)

They just could have made the old table deprecated and create the new one, so one could switch if one would not use features like virtuall scrolling, but all others could stayed on the old table, which worked fine (if not using frozen columns).
Then they would have all the time they need to get it right for all features.

Yeah we all know tables/grids are some of the most complex components. But this was just unprofessional...

[jonathan-fortin]

As soon as a grid contains a lot of data, performance is greatly reduced. So we have to enable virtual scrolling, but this feature completely breaks usability.

This is an important feature, not a secondary one.

Anyone have a workaround?

[draco2007]

As soon as a grid contains a lot of data, performance is greatly reduced. So we have to enable virtual scrolling, but this feature completely breaks usability.

This is an important feature, not a secondary one.

Anyone have a workaround?

Use PrimeNG 12.0.x, if possible. If you don't need frozen columns/rows it should be fine.

[wondie]

This issue and its pull request is added to version 13 future milestone which has no due date and just 3% done. https://github.com/primefaces/primeng/milestone/175

I don't know why the pull request is not incorporated in a patch release.

[jonathan-fortin]

Hi,

We are on PrineNG 13 and we tried to revert to version 12, but there is too much impact on our layout :(

Also, we need frozen columns :(

So we're screwed :(

[marianofischer-edsa]

npm run build-lib

I didn't do npm run build-lib. Actually the command does not work

Okay, you'll have to do that. You should first install the dependencies (npm i), then I had to change the .browserslistrc file because of an Angular issue (remove the iOS and Safari values). Then, I had to comment out a polyfill (web-animations-js) in polyfills.ts and then the command should work, provided you have gulp installed of course.

I tested the version from the fork repository, in my case header's issue was resolved but breaks frozen columns layout.

[cagataycivici]

We've decided to use our own virtual scrolling that we have in PrimeVue and PrimeReact to resolve this. CDK just doesn't work well for our cases. Target is PrimeNG 14 - Angular 14 likely to be back ported to v13 as well.

[mertsincan]

Hi,

Fixed for PrimeNG 14. We changed our virtualScroll implementation. We designed a new scroller API instead of Angular cdk and used it in all components.
#11656
#11664

https://www.dropbox.com/s/tmho3ii70viilgg/virtualscroll.mov?dl=0

Best Regards,