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

Question

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?

Answer 1

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