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.
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+