From 9d448efd678348617513e5df7a329588745fd935 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Tue, 7 Jan 2020 13:31:34 +0300
Subject: [PATCH] feat(theme-shared): add empty template to table component

#2537
---
 .../lib/components/table/table.component.html | 16 ++++++++++++--
 .../lib/components/table/table.component.ts   | 22 ++++++++++++++-----
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html
index b3be1cafb5..aa6a5519be 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html
+++ b/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>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts
index 33c6126a24..f3524d52aa 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts
+++ b/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;
+  }
 }