From e2fd034f868babe4b9218561cf1c8f10b64788f9 Mon Sep 17 00:00:00 2001
From: Arman Ozak <arman@armanozak.com>
Date: Wed, 8 Apr 2020 14:16:39 +0300
Subject: [PATCH] fix: use a table caption as no-content placeholder

---
 .../lib/components/table/table.component.html | 26 +++++++++----------
 .../lib/components/table/table.component.scss | 10 +++----
 2 files changed, 16 insertions(+), 20 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 63cc2c3e31..eeaf0d40d9 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
@@ -62,22 +62,20 @@
 </ng-template>
 
 <ng-template #body>
-  <tbody class="ui-table-tbody">
-    <ng-container *ngIf="value && value.length; else emptyTemplate">
-      <ng-template
-        #bodyTemplateWrapper
-        *ngFor="let val of slicedValue; let index = index; trackBy: trackByFn"
-        [ngTemplateOutlet]="bodyTemplate"
-        [ngTemplateOutletContext]="{ $implicit: val, rowIndex: index }"
-      ></ng-template>
-    </ng-container>
+  <tbody class="ui-table-tbody" *ngIf="value && value.length; else emptyTemplate">
+    <ng-template
+      #bodyTemplateWrapper
+      *ngFor="let val of slicedValue; let index = index; trackBy: trackByFn"
+      [ngTemplateOutlet]="bodyTemplate"
+      [ngTemplateOutletContext]="{ $implicit: val, rowIndex: index }"
+    ></ng-template>
   </tbody>
 </ng-template>
 
 <ng-template #emptyTemplate>
-  <tr class="empty-row" #emptyRow>
-    <div class="empty-row-content" [style.width.px]="emptyRow.offsetWidth">
-      {{ emptyMessage | abpLocalization }}
-    </div>
-  </tr>
+  <caption class="ui-table-empty">
+    {{
+      emptyMessage | abpLocalization
+    }}
+  </caption>
 </ng-template>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss
index f2ce957862..98d4eb5811 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss
@@ -6,13 +6,11 @@
     filter: brightness(90%);
   }
 
-  .ui-table-tbody > tr.empty-row:hover {
-    filter: none;
-  }
-
-  .ui-table-tbody > tr.empty-row > div.empty-row-content {
-    padding: 10px;
+  .ui-table-empty {
+    padding: 20px 0;
     text-align: center;
+    border: 1px solid #e0e0e0;
+    border-top-width: 0;
   }
 
   .ui-table-caption,