VirtualScroll Feature

package.json

@@ -18,6 +18,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~13.3.12",
+    "@angular/cdk": "~13.3.9",
     "@angular/common": "~13.3.12",
     "@angular/compiler": "~13.3.12",
     "@angular/core": "~13.3.12",

projects/angular2-smart-table/package.json

@@ -16,6 +16,7 @@
     "@angular/core": "13 - 15",
     "@angular/common": "13 - 15",
     "@angular/forms": "13 - 15",
+    "@angular/cdk": "13 - 15",
     "angular2-multiselect-dropdown": "^5.0.4",
     "lodash-es": "^4.17.21",
     "ng2-completer": "^9.0.1"

projects/angular2-smart-table/src/lib/angular2-smart-table.component.html

@@ -1,45 +1,80 @@
-<angular2-smart-table-tags-list
-  [tags]="getNotVisibleColumns()" (close)="onShowHeader($event)"
-></angular2-smart-table-tags-list>
-
-<div style="overflow-x: auto; -webkit-overflow-scrolling: touch">
-  <table [id]="tableId" [ngClass]="tableClass">
-    <thead
-      angular2-st-thead
-      *ngIf="!isHideHeader || !isHideSubHeader"
-      [grid]="grid"
-      [isAllSelected]="isAllSelected"
-      [source]="source"
-      [createConfirm]="createConfirm"
-      [createCancel]="createCancel"
-      (create)="create.emit($event)"
-      (selectAllRows)="onSelectAllRows()"
-      (hide)="onHideHeader($event)"
-    ></thead>
-
-    <tbody
-      angular2-st-tbody
-      [grid]="grid"
-      [source]="source"
-      [deleteConfirm]="deleteConfirm"
-      [editConfirm]="editConfirm"
-      [editCancel]="editCancel"
-      [rowClassFunction]="rowClassFunction"
-      (edit)="edit.emit($event)"
-      (delete)="delete.emit($event)"
-      (custom)="custom.emit($event)"
-      (userSelectRow)="onUserSelectRow($event)"
-      (editRowSelect)="onEditRowSelect($event)"
-      (multipleSelectRow)="onMultipleSelectRow($event)"
-      (onExpandRow)="onExpandRow($event)"
-      (rowHover)="onRowHover($event)"
-    ></tbody>
-  </table>
-</div>
-<angular2-smart-table-pager
-  *ngIf="isPagerDisplay"
-  [source]="source"
-  [perPageSelect]="perPageSelect"
-  [perPageSelectLabel]="perPageSelectLabel"
->
-</angular2-smart-table-pager>
+<ng-template #tableTemplate let-virtualRowsProjectedTemplate>
+  <angular2-smart-table-tags-list
+    [tags]="getNotVisibleColumns()" (close)="onShowHeader($event)"
+  ></angular2-smart-table-tags-list>
+
+  <div style="overflow-x: auto; -webkit-overflow-scrolling: touch">
+    <table [id]="tableId" [ngClass]="tableClass">
+      <thead
+        angular2-st-thead
+        *ngIf="!isHideHeader || !isHideSubHeader"
+        [grid]="grid"
+        [isAllSelected]="isAllSelected"
+        [source]="source"
+        [createConfirm]="createConfirm"
+        [createCancel]="createCancel"
+        (create)="create.emit($event)"
+        (selectAllRows)="onSelectAllRows()"
+        (hide)="onHideHeader($event)"
+      ></thead>
+
+      <tbody
+        angular2-st-tbody
+        [grid]="grid"
+        [source]="source"
+        [virtualScrollEnabled]="virtualScrollEnabled"
+        [deleteConfirm]="deleteConfirm"
+        [editConfirm]="editConfirm"
+        [editCancel]="editCancel"
+        [rowClassFunction]="rowClassFunction"
+        (edit)="edit.emit($event)"
+        (delete)="delete.emit($event)"
+        (custom)="custom.emit($event)"
+        (userSelectRow)="onUserSelectRow($event)"
+        (editRowSelect)="onEditRowSelect($event)"
+        (multipleSelectRow)="onMultipleSelectRow($event)"
+        (onExpandRow)="onExpandRow($event)"
+        (rowHover)="onRowHover($event)"
+      >
+      <ng-template #virtualRowsTemplate let-rowTemplate="rowTemplate" let-tableColumnsCount="tableColumnsCount">
+        <ng-container [ngTemplateOutlet]="virtualRowsProjectedTemplate" [ngTemplateOutletContext]="{ $implicit: rowTemplate}"></ng-container>
+        <tr *ngFor="let p of infiniteScrollLoadingPlaceholders | numberToArray" class="angular2-smart-row angular2-smart-row-detail">
+          <td *ngFor="let d of tableColumnsCount | numberToArray" class="angular2-smart-column-infiniteLoadingPlaceholder">
+            <div>Loading...</div>
+          </td>
+        </tr>
+      </ng-template>
+      </tbody>
+    </table>
+  </div>
+
+  <angular2-smart-table-pager
+    *ngIf="isPagerDisplay"
+    [source]="source"
+    [perPageSelect]="perPageSelect"
+    [perPageSelectLabel]="perPageSelectLabel"
+  >
+  </angular2-smart-table-pager>
+</ng-template>
+
+<ng-content></ng-content>
+
+<ng-container *ngIf="virtualScrollEnabled && virtualScroll; else tableTemplate;">
+  <cdk-virtual-scroll-viewport
+    (scrolledIndexChange)="onVirtualScrollIndexChange($event)"
+    [ngStyle]="{height: virtualScroll.viewportHeight}"
+    [minBufferPx]="virtualScroll.minBufferPx"
+    [maxBufferPx]="virtualScroll.maxBufferPx"
+    [itemSize]="virtualScroll.itemSize">
+
+    <ng-template #virtualRowsTemplate let-rowTemplate>
+      <ng-container *cdkVirtualFor="let row of grid.getRows(); templateCacheSize: virtualScroll.templateCacheSize;">
+        <ng-container [ngTemplateOutlet]="rowTemplate" [ngTemplateOutletContext]="{ $implicit: row }"></ng-container>
+      </ng-container>
+    </ng-template>
+
+    <ng-container [ngTemplateOutlet]="tableTemplate" [ngTemplateOutletContext]="{ $implicit: virtualRowsTemplate }"></ng-container>
+
+  </cdk-virtual-scroll-viewport>
+</ng-container>
+

projects/angular2-smart-table/src/lib/angular2-smart-table.component.ts

@@ -1,13 +1,13 @@
-import {Component, EventEmitter, Input, OnChanges, OnDestroy, Output, SimpleChange} from '@angular/core';
-import {Subject, Subscription} from 'rxjs';
+import {Component, EventEmitter, Input, OnChanges, OnDestroy, Output, SimpleChange, ViewChild} from '@angular/core';
+import {mergeMap, Subject, Subscription, tap} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {DataSet} from './lib/data-set/data-set';
 import {Row} from './lib/data-set/row';
 import {DataSource, DataSourceChangeEvent} from './lib/data-source/data-source';
 import {LocalDataSource} from './lib/data-source/local/local.data-source';
 import {Grid} from './lib/grid';
 import {deepExtend, getPageForRowIndex} from './lib/helpers';
-import {IColumn, Settings} from './lib/settings';
+import {IColumn, Settings, VirtualScroll} from './lib/settings';
 import {
   CreateCancelEvent,
   CreateConfirmEvent,
@@ -20,13 +20,15 @@ import {
   EditEvent,
   RowSelectionEvent,
 } from './lib/events';
+import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
 
 @Component({
   selector: 'angular2-smart-table',
   styleUrls: ['./angular2-smart-table.component.scss'],
   templateUrl: './angular2-smart-table.component.html',
 })
 export class Angular2SmartTableComponent implements OnChanges, OnDestroy {
+  @ViewChild(CdkVirtualScrollViewport) virtualScrollViewport?: CdkVirtualScrollViewport;
 
   @Input() source: any;
   @Input() settings: Settings = {};
@@ -54,6 +56,9 @@ export class Angular2SmartTableComponent implements OnChanges, OnDestroy {
   isHideHeader!: boolean;
   isHideSubHeader!: boolean;
   isPagerDisplay!: boolean;
+  virtualScroll: VirtualScroll | undefined;
+  virtualScrollEnabled: boolean = false;
+  infiniteScrollLoadingPlaceholders: number = 0;
   rowClassFunction!: Function;
 
   grid!: Grid;
@@ -121,6 +126,10 @@ export class Angular2SmartTableComponent implements OnChanges, OnDestroy {
 
   private onSelectRowSubscription!: Subscription;
   private onDeselectRowSubscription!: Subscription;
+  private onOffsetSubscription?: Subscription;
+  private isOffsetEnd: boolean = false;
+  private isOffsetLocked: boolean = false;
+  private offset$ = new Subject<number>();
   private destroyed$: Subject<void> = new Subject<void>();
 
   ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
@@ -140,10 +149,12 @@ export class Angular2SmartTableComponent implements OnChanges, OnDestroy {
     this.isHideHeader = this.grid.getSetting('hideHeader');
     this.isHideSubHeader = this.grid.getSetting('hideSubHeader');
     this.isPagerDisplay = this.grid.getSetting('pager.display');
-    this.isPagerDisplay = this.grid.getSetting('pager.display');
     this.perPageSelect = this.grid.getSetting('pager.perPageSelect', this.perPageSelect);
     this.perPageSelectLabel = this.grid.getSetting('pager.perPageSelectLabel', this.perPageSelectLabel);
+    this.virtualScroll = this.grid.getSetting('virtualScroll');
+    this.virtualScrollEnabled = !!(this.virtualScroll && this.virtualScroll.itemSize && this.virtualScroll.viewportHeight);
     this.rowClassFunction = this.grid.getSetting('rowClassFunction');
+    this.subscribeToOffset();
   }
 
   ngOnDestroy(): void {
@@ -272,6 +283,19 @@ export class Angular2SmartTableComponent implements OnChanges, OnDestroy {
     this.grid.setSettings(this.prepareSettings());
   }
 
+  onVirtualScrollIndexChange(_index: number) {
+    if (this.isOffsetEnd || this.isOffsetLocked || !this.virtualScrollViewport) return;
+
+    const lastVisibleRowIndex: number = this.virtualScrollViewport.getRenderedRange().end;
+    const totalRows: number = this.virtualScrollViewport.getDataLength();
+    const threshold: number = this.virtualScroll?.infiniteScroll?.threshold ?? 0;
+
+    if (totalRows === 0) return;
+    if ((lastVisibleRowIndex + threshold) >= totalRows) {
+      this.offset$.next(totalRows);
+    }
+  }
+
   private createRowSelectionEvent(row: Row | null): RowSelectionEvent {
     return {
       row: row,
@@ -307,4 +331,36 @@ export class Angular2SmartTableComponent implements OnChanges, OnDestroy {
         this.emitSelectRow(row);
       });
   }
+
+  private subscribeToOffset(): void {
+    if (this.onOffsetSubscription) {
+      this.onOffsetSubscription.unsubscribe();
+    }
+
+    if (!this.virtualScrollEnabled || !this.virtualScroll?.infiniteScroll?.getNextFunction) return;
+
+    const getNextFunction = this.virtualScroll.infiniteScroll.getNextFunction;
+    const loadingPlaceholder = this.virtualScroll.infiniteScroll.loadingPlaceholder || 0;
+
+    this.onOffsetSubscription = this.offset$.pipe(
+      takeUntil(this.destroyed$),
+      tap((_: number) => {
+        this.isOffsetLocked = true;
+        this.infiniteScrollLoadingPlaceholders = loadingPlaceholder;
+      }),
+      mergeMap((offset: number) => getNextFunction(offset)),
+    ).subscribe({
+      next: (data: any[]) => {
+        this.infiniteScrollLoadingPlaceholders = 0;
+        data.forEach((item: any) => this.source.append(item));
+        this.isOffsetEnd = !data?.length;
+        this.isOffsetLocked = false;
+      },
+      error: (_error: any) => {
+        console.warn('Error while loading next page:', _error);
+        this.infiniteScrollLoadingPlaceholders = 0;
+        this.isOffsetLocked = false;
+      },
+    });
+  }
 }

projects/angular2-smart-table/src/lib/angular2-smart-table.module.ts

@@ -8,6 +8,8 @@ import {PagerModule} from './components/pager/pager.module';
 import {TabsModule} from './components/tags/tags.module';
 import {TBodyModule} from './components/tbody/tbody.module';
 import {THeadModule} from './components/thead/thead.module';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {PipesModule} from './pipes/pipes.module';
 
 
 @NgModule({
@@ -23,7 +25,9 @@ import {THeadModule} from './components/thead/thead.module';
     PagerModule,
     TBodyModule,
     THeadModule,
-    TabsModule
+    TabsModule,
+    ScrollingModule,
+    PipesModule
   ],
   exports: [
     Angular2SmartTableComponent