open-learning-exchange/planet

<mat-table #table [dataSource]="myPlanets" matSort>
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef i18n>ID</mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.androidId}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef mat-sort-header="name" i18n>Name</mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.customDeviceName || element.deviceName}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="last_synced">
    <mat-header-cell *matHeaderCellDef mat-sort-header="last_synced" i18n>Last Synced</mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.time || element.last_synced | date: 'mediumDate'}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="time">
    <mat-header-cell *matHeaderCellDef mat-sort-header="time" i18n>Time</mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.time | date: 'mediumDate'}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="type">
    <mat-header-cell *matHeaderCellDef mat-sort-header="type" i18n>Type</mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.type}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="versionName">
    <mat-header-cell *matHeaderCellDef mat-sort-header="versionName" i18n>Version</mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.versionName || element.version}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="count">
    <mat-header-cell *matHeaderCellDef mat-sort-header="count" i18n>No of Visits</mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.count}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="detail">
    <mat-header-cell *matHeaderCellDef i18n>Details</mat-header-cell>
    <mat-cell *matCellDef="let element" class="action-buttons">
      <button (click)="viewDetails(element)" mat-stroked-button color="primary">Details</button>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="usagetime">
    <mat-header-cell *matHeaderCellDef i18n>Used Time</mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.totalUsedTime | time}}</mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator #paginator
  [pageSize]="50"
  [pageSizeOptions]="[5, 10, 20, 50, 100, 200]">
</mat-paginator>