<table class="striped" *ngIf="data.length">
  <thead>
    <tr>
      <th></th>
      <th *ngFor="let col of cols">
        <a href (click)="sortBy(col, $event)">{{ col.label['fr'] }}</a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of page">
      <td><a [routerLink]="[{outlets: {editor: row['id']} }]">edit</a></td>
      <td *ngFor="let col of cols">{{ row[col.key] || '' }}</td>
    </tr>
  </tbody>
</table>

<isari-pagination
  [totalItems]="data.length"
  [itemsPerPage]="itemsPerPage"
  [currentPage]="1"
  (onPageChange)="pageChanged($event)"></isari-pagination>

<table class="striped" *ngIf="data.length">
  <thead>
    <tr>
      <th></th>
      <th *ngFor="let col of cols">
        <a href (click)="sortBy(col, $event)">{{ col.label['fr'] }}</a>
        <md-icon *ngIf="col.key === sortedState.key && sortedState.reverse">arrow_upward</md-icon>
        <md-icon *ngIf="col.key === sortedState.key && !sortedState.reverse">arrow_downward</md-icon>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of page">
      <td><a [routerLink]="[{outlets: {editor: row['id']} }]">edit</a></td>
      <td *ngFor="let col of cols">{{ row[col.key] || '' }}</td>
    </tr>
  </tbody>
</table>

<isari-pagination
  [totalItems]="data.length"
  [itemsPerPage]="itemsPerPage"
  [currentPage]="1"
  (onPageChange)="pageChanged($event)"></isari-pagination>

Add icon on sorted column
Add icon on sorted column
