How to retrigger filters on data update in PrimeNG tables?

Question

If I add some rows to the table, the table view gets dynamically updated, but the filters I apply reflect only initial data.

For eg, if I apply the filter "startsWith" on a header called "Title" with a filter value of "zaalim", then if the initial dataset didn't have any row with title starting with "zaalim", then the view will keep showing empty even after I add such rows after every 10 seconds. If you remove the filter, you can see the new rows with Title starting with "zaalim" being gradually added.

I want the filtered view to reflect the change in dataset. (Even the pagination doesn't get automatically refreshed). Maybe I can re-trigger existing filters after adding each new row? How to do that?

Here is the stackblitz

Answer 1

You must create new product array instead change existing. Try this

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