shared-data-table.presentational.html

<div class="data-table">
  <p-table
      [columns]="columns"
      [value]="datas"
      selectionMode="single"
      [responsive]="true"
      [sortMode]="'single'"
      [lazy]="true"
      (onLazyLoad)="backendSort($event)"
      [customSort]="true"
      [sortField]="defaultSortColumn ? defaultSortColumn?.field : undefined"
      [sortOrder]="defaultSortColumn ? defaultSortColumn?.order : undefined"
  >
    <ng-template pTemplate="header"
                 let-columns
    >
      <tr>
        <th *ngFor="let col of columns"
            [pSortableColumn]="col.isSortable ? col.field : false"
            [class.sortable-column]="col.isSortable"
        >
          {{col.header | translate}}
          <p-sortIcon *ngIf="col.isSortable"
                      [field]="col.field"
          ></p-sortIcon>
        </th>
      </tr>
      <tr>
        <th *ngFor="let col of columns"
            [ngSwitch]="col.type"
            class="data-table-filter"
        >
          <ng-container *ngIf="col.isFilterable">
            <div *ngSwitchCase="fieldTypeString"
                 class="filter-text"
            >
              <ng-template [ngIf]="col.filterEnum"
                           [ngIfElse]="inputFilter"
              >
                <mat-select #select
                            [class.no-value]="!select.value"
                            (selectionChange)="onValueChange(col, $event.value)"
                >
                  <mat-option>{{'table.filter.all' | translate}}</mat-option>
                  <mat-option *ngFor="let enum of col.filterEnum"
                              [value]="enum.key"
                  >
                    <ng-template [ngIf]="col.translate"
                                 [ngIfElse]="noTranslate"
                    >
                      {{enum.value | translate}}
                    </ng-template>
                    <ng-template #noTranslate>
                      {{enum.value}}
                    </ng-template>
                  </mat-option>
                </mat-select>
                <button mat-button
                        *ngIf="select.value"
                        matSuffix
                        mat-icon-button
                        aria-label="Clear"
                        (click)="select.value='';onValueChange(col, select.value)"
                >
                  <fa-icon matSuffix
                           icon="times"
                  ></fa-icon>
                </button>
              </ng-template>

              <ng-template #inputFilter>
                <input type="text"
                       #filter
                       (keyup)="onValueChange(col, $event.target.value)"
                       [value]="getValue(col.field)"
                >
                <button mat-button
                        *ngIf="filter.value"
                        matSuffix
                        mat-icon-button
                        aria-label="Clear"
                        (click)="filter.value='';onValueChange(col, filter.value)"
                >
                  <fa-icon matSuffix
                           icon="times"
                  ></fa-icon>
                </button>
              </ng-template>
            </div>
          </ng-container>
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body"
                 let-rowData
                 let-value
                 let-columns="columns"
    >
      <tr pSelectableRow="row"
          (click)="showDetail(rowData)"
      >
        <td *ngFor="let col of columns">
          <span class="ui-column-title">{{col.header | translate}}</span>
          <ng-template [ngIf]="col.translate"
                       [ngIfElse]="noTranslate"
          >
            {{getCellData(rowData, col) | translate}}
          </ng-template>
          <ng-template #noTranslate>
            {{getCellData(rowData, col)}}
          </ng-template>
        </td>
      </tr>
    </ng-template>
  </p-table>
  <div *ngIf="isDatasPresent === false"
       class="no-datas"
  >
    {{'table.nodata' | translate}}
  </div>

  <dlcm-shared-paginator *ngIf="queryParameters && isDatasPresent === true"
                         #paginator
                         [pagingModel]="queryParameters.paging"
                         (pageChange)="pageChange($event)"
  >
  </dlcm-shared-paginator>
</div>