metadata-table.component.html

<div id="audits">
  <table class="audit-table" mat-table [dataSource]="metadata$">

    <!-- View Column -->
    <ng-container matColumnDef="view">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let audit">
        <button mat-raised-button color="primary" [disabled]="audit.pending" (click)="openAudit(audit)">View</button>
      </td>
    </ng-container>

    <!-- School Column -->
    <ng-container matColumnDef="school">
      <th mat-header-cell *matHeaderCellDef>School/College</th>
      <td mat-cell *matCellDef="let audit">{{audit.darsInstitutionCodeDescription}}</td>
    </ng-container>

    <!-- Program Column -->
    <ng-container matColumnDef="program">
      <th mat-header-cell *matHeaderCellDef>Program of Study</th>
      <td mat-cell *matCellDef="let audit">{{audit.darsDegreeProgramCode}}</td>
    </ng-container>

    <!-- Honors Column -->
    <ng-container matColumnDef="honors">
      <th mat-header-cell *matHeaderCellDef>Honors Status</th>
      <td mat-cell *matCellDef="let audit">{{audit.darsHonorsOptionDescription}}</td>
    </ng-container>

    <!-- Plan Column -->
    <ng-container matColumnDef="plan">
      <th mat-header-cell *matHeaderCellDef>Degree Plan</th>
      <td mat-cell *matCellDef="let audit">{{audit.degreePlannerPlanName}}</td>
    </ng-container>

    <!-- Status Column -->
    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef>Status</th>
      <td mat-cell *matCellDef="let audit">
        <div>{{audit.darsStatusOfDegreeAuditRequest}}</div>
        <div>Run {{audit.darsAuditRunDate | date:'short'}}</div>
      </td>
    </ng-container>

    <!-- Status Column -->
    <ng-container matColumnDef="download">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let audit">
        <button mat-raised-button>
          <mat-icon>vertical_align_bottom</mat-icon>
        </button>
      </td>
    </ng-container>

    <!-- Row definition -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <div style="text-align: center">
    <button mat-stroked-button color="primary" style="margin: 20px auto; padding: 0 30px">Load More</button>
  </div>
</div>

<div id="what-if-audits"></div>