<div class="main-div mat-elevation-z2">
<h3 class="heading">View Offices</h3>
<mat-divider></mat-divider>
<div class="fineract-button">
<a mat-raised-button  color="primary" [routerLink]="['/navbar/add_office']">
  <mat-icon>add</mat-icon>Add Office</a>
  </div>
<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter by name">
</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="name">
  <mat-header-cell *matHeaderCellDef> Name</mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>

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

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


</div>