Scrolling in TurboTable with 'virtualScroll' and 'lazy' enabled leads to jumping

[thojo]

I'm submitting a ...

[x] bug report
[ ] feature request/primefaces/primeng/wiki/Roadmap
[ ] support request

Plunkr Case
http://plnkr.co/NSmYj9A3GGeQp82TzROD

Current behavior
Row height is hard coded in TurboTable:

primeng/src/app/components/table/table.ts

Line 1675 in 4e7aceb

let pageHeight = 28 * this.dt.rows;

This leads to jumps while scrolling (and rows get lazy loaded) with virtualScroll and lazy enabled when the row height is not 28px. See Plunkr. The problem is also present in the official docs with e.g. Firefox because the the row height differs by 1px compared with Chrome. Setting virtualRowHeight has no impact (perhaps virtualRowHeight should be used instead of the hard coded 28px).

Expected behavior
No junmping when rows lazily get loaded.

Minimal reproduction of the problem with instructions
Change row height or use demo from docs with Firefox: Virtual Scroll - 250K Rows

What is the motivation / use case for changing the behavior?
Annoying behaviour.

Please tell us about your environment:

• PrimeNG version: 5.2.0

• Browser: Chrome 64 (not for default row height), Firefox 58, ...

[Ponsivakumar]

I'm also facing the same issue when migrating from p-datatable to p-table. The same is working fine in p-datatable.

[nickproquro]

I'm testing this component with large data sets, and missing rows when using virtual scroll and lazy loading.
When changing the pageheigth in table.js it works fine on a desktop.
When responsive is enabled, row height can differ using a smaller device.

[cagataycivici]

Issue is fixed, also for smooth scrolling updated the docs where tr should also get a height.

<p-table [columns]="cols" [value]="virtualCars" [scrollable]="true" [rows]="20" scrollHeight="200px" [virtualRowHeight]="30"
    [virtualScroll]="true" (onLazyLoad)="loadDataOnScroll($event)" [lazy]="true" [totalRecords]="totalRecords">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr style="height:30px">
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

[Defaultguy]

I'm facing this issue for a multiselect. When I introduce virtualscroll for a smoother navigation, as soon as I start searching in the input area, the non relevant results are only hidden. So for example if I search a result, which is at the bottom of the list, this won't be shown as first.

[niran-manandhar]

@cagataycivici jumping issue still exists even after tr gets a height.

[dktjsp]

Still not fixed !

[rodolfoTiRb]

I'm looking further for a fix, any news people ? Still facing the P-table tag with the virtualscroll and multiselection line presenting only the first line. Can anyone bring me some light on that ? Apreciated

Btw< Ng-content is brought empty in inspect tool.