TreeTable: frozenColumns does not scroll vertically

[CodersExpo]

Describe the bug

Setting up a treetable with frozen columns as defined here: https://primeng.org/treetable/scroll works.

However, if you add scrollHeight="flex" [virtualScroll]="true" [virtualScrollItemSize]="34" scrolling the rows up/down vertically does NOT scroll the fields in the frozen column, those fields just stay frozen. All rows (fields) should scroll vertically together. Scrolling side to side horizontally does still work. The columns will scroll and the frozen ones say in place.

Environment

"dependencies": { "@angular/animations": "^15.1.2", "@angular/cdk": "^15.0.3", "@angular/common": "^15.1.2", "@angular/compiler": "^15.1.2", "@angular/core": "^15.1.2", "@angular/forms": "^15.1.2", "@angular/platform-browser": "^15.1.2", "@angular/platform-browser-dynamic": "^15.1.2", "@angular/router": "^15.1.2", "@angular/service-worker": "^15.1.2", "@fortawesome/angular-fontawesome": "^0.10.2", "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-brands-svg-icons": "^6.0.0", "@fortawesome/pro-regular-svg-icons": "^6.0.0", "@fortawesome/pro-solid-svg-icons": "^6.0.0", "angular-oauth2-oidc": "^15.0.1", "animate.css": "^3.7.2", "applicationinsights-js": "^1.0.21", "bootstrap": "^5.2.3", "font-awesome": "^4.7.0", "jquery": "^3.6.0", "karma-coverage": "^2.0.3", "ng-mocks": "^14.2.2", "ngx-toastr": "^16.0.2", "primeicons": "6.0.1", "primeng": "^15.2.0", "rxjs": "^7.8.0", "tslib": "^2.3.1", "xlsx": "^0.17.1", "zone.js": "~0.11.4" }

`

{{col.header}}

{{col.header}}

{{col.planBudgetStatus}}

{{ rowData[col.field] }}

{{ rowData[col.field] }}

({{ (rowData[col.field]?.cost - (rowData[col.field]?.cost * 2)) | currency }}) {{ rowData[col.field]?.status?.trim() }}

{{ rowData[col.field]?.cost | currency }} {{ rowData[col.field]?.status?.trim() }}

{{rowData.optionsOrAccountCategoryDesc.trim()}}

{{rowData.optionsOrAccountCategoryDesc.trim()}}

No result found

Community selection required! You must select a community to view the Master Budget Data.

` ### Reproducer _No response_ ### Angular version 15.1.2 ### PrimeNG version 15.2.0 ### Build / Runtime Angular CLI App ### Language TypeScript ### Node version (for AoT issues node --version) 16.14 ### Browser(s) Chrome ### Steps to reproduce the behavior StackBlitz does not support the latest 15.2.0 version of Primeng or the required Angular 15.1.2 so its hard to demo. I included the package versions being used and the HTML. 1. Basically, set up a treeTable with a frozen columns section. SEE ENVIRONMENT CODE ABOVE ie: ` [columns]="scrollableColumns" [frozenColumns]="frozenColumns" scrollHeight="scrollableAreaHeight" scrollHeight="flex" frozenWidth="500px" [virtualScroll]="true" [virtualScrollItemSize]="34" [rows]="100" [scrollable]="true"` 2. If I remove [virtualScroll]="true" [virtualScrollItemSize]="34" it seems to work as expected. However, the page load time is drastically increased do to the number of records. We have to use these attributes for the grid to load quickly. 3. With the [virtualScroll]="true" [virtualScrollItemSize]="34" attributes the grid scrolls left and right fine with the defined frozenColumn sticky as expected. 4. Scrolling up and down vertically and only the unfrozen section scrolls. The frozen section is still sticky and should not be. It should scroll up and down as a whole. ### Expected behavior Data should scroll horizontally while the frozen column says in place. Data should scroll as a whole vertically with no rows sticky under the frozen column section. Should be able to load data as a virtual scroll in a flex container.

[CodersExpo]

***Update on a work around for this issue**

You should be able to use JQuery to capture the scroll event in the right tables scrollable view and apply that to the left table.

// This is a bandage to fix a scroll issue on frozen tree tables, please remove this when primeng releases a fix
ngAfterViewChecked(): void {
    setTimeout(() => {
        let frozenTable = $('.p-treetable-frozen-view');
        let unfrozenTable = $('.p-treetable-unfrozen-view');

        let frozenTableScroller = frozenTable?.find('div.p-treetable-scrollable-body.p-scroller');
        let unfrozenTableScroller = unfrozenTable?.find('div.p-treetable-scrollable-body.p-scroller');

        if (frozenTableScroller && unfrozenTableScroller) {
            unfrozenTableScroller.off('scroll');
            unfrozenTableScroller.on('scroll', function () {
                frozenTableScroller.scrollTop($(this).scrollTop());
            });
        }
    }, 1);
}
// ------------- end -------------

[gerbermichi]

Do you have plans to fix this?

[github-actions[bot]]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles: