<div>
  <div class="table-responsive">
    <table class="table table-striped table-sm">
      <thead>
      <tr>
        <th *ngFor="let h of headers">
          <span *ngIf="!h.type">{{ h | translate }}</span>
          <span *ngIf="h.type">{{ h.type | translate }}</span>
        </th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let d of data">
        <td *ngFor="let s of d">
          <span *ngIf="!s.type">{{ s }}</span>
          <button md-raised-button color="primary" *ngIf="s.type && (s.type)[0] === 'details'" (click)="changePage(s.id)">details</button>
          <button md-raised-button color="primary" *ngIf="s.type && (s.type)[0] === 'remove'" (click)="removeUser(s.id)">remove</button>
          <button md-raised-button color="primary" *ngIf="s.type && (s.type)[0] === 'paynow'">pay now</button>
          <button md-raised-button color="primary" *ngIf="s.type && (s.type)[0] === 'Open'" (click)="showDialog(s.id)">{{'Open' | translate}}</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>