I am currently facing a situation where I have to display 150 records simultaneously in my primeng data grid. However, the grid starts freezing after loading just 50 records. This is because there are 18 columns in my grid, causing it to consume a lot of memory. Additionally, there are many events attached to each row which further impacts performance. To address this issue, I believe implementing virtual scrolling would be ideal. The challenge, however, lies in making virtual scroll and pagination work together seamlessly within the grid. Any insights or solutions on how to overcome this hurdle would be greatly appreciated. Below is a snippet of the code I have experimented with so far, but it seems to be causing performance issues:
let element = this.elRef.nativeElement.querySelector('.ui-datatable-scrollable-body');
this.zone.runOutsideAngular(() => {
Observable.fromEvent(element, 'scroll')
.debounceTime(20)
.subscribe(res => {
this.zone.run(() => {
let position = 0;
if (this.rowsCountPerPage > 10 && this.rowsCountPerPage > this.manualProcessGridData.length) {
let el = this.elRef.nativeElement.querySelector('.ui-datatable-scrollable-body');
let scroll = el.scrollTop;
if (el.scrollTop >= (el.scrollHeight - el.offsetHeight) * 0.7) {
if (scroll > position) {
let loopLength = this.lastElementInGrid + 10;
let loopStart = this.lastElementInGrid;
for (let i = loopStart; i <= loopLength; i++) {
if (typeof this.docproData[i] !== 'undefined') {
this.manualProcessGridData = [...this.manualProcessGridData, this.docproData[i]];
}
if (loopLength === i) {
this.lastElementInGrid = i + 1;
}
if (i >= this.docproData.length) {
break;
}
}
}
}
position = scroll;
}
});
});
});