Data Table Sub Header

data-table-sub-header.html

<div class="search-container table-compressed-search">
  <mat-form-field *ngIf="state === 'open'" class="search-input">
    <input #search matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
  </mat-form-field>
  <button mat-icon-button color="primary" *ngIf="state === 'closed'" class="search-icon-closed" (click)="toggleState()">
    <mat-icon>search</mat-icon>
  </button>
  <button mat-icon-button *ngIf="state === 'open'" (click)="toggleState()" class="search-icon-open">
    <mat-icon>close</mat-icon>
  </button>
</div>

<mat-card class="table-card sub-header-table shadow">

  <mat-table #table [dataSource]="dataSource">

    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef> ID</mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.id}}</mat-cell>
    </ng-container>


    <!-- ^ Column -->
    <ng-container matColumnDef="expandLess">
      <mat-header-cell *matHeaderCellDef (click)="toggleHeaders()">
        <button *ngIf="headerExpanded" mat-icon-button>
          <mat-icon svgIcon="collapse"></mat-icon>
        </button>
        <button *ngIf="!headerExpanded" mat-icon-button>
          <mat-icon svgIcon="expand"></mat-icon>
        </button>
      </mat-header-cell>
      <mat-cell *matCellDef="let policy">
        <div>
          <button *ngIf="policy.isHeader && policy.expanded" mat-icon-button>
            <mat-icon svgIcon="collapse"></mat-icon>
          </button>
          <button *ngIf="policy.isHeader && !policy.expanded" mat-icon-button>
            <mat-icon svgIcon="expand"></mat-icon>
          </button>
        </div>
      </mat-cell>
    </ng-container>


    <!-- Section Column -->
    <ng-container matColumnDef="section">
      <mat-header-cell *matHeaderCellDef>Section</mat-header-cell>
      <mat-cell *matCellDef="let policy">
      <!-- Show only on xs: -->
    <div class="d-flex d-sm-none" [ngClass]="{'policy-header': policy.isHeader}">{{policy.section}}</div>
    <!-- Show on everything but xs: -->
        <div class="d-none d-sm-flex" [ngClass]="{'policy-header': policy.isHeader}" [ngStyle]="{'padding-left': policy.sectionLevelPadding * 15 + 'px' }">{{policy.section}}</div>
      </mat-cell>
    </ng-container>

    <!-- Policy Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>Policy Name</mat-header-cell>
      <mat-cell *matCellDef="let policy">
          <div class="d-flex d-sm-none" [ngClass]="{'policy-header': policy.isHeader}">{{policy.name}}</div>
        <div class="d-none d-sm-flex" [ngClass]="{'policy-header': policy.isHeader}" [ngStyle]="{'padding-left': policy.sectionLevelPadding * 15 + 'px' }">{{policy.name}}</div>
      </mat-cell>
    </ng-container>


    <!-- Status Column -->
    <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef class="d-none d-sm-flex"> Status </mat-header-cell>
      <mat-cell *matCellDef="let policy" [style.color]="policy.statusColor" class="d-none d-sm-flex">
        <div *ngIf='!policy.isHeader'> {{policy.status}}</div>
      </mat-cell>
    </ng-container>

    <!-- Version Column -->
    <ng-container matColumnDef="latestVersion">
      <mat-header-cell *matHeaderCellDef style="text-align: center" class="d-none d-lg-flex"> Latest Version </mat-header-cell>
      <mat-cell *matCellDef="let policy" class="d-none d-lg-flex">
        <div *ngIf='!policy.isHeader'> {{policy.version}} </div>
      </mat-cell>
    </ng-container>

    <!-- Assignment Column -->
    <ng-container matColumnDef="assignment" style="align-items: center">
      <mat-header-cell *matHeaderCellDef class="d-none d-md-flex">
        <div *ngIf='!requirement'> Assignment </div>
      </mat-header-cell>
      <mat-cell *matCellDef="let policy" [ngClass]="policy.assignment" class="d-none d-md-flex">
        <div *ngIf="!policy.isHeader && requirement==null">{{policy.assignment}}</div>
      </mat-cell>
    </ng-container>

    <!-- IE Helper Column -->
    <ng-container matColumnDef="ie-helper">
      <mat-header-cell *matHeaderCellDef mat-sort-header class="d-none d-md-flex">
      </mat-header-cell>
      <mat-cell *matCellDef="let element" class="d-none d-md-flex">
      </mat-cell>
    </ng-container>

    <!-- Action Column -->
    <ng-container matColumnDef="action" class="mat-column-action">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let policy" class="d-sm-flex">
        <mat-menu #buttonDropdown="matMenu">
          <button mat-menu-item>
            <mat-icon>file_download</mat-icon>Download Handouts</button>
        </mat-menu>
        <button mat-icon-button [matMenuTriggerFor]="buttonDropdown" *ngIf="!policy.isHeader && policy.isPdf">
          <mat-icon>more_vert</mat-icon>
        </button>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let policy; let row; columns: displayedColumns;" [@detailExpand]="policy.expanded ? 'expanded' : !policy.isHeader? 'collapsed': ''"
      [ngStyle]="{'border-left-color': !policy.isHeader && policy.statusColor}" class="clickable-row" [ngClass]="{'sub-header': policy.isHeader, 
      'row-todo': !policy.isHeader && policy.status.includes('Missing'),
      'row-done': !policy.isHeader && policy.status.includes('Acknowledged'), 
      'row-attention': !policy.isHeader && policy.status.includes('Coming Due') }" (click)="selectRow($event, row, policy)"></mat-row>
  </mat-table>

  <mat-paginator [pageSizeOptions]="[5, 10, 25, 50, 100]" pageSize=50></mat-paginator>

</mat-card>