PrimeNG 9 – Table virtual scrolling and filtering do not function together correctly

I have encountered what I believe to be a bug when attempting to combine virtual scrolling and filtering functionality on PrimeNG's table component.

With both features enabled and attempting to filter, the rendered data does not get filtered out, but I have managed to debug through the primeng filter functions that get invoked and can see that the underlying does actually get filtered, my suspicion is that this is something more to do with the internal of how the CDK virtual scroller instance is being utilised inside somehow.

Replicable Demo -

Using the url above, just filter by any of the columns of data that are returned, e.g. a brand name.

This first demo uses virtual scrolling and also please observe the console output whilst filtering as I am capturing here the results of the onFilter table event and counting the length of matching filtered records for the input filtered search term. You will see how results are clearly being matched and returned but the rows in the table just never filter accordingly, the original rendered rows are always shown.

To further prove my suspicion that I think is somehow the fault of the CDK virtual scroller usage within primeNG, you can remove the following two table attributes in the stackblitz demo:

[virtualScroll]="true" [virtualRowHeight]="34"

after removing these, and so disabling virtual scrolling, the filtering functionality will function as expected in terms of showing only the matching results in the table, but of course it loses the performance benefit of having virtual scrolling enabled.

So my ask is, how can I have both here?

BTW - yes I am using PrimeNG 9, and 10 is the latest, but for various reasons the project I am on is still on 9 and will be for some time to come so I am looking for a v9 fix\workaround if possible here.

Thanks for your time!

Read more here:

Content Attribution

This content was originally published by mindparse at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: