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);

Answer 2

It is a hacky solution, but you can add a ViewChild for the table to your component:

@ViewChild(Table) table;

Then you can call its private filter method _filter which it also uses internally to update the filter whenever you update the data.

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

Notice the addition in the second last line.

This is more of a workaround, though.