Fix server side virtual scroll (swimlane#1853)

Author: Hypercubed

projects/swimlane/ngx-datatable/src/lib/components/body/body.component.ts

@@ -11,7 +11,6 @@ import {
   ChangeDetectionStrategy
 } from '@angular/core';
 import { ScrollerComponent } from './scroller.component';
-import { MouseEvent } from '../../events';
 import { SelectionType } from '../../types/selection.type';
 import { columnsByPin, columnGroupWidths } from '../../utils/column';
 import { RowHeightCache } from '../../utils/row-height-cache';
@@ -57,10 +56,10 @@ import { translateXY } from '../../utils/translate';
           [rowDetail]="rowDetail"
           [groupHeader]="groupHeader"
           [offsetX]="offsetX"
-          [detailRowHeight]="getDetailRowHeight(group[i], i)"
+          [detailRowHeight]="getDetailRowHeight(group && group[i], i)"
           [row]="group"
           [expanded]="getRowExpanded(group)"
-          [rowIndex]="getRowIndex(group[i])"
+          [rowIndex]="getRowIndex(group && group[i])"
           (rowContextmenu)="rowContextmenu.emit($event)"
         >
           <datatable-body-row
@@ -76,7 +75,7 @@ import { translateXY } from '../../utils/translate';
             [expanded]="getRowExpanded(group)"
             [rowClass]="rowClass"
             [displayCheck]="displayCheck"
-            [treeStatus]="group.treeStatus"
+            [treeStatus]="group && group.treeStatus"
             (treeAction)="onTreeAction(group)"
             (activate)="selector.onActivate($event, indexes.first + i)"
           >
@@ -175,8 +174,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
 
   @Input() set offset(val: number) {
     this._offset = val;
-    if (!this.scrollbarV || (this.scrollbarV && !this.virtualization))
-      this.recalcLayout();
+    if (!this.scrollbarV || (this.scrollbarV && !this.virtualization)) this.recalcLayout();
   }
 
   get offset(): number {
@@ -773,7 +771,7 @@ export class DataTableBodyComponent implements OnInit, OnDestroy {
     if (!expanded || !expanded.length) return -1;
 
     const rowId = this.rowIdentity(row);
-    return expanded.findIndex((r) => {
+    return expanded.findIndex(r => {
       const id = this.rowIdentity(r);
       return id === rowId;
     });

src/app/paging/paging-virtual.component.ts

@@ -1,9 +1,16 @@
 import { Component } from '@angular/core';
 import { MockServerResultsService } from './mock-server-results-service';
-import { PagedData } from './model/paged-data';
 import { CorporateEmployee } from './model/corporate-employee';
 import { Page } from './model/page';
 import { ColumnMode } from 'projects/swimlane/ngx-datatable/src/public-api';
+import { delay } from 'rxjs/operators';
+
+interface PageInfo {
+  offset: number;
+  pageSize: number;
+  limit: number;
+  count: number;
+}
 
 @Component({
   selector: 'virtual-paging-demo',
@@ -24,60 +31,83 @@ import { ColumnMode } from 'projects/swimlane/ngx-datatable/src/public-api';
       <ngx-datatable
         class="material"
         [rows]="rows"
-        [columns]="[{ name: 'Name' }, { name: 'Gender' }, { name: 'Company' }]"
+        [columns]="[
+          { name: 'Name', sortable: false },
+          { name: 'Gender', sortable: false },
+          { name: 'Company', sortable: false }
+        ]"
         [columnMode]="ColumnMode.force"
         [headerHeight]="50"
+        [loadingIndicator]="isLoading > 0"
         [scrollbarV]="true"
         [footerHeight]="50"
         [rowHeight]="50"
         [externalPaging]="true"
-        [count]="page.totalElements"
-        [offset]="page.pageNumber"
+        [externalSorting]="true"
+        [count]="totalElements"
+        [offset]="pageNumber"
         (page)="setPage($event)"
       >
       </ngx-datatable>
     </div>
   `
 })
 export class VirtualPagingComponent {
-  page = new Page();
-  rows = new Array<CorporateEmployee>();
+  totalElements: number;
+  pageNumber: number;
+  rows: CorporateEmployee[];
   cache: any = {};
 
   ColumnMode = ColumnMode;
 
+  isLoading = 0;
+
   constructor(private serverResultsService: MockServerResultsService) {
-    this.page.pageNumber = 0;
+    this.pageNumber = 0;
   }
 
-  /**
-   * Populate the table with new data based on the page number
-   * @param page The page to select
-   */
-  setPage(pageInfo) {
-    this.page.pageNumber = pageInfo.offset;
-    this.page.size = pageInfo.pageSize;
+  setPage(pageInfo: PageInfo) {
+    // current page number is determined by last call to setPage
+    this.pageNumber = pageInfo.offset;
+
+    // don't load same data twice
+    if (this.cache[pageInfo.offset]) return;
+    this.cache[pageInfo.offset] = true;
+
+    // counter of pages loading
+    this.isLoading++;
+
+    // class to idendify loading page
+    const page = new Page();
+    page.pageNumber = pageInfo.offset;
+    page.size = pageInfo.pageSize;
 
-    // cache results
-    // if(this.cache[this.page.pageNumber]) return;
+    this.serverResultsService
+      .getResults(page)
+      .pipe(delay(new Date(Date.now() + 1000 * Math.random()))) // simulating variability in returned data
+      .subscribe(pagedData => {
+        // update total count
+        this.totalElements = pagedData.page.totalElements;
 
-    this.serverResultsService.getResults(this.page).subscribe(pagedData => {
-      this.page = pagedData.page;
+        // create array to store data if missing
+        if (!this.rows) {
+          // length should be total count
+          this.rows = new Array<CorporateEmployee>(pagedData.page.totalElements || 0);
+        }
 
-      // calc start
-      const start = this.page.pageNumber * this.page.size;
+        // calc starting index
+        const start = pagedData.page.pageNumber * pagedData.page.size;
 
-      // copy rows
-      const rows = [...this.rows];
+        // copy existing data
+        const rows = [...this.rows];
 
-      // insert rows into new position
-      rows.splice(start, 0, ...pagedData.data);
+        // insert new rows into new position
+        rows.splice(start, pagedData.page.size, ...pagedData.data);
 
-      // set rows to our new rows
-      this.rows = rows;
+        // set rows to our new rows
+        this.rows = rows;
 
-      // add flag for results
-      this.cache[this.page.pageNumber] = true;
-    });
+        this.isLoading--;
+      });
   }
 }