p-table triggers lazy loading event twice

[aabruc]

Describe the bug

My table definition looks like this:

<p-table dataKey="id" [value]="items" 
    [paginator]="true" [rowsPerPageOptions]="[10,20,30,100,1000,10000]"
    [rows]="20" [alwaysShowPaginator]="false" paginatorDropdownAppendTo="body"
    [(selection)]="selectedItems" selectionMode="multiple" [metaKeySelection]="true"
    (onRowSelect)="rowSelect()" (onRowUnselect)="rowUnselect()"
    [lazy]="true" [showLoader]="true" [filters]="filters" (onFilter)="selectedItems = []"
    [rowHover]="true" responsiveLayout="scroll">

We're faced with the issue that the combination of column filter and sorting triggers the lazy loading twice.
Sorting and then column filter works fine, sorting without column filter also.
As soon as there is a column filter in the LazyLoadingEvent, a sorting triggers twice, and therefore we have two backend calls immediately after each other.

{first: 0, rows: 20, sortField: "changeDate", sortOrder: 1,…}
	filters: {name: {value: ["abc"], matchMode: "in"}}
	first: 0
	globalFilter: null
	rows: 20
	sortField: "changeDate"
	sortOrder: 1

I found a similar ticket that contains almost the same issue with PrimeNg version 14 from February 23, still open:
#12595

Environment

Windows 11 Enterprise

Reproducer

No response

Angular version

17.3.12

PrimeNG version

17.18.6

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.11.1

Browser(s)

Chrome

Steps to reproduce the behavior

No response

Expected behavior

No response

[mnhock]

Are there any news on this ticket?

[mehmetcetin01140]

Hi, if you are still experiencing the issue with version 17.18.7, could you create a StackBlitz example?

[SaajRP]

@mehmetcetin01140

I have been able to replicate this on PrimeNg 17.18.7. Look at the console log whenever you sort or filter a table column, it logs 2 lazy load events, when it should only log 1

https://stackblitz.com/edit/oetsny-rdsoxe?file=src%2Fapp%2Fdemo%2Ftable-virtual-scroll-lazy-demo.ts

[aabruc]

@SaajRP,
Hi and thank you! Unfortunately, in your demo even the first load runs twice. This is not the case in any of my programs.

In the meantime, I have also created a demo. Here you can see that only one lazy load event is called - in any case, even if filtering and then sorting are performed first. It's very simple, but I cannot see what difference to my (admittedly more complex program with the call to the backend) causes this double lazy loading.

I use PrimeNg 18 and Angular 18 and dynamic columns.
https://stackblitz.com/edit/mkvney-yv1qdi

Could you please check, if my demo is meaningful enough for this test and what the difference is to your program, @mehmetcetin01140, @SaajRP? When you have the same issue it must be a combination of p-table settings that leads to the double lazy loading. In the meantime, I will carry out this comparison with my program and let you know if I have any results.

Thank you and kind regards
Andrea.

[SaajRP]

@aabruc

On your StackBlitz instance, I set the customSort property to true on p-table (as I assume sorting will be handled by your API instead of the client), now whenever I sort, it logs the lazy load event twice

[ahaller-billtrust]

I'm experiencing the same issue. Setting customSort property to true on p-table triggers (onLazyLoad) twice.
I also notice that the second call to onLazyLoad has incorrect pagination params if we are in a different page than the first one (first property of the lazy load event).

Tried with primeng@17.18.8 and the bug is still there

Forked StackBlitz: https://stackblitz.com/edit/mkvney-jrqaze?file=src%2Fapp%2Fdemo%2Ftable-multiple-selection-demo.html

[aabruc]

Hi @ahaller-billtrust,
You are right, this setting triggers lazy loading twice. Unfortunately, my table does not have this setting and if I explicitly set [customSort]="false", it still does not help. But I guess you're on the right way, It could be a second call in the sortSingle() method by mistake.