Table layout improvement

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>

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

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"

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

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 &&

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 {

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 }}"

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"

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"

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

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"

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

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)';

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"

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"

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);

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

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;