From c0f95aa5205607771a95f60f1f7fafbe0736bb3e Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 7 Aug 2020 10:38:51 +0300
Subject: [PATCH] Improve entities and alarms table, preserve columns width
 while loading data

---
 .../lib/alarms-table-widget.component.html    |  5 +++--
 .../lib/alarms-table-widget.component.scss    | 19 +++++++++++++++++++
 .../lib/entities-table-widget.component.html  |  3 ++-
 .../lib/entities-table-widget.component.scss  | 19 +++++++++++++++++++
 4 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
index 52b497494a..7e9a67c485 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
@@ -121,9 +121,10 @@
           </mat-cell>
         </ng-container>
         <mat-header-row [ngClass]="{'mat-row-select': enableSelection}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row [fxShow]="!alarmsDatasource.dataLoading" [ngClass]="{'mat-row-select': enableSelection,
+        <mat-row [ngClass]="{'mat-row-select': enableSelection,
                              'mat-selected': alarmsDatasource.isSelected(alarm),
-                             'tb-current-entity': alarmsDatasource.isCurrentAlarm(alarm)}"
+                             'tb-current-entity': alarmsDatasource.isCurrentAlarm(alarm),
+                             'invisible': alarmsDatasource.dataLoading}"
                  *matRowDef="let alarm; columns: displayedColumns;"
                  (click)="onRowClick($event, alarm)"></mat-row>
       </table>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.scss
index 7606ba5d75..7fe357b7c2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.scss
@@ -16,4 +16,23 @@
 :host {
   width: 100%;
   height: 100%;
+  .tb-table-widget {
+    .table-container {
+      position: relative;
+    }
+    .mat-table {
+      .mat-row {
+        &.invisible {
+          visibility: hidden;
+        }
+      }
+    }
+    span.no-data-found {
+      position: absolute;
+      top: 60px;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
index 8574076acd..a2c70a3a89 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html
@@ -82,7 +82,8 @@
           </mat-cell>
         </ng-container>
         <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row [fxShow]="!entityDatasource.dataLoading" [ngClass]="{'tb-current-entity': entityDatasource.isCurrentEntity(entity)}"
+        <mat-row [ngClass]="{'tb-current-entity': entityDatasource.isCurrentEntity(entity),
+                             'invisible': entityDatasource.dataLoading}"
                  *matRowDef="let entity; columns: displayedColumns;"
                  (click)="onRowClick($event, entity)" (dblclick)="onRowClick($event, entity, true)"></mat-row>
       </table>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.scss
index 7606ba5d75..7fe357b7c2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.scss
@@ -16,4 +16,23 @@
 :host {
   width: 100%;
   height: 100%;
+  .tb-table-widget {
+    .table-container {
+      position: relative;
+    }
+    .mat-table {
+      .mat-row {
+        &.invisible {
+          visibility: hidden;
+        }
+      }
+    }
+    span.no-data-found {
+      position: absolute;
+      top: 60px;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
 }