2

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 - https://stackblitz.com/edit/primeng9-table-virtualscroll-with-filtering?file=src/app/app.component.html

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!

mindparse
  • 7,083
  • 17
  • 64
  • 146
  • Can you put the stackblitz code here as well? See [mre]. It's fine to leave the link, but the code also needs to be in the actual question in case the link dies. – zero298 Nov 18 '20 at 18:37

1 Answers1

0

After some test I saw that this issue is by the version you're using. As you said, you can not upgrade the version but what about downgrade?

    {
      "name": "qgnirxral.github",
      "version": "0.0.0",
      "private": true,
      "dependencies": {
        "@angular/animations": "~9.1.9",
        "@angular/cdk": "~9.2.4",
        "@angular/common": "~9.1.9",
        "@angular/compiler": "~9.1.9",
        "@angular/core": "^9.1.9",
        "@angular/forms": "~9.1.9",
        "@angular/platform-browser": "~9.1.9",
        "@angular/platform-browser-dynamic": "~9.1.9",
        "@angular/router": "~9.1.9",
        "@fullcalendar/core": "4.4.0",
        "@types/jasmine": "3.3.10",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.11.1",
        "primeflex": "^1.1.1",
        "primeicons": "^2.0.0",
        "primeng": "9.0.6",
        "quill": "^1.3.7",
        "rxjs": "^6.6.3",
        "rxjs-compat": "^6.6.3",
        "tslib": "^1.13.0",
        "web-animations-js": "2.3.2",
        "zone.js": "0.10.2"
      },
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~0.901.7",
        "@angular/cli": "^9.1.7",
        "@angular/compiler-cli": "~9.1.9",
        "@types/jasmine": "3.3.10",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.11.1",
        "codelyzer": "^5.1.2",
        "jasmine-core": "~3.5.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "^5.0.9",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "^3.0.3",
        "karma-jasmine": "^2.0.1",
        "karma-jasmine-html-reporter": "^1.5.4",
        "protractor": "~5.4.2",
        "ts-node": "~8.0.2",
        "tslint": "~5.12.1",
        "typescript": "~3.8.3"
      }
    }

I have downgraded the package version to 9.0.6 and it works well.

Here is your example with the modification

https://stackblitz.com/edit/primeng9-table-virtualscroll-with-filtering-ok5cvp?file=src/app/app.component.html

I hope you can downgrade and fix the issue until you can update it to the newest version.

José Polanco
  • 123
  • 12