D-Net

<div class="p-text-right">

  <div class="p-field">

    <label for="numOfClientsPresented{{section.type}}"

           class="p-ml-0"

           style="margin-right:0.5rem">

      Num of iPower Clients Presented

    </label>

    <p-dropdown inputId="numOfClientsPresented{{section.type}}"

                [options]="numOfClientsPresentedList"

                [ngModel]="section.selectedElements"

                (onChange)="totalElementsChanged($event.value)">

    </p-dropdown>

  </div>

</div>

<p-table [value]="section.aggregatedResults"

         [paginator]="true"

         [lazy]="true"

         [lazyLoadOnInit]="false"

         [rowHover]="true"

         (onLazyLoad)="onLazyLoad($event)"

         [first]="section.selectedPage"

         [rows]="section.selectedElements"

         [totalRecords]="section.totalElements"

         [loading]="section.resultsLoading"

         styleClass="p-datatable-gridlines"

         [autoLayout]="true">

  <ng-template pTemplate="header">

    <tr>

      <th>iPower Client Name</th>

      <th>iPower Client Code</th>

      <th>Processes</th>

      <th>Exceptions</th>

      <th>Unhandled</th>

      <th class="one-button"></th>

    </tr>

  </ng-template>

  <ng-template pTemplate="body" let-client>

    <tr>

      <td>{{client.clientName}}</td>

      <td>{{client.clientId}}</td>

      <td>{{client.processesNumber}}</td>

      <td>{{client.exceptionsNumber}}</td>

      <td>{{client.unhandledNumber}}</td>

      <td>

        <button pButton

                (click)="preview(client)"

                icon="pi pi-desktop"

                pTooltip="{{'Preview' | translate}}"

                class="p-button-secondary p-button-rounded p-button-outlined">

        </button>

      </td>

    </tr>

  </ng-template>

</p-table>