UI: Timeseries table basic config

2023-06-27 18:17:15 +03:00 · 2023-06-27 18:17:15 +03:00 · 987d41f329
commit 987d41f329
parent 97831351a0
17 changed files with 538 additions and 159 deletions
--- a/application/src/main/data/json/system/widget_bundles/cards.json
+++ b/application/src/main/data/json/system/widget_bundles/cards.json
@ -64,7 +64,9 @@
        "settingsDirective": "tb-timeseries-table-widget-settings",
        "dataKeySettingsDirective": "tb-timeseries-table-key-settings",
        "latestDataKeySettingsDirective": "tb-timeseries-table-latest-key-settings",
-        "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"entityAliasId\":null,\"filterId\":null,\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature  °C\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n    var percent = (value + 60)/120 * 100;\\n    var color = tinycolor.mix('blue', 'red', percent);\\n    color.setAlpha(.5);\\n    return {\\n      paddingLeft: '20px',\\n      color: '#ffffff',\\n      background: color.toRgbString(),\\n      fontSize: '18px'\\n    };\\n} else {\\n    return {};\\n}\",\"useCellContentFunction\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\",\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Humidity, %\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n    var percent = value;\\n    var backgroundColor = tinycolor('blue');\\n    backgroundColor.setAlpha(value/100);\\n    var color = 'blue';\\n    if (value > 50) {\\n        color = 'white';\\n    }\\n    \\n    return {\\n      paddingLeft: '20px',\\n      color: color,\\n      background: backgroundColor.toRgbString(),\\n      fontSize: '18px'\\n    };\\n} else {\\n    return {};\\n}\",\"useCellContentFunction\":false},\"_hash\":0.12775350966079668,\"funcBody\":\"var value = prevValue + Math.random() * 20 - 10;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 5) {\\n\\tvalue = 5;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}],\"latestDataKeys\":null}],\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":60000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"showTimestamp\":true,\"displayPagination\":true,\"defaultPageSize\":10},\"title\":\"Timeseries table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{},\"showTitleIcon\":false,\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"displayTimewindow\":true}"
+        "hasBasicMode": true,
+        "basicModeDirective": "tb-timeseries-table-basic-config",
+        "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"entityAliasId\":null,\"filterId\":null,\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature  °C\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n    var percent = (value + 60)/120 * 100;\\n    var color = tinycolor.mix('blue', 'red', percent);\\n    color.setAlpha(.5);\\n    return {\\n      paddingLeft: '20px',\\n      color: '#ffffff',\\n      background: color.toRgbString(),\\n      fontSize: '18px'\\n    };\\n} else {\\n    return {};\\n}\",\"useCellContentFunction\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\",\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Humidity, %\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n    var percent = value;\\n    var backgroundColor = tinycolor('blue');\\n    backgroundColor.setAlpha(value/100);\\n    var color = 'blue';\\n    if (value > 50) {\\n        color = 'white';\\n    }\\n    \\n    return {\\n      paddingLeft: '20px',\\n      color: color,\\n      background: backgroundColor.toRgbString(),\\n      fontSize: '18px'\\n    };\\n} else {\\n    return {};\\n}\",\"useCellContentFunction\":false},\"_hash\":0.12775350966079668,\"funcBody\":\"var value = prevValue + Math.random() * 20 - 10;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 5) {\\n\\tvalue = 5;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}],\"latestDataKeys\":null}],\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":60000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"showTimestamp\":true,\"displayPagination\":true,\"defaultPageSize\":10},\"title\":\"Timeseries table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{},\"showTitleIcon\":false,\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"displayTimewindow\":true,\"configMode\":\"basic\"}"
      }
    },
    {
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
@ -1152,7 +1152,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
    this.widgetComponentService.getWidgetInfo(widget.bundleAlias, widget.typeAlias, widget.isSystemType).subscribe(
      (widgetTypeInfo) => {
        const config: WidgetConfig = this.dashboardUtils.widgetConfigFromWidgetType(widgetTypeInfo);
-        config.title = 'New ' + widgetTypeInfo.widgetName;
+        if (!config.title) {
+          config.title = 'New ' + widgetTypeInfo.widgetName;
+        }
        let newWidget: Widget = {
          isSystemType: widget.isSystemType,
          bundleAlias: widget.bundleAlias,
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts
@ -30,12 +30,16 @@ import {
 } from '@home/components/widget/config/basic/cards/entities-table-basic-config.component';
 import { DataKeysPanelComponent } from '@home/components/widget/config/basic/common/data-keys-panel.component';
 import { DataKeyRowComponent } from '@home/components/widget/config/basic/common/data-key-row.component';
+import {
+  TimeseriesTableBasicConfigComponent
+} from '@home/components/widget/config/basic/cards/timeseries-table-basic-config.component';

@NgModule({
  declarations: [
    WidgetActionsPanelComponent,
    SimpleCardBasicConfigComponent,
    EntitiesTableBasicConfigComponent,
+    TimeseriesTableBasicConfigComponent,
    DataKeyRowComponent,
    DataKeysPanelComponent
  ],
@ -48,6 +52,7 @@ import { DataKeyRowComponent } from '@home/components/widget/config/basic/common
    WidgetActionsPanelComponent,
    SimpleCardBasicConfigComponent,
    EntitiesTableBasicConfigComponent,
+    TimeseriesTableBasicConfigComponent,
    DataKeyRowComponent,
    DataKeysPanelComponent
  ]
@ -57,5 +62,6 @@ export class BasicWidgetConfigModule {

 export const basicWidgetConfigComponentsMap: {[key: string]: Type<IBasicWidgetConfigComponent>} = {
  'tb-simple-card-basic-config': SimpleCardBasicConfigComponent,
-  'tb-entities-table-basic-config': EntitiesTableBasicConfigComponent
+  'tb-entities-table-basic-config': EntitiesTableBasicConfigComponent,
+  'tb-timeseries-table-basic-config': TimeseriesTableBasicConfigComponent
 };
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/entities-table-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/entities-table-basic-config.component.ts
@ -28,6 +28,7 @@ import {
 } from '@shared/models/widget.models';
 import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
+import { isUndefined } from '@core/utils';

@Component({
  selector: 'tb-entities-table-basic-config',
@ -75,7 +76,7 @@ export class EntitiesTableBasicConfigComponent extends BasicWidgetConfigComponen
    this.entitiesTableWidgetConfigForm = this.fb.group({
      timewindowConfig: [{
        useDashboardTimewindow: configData.config.useDashboardTimewindow,
-        displayTimewindow: configData.config.useDashboardTimewindow,
+        displayTimewindow: configData.config.displayTimewindow,
        timewindow: configData.config.timewindow
      }, []],
      datasources: [configData.config.datasources, []],
@ -155,13 +156,13 @@ export class EntitiesTableBasicConfigComponent extends BasicWidgetConfigComponen

  private getCardButtons(config: WidgetConfig): string[] {
    const buttons: string[] = [];
-    if (config.settings?.enableSearch) {
+    if (isUndefined(config.settings?.enableSearch) || config.settings?.enableSearch) {
      buttons.push('search');
    }
-    if (config.settings?.enableSelectColumnDisplay) {
+    if (isUndefined(config.settings?.enableSelectColumnDisplay) || config.settings?.enableSelectColumnDisplay) {
      buttons.push('columnsToDisplay');
    }
-    if (config.enableFullscreen) {
+    if (isUndefined(config.enableFullscreen) || config.enableFullscreen) {
      buttons.push('fullscreen');
    }
    return buttons;
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.html
@ -0,0 +1,94 @@
+<!--
+
+    Copyright © 2016-2023 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<ng-container [formGroup]="timeseriesTableWidgetConfigForm">
+  <tb-timewindow-config-panel formControlName="timewindowConfig">
+  </tb-timewindow-config-panel>
+  <tb-datasources
+    [configMode]="basicMode"
+    hideDataKeys
+    formControlName="datasources">
+  </tb-datasources>
+  <tb-data-keys-panel
+    panelTitle="{{ 'widgets.table.columns' | translate }}"
+    addKeyTitle="{{ 'widgets.table.add-column' | translate }}"
+    keySettingsTitle="{{ 'widgets.table.column-settings' | translate }}"
+    removeKeyTitle="{{ 'widgets.table.remove-column' | translate }}"
+    noKeysText="{{ 'widgets.table.no-columns' | translate }}"
+    requiredKeysText="{{ 'widgets.table.timeseries-column-error' | translate }}"
+    hideDataKeyColor
+    [datasourceType]="datasource?.type"
+    [deviceId]="datasource?.deviceId"
+    [entityAliasId]="datasource?.entityAliasId"
+    formControlName="columns">
+  </tb-data-keys-panel>
+  <div class="tb-widget-config-panel">
+    <div class="tb-widget-config-panel-title" translate>widget-config.appearance</div>
+    <div class="tb-widget-config-row">
+      <mat-slide-toggle class="mat-slide"  formControlName="showTitle">
+        {{ 'widget-config.card-title' | translate }}
+      </mat-slide-toggle>
+      <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
+    <div class="tb-widget-config-row space-between same-padding">
+      <mat-slide-toggle class="mat-slide"  formControlName="showTitleIcon">
+        {{ 'widget-config.card-icon' | translate }}
+      </mat-slide-toggle>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+        <tb-material-icon-select asBoxInput
+                                 [color]="timeseriesTableWidgetConfigForm.get('iconColor').value"
+                                 formControlName="titleIcon">
+        </tb-material-icon-select>
+        <mat-divider vertical></mat-divider>
+        <tb-color-input asBoxInput
+                        formControlName="iconColor">
+        </tb-color-input>
+      </div>
+    </div>
+    <div class="tb-widget-config-row space-between">
+      <div translate>widgets.table.show-card-buttons</div>
+      <mat-chip-listbox multiple formControlName="cardButtons">
+        <mat-chip-option value="search">{{ 'action.search' | translate }}</mat-chip-option>
+        <mat-chip-option value="columnsToDisplay">{{ 'widgets.table.columns-to-display' | translate }}</mat-chip-option>
+        <mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option>
+      </mat-chip-listbox>
+    </div>
+    <div class="tb-widget-config-row space-between same-padding">
+      <div>{{ 'widget-config.text-color' | translate }}</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+        <mat-divider vertical></mat-divider>
+        <tb-color-input asBoxInput
+                        formControlName="color">
+        </tb-color-input>
+      </div>
+    </div>
+    <div class="tb-widget-config-row space-between same-padding">
+      <div>{{ 'widget-config.background-color' | translate }}</div>
+      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
+        <mat-divider vertical></mat-divider>
+        <tb-color-input asBoxInput
+                        formControlName="backgroundColor">
+        </tb-color-input>
+      </div>
+    </div>
+  </div>
+  <tb-widget-actions-panel
+    formControlName="actions">
+  </tb-widget-actions-panel>
+</ng-container>
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/timeseries-table-basic-config.component.ts
@ -0,0 +1,181 @@
+///
+/// Copyright © 2016-2023 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models';
+import { WidgetConfigComponentData } from '@home/models/widget-component.models';
+import {
+  DataKey,
+  Datasource,
+  datasourcesHasAggregation,
+  datasourcesHasOnlyComparisonAggregation, WidgetConfig
+} from '@shared/models/widget.models';
+import { WidgetConfigComponent } from '@home/components/widget/widget-config.component';
+import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
+import { deepClone, isUndefined } from '@core/utils';
+
+@Component({
+  selector: 'tb-timeseries-table-basic-config',
+  templateUrl: './timeseries-table-basic-config.component.html',
+  styleUrls: ['../basic-config.scss']
+})
+export class TimeseriesTableBasicConfigComponent extends BasicWidgetConfigComponent {
+
+  public get datasource(): Datasource {
+    const datasources: Datasource[] = this.timeseriesTableWidgetConfigForm.get('datasources').value;
+    if (datasources && datasources.length) {
+      return datasources[0];
+    } else {
+      return null;
+    }
+  }
+
+  timeseriesTableWidgetConfigForm: UntypedFormGroup;
+
+  constructor(protected store: Store<AppState>,
+              protected widgetConfigComponent: WidgetConfigComponent,
+              private fb: UntypedFormBuilder) {
+    super(store, widgetConfigComponent);
+  }
+
+  protected configForm(): UntypedFormGroup {
+    return this.timeseriesTableWidgetConfigForm;
+  }
+
+  protected setupDefaults(configData: WidgetConfigComponentData) {
+    this.setupDefaultDatasource(configData,
+      [{ name: 'temperature', label: 'Temperature', type: DataKeyType.timeseries, units: '°C', decimals: 0 }]);
+  }
+
+  protected onConfigSet(configData: WidgetConfigComponentData) {
+    this.timeseriesTableWidgetConfigForm = this.fb.group({
+      timewindowConfig: [{
+        useDashboardTimewindow: configData.config.useDashboardTimewindow,
+        displayTimewindow: configData.config.displayTimewindow,
+        timewindow: configData.config.timewindow
+      }, []],
+      datasources: [configData.config.datasources, []],
+      columns: [this.getColumns(configData.config.datasources), []],
+      showTitle: [configData.config.showTitle, []],
+      title: [configData.config.title, []],
+      showTitleIcon: [configData.config.showTitleIcon, []],
+      titleIcon: [configData.config.titleIcon, []],
+      iconColor: [configData.config.iconColor, []],
+      cardButtons: [this.getCardButtons(configData.config), []],
+      color: [configData.config.color, []],
+      backgroundColor: [configData.config.backgroundColor, []],
+      actions: [configData.config.actions || {}, []]
+    });
+  }
+
+  protected prepareOutputConfig(config: any): WidgetConfigComponentData {
+    this.widgetConfig.config.useDashboardTimewindow = config.timewindowConfig.useDashboardTimewindow;
+    this.widgetConfig.config.displayTimewindow = config.timewindowConfig.displayTimewindow;
+    this.widgetConfig.config.timewindow = config.timewindowConfig.timewindow;
+    this.widgetConfig.config.datasources = config.datasources;
+    this.setColumns(config.columns, this.widgetConfig.config.datasources);
+    this.widgetConfig.config.actions = config.actions;
+    this.widgetConfig.config.showTitle = config.showTitle;
+    this.widgetConfig.config.settings = this.widgetConfig.config.settings || {};
+    this.widgetConfig.config.settings.entitiesTitle = config.title;
+    this.widgetConfig.config.showTitleIcon = config.showTitleIcon;
+    this.widgetConfig.config.titleIcon = config.titleIcon;
+    this.widgetConfig.config.iconColor = config.iconColor;
+    this.setCardButtons(config.cardButtons, this.widgetConfig.config);
+    this.widgetConfig.config.color = config.color;
+    this.widgetConfig.config.backgroundColor = config.backgroundColor;
+    return this.widgetConfig;
+  }
+
+  protected validatorTriggers(): string[] {
+    return ['showTitle', 'showTitleIcon'];
+  }
+
+  protected updateValidators(emitEvent: boolean, trigger?: string) {
+    const showTitle: boolean = this.timeseriesTableWidgetConfigForm.get('showTitle').value;
+    const showTitleIcon: boolean = this.timeseriesTableWidgetConfigForm.get('showTitleIcon').value;
+    if (showTitle) {
+      this.timeseriesTableWidgetConfigForm.get('title').enable();
+      this.timeseriesTableWidgetConfigForm.get('showTitleIcon').enable({emitEvent: false});
+      if (showTitleIcon) {
+        this.timeseriesTableWidgetConfigForm.get('titleIcon').enable();
+        this.timeseriesTableWidgetConfigForm.get('iconColor').enable();
+      } else {
+        this.timeseriesTableWidgetConfigForm.get('titleIcon').disable();
+        this.timeseriesTableWidgetConfigForm.get('iconColor').disable();
+      }
+    } else {
+      this.timeseriesTableWidgetConfigForm.get('title').disable();
+      this.timeseriesTableWidgetConfigForm.get('showTitleIcon').disable({emitEvent: false});
+      this.timeseriesTableWidgetConfigForm.get('titleIcon').disable();
+      this.timeseriesTableWidgetConfigForm.get('iconColor').disable();
+    }
+    this.timeseriesTableWidgetConfigForm.get('title').updateValueAndValidity({emitEvent});
+    this.timeseriesTableWidgetConfigForm.get('showTitleIcon').updateValueAndValidity({emitEvent: false});
+    this.timeseriesTableWidgetConfigForm.get('titleIcon').updateValueAndValidity({emitEvent});
+    this.timeseriesTableWidgetConfigForm.get('iconColor').updateValueAndValidity({emitEvent});
+  }
+
+  private getColumns(datasources?: Datasource[]): DataKey[] {
+    if (datasources && datasources.length) {
+      const dataKeys = deepClone(datasources[0].dataKeys) || [];
+      dataKeys.forEach(k => {
+        (k as any).latest = false;
+      });
+      const latestDataKeys = deepClone(datasources[0].latestDataKeys) || [];
+      latestDataKeys.forEach(k => {
+        (k as any).latest = true;
+      });
+      return dataKeys.concat(latestDataKeys);
+    }
+    return [];
+  }
+
+  private setColumns(columns: DataKey[], datasources?: Datasource[]) {
+    if (datasources && datasources.length) {
+      const dataKeys = deepClone(columns.filter(c => !(c as any).latest));
+      dataKeys.forEach(k => delete (k as any).latest);
+      const latestDataKeys = deepClone(columns.filter(c => (c as any).latest));
+      latestDataKeys.forEach(k => delete (k as any).latest);
+      datasources[0].dataKeys = dataKeys;
+      datasources[0].latestDataKeys = latestDataKeys;
+    }
+  }
+
+  private getCardButtons(config: WidgetConfig): string[] {
+    const buttons: string[] = [];
+    if (isUndefined(config.settings?.enableSearch) || config.settings?.enableSearch) {
+      buttons.push('search');
+    }
+    if (isUndefined(config.settings?.enableSelectColumnDisplay) || config.settings?.enableSelectColumnDisplay) {
+      buttons.push('columnsToDisplay');
+    }
+    if (isUndefined(config.enableFullscreen) || config.enableFullscreen) {
+      buttons.push('fullscreen');
+    }
+    return buttons;
+  }
+
+  private setCardButtons(buttons: string[], config: WidgetConfig) {
+    config.settings.enableSearch = buttons.includes('search');
+    config.settings.enableSelectColumnDisplay = buttons.includes('columnsToDisplay');
+    config.enableFullscreen = buttons.includes('fullscreen');
+  }
+
+}
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.html
@ -16,6 +16,12 @@

 -->
 <div [formGroup]="keyRowFormGroup" class="tb-data-key-row">
+  <mat-form-field *ngIf="hasAdditionalLatestDataKeys" class="tb-inline-field tb-source-field" appearance="outline" subscriptSizing="dynamic">
+    <mat-select formControlName="latest">
+      <mat-option [value]="false">{{ 'datakey.timeseries' | translate }}</mat-option>
+      <mat-option [value]="true">{{ 'datakey.latest' | translate }}</mat-option>
+    </mat-select>
+  </mat-form-field>
  <mat-form-field fxFlex class="tb-inline-field tb-key-field" subscriptSizing="dynamic">
    <mat-chip-grid #chipList>
      <mat-chip-row class="tb-datakey-chip" *ngIf="modelValue.type"
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.scss
@ -43,6 +43,10 @@
    }
  }

+  .tb-source-field {
+    width: 140px;
+  }
+
  .tb-color-field, .tb-units-field, .tb-decimals-field {
    width: 60px;
    display: flex;
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-key-row.component.ts
@ -153,6 +153,11 @@ export class DataKeyRowComponent implements ControlValueAccessor, OnInit, OnChan
    return this.widgetConfigComponent.widgetConfigCallbacks;
  }

+  get hasAdditionalLatestDataKeys(): boolean {
+    return this.widgetConfigComponent.widgetType === widgetType.timeseries &&
+      this.widgetConfigComponent.modelValue?.typeParameters?.hasAdditionalLatestDataKeys;
+  }
+
  get widget(): Widget {
    return this.widgetConfigComponent.widget;
  }
@ -165,7 +170,7 @@ export class DataKeyRowComponent implements ControlValueAccessor, OnInit, OnChan
    return this.widgetConfigComponent.aliasController;
  }

-  get datakeySettingsSchema(): JsonSettingsSchema {
+  get dataKeySettingsSchema(): JsonSettingsSchema {
    return this.widgetConfigComponent.modelValue?.dataKeySettingsSchema;
  }

@ -173,6 +178,14 @@ export class DataKeyRowComponent implements ControlValueAccessor, OnInit, OnChan
    return this.widgetConfigComponent.modelValue?.dataKeySettingsDirective;
  }

+  get latestDataKeySettingsSchema(): JsonSettingsSchema {
+    return this.widgetConfigComponent.modelValue?.latestDataKeySettingsSchema;
+  }
+
+  get latestDataKeySettingsDirective(): string {
+    return this.widgetConfigComponent.modelValue?.latestDataKeySettingsDirective;
+  }
+
  get isEntityDatasource(): boolean {
    return [DatasourceType.device, DatasourceType.entity].includes(this.datasourceType);
  }
@ -193,6 +206,10 @@ export class DataKeyRowComponent implements ControlValueAccessor, OnInit, OnChan
    return this.dataKeysPanelComponent.dragEnabled;
  }

+  get isLatestDataKeys(): boolean {
+    return this.hasAdditionalLatestDataKeys && this.keyRowFormGroup.get('latest').value === true;
+  }
+
  private propagateChange = (_val: any) => {};

  constructor(private fb: UntypedFormBuilder,
@ -212,6 +229,12 @@ export class DataKeyRowComponent implements ControlValueAccessor, OnInit, OnChan
      units: [null, []],
      decimals: [null, []],
    });
+    if (this.hasAdditionalLatestDataKeys) {
+      this.keyRowFormGroup.addControl('latest', this.fb.control(false));
+      this.keyRowFormGroup.valueChanges.subscribe(
+        () => this.clearKeySearchCache()
+      );
+    }
    this.keyRowFormGroup.valueChanges.subscribe(
      () => this.updateModel()
    );
@ -286,6 +309,11 @@ export class DataKeyRowComponent implements ControlValueAccessor, OnInit, OnChan
        decimals: value?.decimals
      }, {emitEvent: false}
    );
+    if (this.hasAdditionalLatestDataKeys) {
+      this.keyRowFormGroup.patchValue({
+        latest: (value as any)?.latest
+      }, {emitEvent: false});
+    }
    this.cd.markForCheck();
  }

@ -323,8 +351,8 @@ export class DataKeyRowComponent implements ControlValueAccessor, OnInit, OnChan
        data: {
          dataKey: deepClone(this.modelValue),
          dataKeyConfigMode: advanced ? DataKeyConfigMode.advanced : DataKeyConfigMode.general,
-          dataKeySettingsSchema: this.datakeySettingsSchema,
-          dataKeySettingsDirective: this.dataKeySettingsDirective,
+          dataKeySettingsSchema: this.isLatestDataKeys ? this.latestDataKeySettingsSchema : this.dataKeySettingsSchema,
+          dataKeySettingsDirective: this.isLatestDataKeys ? this.latestDataKeySettingsDirective : this.dataKeySettingsDirective,
          dashboard: this.dashboard,
          aliasController: this.aliasController,
          widget: this.widget,
@ -399,7 +427,7 @@ export class DataKeyRowComponent implements ControlValueAccessor, OnInit, OnChan
      } else if (this.datasourceType === DatasourceType.entity && this.entityAliasId ||
        this.datasourceType === DatasourceType.device && this.deviceId) {
        const dataKeyTypes = [DataKeyType.timeseries];
-        if (this.widgetType === widgetType.latest || this.widgetType === widgetType.alarm) {
+        if (this.isLatestDataKeys || this.widgetType === widgetType.latest || this.widgetType === widgetType.alarm) {
          dataKeyTypes.push(DataKeyType.attribute);
          dataKeyTypes.push(DataKeyType.entityField);
          if (this.widgetType === widgetType.alarm) {
@ -428,7 +456,7 @@ export class DataKeyRowComponent implements ControlValueAccessor, OnInit, OnChan
  }

  private addKeyFromChipValue(chip: DataKey) {
-    this.modelValue = this.callbacks.generateDataKey(chip.name, chip.type, this.datakeySettingsSchema);
+    this.modelValue = this.callbacks.generateDataKey(chip.name, chip.type, this.dataKeySettingsSchema);
    if (!this.keyRowFormGroup.get('label').value) {
      this.keyRowFormGroup.get('label').patchValue(this.modelValue.label, {emitEvent: false});
    }
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html
@ -19,6 +19,7 @@
  <div class="tb-widget-config-panel-title">{{ panelTitle }}</div>
  <div class="tb-data-keys-table">
    <div class="tb-data-keys-header">
+      <div *ngIf="hasAdditionalLatestDataKeys" class="tb-data-keys-header-cell tb-source-header" translate>datakey.source</div>
      <div class="tb-data-keys-header-cell" fxFlex translate>datakey.key</div>
      <div class="tb-data-keys-header-cell" fxFlex translate>datakey.label</div>
      <div *ngIf="!hideDataKeyColor" class="tb-data-keys-header-cell tb-color-header" translate>datakey.color</div>
@ -52,6 +53,7 @@
        </div>
      </div>
    </div>
+    <tb-error *ngIf="errorText" noMargin [error]="errorText" style="padding-left: 12px;"></tb-error>
  </div>
  <div>
    <button type="button" mat-stroked-button color="primary" (click)="addKey()">
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.scss
@ -35,6 +35,9 @@
      line-height: 20px;
      letter-spacing: 0.2px;
      color: rgba(0, 0, 0, 0.54);
+      &.tb-source-header {
+        width: 140px;
+      }
      &.tb-color-header, &.tb-units-header, &.tb-decimals-header {
        width: 60px;
      }
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.ts
@ -84,6 +84,9 @@ export class DataKeysPanelComponent implements ControlValueAccessor, OnInit, OnC
  @Input()
  noKeysText: string;

+  @Input()
+  requiredKeysText: string;
+
  @Input()
  datasourceType: DatasourceType;

@ -103,6 +106,8 @@ export class DataKeysPanelComponent implements ControlValueAccessor, OnInit, OnC

  keysListFormGroup: UntypedFormGroup;

+  errorText = '';
+
  get widgetType(): widgetType {
    return this.widgetConfigComponent.widgetType;
  }
@ -111,6 +116,11 @@ export class DataKeysPanelComponent implements ControlValueAccessor, OnInit, OnC
    return this.widgetConfigComponent.widgetConfigCallbacks;
  }

+  get hasAdditionalLatestDataKeys(): boolean {
+    return this.widgetConfigComponent.widgetType === widgetType.timeseries &&
+      this.widgetConfigComponent.modelValue?.typeParameters?.hasAdditionalLatestDataKeys;
+  }
+
  get datakeySettingsSchema(): JsonSettingsSchema {
    return this.widgetConfigComponent.modelValue?.dataKeySettingsSchema;
  }
@ -119,6 +129,14 @@ export class DataKeysPanelComponent implements ControlValueAccessor, OnInit, OnC
    return this.keysFormArray().controls.length > 1;
  }

+  get noKeys(): boolean {
+    let keys: DataKey[] = this.keysListFormGroup.get('keys').value;
+    if (this.hasAdditionalLatestDataKeys) {
+      keys = keys.filter(k => !(k as any).latest);
+    }
+    return keys.length === 0;
+  }
+
  private propagateChange = (_val: any) => {};

  constructor(private fb: UntypedFormBuilder,
@ -196,7 +214,13 @@ export class DataKeysPanelComponent implements ControlValueAccessor, OnInit, OnC
  }

  public validate(c: UntypedFormControl) {
-    return this.keysListFormGroup.valid ? null : {
+    this.errorText = '';
+    let valid = this.keysListFormGroup.valid;
+    if (this.noKeys && this.requiredKeysText) {
+      valid = false;
+      this.errorText = this.requiredKeysText;
+    }
+    return valid ? null : {
      dataKeyRows: {
        valid: false,
      },
@ -226,6 +250,9 @@ export class DataKeysPanelComponent implements ControlValueAccessor, OnInit, OnC
    const dataKey = this.callbacks.generateDataKey('', null, this.datakeySettingsSchema);
    dataKey.label = '';
    dataKey.decimals = 0;
+    if (this.hasAdditionalLatestDataKeys) {
+      (dataKey as any).latest = false;
+    }
    const keysArray = this.keysListFormGroup.get('keys') as UntypedFormArray;
    const keyControl = this.fb.control(dataKey, [dataKeyRowValidator]);
    keysArray.push(keyControl);
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-key-settings.component.html
@ -15,18 +15,49 @@
    limitations under the License.

 -->
-<section class="tb-widget-settings" [formGroup]="timeseriesTableKeySettingsForm" fxLayout="column">
-  <fieldset class="fields-group fields-group-slider">
-    <legend class="group-title" translate>widgets.table.cell-style</legend>
+<ng-container [formGroup]="timeseriesTableKeySettingsForm">
+  <div class="tb-widget-config-panel">
+    <div class="tb-widget-config-panel-title" translate>widgets.table.column-settings</div>
+    <div class="tb-widget-config-row space-between">
+      <div>{{ 'widgets.table.default-column-visibility' | translate }}</div>
+      <mat-form-field style="width: 220px;" appearance="outline" subscriptSizing="dynamic">
+        <mat-select formControlName="defaultColumnVisibility">
+          <mat-option [value]="'visible'">
+            {{ 'widgets.table.column-visibility-visible' | translate }}
+          </mat-option>
+          <mat-option [value]="'hidden'">
+            {{ 'widgets.table.column-visibility-hidden' | translate }}
+          </mat-option>
+          <mat-option [value]="'hidden-mobile'">
+            {{ 'widgets.table.column-visibility-hidden-mobile' | translate }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div class="tb-widget-config-row space-between">
+      <div>{{ 'widgets.table.column-selection-to-display' | translate }}</div>
+      <mat-form-field style="width: 220px;" appearance="outline" subscriptSizing="dynamic">
+        <mat-select formControlName="columnSelectionToDisplay">
+          <mat-option [value]="'enabled'">
+            {{ 'widgets.table.column-selection-to-display-enabled' | translate }}
+          </mat-option>
+          <mat-option [value]="'disabled'">
+            {{ 'widgets.table.column-selection-to-display-disabled' | translate }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="tb-widget-config-panel tb-slide-toggle">
    <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-title>
-          <mat-slide-toggle formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
+      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+        <mat-panel-title fxFlex="60">
+          <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
                            fxLayoutAlign="center">
            {{ 'widgets.table.use-cell-style-function' | translate }}
          </mat-slide-toggle>
        </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
          widget-config.advanced-settings
        </mat-panel-description>
      </mat-expansion-panel-header>
@ -40,18 +71,17 @@
        </tb-js-func>
      </ng-template>
    </mat-expansion-panel>
-  </fieldset>
-  <fieldset class="fields-group fields-group-slider">
-    <legend class="group-title" translate>widgets.table.cell-content</legend>
+  </div>
+  <div class="tb-widget-config-panel tb-slide-toggle">
    <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-title>
-          <mat-slide-toggle formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
+      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+        <mat-panel-title fxFlex="60">
+          <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
                            fxLayoutAlign="center">
            {{ 'widgets.table.use-cell-content-function' | translate }}
          </mat-slide-toggle>
        </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
          widget-config.advanced-settings
        </mat-panel-description>
      </mat-expansion-panel-header>
@ -65,30 +95,5 @@
        </tb-js-func>
      </ng-template>
    </mat-expansion-panel>
-  </fieldset>
-  <mat-form-field fxFlex class="mat-block">
-    <mat-label translate>widgets.table.default-column-visibility</mat-label>
-    <mat-select formControlName="defaultColumnVisibility">
-      <mat-option [value]="'visible'">
-        {{ 'widgets.table.column-visibility-visible' | translate }}
-      </mat-option>
-      <mat-option [value]="'hidden'">
-        {{ 'widgets.table.column-visibility-hidden' | translate }}
-      </mat-option>
-      <mat-option [value]="'hidden-mobile'">
-        {{ 'widgets.table.column-visibility-hidden-mobile' | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-  <mat-form-field fxFlex class="mat-block">
-    <mat-label translate>widgets.table.column-selection-to-display</mat-label>
-    <mat-select formControlName="columnSelectionToDisplay">
-      <mat-option [value]="'enabled'">
-        {{ 'widgets.table.column-selection-to-display-enabled' | translate }}
-      </mat-option>
-      <mat-option [value]="'disabled'">
-        {{ 'widgets.table.column-selection-to-display-disabled' | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-</section>
+  </div>
+</ng-container>
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-latest-key-settings.component.html
@ -15,25 +15,58 @@
    limitations under the License.

 -->
-<section class="tb-widget-settings" [formGroup]="timeseriesTableLatestKeySettingsForm" fxLayout="column">
-  <mat-slide-toggle class="mat-slide" formControlName="show">
-    {{ 'widgets.table.show-latest-data-column' | translate }}
-  </mat-slide-toggle>
-  <mat-form-field [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" fxFlex class="mat-block">
-    <mat-label translate>widgets.table.latest-data-column-order</mat-label>
-    <input matInput type="number" step="1" formControlName="order">
-  </mat-form-field>
-  <fieldset [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="fields-group fields-group-slider">
-    <legend class="group-title" translate>widgets.table.cell-style</legend>
+<ng-container [formGroup]="timeseriesTableLatestKeySettingsForm">
+  <div class="tb-widget-config-panel">
+    <div class="tb-widget-config-panel-title" translate>widgets.table.column-settings</div>
+    <mat-slide-toggle class="mat-slide no-margin" formControlName="show">
+      {{ 'widgets.table.show-latest-data-column' | translate }}
+    </mat-slide-toggle>
+    <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-widget-config-row space-between">
+      <div translate>widgets.table.latest-data-column-order</div>
+      <mat-form-field appearance="outline" class="center number" subscriptSizing="dynamic">
+        <input matInput formControlName="order" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
+    <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-widget-config-row space-between">
+      <div>{{ 'widgets.table.default-column-visibility' | translate }}</div>
+      <mat-form-field style="width: 220px;" appearance="outline" subscriptSizing="dynamic">
+        <mat-select formControlName="defaultColumnVisibility">
+          <mat-option [value]="'visible'">
+            {{ 'widgets.table.column-visibility-visible' | translate }}
+          </mat-option>
+          <mat-option [value]="'hidden'">
+            {{ 'widgets.table.column-visibility-hidden' | translate }}
+          </mat-option>
+          <mat-option [value]="'hidden-mobile'">
+            {{ 'widgets.table.column-visibility-hidden-mobile' | translate }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-widget-config-row space-between">
+      <div>{{ 'widgets.table.column-selection-to-display' | translate }}</div>
+      <mat-form-field style="width: 220px;" appearance="outline" subscriptSizing="dynamic">
+        <mat-select formControlName="columnSelectionToDisplay">
+          <mat-option [value]="'enabled'">
+            {{ 'widgets.table.column-selection-to-display-enabled' | translate }}
+          </mat-option>
+          <mat-option [value]="'disabled'">
+            {{ 'widgets.table.column-selection-to-display-disabled' | translate }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+  </div>
+  <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-widget-config-panel tb-slide-toggle">
    <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableLatestKeySettingsForm.get('useCellStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-title>
-          <mat-slide-toggle formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
+      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+        <mat-panel-title fxFlex="60">
+          <mat-slide-toggle class="mat-slide" formControlName="useCellStyleFunction" (click)="$event.stopPropagation()"
                            fxLayoutAlign="center">
            {{ 'widgets.table.use-cell-style-function' | translate }}
          </mat-slide-toggle>
        </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
          widget-config.advanced-settings
        </mat-panel-description>
      </mat-expansion-panel-header>
@ -47,18 +80,17 @@
        </tb-js-func>
      </ng-template>
    </mat-expansion-panel>
-  </fieldset>
-  <fieldset [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="fields-group fields-group-slider">
-    <legend class="group-title" translate>widgets.table.cell-content</legend>
+  </div>
+  <div [fxShow]="timeseriesTableLatestKeySettingsForm.get('show').value" class="tb-widget-config-panel tb-slide-toggle">
    <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableLatestKeySettingsForm.get('useCellContentFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-title>
-          <mat-slide-toggle formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
+      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+        <mat-panel-title fxFlex="60">
+          <mat-slide-toggle class="mat-slide" formControlName="useCellContentFunction" (click)="$event.stopPropagation()"
                            fxLayoutAlign="center">
            {{ 'widgets.table.use-cell-content-function' | translate }}
          </mat-slide-toggle>
        </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
          widget-config.advanced-settings
        </mat-panel-description>
      </mat-expansion-panel-header>
@ -72,30 +104,6 @@
        </tb-js-func>
      </ng-template>
    </mat-expansion-panel>
-  </fieldset>
-  <mat-form-field fxFlex class="mat-block">
-    <mat-label translate>widgets.table.default-column-visibility</mat-label>
-    <mat-select formControlName="defaultColumnVisibility">
-      <mat-option [value]="'visible'">
-        {{ 'widgets.table.column-visibility-visible' | translate }}
-      </mat-option>
-      <mat-option [value]="'hidden'">
-        {{ 'widgets.table.column-visibility-hidden' | translate }}
-      </mat-option>
-      <mat-option [value]="'hidden-mobile'">
-        {{ 'widgets.table.column-visibility-hidden-mobile' | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-  <mat-form-field fxFlex class="mat-block">
-    <mat-label translate>widgets.table.column-selection-to-display</mat-label>
-    <mat-select formControlName="columnSelectionToDisplay">
-      <mat-option [value]="'enabled'">
-        {{ 'widgets.table.column-selection-to-display-enabled' | translate }}
-      </mat-option>
-      <mat-option [value]="'disabled'">
-        {{ 'widgets.table.column-selection-to-display-disabled' | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-</section>
+  </div>
+</ng-container>
+
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html
@ -15,28 +15,31 @@
    limitations under the License.

 -->
-<section class="tb-widget-settings" [formGroup]="timeseriesTableWidgetSettingsForm" fxLayout="column">
-  <fieldset class="fields-group">
-    <legend class="group-title" translate>widgets.table.common-table-settings</legend>
-    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
-      <section fxLayout="column" fxFlex>
-        <mat-checkbox formControlName="enableSearch">
-          {{ 'widgets.table.enable-search' | translate }}
-        </mat-checkbox>
-        <mat-checkbox formControlName="enableSelectColumnDisplay">
-          {{ 'widgets.table.enable-select-column-display' | translate }}
-        </mat-checkbox>
-      </section>
-      <section fxLayout="column" fxFlex>
-        <mat-checkbox formControlName="enableStickyHeader">
-          {{ 'widgets.table.enable-sticky-header' | translate }}
-        </mat-checkbox>
-        <mat-checkbox formControlName="enableStickyAction">
-          {{ 'widgets.table.enable-sticky-action' | translate }}
-        </mat-checkbox>
-      </section>
-    </section>
-    <mat-form-field fxFlex class="mat-block">
+<ng-container [formGroup]="timeseriesTableWidgetSettingsForm">
+  <div class="tb-widget-config-panel">
+    <div class="tb-widget-config-panel-title" translate>widgets.table.table-header</div>
+    <mat-slide-toggle class="mat-slide no-margin"  formControlName="enableStickyHeader">
+      {{ 'widgets.table.enable-sticky-header' | translate }}
+    </mat-slide-toggle>
+    <mat-slide-toggle class="mat-slide no-margin"  formControlName="enableSearch">
+      {{ 'widgets.table.enable-search' | translate }}
+    </mat-slide-toggle>
+    <mat-slide-toggle class="mat-slide no-margin"  formControlName="enableSelectColumnDisplay">
+      {{ 'widgets.table.enable-select-column-display' | translate }}
+    </mat-slide-toggle>
+  </div>
+  <div class="tb-widget-config-panel">
+    <div class="tb-widget-config-panel-title" translate>widgets.table.columns</div>
+    <mat-slide-toggle class="mat-slide no-margin"  formControlName="showTimestamp">
+      {{ 'widgets.table.display-timestamp' | translate }}
+    </mat-slide-toggle>
+    <mat-slide-toggle class="mat-slide no-margin"  formControlName="showMilliseconds">
+      {{ 'widgets.table.display-milliseconds' | translate }}
+    </mat-slide-toggle>
+    <mat-slide-toggle class="mat-slide no-margin"  formControlName="enableStickyAction">
+      {{ 'widgets.table.enable-sticky-action' | translate }}
+    </mat-slide-toggle>
+    <mat-form-field fxFlex subscriptSizing="dynamic">
      <mat-label translate>widgets.table.hidden-cell-button-display-mode</mat-label>
      <mat-select formControlName="reserveSpaceForHiddenAction">
        <mat-option [value]="'true'">
@ -47,41 +50,39 @@
        </mat-option>
      </mat-select>
    </mat-form-field>
-    <section fxLayout="column" fxLayoutGap="8px">
-      <mat-slide-toggle formControlName="showTimestamp">
-        {{ 'widgets.table.display-timestamp' | translate }}
-      </mat-slide-toggle>
-      <mat-slide-toggle formControlName="showMilliseconds">
-        {{ 'widgets.table.display-milliseconds' | translate }}
-      </mat-slide-toggle>
-      <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
-        <mat-slide-toggle fxFlex formControlName="displayPagination">
-          {{ 'widgets.table.display-pagination' | translate }}
-        </mat-slide-toggle>
-        <mat-form-field fxFlex class="mat-block">
-          <mat-label translate>widgets.table.default-page-size</mat-label>
-          <input matInput type="number" min="1" step="1" formControlName="defaultPageSize">
-        </mat-form-field>
-      </section>
-      <mat-slide-toggle formControlName="useEntityLabel">
-        {{ 'widgets.table.use-entity-label-tab-name' | translate }}
-      </mat-slide-toggle>
-      <mat-slide-toggle formControlName="hideEmptyLines">
-        {{ 'widgets.table.hide-empty-lines' | translate }}
-      </mat-slide-toggle>
-    </section>
-  </fieldset>
-  <fieldset class="fields-group fields-group-slider">
-    <legend class="group-title" translate>widgets.table.row-style</legend>
+  </div>
+  <div class="tb-widget-config-panel">
+    <div class="tb-widget-config-panel-title" translate>widgets.table.pagination</div>
+    <mat-slide-toggle class="mat-slide no-margin"  formControlName="displayPagination">
+      {{ 'widgets.table.display-pagination' | translate }}
+    </mat-slide-toggle>
+    <div class="tb-widget-config-row space-between">
+      <div translate>widgets.table.default-page-size</div>
+      <mat-form-field appearance="outline" class="center number" subscriptSizing="dynamic">
+        <input matInput formControlName="defaultPageSize" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="tb-widget-config-panel">
+    <div class="tb-widget-config-panel-title" translate>widgets.table.table-tabs</div>
+    <mat-slide-toggle class="mat-slide no-margin" formControlName="useEntityLabel">
+      {{ 'widgets.table.use-entity-label-tab-name' | translate }}
+    </mat-slide-toggle>
+  </div>
+  <div class="tb-widget-config-panel tb-slide-toggle" style="padding-bottom: 16px;">
+    <div class="tb-widget-config-panel-title" translate>widgets.table.rows</div>
+    <mat-slide-toggle class="mat-slide no-margin" style="padding-left: 16px;" formControlName="hideEmptyLines">
+      {{ 'widgets.table.hide-empty-lines' | translate }}
+    </mat-slide-toggle>
    <mat-expansion-panel class="tb-settings" [expanded]="timeseriesTableWidgetSettingsForm.get('useRowStyleFunction').value">
-      <mat-expansion-panel-header fxLayout="row wrap">
-        <mat-panel-title>
-          <mat-slide-toggle formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
+      <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
+        <mat-panel-title fxFlex="60">
+          <mat-slide-toggle class="mat-slide" formControlName="useRowStyleFunction" (click)="$event.stopPropagation()"
                            fxLayoutAlign="center">
            {{ 'widgets.table.use-row-style-function' | translate }}
          </mat-slide-toggle>
        </mat-panel-title>
-        <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
+        <mat-panel-description fxFlex="40" fxLayoutAlign="end center" fxHide.xs translate>
          widget-config.advanced-settings
        </mat-panel-description>
      </mat-expansion-panel-header>
@ -95,5 +96,5 @@
        </tb-js-func>
      </ng-template>
    </mat-expansion-panel>
-  </fieldset>
-</section>
+  </div>
+</ng-container>
--- a/ui-ngx/src/app/shared/components/tb-error.component.ts
+++ b/ui-ngx/src/app/shared/components/tb-error.component.ts
@ -16,11 +16,12 @@

 import { Component, Input } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
+import { coerceBoolean } from '@shared/decorators/coercion';

@Component({
  selector: 'tb-error',
  template: `
-  <div [@animation]="state" style="margin-top:0.5rem;font-size:.75rem">
+  <div [@animation]="state" [ngStyle]="{marginTop: noMargin ? '0' : '0.5rem', fontSize: '.75rem'}">
      <mat-error >
      {{message}}
    </mat-error>
@ -51,6 +52,10 @@ export class TbErrorComponent {
  state: any;
  message;

+  @Input()
+  @coerceBoolean()
+  noMargin = false;
+
  @Input()
  set error(value) {
    if (value && !this.message) {
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@ -1188,7 +1188,9 @@
        "delta-calculation-result": "Delta calculation result",
        "delta-calculation-result-previous-value": "Previous value",
        "delta-calculation-result-delta-absolute": "Delta (absolute)",
-        "delta-calculation-result-delta-percent": "Delta (percent)"
+        "delta-calculation-result-delta-percent": "Delta (percent)",
+        "source": "Source",
+        "latest": "Latest"
    },
    "datasource": {
        "type": "Datasource type",
@ -5240,7 +5242,9 @@
            "table-header": "Table header",
            "header-buttons": "Header buttons",
            "pagination": "Pagination",
-            "rows": "Rows"
+            "rows": "Rows",
+            "timeseries-column-error": "At least one timeseries column should be specified",
+            "table-tabs": "Table tabs"
        },
        "value-source": {
            "value-source": "Value source",