feat(theme-shared): add empty template to table component

#2537

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

@@ -1,4 +1,4 @@
-<div class="ui-table ui-widget">
+<div #wrapper class="ui-table ui-widget">
   <div class="ui-table-wrapper">
     <ng-container
       *ngTemplateOutlet="scrollable ? scrollableTemplate : defaultTemplate"
@@ -58,9 +58,21 @@
 <ng-template #body>
   <tbody class="ui-table-tbody">
     <ng-container
+      *ngTemplateOutlet="value && value.length ? container : emptyTemplate"
+    ></ng-container>
+    <ng-template
+      #container
       *ngFor="let val of slicedValue; trackBy: trackByFn"
       [ngTemplateOutlet]="bodyTemplate"
       [ngTemplateOutletContext]="{ $implicit: val }"
-    ></ng-container>
+    ></ng-template>
   </tbody>
 </ng-template>
+
+<ng-template #emptyTemplate>
+  <tr>
+    <td class="text-center" [attr.colspan]="colspan">
+      {{ emptyMessage | abpLocalization }}
+    </td>
+  </tr>
+</ng-template>

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

@@ -1,18 +1,20 @@
 import {
+  AfterViewInit,
   Component,
-  OnInit,
+  ElementRef,
+  EventEmitter,
   Input,
-  TemplateRef,
   Output,
-  EventEmitter,
+  TemplateRef,
   TrackByFunction,
+  ViewChild,
 } from '@angular/core';
 
 @Component({
   selector: 'abp-table',
   templateUrl: 'table.component.html',
 })
-export class TableComponent implements OnInit {
+export class TableComponent implements AfterViewInit {
   private _totalRecords: number;
 
   @Input()
@@ -39,13 +41,21 @@ export class TableComponent implements OnInit {
   @Input()
   trackingProp = 'id';
 
+  @Input()
+  emptyMessage = 'AbpAccount::NoDataAvailableInDatatable';
+
   @Output()
   readonly pageChange = new EventEmitter<number>();
 
+  @ViewChild('wrapper', { read: ElementRef, static: false })
+  wrapperRef: ElementRef<HTMLDivElement>;
+
   page = 1;
 
   bodyScrollLeft = 0;
 
+  colspan = 1;
+
   trackByFn: TrackByFunction<any> = (_, value) => {
     return typeof value === 'object' ? value[this.trackingProp] || value : value;
   };
@@ -79,5 +89,7 @@ export class TableComponent implements OnInit {
 
   constructor() {}
 
-  ngOnInit() {}
+  ngAfterViewInit() {
+    this.colspan = this.wrapperRef.nativeElement.querySelectorAll('th').length;
+  }
 }