prot-table.component.html

<p-table *ngIf="tableProteins.length > 0" selectionMode="multiple"
         [value]="tableProteins" [selection]="tableSelectedProteins" dataKey="uniprotAc"
         (selectionChange)="tableProteinSelection($event)" class="drgstn">
  <ng-template pTemplate="header">
    <tr>
      <th class="checkbox-col">
        <p-tableHeaderCheckbox class="drgstn"></p-tableHeaderCheckbox>
      </th>
      <th [pSortableColumn]="'uniprotAc'">
        UniProt Code
        <p-sortIcon [field]="'uniprotAc'"></p-sortIcon>
      </th>
      <th [pSortableColumn]="'symbol'">
        Symbol
        <p-sortIcon [field]="'symbol'"></p-sortIcon>
      </th>
      <th [pSortableColumn]="'proteinName'">
        Name
        <p-sortIcon [field]="'proteinName'"></p-sortIcon>
      </th>
      <th *ngIf="tableHasScores" [pSortableColumn]="'score'">
        Score
        <button class="button is-light has-tooltip tooltip-button"
                [pTooltip]="tableProteinScoreTooltip" tooltipStyleClass="drgstn" tooltipPosition="top">
          <fa-icon [icon]="faQuestionCircle" class="icon"></fa-icon>
        </button>
        <p-sortIcon [field]="'score'"></p-sortIcon>
      </th>
      <th [pSortableColumn]="'isSeed'">
        Seed
        <p-sortIcon [field]="'isSeed'"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-e>
    <tr>
      <td>
        <p-tableCheckbox [value]="e" class="drgstn"></p-tableCheckbox>
      </td>
      <td><a href="https://www.uniprot.org/uniprot/{{ e.uniprotAc }}" target="_blank">{{ e.uniprotAc }}</a></td>
      <td>{{e.symbol}}</td>
      <td>{{e.proteinName}}</td>
      <td *ngIf="tableHasScores">{{e.score | number}}</td>
      <td>
        <span *ngIf="e.isSeed">
            <fa-icon [icon]="faCheck" [classes]="['icon']"></fa-icon>
          Seed
        </span>
        <span *ngIf="!e.isSeed">
            <fa-icon [icon]="faTimes" [classes]="['icon']"></fa-icon>
        </span>
      </td>
    </tr>
  </ng-template>
</p-table>