Merge pull request #3 from davidsi02/infinite-scroll

Add Infinite Scroll to extensible-table

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html

@@ -7,6 +7,11 @@
   (activate)="tableActivate.emit($event)"
   (select)="onSelect($event)"
   [selected]="selected"
+  (scroll)="onScroll($event)"
+  [scrollbarV]="infiniteScroll"
+  [style.height]="infiniteScroll ? '300px' : 'auto'"
+  [loadingIndicator]="infiniteScroll && isLoading"
+  [footerHeight]="infiniteScroll ? false : 50"
 >
 @if(selectable) {
   <ngx-datatable-column [width]="50" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false">

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

@@ -118,6 +118,10 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
   @Input() selected: any[] = [];
   @Output() selectionChange = new EventEmitter<any[]>();
 
+  @Input() infiniteScroll = false;
+  @Input() isLoading = false;
+  @Output() loadMore = new EventEmitter<void>();
+
   hasAtLeastOnePermittedAction: boolean;
 
   readonly propList: EntityPropList<R>;
@@ -247,10 +251,23 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
     this.selectionChange.emit(selected);
   }
 
+  onScroll(scrollEvent) {
+    if (
+      this.infiniteScroll &&
+      !this.isLoading &&
+      scrollEvent?.target?.offsetHeight + scrollEvent?.target?.scrollTop >=
+        scrollEvent?.target?.scrollHeight - 1
+    ) {
+      this.loadMore.emit();
+    }
+  }
+
   ngAfterViewInit(): void {
-    this.list?.requestStatus$?.pipe(filter(status => status === 'loading')).subscribe(() => {
+    if (!this.infiniteScroll) {
+      this.list?.requestStatus$?.pipe(filter(status => status === 'loading')).subscribe(() => {
         this.data = [];
         this.cdr.markForCheck();
       });
+    }
   }
 }