<div class="main-div mat-elevation-z2">
  <h3 class="heading">Manage Members</h3>
  <mat-divider></mat-divider>
  <div class="fineract-button">
  <a mat-raised-button  color="primary" [routerLink]="['/navbar/add_member']">
    <mat-icon>add</mat-icon>Add Member</a>
    </div>
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter by firstName/lastName">
  </mat-form-field>
  
<br>
<mat-divider></mat-divider>

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

  <!-- Position Column -->
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef>Code</mat-header-cell>
    <mat-cell *matCellDef="let element">
      <a routerLink="{{element.id}}">{{element.id}}</a>
    </mat-cell>
  </ng-container>

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

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

    <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef>Current Status</mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.status}} </mat-cell>
    </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
  
  
</div>