I have created a datatable with both Lazy loading and global filter features. I used PrimeNG components for the implementation. But I found that the global filter is not working when lazy loading is enabled, i.e. [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);
}
I need to have both features working, does anybody have a clue here ?