Scroller / Table: When changing size of Scroller /Table, scrolling shows white space instead of rows

[PranKe01]

Describe the bug

When the size of the Scroller component is changed, there is a white space, instead of showing the items. Whenever we scroll, items are getting added, but still some white space is left. That issue also applies to the Table, as it uses the Scroller internally.

As I use the Lazy loading Table in a flex layout, where users can change size of different areas, the Table shows whitespace, when extending the height of the Table.

For now I added virtualScrollOptions.numToleratedItems and set it to a high number, to make sure more rows are loaded: scrollHeight="{{ height === 0 ? 'flex' : scrollHeight + 'px' }}" [virtualScrollOptions]="height === 0 ? { numToleratedItems: 50 } : {}"

Anyhow, this leads to worse performance and misstyling whenever the "loading indicator" is shown, because here again white space is shown.

Environment

PrimeNG showcase/documentation on a Windows computer using Chrome.

Reproducer

https://www.primefaces.org/primeng/scroller

Angular version

14

PrimeNG version

14.2.2

Build / Runtime

TypeScript

Language

TypeScript

Node version (for AoT issues node --version)

14.21.0

Browser(s)

No response

Steps to reproduce the behavior

1. Go to https://www.primefaces.org/primeng/scroller
2. Open Developer Tools and select the "Basic vertical" scroller example
3. Change the height from 200px to 600px -> You will see blank space
4. Scroll down -> You will also see blank space

Expected behavior

When changing the size of a Scroller/Table (for example in a flex layout within the Splitter component), no white space should be shown, but the rows should be visible. Same applies when scrolling.

[PranKe01]

Any update on this? @mertsincan Can you add the bug label?

[ridy01-backup]

try using:

{ showSpacer: false, }

in virtualScrollOptions.

This worked for me.

[PranKe01]

try using:

{ showSpacer: false, }

in virtualScrollOptions.

This worked for me.

I tried it. Does not work for me.

[PranKe01]

@mertsincan The stackblitz button in the https://www.primefaces.org/primeng/scroller page does not work. It says "page not found": https://stackblitz.com/edit/primeng-scroller-demo

Also the v14 page is not accessible directly: https://www.primefaces.org/primeng-v14/setup It redirects to primeng.org and shows nothing.

[PranKe01]

I observed the same issue, combined with the sorting in a table. Sometimes it happens, that after scrolling down and sorting a column, the top rows are not available/visible and a big white space is visible. :(

[PranKe01]

I could fix the sorting issue by manually resetting the transform property of p-scroller-content: const scrollerContent = $('#tableId tbody.p-element.p-datatable-tbody.p-scroller-content'); scrollerContent?.css('transform', 'translate3d(0px, 0px, 0px)');

@mertsincan Anyhow, this should get fixed by primeng itself.

[PranKe01]

@mertsincan Issue still exists in v16.0.0.

[jrfornes]

try using:

{ showSpacer: false, }

in virtualScrollOptions.

This worked for me.

This helped. I tweaked other virtualScrollOptions too. I think trackBy helps too.

virtualScrollDelay="0"
  [virtualScrollOptions]="{
    showSpacer: false,
    showLoader: false,
    trackBy: getTrackByFn,
  }"