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

score 2 · Answer 1 · answered Mar 14 '22 at 17:43

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.

score 2 · Accepted Answer · answered Mar 14 '22 at 20:08

2

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

answered Mar 14 '22 at 20:08

alezhu

475
3
6

This worked but I don't understand why adding the new row to existing data was detected and added in the table normally, but just the filters wasn't working and we had to create a new product array – Daud Mar 15 '22 at 06:22
Because change detection mechanism not compare array elements - only references to arrays. So when we just add item to array it's thinks nothing changes – alezhu Mar 15 '22 at 06:48
That's correct, but then why does the table view get updated when we simply add certain objects to the array, without changing the array reference? Is it that the table component uses regular change detection and filter component uses OnPush? – Daud Mar 15 '22 at 11:25

How to retrigger filters on data update in PrimeNG tables?

2 Answers2