Recently, I managed to set up a datatable with the functionalities of both Lazy loading and global filter. Utilizing PrimeNG components for this implementation was a breeze. However, an issue surfaced where the global filter ceased to function when lazy loading was enabled with [lazy]="true".
HTML Code :
<input #gc type="text" pInputText size="30" placeholder="Global Filter" class="element-space">
<p-dataTable [value]="infoList" [rows]="5" [globalFilter]="gc" [totalRecords]="records" (onLazyLoad)="loadInfo($event)"
scrollable="true" scrollHeight="200px" virtualScroll="virtualScroll" selectionMode="single" [(selection)]="selectedInfo"
(onRowSelect)="onInfoRowSelect($event)" dataKey="infoId" class="break-word" resizableColumns="true" [lazy]="true">
TS code :
lazyLoadOutInfo(event: LazyLoadEvent) {
setTimeout(() => {
if (this.infoListData) {
this.infoList= this.infoListData.slice(event.first, (event.first + event.rows));
}
}, 25);
}
It's essential for me to have both features in working order. Any insights or solutions on how to tackle this perplexing challenge?