Improve entities and alarms table, preserve columns width while loading data

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>

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;
+    }
+  }
 }

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>

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;
+    }
+  }
 }