UI-redesign and additional corrections

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

@@ -927,15 +927,3 @@ 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

@@ -392,25 +392,24 @@ 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 pageStepIncrement = this.settings.pageStepIncrement;
     let pageStepCount = this.settings.pageStepCount;
+
     if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) {
       this.defaultPageSize = pageSize;
     }
-    if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) {
-      if (!this.defaultPageSize) {
-        this.defaultPageSize = pageStepSize;
-      }
-    } else {
-      if (!this.defaultPageSize) {
-        this.defaultPageSize = 10;
-      }
-      pageStepSize = this.defaultPageSize;
+
+    if (!this.defaultPageSize) {
+      this.defaultPageSize = pageStepIncrement ?? 10;
+    }
+
+    if (!isDefinedAndNotNull(pageStepIncrement) || !isDefinedAndNotNull(pageStepCount)) {
+      pageStepIncrement = this.defaultPageSize;
       pageStepCount = 3;
     }
 
     for (let i = 1; i <= pageStepCount; i++) {
-      this.pageSizeOptions.push(pageStepSize * i);
+      this.pageSizeOptions.push(pageStepIncrement * i);
     }
     this.pageLink.pageSize = this.displayPagination ? this.defaultPageSize : 1024;
 

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

@@ -311,25 +311,24 @@ 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 pageStepIncrement = this.settings.pageStepIncrement;
     let pageStepCount = this.settings.pageStepCount;
+
     if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) {
       this.defaultPageSize = pageSize;
     }
-    if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) {
-      if (!this.defaultPageSize) {
-        this.defaultPageSize = pageStepSize;
-      }
-    } else {
-      if (!this.defaultPageSize) {
-        this.defaultPageSize = 10;
-      }
-      pageStepSize = this.defaultPageSize;
+
+    if (!this.defaultPageSize) {
+      this.defaultPageSize = pageStepIncrement ?? 10;
+    }
+
+    if (!isDefinedAndNotNull(pageStepIncrement) || !isDefinedAndNotNull(pageStepCount)) {
+      pageStepIncrement = this.defaultPageSize;
       pageStepCount = 3;
     }
 
     for (let i = 1; i <= pageStepCount; i++) {
-      this.pageSizeOptions.push(pageStepSize * i);
+      this.pageSizeOptions.push(pageStepIncrement * i);
     }
     this.pageLink.pageSize = this.displayPagination ? this.defaultPageSize : 1024;
 

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

@@ -207,25 +207,24 @@ export class PersistentTableComponent extends PageComponent implements OnInit, O
     this.displayedColumns = [...this.displayTableColumns];
 
     const pageSize = this.settings.defaultPageSize;
-    let pageStepSize = this.settings.pageStepSize;
+    let pageStepIncrement = this.settings.pageStepIncrement;
     let pageStepCount = this.settings.pageStepCount;
+
     if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) {
       this.defaultPageSize = pageSize;
     }
-    if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) {
-      if (!this.defaultPageSize) {
-        this.defaultPageSize = pageStepSize;
-      }
-    } else {
-      if (!this.defaultPageSize) {
-        this.defaultPageSize = 10;
-      }
-      pageStepSize = this.defaultPageSize;
+
+    if (!this.defaultPageSize) {
+      this.defaultPageSize = pageStepIncrement ?? 10;
+    }
+
+    if (!isDefinedAndNotNull(pageStepIncrement) || !isDefinedAndNotNull(pageStepCount)) {
+      pageStepIncrement = this.defaultPageSize;
       pageStepCount = 3;
     }
 
     for (let i = 1; i <= pageStepCount; i++) {
-      this.pageSizeOptions.push(pageStepSize * i);
+      this.pageSizeOptions.push(pageStepIncrement * i);
     }
 
     if (this.settings.defaultSortOrder && this.settings.defaultSortOrder.length) {

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

@@ -95,29 +95,53 @@
       {{ 'widgets.table.display-pagination' | translate }}
     </mat-slide-toggle>
     <div class="tb-form-row space-between column-xs">
-      <div translate>widgets.table.page-step-size</div>
-      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-        <input matInput formControlName="pageStepSize" type="number" min="1" step="1" required
-               (change)="onPaginationSettingsChange()"
-               placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
+      <div class="fixed-title-width">{{ 'widgets.table.page-step-settings' | translate }}</div>
+      <div class="flex flex-row items-center justify-start gap-2">
+        <div class="tb-small-label" translate>widgets.table.page-step-increment</div>
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="pageStepIncrement" type="number" min="1" step="1" required
+                 placeholder="{{ 'widget-config.set' | translate }}">
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="(alarmsTableWidgetSettingsForm.get('pageStepIncrement').hasError('required')
+                                     ? 'widgets.value-source.value-required'
+                                     : 'widgets.table.page-step-increment-format-message') | translate"
+                    *ngIf="alarmsTableWidgetSettingsForm.get('pageStepIncrement').invalid
+                    && alarmsTableWidgetSettingsForm.get('pageStepIncrement').touched"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        </mat-form-field>
+        <mat-divider vertical></mat-divider>
+        <div class="tb-small-label" 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
+                 placeholder="{{ 'widget-config.set' | translate }}">
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="(alarmsTableWidgetSettingsForm.get('pageStepCount').hasError('required')
+                                     ? 'widgets.value-source.value-required'
+                                     : 'widgets.table.page-step-count-format-message') | translate"
+                    *ngIf="alarmsTableWidgetSettingsForm.get('pageStepCount').invalid
+                    && alarmsTableWidgetSettingsForm.get('pageStepCount').touched"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        </mat-form-field>
+      </div>
     </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 }}">
+      <div translate>widgets.table.default-page-size</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <mat-select formControlName="defaultPageSize" placeholder="{{ 'widget-config.set' | translate }}">
+          <mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
+            {{ size }}
+          </mat-option>
+        </mat-select>
       </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,7 +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';
+import { buildPageStepSizeValues } from '@home/components/widget/lib/table-widget.models';
 
 @Component({
   selector: 'tb-alarms-table-widget-settings',
@@ -58,7 +58,7 @@ export class AlarmsTableWidgetSettingsComponent extends WidgetSettingsComponent
       displayActivity: true,
       displayPagination: true,
       defaultPageSize: 10,
-      pageStepSize: null,
+      pageStepIncrement: null,
       pageStepCount: 3,
       defaultSortOrder: '-createdTime',
       useRowStyleFunction: false,
@@ -84,47 +84,46 @@ 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,
+      pageStepCount: [settings.pageStepCount ?? 3, [Validators.min(1), Validators.max(100),
+        Validators.required, Validators.pattern(/^\d*$/)]],
+      pageStepIncrement: [settings.pageStepIncrement ?? 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);
+    this.pageStepSizeValues = buildPageStepSizeValues(this.alarmsTableWidgetSettingsForm.get('pageStepCount').value,
+      this.alarmsTableWidgetSettingsForm.get('pageStepIncrement').value);
   }
 
   protected validatorTriggers(): string[] {
-    return ['useRowStyleFunction', 'displayPagination'];
+    return ['useRowStyleFunction', 'displayPagination', 'pageStepCount',
+      'pageStepIncrement'];
   }
 
-  protected updateValidators(emitEvent: boolean) {
+  protected updateValidators(emitEvent: boolean, trigger: string) {
+    if (trigger === 'pageStepCount' || trigger === 'pageStepIncrement') {
+      this.alarmsTableWidgetSettingsForm.get('defaultPageSize').reset();
+      this.pageStepSizeValues = buildPageStepSizeValues(this.alarmsTableWidgetSettingsForm.get('pageStepCount').value,
+        this.alarmsTableWidgetSettingsForm.get('pageStepIncrement').value);
+      return;
+    }
     const useRowStyleFunction: boolean = this.alarmsTableWidgetSettingsForm.get('useRowStyleFunction').value;
     const displayPagination: boolean = this.alarmsTableWidgetSettingsForm.get('displayPagination').value;
     if (useRowStyleFunction) {
-      this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').enable();
+      this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').enable({emitEvent});
     } else {
-      this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').disable();
+      this.alarmsTableWidgetSettingsForm.get('rowStyleFunction').disable({emitEvent});
     }
     if (displayPagination) {
-      this.alarmsTableWidgetSettingsForm.get('defaultPageSize').enable();
-      this.alarmsTableWidgetSettingsForm.get('pageStepCount').enable();
-      this.alarmsTableWidgetSettingsForm.get('pageStepSize').enable();
+      this.alarmsTableWidgetSettingsForm.get('defaultPageSize').enable({emitEvent});
+      this.alarmsTableWidgetSettingsForm.get('pageStepCount').enable({emitEvent: false});
+      this.alarmsTableWidgetSettingsForm.get('pageStepIncrement').enable({emitEvent: false});
     } else {
-      this.alarmsTableWidgetSettingsForm.get('defaultPageSize').disable();
-      this.alarmsTableWidgetSettingsForm.get('pageStepCount').disable();
-      this.alarmsTableWidgetSettingsForm.get('pageStepSize').disable();
+      this.alarmsTableWidgetSettingsForm.get('defaultPageSize').disable({emitEvent});
+      this.alarmsTableWidgetSettingsForm.get('pageStepCount').disable({emitEvent: false});
+      this.alarmsTableWidgetSettingsForm.get('pageStepIncrement').disable({emitEvent: false});
     }
-    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,29 +62,53 @@
       {{ 'widgets.table.display-pagination' | translate }}
     </mat-slide-toggle>
     <div class="tb-form-row space-between column-xs">
-      <div translate>widgets.table.page-step-size</div>
-      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-        <input matInput formControlName="pageStepSize" type="number" min="1" step="1" required
-               (change)="onPaginationSettingsChange()"
-               placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
+      <div class="fixed-title-width">{{ 'widgets.table.page-step-settings' | translate }}</div>
+      <div class="flex flex-row items-center justify-start gap-2">
+        <div class="tb-small-label" translate>widgets.table.page-step-increment</div>
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="pageStepIncrement" type="number" min="1" step="1" required
+                 placeholder="{{ 'widget-config.set' | translate }}">
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="(timeseriesTableWidgetSettingsForm.get('pageStepIncrement').hasError('required')
+                                     ? 'widgets.value-source.value-required'
+                                     : 'widgets.table.page-step-increment-format-message') | translate"
+                    *ngIf="timeseriesTableWidgetSettingsForm.get('pageStepIncrement').invalid
+                    && timeseriesTableWidgetSettingsForm.get('pageStepIncrement').touched"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        </mat-form-field>
+        <mat-divider vertical></mat-divider>
+        <div class="tb-small-label" 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
+                 placeholder="{{ 'widget-config.set' | translate }}">
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="(timeseriesTableWidgetSettingsForm.get('pageStepCount').hasError('required')
+                                     ? 'widgets.value-source.value-required'
+                                     : 'widgets.table.page-step-count-format-message') | translate"
+                    *ngIf="timeseriesTableWidgetSettingsForm.get('pageStepCount').invalid
+                    && timeseriesTableWidgetSettingsForm.get('pageStepCount').touched"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        </mat-form-field>
+      </div>
     </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 }}">
+      <div translate>widgets.table.default-page-size</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <mat-select formControlName="defaultPageSize" placeholder="{{ 'widget-config.set' | translate }}">
+          <mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
+            {{ size }}
+          </mat-option>
+        </mat-select>
       </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,7 +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';
+import { buildPageStepSizeValues } from '@home/components/widget/lib/table-widget.models';
 
 @Component({
   selector: 'tb-timeseries-table-widget-settings',
@@ -53,7 +53,7 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
       displayPagination: true,
       useEntityLabel: false,
       defaultPageSize: 10,
-      pageStepSize: null,
+      pageStepIncrement: null,
       pageStepCount: 3,
       hideEmptyLines: false,
       disableStickyHeader: false,
@@ -81,48 +81,46 @@ 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,
+      pageStepCount: [settings.pageStepCount ?? 3, [Validators.min(1), Validators.max(100),
+        Validators.required, Validators.pattern(/^\d*$/)]],
+      pageStepIncrement: [settings.pageStepIncrement ?? 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);
+    this.pageStepSizeValues = buildPageStepSizeValues(this.timeseriesTableWidgetSettingsForm.get('pageStepCount').value,
+      this.timeseriesTableWidgetSettingsForm.get('pageStepIncrement').value);
   }
 
   protected validatorTriggers(): string[] {
-    return ['useRowStyleFunction', 'displayPagination'];
+    return ['useRowStyleFunction', 'displayPagination', 'pageStepCount', 'pageStepIncrement'];
   }
 
-  protected updateValidators(emitEvent: boolean) {
+  protected updateValidators(emitEvent: boolean, trigger: string) {
+    if (trigger === 'pageStepCount' || trigger === 'pageStepIncrement') {
+      this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').reset();
+      this.pageStepSizeValues = buildPageStepSizeValues(this.timeseriesTableWidgetSettingsForm.get('pageStepCount').value,
+        this.timeseriesTableWidgetSettingsForm.get('pageStepIncrement').value);
+      return;
+    }
     const useRowStyleFunction: boolean = this.timeseriesTableWidgetSettingsForm.get('useRowStyleFunction').value;
     const displayPagination: boolean = this.timeseriesTableWidgetSettingsForm.get('displayPagination').value;
     if (useRowStyleFunction) {
-      this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').enable();
+      this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').enable({emitEvent});
     } else {
-      this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').disable();
+      this.timeseriesTableWidgetSettingsForm.get('rowStyleFunction').disable({emitEvent});
     }
     if (displayPagination) {
-      this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').enable();
-      this.timeseriesTableWidgetSettingsForm.get('pageStepCount').enable();
-      this.timeseriesTableWidgetSettingsForm.get('pageStepSize').enable();
+      this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').enable({emitEvent});
+      this.timeseriesTableWidgetSettingsForm.get('pageStepCount').enable({emitEvent: false});
+      this.timeseriesTableWidgetSettingsForm.get('pageStepIncrement').enable({emitEvent: false});
     } else {
-      this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').disable();
-      this.timeseriesTableWidgetSettingsForm.get('pageStepCount').disable();
-      this.timeseriesTableWidgetSettingsForm.get('pageStepSize').disable();
+      this.timeseriesTableWidgetSettingsForm.get('defaultPageSize').disable({emitEvent});
+      this.timeseriesTableWidgetSettingsForm.get('pageStepCount').disable({emitEvent: false});
+      this.timeseriesTableWidgetSettingsForm.get('pageStepIncrement').disable({emitEvent: false});
     }
-    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

@@ -43,31 +43,60 @@
       <mat-slide-toggle formControlName="allowDelete">
         {{ 'widgets.persistent-table.allow-delete-request' | translate }}
       </mat-slide-toggle>
-      <section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start">
-        <mat-slide-toggle class="flex-1" formControlName="displayPagination">
+      <div class="tb-form-panel stroked">
+        <div class="tb-form-panel-title" translate>widgets.table.pagination</div>
+        <mat-slide-toggle class="mat-slide"  formControlName="displayPagination">
           {{ 'widgets.table.display-pagination' | translate }}
         </mat-slide-toggle>
-        <mat-form-field class="mat-block flex-1">
-          <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>
-      </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>
+        <div class="tb-form-row space-between column-xs">
+          <div class="fixed-title-width">{{ 'widgets.table.page-step-settings' | translate }}</div>
+          <div class="flex flex-row items-center justify-start gap-2">
+            <div class="tb-small-label" translate>widgets.table.page-step-increment</div>
+            <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+              <input matInput formControlName="pageStepIncrement" type="number" min="1" step="1" required
+                     placeholder="{{ 'widget-config.set' | translate }}">
+              <mat-icon matSuffix
+                        matTooltipPosition="above"
+                        matTooltipClass="tb-error-tooltip"
+                        [matTooltip]="(persistentTableWidgetSettingsForm.get('pageStepIncrement').hasError('required')
+                                     ? 'widgets.value-source.value-required'
+                                     : 'widgets.table.page-step-increment-format-message') | translate"
+                        *ngIf="persistentTableWidgetSettingsForm.get('pageStepIncrement').invalid
+                        && persistentTableWidgetSettingsForm.get('pageStepIncrement').touched"
+                        class="tb-error">
+                warning
+              </mat-icon>
+            </mat-form-field>
+            <mat-divider vertical></mat-divider>
+            <div class="tb-small-label" 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
+                     placeholder="{{ 'widget-config.set' | translate }}">
+              <mat-icon matSuffix
+                        matTooltipPosition="above"
+                        matTooltipClass="tb-error-tooltip"
+                        [matTooltip]="(persistentTableWidgetSettingsForm.get('pageStepCount').hasError('required')
+                                     ? 'widgets.value-source.value-required'
+                                     : 'widgets.table.page-step-count-format-message') | translate"
+                        *ngIf="persistentTableWidgetSettingsForm.get('pageStepCount').invalid
+                        && persistentTableWidgetSettingsForm.get('pageStepCount').touched"
+                        class="tb-error">
+                warning
+              </mat-icon>
+            </mat-form-field>
+          </div>
+        </div>
+        <div class="tb-form-row space-between column-xs">
+          <div translate>widgets.table.default-page-size</div>
+          <mat-form-field appearance="outline" subscriptSizing="dynamic">
+            <mat-select formControlName="defaultPageSize" placeholder="{{ 'widget-config.set' | translate }}">
+              <mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
+                {{ size }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+      </div>
       <mat-form-field class="mat-block flex-1">
         <mat-label translate>widgets.table.default-sort-order</mat-label>
         <input matInput formControlName="defaultSortOrder">

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

@@ -27,7 +27,8 @@ 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';
+import { isDefinedAndNotNull } from '@core/utils';
+import { buildPageStepSizeValues } from '@home/components/widget/lib/table-widget.models';
 
 interface DisplayColumn {
   name: string;
@@ -97,7 +98,7 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon
 
       displayPagination: true,
       defaultPageSize: 10,
-      pageStepSize: null,
+      pageStepIncrement: null,
       pageStepCount: 3,
 
       defaultSortOrder: '-createdTime',
@@ -115,19 +116,15 @@ 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,
+      pageStepCount: [settings.pageStepCount ?? 3, [Validators.min(1), Validators.max(100),
+        Validators.required, Validators.pattern(/^\d*$/)]],
+      pageStepIncrement: [settings.pageStepIncrement ?? 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);
+    this.pageStepSizeValues = buildPageStepSizeValues(this.persistentTableWidgetSettingsForm.get('pageStepCount').value,
+      this.persistentTableWidgetSettingsForm.get('pageStepIncrement').value);
   }
 
   public validateSettings(): boolean {
@@ -137,23 +134,26 @@ export class PersistentTableWidgetSettingsComponent extends WidgetSettingsCompon
   }
 
   protected validatorTriggers(): string[] {
-    return ['displayPagination'];
+    return ['displayPagination', 'pageStepCount', 'pageStepIncrement'];
   }
 
-  protected updateValidators(emitEvent: boolean) {
+  protected updateValidators(emitEvent: boolean, trigger: string) {
+    if (trigger === 'pageStepCount' || trigger === 'pageStepIncrement') {
+      this.persistentTableWidgetSettingsForm.get('defaultPageSize').reset();
+      this.pageStepSizeValues = buildPageStepSizeValues(this.persistentTableWidgetSettingsForm.get('pageStepCount').value,
+        this.persistentTableWidgetSettingsForm.get('pageStepIncrement').value);
+      return;
+    }
     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();
+      this.persistentTableWidgetSettingsForm.get('defaultPageSize').enable({emitEvent});
+      this.persistentTableWidgetSettingsForm.get('pageStepCount').enable({emitEvent: false});
+      this.persistentTableWidgetSettingsForm.get('pageStepIncrement').enable({emitEvent: false});
     } else {
-      this.persistentTableWidgetSettingsForm.get('defaultPageSize').disable();
-      this.persistentTableWidgetSettingsForm.get('pageStepCount').disable();
-      this.persistentTableWidgetSettingsForm.get('pageStepSize').disable();
+      this.persistentTableWidgetSettingsForm.get('defaultPageSize').disable({emitEvent});
+      this.persistentTableWidgetSettingsForm.get('pageStepCount').disable({emitEvent: false});
+      this.persistentTableWidgetSettingsForm.get('pageStepIncrement').disable({emitEvent: false});
     }
-    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,29 +92,53 @@
       {{ 'widgets.table.display-pagination' | translate }}
     </mat-slide-toggle>
     <div class="tb-form-row space-between column-xs">
-      <div translate>widgets.table.page-step-size</div>
-      <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
-        <input matInput formControlName="pageStepSize" type="number" min="1" step="1" required
-               (change)="onPaginationSettingsChange()"
-               placeholder="{{ 'widget-config.set' | translate }}">
-      </mat-form-field>
+      <div class="fixed-title-width">{{ 'widgets.table.page-step-settings' | translate }}</div>
+      <div class="flex flex-row items-center justify-start gap-2">
+        <div class="tb-small-label" translate>widgets.table.page-step-increment</div>
+        <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
+          <input matInput formControlName="pageStepIncrement" type="number" min="1" step="1" required
+                 placeholder="{{ 'widget-config.set' | translate }}">
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="(entitiesTableWidgetSettingsForm.get('pageStepIncrement').hasError('required')
+                                     ? 'widgets.value-source.value-required'
+                                     : 'widgets.table.page-step-increment-format-message') | translate"
+                    *ngIf="entitiesTableWidgetSettingsForm.get('pageStepIncrement').invalid
+                    && entitiesTableWidgetSettingsForm.get('pageStepIncrement').touched"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        </mat-form-field>
+        <mat-divider vertical></mat-divider>
+        <div class="tb-small-label" 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
+                 placeholder="{{ 'widget-config.set' | translate }}">
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="(entitiesTableWidgetSettingsForm.get('pageStepCount').hasError('required')
+                                     ? 'widgets.value-source.value-required'
+                                     : 'widgets.table.page-step-count-format-message') | translate"
+                    *ngIf="entitiesTableWidgetSettingsForm.get('pageStepCount').invalid
+                    && entitiesTableWidgetSettingsForm.get('pageStepCount').touched"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        </mat-form-field>
+      </div>
     </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 }}">
+      <div translate>widgets.table.default-page-size</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <mat-select formControlName="defaultPageSize" placeholder="{{ 'widget-config.set' | translate }}">
+          <mat-option *ngFor="let size of pageStepSizeValues" [value]="size">
+            {{ size }}
+          </mat-option>
+        </mat-select>
       </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,7 +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';
+import { buildPageStepSizeValues } from '@home/components/widget/lib/table-widget.models';
 
 @Component({
   selector: 'tb-entities-table-widget-settings',
@@ -56,7 +56,7 @@ export class EntitiesTableWidgetSettingsComponent extends WidgetSettingsComponen
       displayEntityType: true,
       displayPagination: true,
       defaultPageSize: 10,
-      pageStepSize: null,
+      pageStepIncrement: null,
       pageStepCount: 3,
       defaultSortOrder: 'entityName',
       useRowStyleFunction: false,
@@ -80,61 +80,58 @@ 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,
+      pageStepCount: [settings.pageStepCount ?? 3, [Validators.min(1), Validators.max(100),
+        Validators.required, Validators.pattern(/^\d*$/)]],
+      pageStepIncrement: [settings.pageStepIncrement ?? 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);
+    this.pageStepSizeValues = buildPageStepSizeValues(this.entitiesTableWidgetSettingsForm.get('pageStepCount').value,
+      this.entitiesTableWidgetSettingsForm.get('pageStepIncrement').value);
   }
 
   protected validatorTriggers(): string[] {
-    return ['useRowStyleFunction', 'displayPagination', 'displayEntityName', 'displayEntityLabel'];
+    return ['useRowStyleFunction', 'displayPagination', 'displayEntityName', 'displayEntityLabel', 'pageStepCount',
+      'pageStepIncrement'];
   }
 
-  protected updateValidators(emitEvent: boolean) {
+  protected updateValidators(emitEvent: boolean, trigger: string) {
+    if (trigger === 'pageStepCount' || trigger === 'pageStepIncrement') {
+      this.entitiesTableWidgetSettingsForm.get('defaultPageSize').reset();
+      this.pageStepSizeValues = buildPageStepSizeValues(this.entitiesTableWidgetSettingsForm.get('pageStepCount').value,
+        this.entitiesTableWidgetSettingsForm.get('pageStepIncrement').value);
+      return;
+    }
     const useRowStyleFunction: boolean = this.entitiesTableWidgetSettingsForm.get('useRowStyleFunction').value;
     const displayPagination: boolean = this.entitiesTableWidgetSettingsForm.get('displayPagination').value;
     const displayEntityName: boolean = this.entitiesTableWidgetSettingsForm.get('displayEntityName').value;
     const displayEntityLabel: boolean = this.entitiesTableWidgetSettingsForm.get('displayEntityLabel').value;
     if (useRowStyleFunction) {
-      this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').enable();
+      this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').enable({emitEvent});
     } else {
-      this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').disable();
+      this.entitiesTableWidgetSettingsForm.get('rowStyleFunction').disable({emitEvent});
     }
     if (displayPagination) {
-      this.entitiesTableWidgetSettingsForm.get('defaultPageSize').enable();
-      this.entitiesTableWidgetSettingsForm.get('pageStepCount').enable();
-      this.entitiesTableWidgetSettingsForm.get('pageStepSize').enable();
+      this.entitiesTableWidgetSettingsForm.get('defaultPageSize').enable({emitEvent});
+      this.entitiesTableWidgetSettingsForm.get('pageStepCount').enable({emitEvent: false});
+      this.entitiesTableWidgetSettingsForm.get('pageStepIncrement').enable({emitEvent: false});
     } else {
-      this.entitiesTableWidgetSettingsForm.get('defaultPageSize').disable();
-      this.entitiesTableWidgetSettingsForm.get('pageStepCount').disable();
-      this.entitiesTableWidgetSettingsForm.get('pageStepSize').disable();
+      this.entitiesTableWidgetSettingsForm.get('defaultPageSize').disable({emitEvent});
+      this.entitiesTableWidgetSettingsForm.get('pageStepCount').disable({emitEvent: false});
+      this.entitiesTableWidgetSettingsForm.get('pageStepIncrement').disable({emitEvent: false});
     }
     if (displayEntityName) {
-      this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').enable();
+      this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').enable({emitEvent});
     } else {
-      this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').disable();
+      this.entitiesTableWidgetSettingsForm.get('entityNameColumnTitle').disable({emitEvent});
     }
     if (displayEntityLabel) {
-      this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').enable();
+      this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').enable({emitEvent});
     } else {
-      this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').disable();
+      this.entitiesTableWidgetSettingsForm.get('entityLabelColumnTitle').disable({emitEvent});
     }
-    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

@@ -16,7 +16,7 @@
 
 import { EntityId } from '@shared/models/id/entity-id';
 import { DataKey, FormattedData, WidgetActionDescriptor, WidgetConfig } from '@shared/models/widget.models';
-import { getDescendantProp, isDefined, isNotEmptyStr } from '@core/utils';
+import { getDescendantProp, isDefined, isDefinedAndNotNull, isNotEmptyStr } from '@core/utils';
 import { AlarmDataInfo, alarmFields } from '@shared/models/alarm.models';
 import tinycolor from 'tinycolor2';
 import { Direction } from '@shared/models/page/sort-order';
@@ -34,6 +34,7 @@ import {
 } from '@shared/models/js-function.models';
 import { forkJoin, Observable, of, ReplaySubject } from 'rxjs';
 import { catchError, map, share } from 'rxjs/operators';
+import { UntypedFormGroup } from '@angular/forms';
 
 type ColumnVisibilityOptions = 'visible' | 'hidden' | 'hidden-mobile';
 
@@ -47,7 +48,7 @@ export interface TableWidgetSettings {
   enableStickyHeader: boolean;
   displayPagination: boolean;
   defaultPageSize: number;
-  pageStepSize: number;
+  pageStepIncrement: number;
   pageStepCount: number;
   useRowStyleFunction: boolean;
   rowStyleFunction?: TbFunction;
@@ -560,3 +561,14 @@ export function getHeaderTitle(dataKey: DataKey, keySettings: TableWidgetDataKey
   }
   return dataKey.label;
 }
+
+export function buildPageStepSizeValues(pageStepCount: number, pageStepIncrement: number): Array<number> {
+  const pageSteps: Array<number> = [];
+  if (isDefinedAndNotNull(pageStepCount) && pageStepCount > 0 && pageStepCount <= 100 &&
+    isDefinedAndNotNull(pageStepIncrement) && pageStepIncrement > 0) {
+    for (let i = 1; i <= pageStepCount; i++) {
+      pageSteps.push(pageStepIncrement * i);
+    }
+  }
+  return pageSteps;
+}

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

@@ -352,25 +352,24 @@ 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 pageStepIncrement = this.settings.pageStepIncrement;
     let pageStepCount = this.settings.pageStepCount;
+
     if (isDefined(pageSize) && isNumber(pageSize) && pageSize > 0) {
       this.defaultPageSize = pageSize;
     }
-    if (isDefinedAndNotNull(pageStepSize) && isDefinedAndNotNull(pageStepCount)) {
-      if (!this.defaultPageSize) {
-        this.defaultPageSize = pageStepSize;
-      }
-    } else {
-      if (!this.defaultPageSize) {
-        this.defaultPageSize = 10;
-      }
-      pageStepSize = this.defaultPageSize;
+
+    if (!this.defaultPageSize) {
+      this.defaultPageSize = pageStepIncrement ?? 10;
+    }
+
+    if (!isDefinedAndNotNull(pageStepIncrement) || !isDefinedAndNotNull(pageStepCount)) {
+      pageStepIncrement = this.defaultPageSize;
       pageStepCount = 3;
     }
 
     for (let i = 1; i <= pageStepCount; i++) {
-      this.pageSizeOptions.push(pageStepSize * i);
+      this.pageSizeOptions.push(pageStepIncrement * i);
     }
 
     this.noDataDisplayMessageText =

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

@@ -8111,8 +8111,11 @@
             "display-timestamp": "Timestamp",
             "display-pagination": "Display pagination",
             "default-page-size": "Default page size",
+            "page-step-settings": "Page step settings",
             "page-step-count": "Number of steps",
-            "page-step-size": "Page size increment",
+            "page-step-increment": "Step increment",
+            "page-step-count-format-message": "Should be an integer value, in the range from 1 to 100.",
+            "page-step-increment-format-message": "Should be an integer value, greater or equal to 1.",
             "use-entity-label-tab-name": "Use entity label in tab name",
             "hide-empty-lines": "Hide empty lines",
             "row-style": "Row style",