@unifylib/ui-lib 1.0.3 → 1.1.3

package/src/lib/components/base-table/base-table.component.html

@@ -1,242 +1,268 @@
- <div fxLayout="column" class="baseTable">
-        <div fxLayout="row" fxFlex="100" >
-          <div  fxFlex="50" fxLayout="column" fxLayoutAlign="center start" >
-<!--            <span style="font-size: 14px">{{ 'totalCountItem' | translate }} : {{ this.totalElements }}</span>-->
-          </div>
-          <div  fxFlex="50" fxLayout="column" fxLayoutAlign="start end" >
-          </div>
-        </div>
-        <div fxLayout="row" fxFlex="100" >
-          <div  [fxFlex]="pageInfo.draftSupported ? 50 : 100" fxLayout="column" fxLayoutAlign="center start" >
-            <app-title-bar [pageTitle]="pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'"
-                           [titleMode]="''"
-                           [newAction]="showAddNew()"
-                           [showExtractButton]="!pageInfo.hideExtractButton"
-                           [extraButton]="extraButton"
-                           (newActionClicked)="onAddNewAction($event)"
-                           (extractReport)="extractReport($event)"
-                           [totalElements]="pageInfo.hideTitle ? undefined : totalElements"
-            >
-            </app-title-bar>
-          </div>
-          <div  fxFlex="50" fxLayout="column" fxLayoutAlign="start end" *ngIf="pageInfo.draftSupported" >
-            <mat-chip-listbox aria-label="Color selection" [multiple]="false" >
-              <mat-chip-option [selected]="!this.isPending" [color]="'accent'" [value]="'COMPLETED'" (click)="switchViewMode(false)">{{'finished' | translate}}</mat-chip-option>
-              <mat-chip-option [selected]="this.isPending" [color]="'accent'" [value]="'PENDING'" (click)="switchViewMode(true)">{{'todo' | translate}}</mat-chip-option>
-            </mat-chip-listbox>
-          </div>
-        </div>
-    <div fxLayout="row" fxFlex="100" class="baseTable__detailsColumn">
-      <div fxFlex="100">
-        <div fxLayout="row" fxLayout.lt-md="row" fxLayoutGap="0" fxLayoutAlign="start start" class="mainTable">
-            <table [dataSource]="dataSource" fxFlexFill mat-table matSort>
-                <ng-container *ngFor="let column of this.columns; let last=last">
-                    <ng-container matColumnDef="{{column.property}}">
-                        <ng-container *ngIf="column.enableSorting; else withoutSortingColumn">
-                            <th *matHeaderCellDef class="mainTable__th" mat-header-cell mat-sort-header>{{ labelKey(column) | translate}}</th>
-                        </ng-container>
-                        <ng-template #withoutSortingColumn>
-                            <th *matHeaderCellDef class="mainTable__th" mat-header-cell>{{ labelKey(column) | translate}}</th>
-                        </ng-template>
-                        <ng-container [ngSwitch]="column.viewType || column.type">
-                            <ng-container *ngSwitchCase="'workflowStatus'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary']" mat-cell>
-                                    <button mat-button class="wfStatus {{ getStatusDescription(element)}} ">{{ getStatusDescription(element)}}</button>
-                                </td>
-                                <td *matCellDef="let element" [ngClass]="['mainTable__td__text-secondary__td']" mat-cell>
-                                    <button mat-button class="wfStatus {{ getStatusDescription(element)}} ">{{ getStatusDescription(element)}}</button>
-                                </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'hyper-text'">
-                              <td *matCellDef="let element" [ngClass]="['mainTable__td__text-secondary__td']"
-                                  (click)="hyperLinkClicked(column.property,element)"
-                                  mat-cell>
-                                <mat-label
-                                  [ngClass]="{
-    'hyper-link': shouldRenderAsHyperLink(element)
-  }">
-                                  {{ extractFieldName(element, column.property) }}
-                                </mat-label>
-                              </td>
-                            </ng-container>
-                          <ng-container *ngSwitchCase="'button'">
-                            <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary']" mat-cell>
-                              <button
-                                *ngIf="shouldShowButton(element)"
-                                mat-button
-                                class="primary"
-                                (click)="$event.stopPropagation(); actionButtonClicked(column.property, element)">
-                                {{ labelKey(column) + '_title' | translate }}
-                              </button>
-                            </td>
-                          </ng-container>
-                          <ng-container *ngSwitchCase="'icon'">
-                            <td *matCellDef="let element" class="mainTable__td" mat-cell>
-                              <mat-icon
-                                [ngClass]="{
-                                            'mainTable__td__icon-green': element[column.property] === 'pass',
-                                            'mainTable__td__icon-orange': element[column.property] === 'warning',
-                                            'mainTable__td__icon-red': element[column.property] === 'error'
-                                          }">
-                                {{ getIcon(element[column.property]) }}
-                              </mat-icon>
-                            </td>
-                          </ng-container>
-                          <ng-container *ngSwitchCase="'checkbox'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary']" mat-cell>
-                                  <mat-checkbox class="primary" [checked]="element[column.property]" (click)="$event.stopPropagation();actionCheckedClicked(column.property,element)"></mat-checkbox>
-
-                                </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'stateType'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary']" mat-cell>
-                                    <button mat-button class="stateType {{ element[column.property]}} ">{{ labelKeyByValue(column, element) | translate}}</button>
-                                </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'date'">
-                                <td *matCellDef="let element" [ngClass]="['mainTable__td__text-secondary__td']"
-                                    mat-cell>{{ extractFieldName(element, column.property) | date:'yyyy-MM-dd' }} </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'croppedText'">
-                                <td *matCellDef="let element" [ngClass]="['mainTable__td__text-secondary__td']"
-                                    mat-cell>{{ getCroppedText(element[column.property], element[column.width]) }} </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'download'">
-                                <td *matCellDef="let element" [ngClass]="['mainTable__td__text-secondary__td']" style="padding: 0;margin: 0;text-align: center;"
-                                    mat-cell><mat-icon class="mainTable__td__icon-blue">system_update_alt</mat-icon></td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'onOff'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary__td']" mat-cell>
-                                    <mat-icon *ngIf="element[column.property] === null" class="mainTable__td__icon-darkorange">flag</mat-icon>
-                                    <mat-icon class="mainTable__td__icon-red" *ngIf="element[column.property] === false">flag</mat-icon>
-                                    <mat-icon class="mainTable__td__icon-green" *ngIf="element[column.property] === true">flag</mat-icon>
-                                </td>
-                            </ng-container>
-                          <ng-container *ngSwitchCase="'status'">
-                            <td *matCellDef="let element" class="mainTable__td"
-                                [ngClass]="['mainTable__td__text-secondary__td']" mat-cell>
-                              <span
-                                *ngIf="element[column.property] === null">{{ this.pageInfo.labelsSection + '.' + column.label + 'InActive' | translate }}</span>
-                              <span
-                                *ngIf="element[column.property] === false">{{ this.pageInfo.labelsSection + '.' + column.label + 'InActive' | translate }}</span>
-                              <span
-                                *ngIf="element[column.property] === true">{{ this.pageInfo.labelsSection + '.' + column.label + 'Active' | translate }}</span>
-                            </td>
-                          </ng-container>
-                            <ng-container *ngSwitchCase="'info'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['text-secondary']" mat-cell>
-                                    <button mat-icon-button (click)="$event.stopPropagation();emitEvent(element)"> <mat-icon>info</mat-icon></button>
-                                </td>
-                            </ng-container>
-<!--                            <ng-container *ngSwitchCase="'onOff'">-->
-<!--                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary__td']" mat-cell>-->
-<!--                                    <mat-icon *ngIf="!element[column.property]" class="mainTable__td__icon-darkorange">flag</mat-icon>-->
-<!--                                    <mat-icon class="mainTable__td__icon-red">flag</mat-icon>-->
-<!--                                    <mat-icon class="mainTable__td__icon-green">flag</mat-icon>-->
-<!--                                </td>-->
-<!--                            </ng-container>-->
-                            <ng-container *ngSwitchCase="'netAmount'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary__td']" mat-cell>
-                                    <small><sup class="mainTable__td__currency">{{element[column.currency]}}</sup></small>
-                                    <span class="mainTable__td__property">{{ extractFieldName(element, column.property) | currency:element[column.currency] :'' }}</span> of
-                                    {{ extractFieldName(element, column.additionalProperty) | currency:element[column.currency] :'' }}
-                                </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'localDateTime'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary__td']"
-                                    mat-cell>{{ extractFieldName(element, column.property) | date : extractFormat(column) }} </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'bigdecimal'">
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary__td']"
-                                    mat-cell>
-                                    <small><sup class="mainTable__td__currency">{{element[column.currency]}}</sup></small>
-                                    {{ extractFieldName(element, column.property) | number : (column.digitInfo || '1.3-5') }}
-                                </td>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="'listAction'" >
-                                <td *matCellDef="let element" class="mainTable__td" [ngClass]="['mainTable__td__text-secondary__td']" style="padding: 0!important;"
-                                    mat-cell>
-                                    <app-button-actions [buttonsAction]="false" [listAction]="listAction" (clickedButton)="actionListClicked($event,element)"></app-button-actions>
-
-                                </td>
-                            </ng-container>
-                            <ng-container *ngSwitchDefault>
-                                <ng-container *ngIf="column.translate; else noTranslate">
-                                    <td *matCellDef="let element" class="mainTable__td" (click)="emitRoutePage(element)" [ngClass]="['mainTable__td__text-secondary__td']" mat-cell>
-                                        {{extractFieldName(element, column.property) | translate}}
-                                    </td>
-                                </ng-container>
-                                <ng-template #noTranslate>
-                                    <td *matCellDef="let element" class="mainTable__td" (click)="emitRoutePage(element)" [ngClass]="['mainTable__td__text-secondary__td']" mat-cell
-                                        [innerHtml]='extractFieldName(element, column.property)'></td>
-                                </ng-template>
-                            </ng-container>
-                        </ng-container>
-                    </ng-container>
-                </ng-container>
-                <ng-container *ngIf="hasGroups()" >
-                    <ng-container *ngFor="let groupName of this.groupNames">
-                        <ng-container matColumnDef="{{groupName}}">
-                            <th mat-header-cell class="extra-header" *matHeaderCellDef [attr.colspan]="groupSpans.get(groupName)">{{(isHumanMade(groupName) ? groupName : "") | translate}}</th>
-                        </ng-container>
-                    </ng-container>
-                    <tr mat-header-row *matHeaderRowDef="this.groupNames"></tr>
-              </ng-container>
-                <tr *matHeaderRowDef="visibleColumns" mat-header-row></tr>
-              <tr
-                (auxclick)="openNewTab(row)"
-                (click)="$event.stopPropagation(); onSelectItem(row)"
-                *matRowDef="let row; columns: visibleColumns"
-                [ngClass]="{
-    'mainTable__highlight': selectedRowIndex == row.id ||
-      (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),
-    'mainTable__dark_highlight': isDarkHighlight(row)
-  }"
-                mat-row
-              ></tr>
-
-            </table>
-        </div>
-        <div fxLayout="row"  *ngIf="noDataFound" class="dataNotFound">
-            <div fxLayout="column" fxFlex="100" >
-                <span class="dataNotFound__details">
-                    <mat-icon class="dataNotFound__details__icon">info</mat-icon>
-                    <span>{{'dataNotFound' | translate}}</span>
-                </span>
-            </div>
-        </div>
-        <div fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign.lt-md="center center" fxLayoutAlign.gt-sm="center center" *ngIf="(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination" class="main-pagination">
-          <ng-container *ngIf="enablePagination">
-            <div fxLayout="column"   fxFlex.lt-md="100">
-                <app-paginator
-                  [currentPage]="pageIndex"
-                  [totalPages]="pagesCount"
-                  (pageChange)="onPageChange($event)"
-                ></app-paginator>
-<!--                <pagination-controls-->
-<!--                        [maxSize]="maxSize"-->
-<!--                        [directionLinks]="directionLinks"-->
-<!--                        [autoHide]="autoHide"-->
-<!--                        [responsive]="responsive"-->
-<!--                        [previousLabel]="labels['previousLabel']"-->
-<!--                        [nextLabel]="labels['nextLabel']"-->
-<!--                        [screenReaderPaginationLabel]="labels['screenReaderPaginationLabel']"-->
-<!--                        [screenReaderPageLabel]="labels['screenReaderPageLabel']"-->
-<!--                        [screenReaderCurrentLabel]="labels['screenReaderCurrentLabel']"-->
-<!--                        (pageChange)="onPageChange($event)"-->
-<!--                >-->
-<!--                </pagination-controls>-->
-
-            </div>
-          </ng-container>
-
-          <div fxLayout="column" fxFlex="100" class="countItem" fxHide.gt-xs>
-                <span class="countItem__totalElement">{{ 'totalCountItem' | translate}} : {{this.totalElements}}</span>
-            </div>
-            <div fxLayout="column" fxFlex="2">
-            </div>
-
-        </div>
-    </div>
-</div>
- </div>
+<div class="flex-column baseTable">
+  <div class="flex-row flex-100" *ngIf="!pageInfo.hideTitle">
+    <div [class.flex-50]="pageInfo.draftSupported" [class.flex-100]="!pageInfo.draftSupported" class="flex-column align-start">
+      <app-title-bar
+        [pageTitle]="pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'"
+        [titleMode]="''"
+        [newAction]="showAddNew()"
+        [showExtractButton]="!pageInfo.hideExtractButton"
+        [extraButton]="extraButton"
+        (newActionClicked)="onAddNewAction($event)"
+        (extractReport)="extractReport($event)"
+        [totalElements]="pageInfo.hideTitle ? undefined : totalElements">
+      </app-title-bar>
+    </div>
+    <div class="flex-50 flex-column align-end" *ngIf="pageInfo.draftSupported">
+      <mat-chip-listbox aria-label="Color selection" [multiple]="false">
+        <mat-chip-option [selected]="!this.isPending" [color]="'accent'" [value]="'COMPLETED'" (click)="switchViewMode(false)">
+          {{'finished' | translate}}
+        </mat-chip-option>
+        <mat-chip-option [selected]="this.isPending" [color]="'accent'" [value]="'PENDING'" (click)="switchViewMode(true)">
+          {{'todo' | translate}}
+        </mat-chip-option>
+      </mat-chip-listbox>
+    </div>
+  </div>
+
+  <div class="filter-row" *ngIf="!pageInfo.hideAdvancedFilter">
+    <app-filter-builder
+      *ngIf="!pageInfo.hideAdvancedFilter"
+      [pageInfo]="pageInfo"
+      [columns]="columns"
+      [filterFields]="filterFields"
+      (filterInformation)="doAdvancedSearch($event)"
+      (isEmpty)="resetData($event)">
+    </app-filter-builder>
+
+    <div class="button-group" >
+
+      <button *ngIf="!pageInfo.hideExtractButton"
+        mat-flat-button
+        [matMenuTriggerFor]="exportMenu"
+        color="primary"
+        class="btn-none-background-primary btn-export"
+      >
+        <div class="button-text">
+          <mat-icon>file_export</mat-icon>
+          <span>{{ 'export' | translate }}</span>
+          <mat-icon class="arrow-icon">arrow_drop_down</mat-icon>
+        </div>
+      </button>
+
+      <mat-menu #exportMenu="matMenu">
+        <button
+          mat-menu-item
+          *ngFor="let type of types"
+          (click)="extractReport(type)"
+        >
+          <span>{{ type | uppercase }}</span>
+        </button>
+      </mat-menu>
+
+    </div>
+  </div>
+
+
+  <div class="flex-row flex-100 baseTable__detailsColumn">
+    <div class="flex-100">
+      <div class="flex-row flex-100 mainTable">
+        <table [dataSource]="dataSource" class="flex-fill" mat-table matSort (matSortChange)="onSortAction($event)">
+          <ng-container *ngFor="let column of this.columns; let last=last">
+            <ng-container matColumnDef="{{column.property}}">
+              <ng-container *ngIf="column.enableSorting; else withoutSortingColumn">
+                <th *matHeaderCellDef class="mainTable__th" mat-header-cell mat-sort-header>
+                  {{ labelKey(column) | translate }}
+                </th>
+              </ng-container>
+              <ng-template #withoutSortingColumn>
+                <th *matHeaderCellDef class="mainTable__th" mat-header-cell>{{ labelKey(column) | translate }}</th>
+              </ng-template>
+
+              <ng-container [ngSwitch]="column.type">
+                <ng-container *ngSwitchCase="'workflowStatus'">
+                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary" mat-cell>
+                    <button mat-button class="wfStatus {{ getStatusDescription(element)}}" [attr.id]="'table-btn-wf-'+column.property+'-'+(element.id || element.key || '')">{{ getStatusDescription(element) }}</button>
+                  </td>
+                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" mat-cell>
+                    <button mat-button class="wfStatus {{ getStatusDescription(element)}}" [attr.id]="'table-btn-wf2-'+column.property+'-'+(element.id || element.key || '')">{{ getStatusDescription(element) }}</button>
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'hyper-text'">
+                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" (click)="hyperLinkClicked(column.property,element)" mat-cell>
+                    <mat-label [ngClass]="{'hyper-link': shouldRenderAsHyperLink(element)}">
+                      {{ extractFieldName(element, column.property) }}
+                    </mat-label>
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'button'">
+                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary" mat-cell>
+                    <button *ngIf="shouldShowButton(element)" mat-button class="primary" (click)="$event.stopPropagation(); actionButtonClicked(column.property, element)" [attr.id]="'table-btn-action-'+column.property">
+                      {{ labelKey(column) + '_title' | translate }}
+                    </button>
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'icon'">
+                  <td *matCellDef="let element" class="mainTable__td" mat-cell>
+                    <mat-icon [ngClass]="{
+                      'mainTable__td__icon-green': element[column.property] === 'pass',
+                      'mainTable__td__icon-orange': element[column.property] === 'warning',
+                      'mainTable__td__icon-red': element[column.property] === 'error'
+                    }">
+                      {{ getIcon(element[column.property]) }}
+                    </mat-icon>
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'checkbox'">
+                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary" mat-cell>
+                    <mat-checkbox class="primary" [checked]="element[column.property]" (click)="$event.stopPropagation();actionCheckedClicked(column.property,element)"></mat-checkbox>
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'stateType'">
+                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary" mat-cell>
+                    <button mat-button class="stateType {{ element[column.property]}}" [attr.id]="'table-btn-state-'+column.property">{{ labelKeyByValue(column, element) | translate}}</button>
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'date'">
+                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" mat-cell>
+                    {{ extractFieldName(element, column.property) | date:'yyyy-MM-dd' }}
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'croppedText'">
+                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" mat-cell>
+                    {{ getCroppedText(element[column.property], element[column.width]) }}
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'download'">
+                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" style="padding: 0;margin: 0;text-align: center;" mat-cell>
+                    <mat-icon class="mainTable__td__icon-blue">system_update_alt</mat-icon>
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'onOff'">
+                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" mat-cell>
+                    <mat-icon *ngIf="element[column.property] === null" class="mainTable__td__icon-darkorange">flag</mat-icon>
+                    <mat-icon *ngIf="element[column.property] === false" class="mainTable__td__icon-red">flag</mat-icon>
+                    <mat-icon *ngIf="element[column.property] === true" class="mainTable__td__icon-green">flag</mat-icon>
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'status'">
+                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" mat-cell>
+                    <span *ngIf="element[column.property] === null || element[column.property] === false">
+                      {{ pageInfo.labelsSection + '.' + column.label + 'InActive' | translate }}
+                    </span>
+                    <span *ngIf="element[column.property] === true">
+                      {{ pageInfo.labelsSection + '.' + column.label + 'Active' | translate }}
+                    </span>
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'info'">
+                  <td *matCellDef="let element" class="mainTable__td text-secondary" mat-cell>
+                    <button mat-icon-button (click)="$event.stopPropagation();emitEvent(element)" [attr.id]="'table-btn-info-'+element.id">
+                      <mat-icon>info</mat-icon>
+                    </button>
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'netAmount'">
+                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" mat-cell>
+                    <small><sup class="mainTable__td__currency">{{element[column.currency]}}</sup></small>
+                    <span class="mainTable__td__property">{{ extractFieldName(element, column.property) | currency:element[column.currency] :'' }}</span> of
+                    {{ extractFieldName(element, column.additionalProperty) | currency:element[column.currency] :'' }}
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'localDateTime'">
+                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" mat-cell>
+                    {{ extractFieldName(element, column.property) | date : extractFormat(column) }}
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'bigdecimal'">
+                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" mat-cell>
+                    <small><sup class="mainTable__td__currency">{{element[column.currency]}}</sup></small>
+                    {{ extractFieldName(element, column.property) | number : (column.digitInfo || '1.3-5') }}
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchCase="'listAction'">
+                  <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" style="padding: 0!important;" mat-cell>
+                    <app-button-actions 
+                      [buttonsAction]="column.viewType === 'buttonsAction'"
+                      [listAction]="listAction" 
+                      [actions]="listAction" 
+                      (clickedButton)="actionListClicked($event,element)">
+                    </app-button-actions>
+                  </td>
+                </ng-container>
+
+                <ng-container *ngSwitchDefault>
+                  <ng-container *ngIf="column.translate; else noTranslate">
+                    <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" (click)="emitRoutePage(element)" mat-cell>
+                      {{ extractFieldName(element, column.property) | translate }}
+                    </td>
+                  </ng-container>
+                  <ng-template #noTranslate>
+                    <td *matCellDef="let element" class="mainTable__td mainTable__td__text-secondary__td" (click)="emitRoutePage(element)" mat-cell [innerHtml]='extractFieldName(element, column.property)'></td>
+                  </ng-template>
+                </ng-container>
+              </ng-container>
+            </ng-container>
+          </ng-container>
+
+          <ng-container *ngIf="hasGroups()">
+            <ng-container *ngFor="let groupName of this.groupNames">
+              <ng-container matColumnDef="{{groupName}}">
+                <th mat-header-cell class="extra-header" *matHeaderCellDef [attr.colspan]="groupSpans.get(groupName)">
+                  {{ (isHumanMade(groupName) ? groupName : "") | translate }}
+                </th>
+              </ng-container>
+            </ng-container>
+            <tr mat-header-row *matHeaderRowDef="this.groupNames"></tr>
+          </ng-container>
+
+          <tr *matHeaderRowDef="visibleColumns" mat-header-row></tr>
+          <tr (auxclick)="openNewTab(row)" (click)="$event.stopPropagation(); onSelectItem(row)" *matRowDef="let row; columns: visibleColumns"
+              [attr.id]="'table-row-' + (row?.id || row?.key || '')"
+              [ngClass]="{
+                'mainTable__highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),
+                'mainTable__dark_highlight': isDarkHighlight(row)
+              }"
+              mat-row>
+          </tr>
+        </table>
+      </div>
+
+      <div *ngIf="noDataFound" class="dataNotFound flex-column">
+        <mat-icon class="dataNotFound__icon">{{ noDataFoundIcon }}</mat-icon>
+        <span class="dataNotFound__title">{{ noDataFoundTitle | translate}}</span>
+        <span class="dataNotFound__subtitle">{{ noDataFoundSubtitle | translate}}</span>
+      </div>
+
+
+      <div  *ngIf="(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination" class="main-pagination flex-row">
+        <ng-container *ngIf="enablePagination">
+          <div class="flex-column flex-100">
+            <app-paginator
+              [currentPage]="pageIndex"
+              [totalItems]="totalElements"
+              [pageSize]="pageSize"
+              [pageSizeOptions]="[5, 10, 25, 50]"
+              (pageChange)="onPageChange($event)"
+              (pageSizeChange)="onPageSizeChange($event)">
+            </app-paginator>
+          </div>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</div>