Angular5 - PrimeNG - p-table component paginator selected tab resets to first tab on data reload

Question

PrimeNG, p-table component when the data is reloaded the table resets to the first paginator tab.

Is there any way to stop that behaviour and make the paginator to remain in the same selected tab (for example 2 or 4 or 5 etc) when the data is reloaded?

I reload the data every 10 seconds by calling the RestAPI using setTimeout() in a loop till it stays on that page.

HTML

    <p-table #dt [columns]="cols" [value]="dataMarts" [paginator]="true" [rows]="15" [pageLinks]="5" [rowsPerPageOptions]="[5,10,15,20,50,100,200,500,1000]"sortField="Id" resetPageOnSort="false">

Reference: https://www.primefaces.org/primeng/#/table

Not sure if this behaviour is something to do with the given explanation in section "Change Detection" of the above link.

Update:- This problem was actually caused by the attribute sortField="Id" which caused to always show the first tab. After removing it works fine.

Answer 1

With onPage event triggered when you change page and first property, you can stay on the page you selected.

Just add (onPage)="paginate($event)" [first]="first" to your p-table and relevant TS code :

paginate(event) {
    this.first = event.first;
}

where event.first is the first visible row of the page you selected.

See StackBlitz

Edit

Works with PrimeNG 5.2.4+