Kendo Grid Virtual Scrolling / Endless Scrolling with sorting

https://stackblitz.com/edit/angular-q57v7f?embed=1&file=app/app.component.ts

import { Component, ViewEncapsulation } from '@angular/core';

import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid';

import {process } from '@progress/kendo-data-query';

@Component({

    selector: 'my-app',

    /*

     * Set a fixed row height of 36px (20px line height, 2 * 8px padding)

     *

     * [row height] = [line height] + [padding] + [border]

     *

     * Note: If using the Kendo UI Material theme, add 1px to the row height

     * to account for the bottom border width.

     */

    encapsulation: ViewEncapsulation.None,

    styles: [`

        .k-grid tbody td {

            white-space: nowrap;

            line-height: 20px;

            padding: 8px 12px;

        }

    `],

    template: `

      <kendo-grid

          [kendoGridGroupBinding]="data"

          [navigable]="true"

          [groupable]="true"

          [sortable]="true"

          [group]="state.group"

          [pageSize]="100"

          (dataStateChange)="dataStateChange($event)"

          scrollable="virtual"

          [rowHeight]="36"

          [height]="900"

        >

        <kendo-grid-column *ngFor="let col of columns" [field]="col.field" [width]="col.width">

          <ng-template kendoGridGroupHeaderTemplate let-group let-field="field" let-value="value">

              <strong>{{field}}</strong>: {{value}}

              {{' total ' + group.aggregates[field]?.count}}

          </ng-template>

        </kendo-grid-column>

      </kendo-grid>

  `

})

export class AppComponent {

    public columns = [{field: 'firstName', width: 130 }, {field: 'lastName', width: 130 }]

    public data: any[] = [];

    public processedData;

    public state = {group: [{field: 'lastName', aggregates: [{field: 'lastName', aggregate: 'count'}]}]};

    public fullData;

    constructor() {

        this.fullData = this.createRandomData(1000);

        this.data = this.fullData.slice();

    }

    dataStateChange(e){

      e.group.forEach(g =>{

        g.aggregates = [{field: g.field, aggregate: 'count'}];

      });

      console.log(e)

      this.state = e;

    }

    /* Generating example data */

    private createRandomData(count: number): any[] {

        const firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Laura', 'Anne', 'Nige'],

            lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth', 'White'],

            cities = ['Seattle', 'Tacoma', 'Kirkland', 'Redmond', 'London', 'Philadelphia', 'New York', 'Seattle', 'London', 'Boston'],

            titles = ['Accountant', 'Vice President, Sales', 'Sales Representative', 'Technical Support', 'Sales Manager', 'Web Designer',

                'Software Developer'];

        return Array(count).fill({}).map((_, idx) => ({

            id: idx + 1,

            firstName: firstNames[Math.floor(Math.random() * firstNames.length)],

            lastName: lastNames[Math.floor(Math.random() * lastNames.length)],

            city: cities[Math.floor(Math.random() * cities.length)],

            title: titles[Math.floor(Math.random() * titles.length)]

        })

        );

    }

}