Component: Table with pFrozenColumn

[ajaysaini235]

Describe the bug

When horizontal scroll is zero from left side then user scroll vertically in that case scroll behavior is fine. But if user first scrolled horizontally then try to scroll vertically in that case Frozen Columns taking time to render.

Recording.2024-07-31.171811.mp4

I have created demo on Stack blitz. Please let me know if you need more discussion regarding this ticket. Please help me to resolve this issue ASAP.
[Demo Link] (https://stackblitz.com/edit/primeng-tablevirtualscroll-demo-fyaw3k?file=src%2Fapp%2Fapp.component.html)

Environment

Angular 14
Prime 14

Reproducer

No response

Angular version

14

PrimeNG version

14

Build / Runtime

Angular CLI App

Language

ES6

Node version (for AoT issues node --version)

14.20

Browser(s)

All

Steps to reproduce the behavior

I have attached the video and Online demo link.

Expected behavior

Scroll should be smooth.

[ranthonissen]

I'm pretty sure this got introduced in #15303 and #15302, which also caused #15852.
I fixed that in #15854, but that PR still isn't merged after 6 weeks.

[ajaysaini235]

@ranthonissen
Thanks, for quick response.
I am using 14.x version of angular and prime but your PR for this issue is merged in master branch mean this will fix new latest version.
Please provide your suggestion how I can resolve this with 14.x version.

[ajaysaini235]

Should I need to create custom directive like - pFrozenColumn . That Custom directive will extend the FrozenColumn class.

[ranthonissen]

@ajaysaini235
As a temporary workaround, I introduced a monkeypatch in our application to override the function that causes the rendering delay. I don't know whether it fixes your issue, but it is worth the try.

in app.component.ts, I added:

    private monkeyPatchFrozenColumn() {
        Object.defineProperty(FrozenColumn, 'frozen', function(val: boolean) {
            this._frozen = val;
            this.updateStickyPosition();
        });
        FrozenColumn.prototype['ngAfterContentInit'] = function() {
            this.zone.runOutsideAngular(() => {
                this.recalculateColumns();
            });
        };
        FrozenColumn.prototype.recalculateColumns = function() {
            this.updateStickyPosition();
        };
    }

and called it from ngOnInit

[ranthonissen]

You should however check with the source code from your version, for the implementation of FrozenColumn

[ajaysaini235]

Thanks, As of now, I have created custom directive cpFrozenColumn and used this in place of pFrozenColumn.
In cpFrozenColumn, I have copied the code from lates branch of primeng that you have merged yesterday. Now, it's working form me.

I will also try monkeypatch workaround.

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation and try the latest PrimeNG version(v19). If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,