Scroller/Tree/TreeTable/Table: VirtualScrolling does not work after upgrading to PrimeNG 18 from 17.18.12

[BeGj]

Describe the bug

Whenever you are using a virtualScroll together with scrollHeight: flex it will not work. Nothing will display.

I have tested on three different components

• Table
• TreeTable
• Tree
  Se attached repository for the TreeComponent. Since all these component use p-scroller under the hood I think it's likely something wrong with p-scrolller

Environment

See package.json

Reproducer

https://github.com/BeGj/primeng-18-virtualscrolling-flex-height-bug

Angular version

• 18.2.12
• 19.0.5

PrimeNG version

• 18.0.0
• 18.0.1
• 18.0.2
• 19.0.0
• 19.0.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.18.0

Browser(s)

firefox 133 and chrome 129 and chromium 133

Steps to reproduce the behavior

1. Use table component
2. Set scrollheight flex
3. set virtualscroll to true
4. profit.
5. see attached repository https://github.com/BeGj/primeng-18-virtualscrolling-flex-height-bug

Expected behavior

Expects the virtual scrolling to work! Or at least dislay something like previously...

[BeGj]

STill broken in 18.0.2 and 19.0.1. (Angular 18 and 19).

Here is v19 branch for reference https://github.com/BeGj/primeng-18-virtualscrolling-flex-height-bug/tree/angular19

[BeGj]

It works in 17.18.15 (V17 branch for reference https://github.com/BeGj/primeng-18-virtualscrolling-flex-height-bug/tree/v17)

Something went wrong here: 17.18.15...18.0.0

[achimheynen]

I ran into that problem, too, and added a style to solve it:

// Fixes a no-size issue in p-table with virtual scroll and flex height
.p-datatable-flex-scrollable p-scroller {
    height: 100%;
    width: 100%;
}

[BeGj]

I ran into that problem, too, and added a style to solve it:

// Fixes a no-size issue in p-table with virtual scroll and flex height
.p-datatable-flex-scrollable p-scroller {
    height: 100%;
    width: 100%;
}

This did not work in my sample provided above, and neither in my production code..

I added this to styles.scss

:host ::ng-deep .p-datatable-flex-scrollable p-scroller {
    height: 100%;
    width: 100%;
}

Did I do it wrong, or do you have any further instructions?

[martinkasa]

I ran into that problem, too, and added a style to solve it:

// Fixes a no-size issue in p-table with virtual scroll and flex height
.p-datatable-flex-scrollable p-scroller {
    height: 100%;
    width: 100%;
}

thank you! worked for me

[dsubelman]

I ran into that problem, too, and added a style to solve it:

// Fixes a no-size issue in p-table with virtual scroll and flex height
.p-datatable-flex-scrollable p-scroller {
    height: 100%;
    width: 100%;
}

Thank you, that did the trick for Table, but not for TreeTable.