Primeng p-table virtual scroll display previous rows when using row grouping

Question

I'm trying to create a p-table that has grouped rows but I'm not able to correctly apply the virtual scroll feature.

p-table is part of the PrimeNg framework.

The issue is when scrolling and doing a lazy loading (which, actually is just appending some rows), the table display previous rows instead of the new ones. But if I load all my data and scroll from the beginning to the end, all rows are correctly displayed. I assume this is a problem during the refreshing of the table after a lazy load.

For a better comprehension of this issue I've reproduced it on a stackblitz: https://stackblitz.com/edit/angular6-primeng-8mtvwc

Thank you for any help.

I am not sure if I can see issue in stackblitz you attached. Are you sure it is correct one? — Dipen Shah, Aug 26 '19 at 17:49
I've recorded the issue reproduced on stackblitz: https://gofile.io/?c=GYNJhF — MHogge, Aug 27 '19 at 06:12
Did you tried adding a tail to the name, it might be faker using the same name Try const acpName = faker.company.companyName(0) + faker.random.number({min:1, max:10}); or something like that — Pablo Palacios, Aug 29 '19 at 21:01

score 2 · Answer 1 · answered Aug 31 '19 at 15:21

1) With the grouping, the totalRecords you set is not correct. We have to take the count of the title-rows and add it to the totalRecords as well:

this.totalRecords = this.filteredInvoices.length + Object.keys(this.rowGroupMetadata).length;

2) Slicing always from the beginning does not quite make sense for me. We should only push new rows to the table. So instead of:

  loadChunk(init?: boolean) {
   ...
      data = [...this.filteredInvoices]
    } else {
      data = this.filteredInvoices.slice(0, endIndex); // <===
    }
    ..
  }

you can do something like that:

  loadChunk(init?: boolean) {
    ...
    const startAt = this.displayedInvoices ? this.displayedInvoices.length : 0;
    let endAt = startAt + this.MAX_ROWS;

    if (endAt >= this.filteredInvoices.length) {
      endAt = this.filteredInvoices.length;
    }

    const newInvoices = this.filteredInvoices.slice(startAt, endAt);

    this.displayedInvoices.push(...newInvoices);
  }

Updated your blizz, hope that helps: https://stackblitz.com/edit/angular6-primeng-psbm78?file=src/app/home-encoding/home-encoding.component.ts

Cheers Chris

Thanks. It in facts resolve the issue but their is stil something weird happening. If I scroll to load a chunk and then make a search, the table does not resize to fit the actual number of rows. You can see it on this video: https://gofile.io/?c=RhkPIm — MHogge, Sep 04 '19 at 06:28

score 0 · Answer 2 · answered Aug 29 '19 at 06:37

I think the problem is, that PrimeNg internally uses the row height for virtual scrolling, which always causes issues when rows have different heights for example. Since your rows are grouped your likely have a group header row, which also kicks the calculation in the ass.

Primeng p-table virtual scroll display previous rows when using row grouping

2 Answers2