PROD-5643: Pagination settings improvements

ui-ngx/src/app/core/utils.ts

@@ -31,6 +31,7 @@ import {
   isNotEmptyTbFunction,
   TbFunction
 } from '@shared/models/js-function.models';
+import { UntypedFormGroup } from '@angular/forms';
 
 const varsRegex = /\${([^}]*)}/g;
 
@@ -926,3 +927,15 @@ export const unwrapModule = (module: any) : any => {
     return module;
   }
 };
+
+export function buildPageStepSizeValues(formGroup: UntypedFormGroup, pageSteps: Array<number>): void {
+  const pageStepCount = formGroup.get('pageStepCount')?.value;
+  const pageStepSize = formGroup.get('pageStepSize')?.value;
+  pageSteps.length = 0;
+  if (isDefinedAndNotNull(pageStepCount) && pageStepCount > 0 && pageStepCount <= 100 &&
+    isDefinedAndNotNull(pageStepSize) && pageStepSize > 0) {
+    for (let i = 1; i <= pageStepCount; i++) {
+      pageSteps.push(pageStepSize * i);
+    }
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/alarm/alarms-table-widget.component.ts

@@ -185,7 +185,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   public enableStickyHeader = true;
   public enableStickyAction = false;
   public showCellActionsMenu = true;
-  public pageSizeOptions;
+  public pageSizeOptions = [];
   public pageLink: AlarmDataPageLink;
   public sortOrderProperty: string;
   public textSearchMode = false;
@@ -213,7 +213,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   private allowClear = true;
   public allowAssign = true;
 
-  private defaultPageSize = 10;
+  private defaultPageSize;
   private defaultSortOrder = '-' + alarmFields.createdTime.value;
 
   private contentsInfo: {[key: string]: CellContentInfo} = {};
@@ -392,10 +392,26 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     this.rowStylesInfo = getRowStyleInfo(this.ctx, this.settings, 'alarm, ctx');
 
     const pageSize = this.settings.defaultPageSize;
+    let pageStepSize = this.settings.pageStepSize;
+    let pageStepCount = this.settings.pageStepCount;
     if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) {
       this.defaultPageSize = pageSize;
     }
-    this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize * 2, this.defaultPageSize * 3];
+    if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) {
+      if (!this.defaultPageSize) {
+        this.defaultPageSize = pageStepSize;
+      }
+    } else {
+      if (!this.defaultPageSize) {
+        this.defaultPageSize = 10;
+      }
+      pageStepSize = this.defaultPageSize;
+      pageStepCount = 3;
+    }
+
+    for (let i = 1; i <= pageStepCount; i++) {
+      this.pageSizeOptions.push(pageStepSize * i);
+    }
     this.pageLink.pageSize = this.displayPagination ? this.defaultPageSize : 1024;
 
     const alarmFilter = this.entityService.resolveAlarmFilter(this.widgetConfig.alarmFilterConfig, false);

ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.ts

@@ -42,7 +42,7 @@ import {
 import { IWidgetSubscription } from '@core/api/widget-api.models';
 import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
-import { deepClone, hashCode, isDefined, isNumber, isObject, isUndefined } from '@core/utils';
+import { deepClone, hashCode, isDefined, isDefinedAndNotNull, isNumber, isObject, isUndefined } from '@core/utils';
 import cssjs from '@core/css/css';
 import { CollectionViewer, DataSource } from '@angular/cdk/collections';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
@@ -139,7 +139,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
   public enableStickyHeader = true;
   public enableStickyAction = true;
   public showCellActionsMenu = true;
-  public pageSizeOptions;
+  public pageSizeOptions = [];
   public pageLink: EntityDataPageLink;
   public sortOrderProperty: string;
   public textSearchMode = false;
@@ -161,7 +161,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
   private widgetResize$: ResizeObserver;
   private destroy$ = new Subject<void>();
 
-  private defaultPageSize = 10;
+  private defaultPageSize;
   private defaultSortOrder = 'entityName';
 
   private contentsInfo: {[key: string]: CellContentInfo} = {};
@@ -311,10 +311,26 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     this.rowStylesInfo = getRowStyleInfo(this.ctx, this.settings, 'entity, ctx');
 
     const pageSize = this.settings.defaultPageSize;
+    let pageStepSize = this.settings.pageStepSize;
+    let pageStepCount = this.settings.pageStepCount;
     if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) {
       this.defaultPageSize = pageSize;
     }
-    this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize * 2, this.defaultPageSize * 3];
+    if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) {
+      if (!this.defaultPageSize) {
+        this.defaultPageSize = pageStepSize;
+      }
+    } else {
+      if (!this.defaultPageSize) {
+        this.defaultPageSize = 10;
+      }
+      pageStepSize = this.defaultPageSize;
+      pageStepCount = 3;
+    }
+
+    for (let i = 1; i <= pageStepCount; i++) {
+      this.pageSizeOptions.push(pageStepSize * i);
+    }
     this.pageLink.pageSize = this.displayPagination ? this.defaultPageSize : 1024;
 
     this.noDataDisplayMessageText =

ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-table.component.ts

@@ -43,7 +43,7 @@ import {
 import cssjs from '@core/css/css';
 import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
-import { hashCode, isDefined, isNumber, parseHttpErrorMessage } from '@core/utils';
+import { hashCode, isDefined, isDefinedAndNotNull, isNumber, parseHttpErrorMessage } from '@core/utils';
 import { CollectionViewer, DataSource } from '@angular/cdk/collections';
 import { emptyPageData, PageData } from '@shared/models/page/page-data';
 import {
@@ -114,7 +114,7 @@ export class PersistentTableComponent extends PageComponent implements OnInit, O
   private subscription: IWidgetSubscription;
   private enableFilterAction = true;
   private allowSendRequest = true;
-  private defaultPageSize = 10;
+  private defaultPageSize;
   private defaultSortOrder = '-createdTime';
   private rpcStatusFilter: RpcStatus;
   private displayDetails = true;
@@ -130,7 +130,7 @@ export class PersistentTableComponent extends PageComponent implements OnInit, O
   public enableStickyHeader = true;
   public enableStickyAction = true;
   public pageLink: PageLink;
-  public pageSizeOptions;
+  public pageSizeOptions = [];
   public actionCellButtonAction: PersistentTableWidgetActionDescriptor[] = [];
   public displayedColumns: string[];
   public hidePageSize = false;
@@ -207,10 +207,27 @@ export class PersistentTableComponent extends PageComponent implements OnInit, O
     this.displayedColumns = [...this.displayTableColumns];
 
     const pageSize = this.settings.defaultPageSize;
+    let pageStepSize = this.settings.pageStepSize;
+    let pageStepCount = this.settings.pageStepCount;
     if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) {
       this.defaultPageSize = pageSize;
     }
-    this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize * 2, this.defaultPageSize * 3];
+    if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) {
+      if (!this.defaultPageSize) {
+        this.defaultPageSize = pageStepSize;
+      }
+    } else {
+      if (!this.defaultPageSize) {
+        this.defaultPageSize = 10;
+      }
+      pageStepSize = this.defaultPageSize;
+      pageStepCount = 3;
+    }
+
+    for (let i = 1; i <= pageStepCount; i++) {
+      this.pageSizeOptions.push(pageStepSize * i);
+    }
+
     if (this.settings.defaultSortOrder && this.settings.defaultSortOrder.length) {
       this.defaultSortOrder = this.settings.defaultSortOrder;
     }

ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.html

@@ -95,11 +95,29 @@
       {{ 'widgets.table.display-pagination' | translate }}
     </mat-slide-toggle>
     <div class="tb-form-row space-between column-xs">
-      <div translate>widgets.table.default-page-size</div>
+      <div translate>widgets.table.page-step-size</div>
       <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-        <input matInput formControlName="defaultPageSize" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+        <input matInput formControlName="pageStepSize" type="number" min="1" step="1" required
+               (change)="onPaginationSettingsChange()"
+               placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between column-xs">
+      <div translate>widgets.table.page-step-count</div>
+      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+        <input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
+               (change)="onPaginationSettingsChange()"
+               placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
+      <mat-label translate>widgets.table.default-page-size</mat-label>
+      <mat-select formControlName="defaultPageSize">
+        <mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
+          {{ size }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.table.rows</div>

ui-ngx/src/app/modules/home/components/widget/lib/settings/alarm/alarms-table-widget-settings.component.ts

@@ -19,6 +19,7 @@ import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.m
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
+import { buildPageStepSizeValues, isDefinedAndNotNull } from '@core/utils';
 
 @Component({
   selector: 'tb-alarms-table-widget-settings',
@@ -28,6 +29,7 @@ import { AppState } from '@core/core.state';
 export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent {
 
   alarmsTableWidgetSettingsForm: UntypedFormGroup;
+  pageStepSizeValues = [];
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
@@ -56,6 +58,8 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent
       displayActivity: true,
       displayPagination: true,
       defaultPageSize: 10,
+      pageStepSize: null,
+      pageStepCount: 3,
       defaultSortOrder: '-createdTime',
       useRowStyleFunction: false,
       rowStyleFunction: ''
@@ -80,10 +84,20 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent
       displayActivity: [settings.displayActivity, []],
       displayPagination: [settings.displayPagination, []],
       defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]],
+      pageStepCount: [isDefinedAndNotNull(settings.pageStepCount) ? settings.pageStepCount : 3,
+        [Validators.min(1), Validators.max(100), Validators.required, Validators.pattern(/^\d*$/)]],
+      pageStepSize: [isDefinedAndNotNull(settings.pageStepSize) ? settings.pageStepSize : settings.defaultPageSize,
+        [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
       defaultSortOrder: [settings.defaultSortOrder, []],
       useRowStyleFunction: [settings.useRowStyleFunction, []],
       rowStyleFunction: [settings.rowStyleFunction, [Validators.required]]
     });
+    buildPageStepSizeValues(this.alarmsTableWidgetSettingsForm, this.pageStepSizeValues);
+  }
+
+  public onPaginationSettingsChange(): void {
+    this.alarmsTableWidgetSettingsForm.get('defaultPageSize').reset();
+    buildPageStepSizeValues(this.alarmsTableWidgetSettingsForm, this.pageStepSizeValues);
   }
 
   protected validatorTriggers(): string[] {
@@ -100,11 +114,17 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent
     }
     if (displayPagination) {
       this.alarmsTableWidgetSettingsForm.get('defaultPageSize').enable();
+      this.alarmsTableWidgetSettingsForm.get('pageStepCount').enable();
+      this.alarmsTableWidgetSettingsForm.get('pageStepSize').enable();
     } else {
       this.alarmsTableWidgetSettingsForm.get('defaultPageSize').disable();
+      this.alarmsTableWidgetSettingsForm.get('pageStepCount').disable();
+      this.alarmsTableWidgetSettingsForm.get('pageStepSize').disable();
     }
     this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').updateValueAndValidity({emitEvent});
     this.alarmsTableWidgetSettingsForm.get('defaultPageSize').updateValueAndValidity({emitEvent});
+    this.alarmsTableWidgetSettingsForm.get('pageStepCount').updateValueAndValidity({emitEvent});
+    this.alarmsTableWidgetSettingsForm.get('pageStepSize').updateValueAndValidity({emitEvent});
   }
 
 }

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html

@@ -62,11 +62,29 @@
       {{ 'widgets.table.display-pagination' | translate }}
     </mat-slide-toggle>
     <div class="tb-form-row space-between column-xs">
-      <div translate>widgets.table.default-page-size</div>
+      <div translate>widgets.table.page-step-size</div>
       <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-        <input matInput formControlName="defaultPageSize" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+        <input matInput formControlName="pageStepSize" type="number" min="1" step="1" required
+               (change)="onPaginationSettingsChange()"
+               placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between column-xs">
+      <div translate>widgets.table.page-step-count</div>
+      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+        <input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
+               (change)="onPaginationSettingsChange()"
+               placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
+      <mat-label translate>widgets.table.default-page-size</mat-label>
+      <mat-select formControlName="defaultPageSize">
+        <mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
+          {{ size }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
   </div>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.table.table-tabs</div>

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.ts

@@ -19,6 +19,7 @@ import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.m
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
+import { buildPageStepSizeValues, isDefinedAndNotNull } from '@core/utils';
 
 @Component({
   selector: 'tb-timeseries-table-widget-settings',
@@ -28,6 +29,7 @@ import { AppState } from '@core/core.state';
 export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsComponent {
 
   timeseriesTableWidgetSettingsForm: UntypedFormGroup;
+  pageStepSizeValues = [];
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
@@ -51,6 +53,8 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
       displayPagination: true,
       useEntityLabel: false,
       defaultPageSize: 10,
+      pageStepSize: null,
+      pageStepCount: 3,
       hideEmptyLines: false,
       disableStickyHeader: false,
       useRowStyleFunction: false,
@@ -77,11 +81,21 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
       displayPagination: [settings.displayPagination, []],
       useEntityLabel: [settings.useEntityLabel, []],
       defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]],
+      pageStepCount: [isDefinedAndNotNull(settings.pageStepCount) ? settings.pageStepCount : 3,
+        [Validators.min(1), Validators.max(100), Validators.required, Validators.pattern(/^\d*$/)]],
+      pageStepSize: [isDefinedAndNotNull(settings.pageStepSize) ? settings.pageStepSize : settings.defaultPageSize,
+        [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
       hideEmptyLines: [settings.hideEmptyLines, []],
       disableStickyHeader: [settings.disableStickyHeader, []],
       useRowStyleFunction: [settings.useRowStyleFunction, []],
       rowStyleFunction: [settings.rowStyleFunction, [Validators.required]]
     });
+    buildPageStepSizeValues(this.timeseriesTableWidgetSettingsForm, this.pageStepSizeValues);
+  }
+
+  public onPaginationSettingsChange(): void {
+    this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').reset();
+    buildPageStepSizeValues(this.timeseriesTableWidgetSettingsForm, this.pageStepSizeValues);
   }
 
   protected validatorTriggers(): string[] {
@@ -98,11 +112,17 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
     }
     if (displayPagination) {
       this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').enable();
+      this.timeseriesTableWidgetSettingsForm.get('pageStepCount').enable();
+      this.timeseriesTableWidgetSettingsForm.get('pageStepSize').enable();
     } else {
       this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').disable();
+      this.timeseriesTableWidgetSettingsForm.get('pageStepCount').disable();
+      this.timeseriesTableWidgetSettingsForm.get('pageStepSize').disable();
     }
     this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').updateValueAndValidity({emitEvent});
     this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').updateValueAndValidity({emitEvent});
+    this.timeseriesTableWidgetSettingsForm.get('pageStepCount').updateValueAndValidity({emitEvent});
+    this.timeseriesTableWidgetSettingsForm.get('pageStepSize').updateValueAndValidity({emitEvent});
   }
 
 }

ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html

@@ -49,7 +49,23 @@
         </mat-slide-toggle>
         <mat-form-field class="mat-block flex-1">
           <mat-label translate>widgets.table.default-page-size</mat-label>
-          <input matInput type="number" min="1" step="1" formControlName="defaultPageSize">
+          <mat-select formControlName="defaultPageSize">
+            <mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
+              {{ size }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </section>
+      <section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start">
+        <mat-form-field class="mat-block flex-1">
+          <mat-label translate>widgets.table.page-step-size</mat-label>
+          <input matInput formControlName="pageStepSize" type="number" min="1" step="1" required
+                 (change)="onPaginationSettingsChange()">
+        </mat-form-field>
+        <mat-form-field class="mat-block flex-1">
+          <mat-label translate>widgets.table.page-step-count</mat-label>
+          <input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
+                 (change)="onPaginationSettingsChange()">
         </mat-form-field>
       </section>
       <mat-form-field class="mat-block flex-1">

ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.ts

@@ -27,6 +27,7 @@ import { MatChipInputEvent, MatChipGrid } from '@angular/material/chips';
 import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { map, mergeMap, share, startWith } from 'rxjs/operators';
 import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
+import { buildPageStepSizeValues, isDefinedAndNotNull } from '@core/utils';
 
 interface DisplayColumn {
   name: string;
@@ -57,6 +58,8 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon
 
   persistentTableWidgetSettingsForm: UntypedFormGroup;
 
+  pageStepSizeValues = [];
+
   filteredDisplayColumns: Observable<Array<DisplayColumn>>;
 
   columnSearchText = '';
@@ -94,6 +97,8 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon
 
       displayPagination: true,
       defaultPageSize: 10,
+      pageStepSize: null,
+      pageStepCount: 3,
 
       defaultSortOrder: '-createdTime',
       displayColumns: ['rpcId', 'messageType', 'status', 'method', 'createdTime', 'expirationTime']
@@ -110,9 +115,19 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon
       displayDetails: [settings.displayDetails, []],
       displayPagination: [settings.displayPagination, []],
       defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]],
+      pageStepCount: [isDefinedAndNotNull(settings.pageStepCount) ? settings.pageStepCount : 3,
+        [Validators.min(1), Validators.max(100), Validators.required, Validators.pattern(/^\d*$/)]],
+      pageStepSize: [isDefinedAndNotNull(settings.pageStepSize) ? settings.pageStepSize : settings.defaultPageSize,
+        [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
       defaultSortOrder: [settings.defaultSortOrder, []],
       displayColumns: [settings.displayColumns, [Validators.required]]
     });
+    buildPageStepSizeValues(this.persistentTableWidgetSettingsForm, this.pageStepSizeValues);
+  }
+
+  public onPaginationSettingsChange(): void {
+    this.persistentTableWidgetSettingsForm.get('defaultPageSize').reset();
+    buildPageStepSizeValues(this.persistentTableWidgetSettingsForm, this.pageStepSizeValues);
   }
 
   public validateSettings(): boolean {
@@ -129,10 +144,16 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon
     const displayPagination: boolean = this.persistentTableWidgetSettingsForm.get('displayPagination').value;
     if (displayPagination) {
       this.persistentTableWidgetSettingsForm.get('defaultPageSize').enable();
+      this.persistentTableWidgetSettingsForm.get('pageStepCount').enable();
+      this.persistentTableWidgetSettingsForm.get('pageStepSize').enable();
     } else {
       this.persistentTableWidgetSettingsForm.get('defaultPageSize').disable();
+      this.persistentTableWidgetSettingsForm.get('pageStepCount').disable();
+      this.persistentTableWidgetSettingsForm.get('pageStepSize').disable();
     }
     this.persistentTableWidgetSettingsForm.get('defaultPageSize').updateValueAndValidity({emitEvent});
+    this.persistentTableWidgetSettingsForm.get('pageStepCount').updateValueAndValidity({emitEvent});
+    this.persistentTableWidgetSettingsForm.get('pageStepSize').updateValueAndValidity({emitEvent});
   }
 
   private fetchColumns(searchText?: string): Observable<Array<DisplayColumn>> {

ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.html

@@ -92,11 +92,29 @@
       {{ 'widgets.table.display-pagination' | translate }}
     </mat-slide-toggle>
     <div class="tb-form-row space-between column-xs">
-      <div translate>widgets.table.default-page-size</div>
+      <div translate>widgets.table.page-step-size</div>
       <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-        <input matInput formControlName="defaultPageSize" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
+        <input matInput formControlName="pageStepSize" type="number" min="1" step="1" required
+               (change)="onPaginationSettingsChange()"
+               placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between column-xs">
+      <div translate>widgets.table.page-step-count</div>
+      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+        <input matInput formControlName="pageStepCount" type="number" min="1" max="100" step="1" required
+               (change)="onPaginationSettingsChange()"
+               placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
+    <mat-form-field class="flex-1" subscriptSizing="dynamic">
+      <mat-label translate>widgets.table.default-page-size</mat-label>
+      <mat-select formControlName="defaultPageSize">
+        <mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
+          {{ size }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
   </div>
   <div class="tb-form-panel tb-slide-toggle">
     <div class="tb-form-panel-title" translate>widgets.table.rows</div>

ui-ngx/src/app/modules/home/components/widget/lib/settings/entity/entities-table-widget-settings.component.ts

@@ -19,6 +19,7 @@ import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.m
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
+import { buildPageStepSizeValues, isDefinedAndNotNull } from '@core/utils';
 
 @Component({
   selector: 'tb-entities-table-widget-settings',
@@ -28,6 +29,7 @@ import { AppState } from '@core/core.state';
 export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponent {
 
   entitiesTableWidgetSettingsForm: UntypedFormGroup;
+  pageStepSizeValues = [];
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder) {
@@ -54,6 +56,8 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen
       displayEntityType: true,
       displayPagination: true,
       defaultPageSize: 10,
+      pageStepSize: null,
+      pageStepCount: 3,
       defaultSortOrder: 'entityName',
       useRowStyleFunction: false,
       rowStyleFunction: ''
@@ -76,10 +80,20 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen
       displayEntityType: [settings.displayEntityType, []],
       displayPagination: [settings.displayPagination, []],
       defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]],
+      pageStepCount: [isDefinedAndNotNull(settings.pageStepCount) ? settings.pageStepCount : 3,
+        [Validators.min(1), Validators.max(100), Validators.required, Validators.pattern(/^\d*$/)]],
+      pageStepSize: [isDefinedAndNotNull(settings.pageStepSize) ? settings.pageStepSize : settings.defaultPageSize,
+        [Validators.min(1), Validators.required, Validators.pattern(/^\d*$/)]],
       defaultSortOrder: [settings.defaultSortOrder, []],
       useRowStyleFunction: [settings.useRowStyleFunction, []],
       rowStyleFunction: [settings.rowStyleFunction, [Validators.required]]
     });
+    buildPageStepSizeValues(this.entitiesTableWidgetSettingsForm, this.pageStepSizeValues);
+  }
+
+  public onPaginationSettingsChange(): void {
+    this.entitiesTableWidgetSettingsForm.get('defaultPageSize').reset();
+    buildPageStepSizeValues(this.entitiesTableWidgetSettingsForm, this.pageStepSizeValues);
   }
 
   protected validatorTriggers(): string[] {
@@ -98,8 +112,12 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen
     }
     if (displayPagination) {
       this.entitiesTableWidgetSettingsForm.get('defaultPageSize').enable();
+      this.entitiesTableWidgetSettingsForm.get('pageStepCount').enable();
+      this.entitiesTableWidgetSettingsForm.get('pageStepSize').enable();
     } else {
       this.entitiesTableWidgetSettingsForm.get('defaultPageSize').disable();
+      this.entitiesTableWidgetSettingsForm.get('pageStepCount').disable();
+      this.entitiesTableWidgetSettingsForm.get('pageStepSize').disable();
     }
     if (displayEntityName) {
       this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').enable();
@@ -113,6 +131,8 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen
     }
     this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').updateValueAndValidity({emitEvent});
     this.entitiesTableWidgetSettingsForm.get('defaultPageSize').updateValueAndValidity({emitEvent});
+    this.entitiesTableWidgetSettingsForm.get('pageStepCount').updateValueAndValidity({emitEvent});
+    this.entitiesTableWidgetSettingsForm.get('pageStepSize').updateValueAndValidity({emitEvent});
     this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').updateValueAndValidity({emitEvent});
     this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').updateValueAndValidity({emitEvent});
   }

ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts

@@ -47,6 +47,8 @@ export interface TableWidgetSettings {
   enableStickyHeader: boolean;
   displayPagination: boolean;
   defaultPageSize: number;
+  pageStepSize: number;
+  pageStepCount: number;
   useRowStyleFunction: boolean;
   rowStyleFunction?: TbFunction;
   reserveSpaceForHiddenAction?: boolean;

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts

@@ -173,7 +173,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
   public enableStickyHeader = true;
   public enableStickyAction = true;
   public showCellActionsMenu = true;
-  public pageSizeOptions;
+  public pageSizeOptions = [];
   public textSearchMode = false;
   public hidePageSize = false;
   public sources: TimeseriesTableSource[];
@@ -192,7 +192,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
   private latestData: Array<DatasourceData>;
   private datasources: Array<Datasource>;
 
-  private defaultPageSize = 10;
+  private defaultPageSize;
   private defaultSortOrder = '-0';
   private hideEmptyLines = false;
   public showTimestamp = true;
@@ -352,10 +352,26 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
     this.rowStylesInfo = getRowStyleInfo(this.ctx, this.settings, 'rowData, ctx');
 
     const pageSize = this.settings.defaultPageSize;
+    let pageStepSize = this.settings.pageStepSize;
+    let pageStepCount = this.settings.pageStepCount;
     if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) {
       this.defaultPageSize = pageSize;
     }
-    this.pageSizeOptions = [this.defaultPageSize, this.defaultPageSize * 2, this.defaultPageSize * 3];
+    if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) {
+      if (!this.defaultPageSize) {
+        this.defaultPageSize = pageStepSize;
+      }
+    } else {
+      if (!this.defaultPageSize) {
+        this.defaultPageSize = 10;
+      }
+      pageStepSize = this.defaultPageSize;
+      pageStepCount = 3;
+    }
+
+    for (let i = 1; i <= pageStepCount; i++) {
+      this.pageSizeOptions.push(pageStepSize * i);
+    }
 
     this.noDataDisplayMessageText =
       noDataMessage(this.widgetConfig.noDataDisplayMessage, 'widget.no-data-found', this.utils, this.translate);

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -8111,6 +8111,8 @@
             "display-timestamp": "Timestamp",
             "display-pagination": "Display pagination",
             "default-page-size": "Default page size",
+            "page-step-count": "Number of steps",
+            "page-step-size": "Page size increment",
             "use-entity-label-tab-name": "Use entity label in tab name",
             "hide-empty-lines": "Hide empty lines",
             "row-style": "Row style",