how to make virtual scroll and pagination work together primeng

Question

I have scenario where I need to display 150 records at a time in primeng data grid, but it starts freezing after 50 records since in my grid, I have 18 columns, so it is taking lot of memory and also has many events attached to the rows. So, I would require a virtual scroll for that purpose, but I cannot make virtual scroll and pagination work together in the grid. If I try to customise the data table code, it also has many side affects. If someone has come up with the such a solution, it would really helpful. Below is my code that I have tried but it is giving 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;
                    }
                });
        });
    });