member_webapp/@overflow/target/component/list/list.component.html

<h1>Targets</h1>
<div *ngIf="!targetPage; else content">
  No data
</div>

<ng-template #content>
<p-table [value]="targetPage.content" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true" >
  <ng-template pTemplate="header">
    <tr>
      <th style="width: 4em">No.</th>
      <th style="width: 8em">Status</th>
      <th style="width: 15em">Type</th>
      <th>Name</th>
      <th style="width: 15em">Sensors</th>
      <th style="width: 8em">Created at</th>
      <th style="width: 10em"></th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-target let-rowIndex="rowIndex">
    <tr [pSelectableRow]="target">
      <td>{{(rowIndex + 1) + ((pageIdx - 1) * countPerPage)}}</td>
      <td></td>
      <td>{{target.infra.metaInfraType.name}}</td>
      <td>{{target.displayName}}</td>
      <td>{{target.sensorCount}}</td>
      <td>{{target.createDate | date: 'yyyy-MM-dd'}}</td>
      <td>
        <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-s-button" (click)="onAddSensor(target)"></button>
      </td>
    </tr>
  </ng-template>
</p-table>
<p-paginator #paginator [rows]="targetPage.size" [totalRecords]="targetPage.totalElements" [first]="(pageIdx-1) * targetPage.size"
             (onPageChange)="onPaginate($event)"></p-paginator>

</ng-template>