From 09065dee388b51d30dd08840e4b11479a197d70b Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 4 Feb 2020 19:50:18 +0200
Subject: [PATCH] Table layout improvement

---
 .../attribute/attribute-table.component.html  | 18 +++++-----
 .../attribute/attribute-table.component.scss  |  6 ++--
 .../entity/entities-table.component.html      | 10 ++++--
 .../entity/entities-table.component.ts        | 18 +++++++---
 .../table-columns-assignment.component.html   |  8 ++---
 .../table-columns-assignment.component.ts     |  1 -
 .../relation/relation-table.component.html    | 16 ++++-----
 .../manage-widget-actions.component.html      | 12 +++----
 .../lib/alarms-table-widget.component.html    | 10 ++++--
 .../lib/alarms-table-widget.component.ts      |  8 ++---
 .../lib/entities-table-widget.component.html  |  8 +++--
 .../lib/entities-table-widget.component.ts    | 34 +++++++++----------
 .../widget/lib/table-widget.models.ts         | 11 ++++++
 .../timeseries-table-widget.component.html    |  8 +++--
 ...age-dashboard-states-dialog.component.html | 10 +++---
 .../rulechains-table-config.resolver.ts       |  2 +-
 .../src/app/shared/models/page/page-link.ts   |  6 ++++
 ui-ngx/src/styles.scss                        | 15 ++++++++
 18 files changed, 128 insertions(+), 73 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index a55261b5ff..9daadb8a80 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -137,7 +137,7 @@
       <mat-table [dataSource]="dataSource"
                  matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
-          <mat-header-cell *matHeaderCellDef>
+          <mat-header-cell *matHeaderCellDef style="width: 30px;">
             <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
                           [checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
                           [indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)">
@@ -151,26 +151,28 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="lastUpdateTs">
-          <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'attribute.last-update-time' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="min-width: 150px; max-width: 150px; width: 150px;"> {{ 'attribute.last-update-time' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let attribute">
             {{ attribute.lastUpdateTs | date:'yyyy-MM-dd HH:mm:ss' }}
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="key">
-          <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'attribute.key' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'attribute.key' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let attribute">
             {{ attribute.key }}
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="value">
-          <mat-header-cell *matHeaderCellDef> {{ 'attribute.value' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef style="width: 60%"> {{ 'attribute.value' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let attribute"
                     class="tb-value-cell"
                     (click)="editAttribute($event, attribute)">
-            <span fxFlex>{{attribute.value}}</span>
-            <span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)">
-              <mat-icon>edit</mat-icon>
-            </span>
+            <div fxLayout="row">
+              <span fxFlex>{{attribute.value}}</span>
+              <span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)">
+                <mat-icon>edit</mat-icon>
+              </span>
+            </div>
           </mat-cell>
         </ng-container>
         <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
index e5cbdb8404..3d514fe063 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss
@@ -54,9 +54,9 @@
   mat-cell.tb-value-cell {
     cursor: pointer;
     mat-icon {
-      height: 16px;
-      width: 16px;
-      font-size: 16px;
+      height: 24px;
+      width: 24px;
+      font-size: 24px;
       color: #757575
     }
   }
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
index 476410c463..1e5342a2b5 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
@@ -138,7 +138,7 @@
           <mat-table [dataSource]="dataSource" [trackBy]="trackByEntityId"
                      matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
             <ng-container matColumnDef="select" sticky>
-              <mat-header-cell *matHeaderCellDef>
+              <mat-header-cell *matHeaderCellDef style="width: 30px;">
                 <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
                               [checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
                               [indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)">
@@ -178,10 +178,14 @@
               </mat-cell>
             </ng-container>
             <ng-container matColumnDef="actions" stickyEnd>
-              <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ width: (cellActionDescriptors.length * 40) + 'px' }">
+              <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 40) + 'px',
+                                                                    maxWidth: (cellActionDescriptors.length * 40) + 'px',
+                                                                    width: (cellActionDescriptors.length * 40) + 'px' }">
                 {{ entitiesTableConfig.actionsColumnTitle ? (entitiesTableConfig.actionsColumnTitle | translate) : '' }}
               </mat-header-cell>
-              <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ width: (cellActionDescriptors.length * 40) + 'px' }">
+              <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (cellActionDescriptors.length * 40) + 'px',
+                                                                    maxWidth: (cellActionDescriptors.length * 40) + 'px',
+                                                                    width: (cellActionDescriptors.length * 40) + 'px' }">
                 <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
                   <button mat-button mat-icon-button [disabled]="isLoading$ | async"
                           [fxShow]="actionDescriptor.isEnabled(entity)" *ngFor="let actionDescriptor of cellActionDescriptors"
diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
index b52044a601..dfdaaded22 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
@@ -393,10 +393,15 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
     const index = this.entitiesTableConfig.columns.indexOf(column);
     let res = this.headerCellStyleCache[index];
     if (!res) {
+      const widthStyle: any = {width: column.width};
+      if (column.width !== '0px') {
+        widthStyle.minWidth = column.width;
+        widthStyle.maxWidth = column.width;
+      }
       if (column instanceof EntityTableColumn) {
-        res = {...column.headerCellStyleFunction(column.key), ...{minWidth: column.width, maxWidth: column.width, width: column.width}};
+        res = {...column.headerCellStyleFunction(column.key), ...widthStyle};
       } else {
-        res = {width: column.width};
+        res = widthStyle;
       }
       this.headerCellStyleCache[index] = res;
     }
@@ -440,10 +445,15 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn
     const index = row * this.entitiesTableConfig.columns.length + col;
     let res = this.cellStyleCache[index];
     if (!res) {
+      const widthStyle: any = {width: column.width};
+      if (column.width !== '0px') {
+        widthStyle.minWidth = column.width;
+        widthStyle.maxWidth = column.width;
+      }
       if (column instanceof EntityTableColumn) {
-        res = {...column.cellStyleFunction(entity, column.key), ...{minWidth: column.width, maxWidth: column.width, width: column.width}};
+        res = {...column.cellStyleFunction(entity, column.key), ...widthStyle};
       } else {
-        res = {width: column.width};
+        res = widthStyle;
       }
       this.cellStyleCache[index] = res;
     }
diff --git a/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html b/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html
index 639603842c..1327ee9568 100644
--- a/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html
+++ b/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html
@@ -17,19 +17,19 @@
 -->
 <mat-table [dataSource]="dataSource">
   <ng-container matColumnDef="order">
-    <mat-header-cell *matHeaderCellDef></mat-header-cell>
+    <mat-header-cell *matHeaderCellDef style="min-width: 40px; max-width: 40px; width: 40px"></mat-header-cell>
     <mat-cell *matCellDef="let column; let i = index">
       {{ (i+1) }}
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="sampleData">
-    <mat-header-cell *matHeaderCellDef> {{ 'import.column-example' | translate }} </mat-header-cell>
+    <mat-header-cell *matHeaderCellDef style="width: 30%"> {{ 'import.column-example' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
       {{column.sampleData}}
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="type">
-    <mat-header-cell *matHeaderCellDef> {{ 'import.column-type.column-type' | translate }} </mat-header-cell>
+    <mat-header-cell *matHeaderCellDef style="width: 40%"> {{ 'import.column-type.column-type' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
       <mat-select matInput [(ngModel)]="column.type" (ngModelChange)="columnsUpdated()">
         <mat-option *ngFor="let type of columnTypes" [value]="type.value" [disabled]="type.disabled">
@@ -39,7 +39,7 @@
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="key">
-    <mat-header-cell *matHeaderCellDef> {{ 'import.column-key' | translate }} </mat-header-cell>
+    <mat-header-cell *matHeaderCellDef style="width: 30%"> {{ 'import.column-key' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
       <mat-form-field floatLabel="always" hideRequiredMarker
                       *ngIf="column.type !== importEntityColumnType.name &&
diff --git a/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.ts b/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.ts
index 7bf8f2410a..2f420d2d7c 100644
--- a/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.ts
+++ b/ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.ts
@@ -139,7 +139,6 @@ export class TableColumnsAssignmentComponent implements OnInit, ControlValueAcce
     return (this.valid) ? null : {
       columnsInvalid: true
     };
-    return null;
   }
 
   writeValue(value: CsvColumnParam[]): void {
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
index ff99b0faa4..3cd9b2b46e 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-table.component.html
@@ -87,7 +87,7 @@
       <mat-table [dataSource]="dataSource"
                  matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
         <ng-container matColumnDef="select" sticky>
-          <mat-header-cell *matHeaderCellDef>
+          <mat-header-cell *matHeaderCellDef style="width: 30px;">
             <mat-checkbox (change)="$event ? dataSource.masterToggle() : null"
                           [checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)"
                           [indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)">
@@ -101,39 +101,39 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="type">
-          <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'relation.type' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.type' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let relation">
             {{ relation.type }}
           </mat-cell>
         </ng-container>
         <ng-container *ngIf="direction === directions.FROM" matColumnDef="toEntityTypeName">
-          <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'relation.to-entity-type' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.to-entity-type' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let relation">
             {{ relation.toEntityTypeName }}
           </mat-cell>
         </ng-container>
         <ng-container *ngIf="direction === directions.FROM" matColumnDef="toName">
-          <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'relation.to-entity-name' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.to-entity-name' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let relation">
             {{ relation.toName }}
           </mat-cell>
         </ng-container>
         <ng-container *ngIf="direction === directions.TO" matColumnDef="fromEntityTypeName">
-          <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'relation.from-entity-type' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.from-entity-type' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let relation">
             {{ relation.fromEntityTypeName }}
           </mat-cell>
         </ng-container>
         <ng-container *ngIf="direction === directions.TO" matColumnDef="fromName">
-          <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'relation.from-entity-name' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 33%"> {{ 'relation.from-entity-name' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let relation">
             {{ relation.fromName }}
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" stickyEnd>
-          <mat-header-cell *matHeaderCellDef [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }">
+          <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
           </mat-header-cell>
-          <mat-cell *matCellDef="let relation" [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }">
+          <mat-cell *matCellDef="let relation">
             <div fxFlex fxLayout="row" fxLayoutAlign="end">
               <button mat-button mat-icon-button [disabled]="isLoading$ | async"
                       matTooltip="{{ 'relation.edit' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
index 4c6eabe7b5..285fb81b97 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html
@@ -62,33 +62,33 @@
       <mat-table [dataSource]="dataSource"
                  matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
         <ng-container matColumnDef="actionSourceName">
-          <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'widget-config.action-source' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 20%"> {{ 'widget-config.action-source' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let action">
             {{ action.actionSourceName }}
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="name">
-          <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'widget-config.action-name' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%"> {{ 'widget-config.action-name' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let action">
             {{ action.name }}
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="icon">
-          <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'widget-config.action-icon' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40px"> {{ 'widget-config.action-icon' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let action">
             <mat-icon>{{ action.icon }}</mat-icon>
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="typeName">
-          <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'widget-config.action-type' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 50%"> {{ 'widget-config.action-type' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let action">
             {{ action.typeName }}
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" stickyEnd>
-          <mat-header-cell *matHeaderCellDef [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }">
+          <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
           </mat-header-cell>
-          <mat-cell *matCellDef="let action" [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }">
+          <mat-cell *matCellDef="let action">
             <div fxFlex fxLayout="row" fxLayoutAlign="end">
               <button mat-button mat-icon-button [disabled]="isLoading$ | async"
                       type="button"
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 ae49d68708..245aaf6500 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
@@ -70,7 +70,7 @@
                           [indeterminate]="alarmsDatasource.selection.hasValue() && !(alarmsDatasource.isAllSelected() | async)">
             </mat-checkbox>
           </mat-header-cell>
-          <mat-cell *matCellDef="let alarm" style="width: 30px;">
+          <mat-cell *matCellDef="let alarm">
             <mat-checkbox (click)="$event.stopPropagation();"
                           (change)="$event ? alarmsDatasource.toggleSelection(alarm) : null"
                           [checked]="alarmsDatasource.isSelected(alarm)">
@@ -85,9 +85,13 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" stickyEnd>
-          <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ width: (actionCellDescriptors.length * 36) + 'px' }">
+          <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
+                                                                maxWidth: (actionCellDescriptors.length * 40) + 'px',
+                                                                width: (actionCellDescriptors.length * 40) + 'px' }">
           </mat-header-cell>
-          <mat-cell *matCellDef="let alarm" [ngStyle.gt-md]="{ width: (actionCellDescriptors.length * 36) + 'px' }">
+          <mat-cell *matCellDef="let alarm" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
+                                                                maxWidth: (actionCellDescriptors.length * 40) + 'px',
+                                                                width: (actionCellDescriptors.length * 40) + 'px' }">
             <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
               <button mat-button mat-icon-button [disabled]="(isLoading$ | async) || !actionEnabled(alarm, actionDescriptor)"
                       *ngFor="let actionDescriptor of actionCellDescriptors"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
index 1921ab2748..2394a9a056 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
@@ -59,7 +59,7 @@ import {
   getColumnWidth,
   TableWidgetDataKeySettings,
   TableWidgetSettings,
-  toAlarmColumnDef
+  toAlarmColumnDef, widthStyle
 } from '@home/components/widget/lib/table-widget.models';
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
@@ -476,9 +476,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
 
   public headerStyle(key: EntityColumn): any {
     const columnWidth = this.columnWidth[key.def];
-    return {
-      width: columnWidth
-    };
+    return widthStyle(columnWidth);
   }
 
   public cellStyle(alarm: AlarmInfo, key: EntityColumn): any {
@@ -498,7 +496,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     }
     if (!style.width) {
       const columnWidth = this.columnWidth[key.def];
-      style.width = columnWidth;
+      style = {...style, ...widthStyle(columnWidth)};
     }
     return style;
   }
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 e7a13a4fa0..f4ffa7c9d6 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
@@ -48,9 +48,13 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" stickyEnd>
-          <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }">
+          <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
+                                                                maxWidth: (actionCellDescriptors.length * 40) + 'px',
+                                                                width: (actionCellDescriptors.length * 40) + 'px' }">
           </mat-header-cell>
-          <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }">
+          <mat-cell *matCellDef="let entity" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
+                                                                maxWidth: (actionCellDescriptors.length * 40) + 'px',
+                                                                width: (actionCellDescriptors.length * 40) + 'px' }">
             <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
               <button mat-button mat-icon-button [disabled]="isLoading$ | async"
                       *ngFor="let actionDescriptor of actionCellDescriptors"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
index 534e69b413..63e337fc9a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
@@ -55,20 +55,20 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import {
-  CellContentInfo,
-  CellStyleInfo,
-  constructTableCssString,
-  DisplayColumn,
-  EntityColumn,
-  EntityData,
-  fromEntityColumnDef,
-  getCellContentInfo,
-  getCellStyleInfo,
-  getColumnWidth,
-  getEntityValue,
-  TableWidgetDataKeySettings,
-  TableWidgetSettings,
-  toEntityColumnDef
+    CellContentInfo,
+    CellStyleInfo,
+    constructTableCssString,
+    DisplayColumn,
+    EntityColumn,
+    EntityData,
+    fromEntityColumnDef,
+    getCellContentInfo,
+    getCellStyleInfo,
+    getColumnWidth,
+    getEntityValue,
+    TableWidgetDataKeySettings,
+    TableWidgetSettings,
+    toEntityColumnDef, widthStyle
 } from '@home/components/widget/lib/table-widget.models';
 import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
@@ -402,9 +402,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
 
   public headerStyle(key: EntityColumn): any {
     const columnWidth = this.columnWidth[key.def];
-    return {
-      width: columnWidth
-    };
+    return widthStyle(columnWidth);
   }
 
   public cellStyle(entity: EntityData, key: EntityColumn): any {
@@ -424,7 +422,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     }
     if (!style.width) {
       const columnWidth = this.columnWidth[key.def];
-      style.width = columnWidth;
+      style = {...style, ...widthStyle(columnWidth)};
     }
     return style;
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
index 5bcb66d090..e982f6d0c5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
@@ -156,6 +156,17 @@ export function getColumnWidth(keySettings: TableWidgetDataKeySettings): string
   return isDefined(keySettings.columnWidth) ? keySettings.columnWidth : '0px';
 }
 
+export function widthStyle(width: string): any {
+  const widthStyleObj: any = {width};
+  if (width !== '0px') {
+    widthStyleObj.minWidth = width;
+    widthStyleObj.maxWidth = width;
+  }
+  return widthStyleObj;
+}
+
+
+
 export function constructTableCssString(widgetConfig: WidgetConfig): string {
   const origColor = widgetConfig.color || 'rgba(0, 0, 0, 0.87)';
   const origBackgroundColor = widgetConfig.backgroundColor || 'rgb(255, 255, 255)';
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
index 0f48d98e44..64c43d4307 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html
@@ -58,9 +58,13 @@
               </mat-cell>
             </ng-container>
             <ng-container matColumnDef="actions" stickyEnd>
-              <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }">
+              <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
+                                                                    maxWidth: (actionCellDescriptors.length * 40) + 'px',
+                                                                    width: (actionCellDescriptors.length * 40) + 'px' }">
               </mat-header-cell>
-              <mat-cell *matCellDef="let row" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 36) + 'px', maxWidth: (actionCellDescriptors.length * 36) + 'px' }">
+              <mat-cell *matCellDef="let row" [ngStyle.gt-md]="{ minWidth: (actionCellDescriptors.length * 40) + 'px',
+                                                                maxWidth: (actionCellDescriptors.length * 40) + 'px',
+                                                                width: (actionCellDescriptors.length * 40) + 'px' }">
                 <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
                   <button mat-button mat-icon-button [disabled]="isLoading$ | async"
                           *ngFor="let actionDescriptor of actionCellDescriptors"
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/states/manage-dashboard-states-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/states/manage-dashboard-states-dialog.component.html
index 663cc4f96c..813f8b0703 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/states/manage-dashboard-states-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/states/manage-dashboard-states-dialog.component.html
@@ -78,27 +78,27 @@
               <mat-table [dataSource]="dataSource"
                          matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
                 <ng-container matColumnDef="name">
-                  <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'dashboard.state-name' | translate }} </mat-header-cell>
+                  <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 60%"> {{ 'dashboard.state-name' | translate }} </mat-header-cell>
                   <mat-cell *matCellDef="let state">
                     {{ state.name }}
                   </mat-cell>
                 </ng-container>
                 <ng-container matColumnDef="id">
-                  <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'dashboard.state-id' | translate }} </mat-header-cell>
+                  <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'dashboard.state-id' | translate }} </mat-header-cell>
                   <mat-cell *matCellDef="let state">
                     {{ state.id }}
                   </mat-cell>
                 </ng-container>
                 <ng-container matColumnDef="root">
-                  <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'dashboard.is-root-state' | translate }} </mat-header-cell>
+                  <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 80px"> {{ 'dashboard.is-root-state' | translate }} </mat-header-cell>
                   <mat-cell *matCellDef="let state">
                     <mat-icon class="material-icons mat-icon">{{state.root ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
                   </mat-cell>
                 </ng-container>
                 <ng-container matColumnDef="actions" stickyEnd>
-                  <mat-header-cell *matHeaderCellDef [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }">
+                  <mat-header-cell *matHeaderCellDef style="min-width: 80px; max-width: 80px; width: 80px">
                   </mat-header-cell>
-                  <mat-cell *matCellDef="let state" [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }">
+                  <mat-cell *matCellDef="let state">
                     <div fxFlex fxLayout="row">
                       <button mat-button mat-icon-button [disabled]="isLoading$ | async"
                               type="button"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
index e725ed8f9a..f42db7c119 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
@@ -56,7 +56,7 @@ export class RuleChainsTableConfigResolver implements Resolve<EntityTableConfig<
 
     this.config.columns.push(
       new DateEntityTableColumn<RuleChain>('createdTime', 'rulechain.created-time', this.datePipe, '150px'),
-      new EntityTableColumn<RuleChain>('name', 'rulechain.name'),
+      new EntityTableColumn<RuleChain>('name', 'rulechain.name', '100%'),
       new EntityTableColumn<RuleChain>('root', 'rulechain.root', '60px',
         entity => {
           return checkBoxCell(entity.root);
diff --git a/ui-ngx/src/app/shared/models/page/page-link.ts b/ui-ngx/src/app/shared/models/page/page-link.ts
index c60023944d..248801022b 100644
--- a/ui-ngx/src/app/shared/models/page/page-link.ts
+++ b/ui-ngx/src/app/shared/models/page/page-link.ts
@@ -85,6 +85,12 @@ export class PageLink {
           result = item1Value - item2Value;
         } else if (typeof item1Value === 'string' && typeof item2Value === 'string') {
           result = item1Value.localeCompare(item2Value);
+        } else if (typeof item1Value === 'boolean' && typeof item2Value === 'boolean') {
+          if (item1Value && !item2Value) {
+            result = 1;
+          } else if (!item1Value && item2Value) {
+            result = -1;
+          }
         } else if (typeof item1Value !== typeof item2Value) {
           result = 1;
         }
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index d81548ac10..ae0eb63c60 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -511,10 +511,25 @@ mat-label {
     max-width: 100%;
     margin-bottom: 1rem;
     display: table;
+    table-layout: auto;
     border-collapse: separate;
     margin: 0px;
   }
 
+  mat-footer-row::after, mat-header-row::after, mat-row::after {
+    content: none;
+  }
+
+  mat-header-row {
+    min-height: 60px;
+    height: 60px;
+  }
+
+  mat-footer-row, mat-row {
+    min-height: 52px;
+    height: 52px;
+  }
+
   .mat-row,
   .mat-header-row {
     display: table-row;