Data Table with Action

data-table-action.html

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

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

    <!-- ID Column -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
      <mat-cell *matCellDef="let element">
        <div> {{element.id}} </div>
      </mat-cell>
    </ng-container>

    <!-- First Name Column -->
    <ng-container matColumnDef="firstName">
      <mat-header-cell *matHeaderCellDef mat-sort-header>First Name</mat-header-cell>
      <mat-cell *matCellDef="let element">
        <div> {{element.first_name}} </div>
      </mat-cell>
    </ng-container>

    <!-- Last Name Column -->
    <ng-container matColumnDef="lastName">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</mat-header-cell>
      <mat-cell *matCellDef="let element">
        <div> {{element.last_name}} </div>
      </mat-cell>
    </ng-container>

    <!-- Email Column -->
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef mat-sort-header class="d-none d-sm-flex">Email</mat-header-cell>
      <mat-cell *matCellDef="let element" class="d-none d-sm-flex">
        <div>
          <a href="mailto:{{element.email}}">{{element.email}}</a>
        </div>
      </mat-cell>
    </ng-container>

    <!-- Gender Column -->
    <ng-container matColumnDef="gender">
      <mat-header-cell *matHeaderCellDef mat-sort-header class="d-none d-lg-flex">Gender</mat-header-cell>
      <mat-cell *matCellDef="let element" class="d-none d-lg-flex">
        <div> {{element.gender}} </div>
      </mat-cell>
    </ng-container>

    <!-- IP Address Column -->
    <ng-container matColumnDef="ipAddress">
      <mat-header-cell *matHeaderCellDef mat-sort-header class="d-none d-md-flex">IP Address</mat-header-cell>
      <mat-cell *matCellDef="let element" class="d-none d-md-flex">
        <div> {{element.ip_address}} </div>
      </mat-cell>
    </ng-container>

    <!-- Department Column -->
    <ng-container matColumnDef="department">
      <mat-header-cell *matHeaderCellDef mat-sort-header class="d-none d-lg-flex">Department</mat-header-cell>
      <mat-cell *matCellDef="let element" class="d-none d-lg-flex">
        <div> {{element.department}} </div>
      </mat-cell>
    </ng-container>

    <!-- IE Helper Column -->
    <ng-container matColumnDef="ie-helper">
      <mat-header-cell *matHeaderCellDef 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 element" 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">
          <mat-icon>more_vert</mat-icon>
        </button>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let element; let row; columns: displayedColumns;" [ngClass]="{'row-todo': element.status === 'Not Started',
                'row-done': element.status === 'Done'}" class="clickable-row" (click)="toggleHeaders()">
    </mat-row>
  </mat-table>

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

</mat-card>