[FIXED] Pagination doesn't get refreshed when adding new rows to PrimeNG tables

Issue

In this simple stackblitz, there are only 4 initial rows and the pagination section shows only 1 page. Now, when I add rows dynamically after every 3 seconds, then also the pagination section shows a single page no matter how many rows I add. How to keep pagination in sync with table data?

Solution

Since arrays are passed by reference even if we add new data that reference is not changing, Try using spread operator to add new value to array.

setInterval(() => {
    const newData = {
      albumId: 25000,
      id: 24000,
      title: 'zaalim haakim',
      url: 'google.com',
      thumbnailUrl: 'google.com',
    };
      this.products = [...this.products,newData];
    }, 3000);

OR

As mentioned by @Arnaud Denoyelle in the comment you can use Viewchild to get table instance and call reset on it to update paginator state

@ViewChild(Table) table: Table;

 setInterval(() => {
    const newData = {
      albumId: 25000,
      id: 24000,
      title: 'zaalim haakim',
      url: 'google.com',
      thumbnailUrl: 'google.com',
    };
      this.table.reset();
    }, 3000);

Forked Working Example🚀

Answered By – Chellappan வ

Answer Checked By – Gilberto Lyons (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published