<mat-card class="fields-list" *ngIf="tableShown">
      <mat-card-content>
        <mat-card-actions align="end">
          <button type="button" class="blabla" (click)="addClicked()">
            Add New Office
          </button>
          <button type="button" class="blabla" (click)="downloadTableData()">
            Download Table Data
          </button>
        </mat-card-actions>
        <mat-form-field class="search">
          <div class="icon-div">
            <span class="fa fa-search icon"></span>
          </div>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search office">
        </mat-form-field>

        <mat-table #table [dataSource]="tableDataSource">
          <ng-container cdkColumnDef="label">
            <mat-header-cell *cdkHeaderCellDef fxFlex="20%">Label</mat-header-cell>
            <mat-cell *cdkCellDef="let officePin" fxFlex="20%">{{officePin.label}}</mat-cell>
          </ng-container>

          <ng-container cdkColumnDef="postalAddress">
            <mat-header-cell *cdkHeaderCellDef fxFlex="55%">Postal Address</mat-header-cell>
            <mat-cell *cdkCellDef="let officePin" fxFlex="55%">{{officePin.postalAddress}}</mat-cell>
          </ng-container>

          <ng-container cdkColumnDef="city">
            <mat-header-cell *cdkHeaderCellDef fxFlex="55%">City</mat-header-cell>
            <mat-cell *cdkCellDef="let officePin" fxFlex="55%">{{officePin.cityName}}</mat-cell>
          </ng-container>

          <ng-container cdkColumnDef="icon-selection">
            <mat-header-cell *cdkHeaderCellDef fxFlex="15%"></mat-header-cell>
            <mat-cell *cdkCellDef="let officePin" fxFlex="15%">
              <mat-icon (click)="deleteGroupOffices(officePin.id)" mat-list-icon matTooltip="Delete" class="icon">
                delete_forever
              </mat-icon>
              <mat-icon (click)="editField(officePin.id)" mat-list-icon matTooltip="Edit" class="icon">edit</mat-icon>
            </mat-cell>
          </ng-container>

          <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row class="custom-table-row" *cdkRowDef="let officePin; columns: displayedColumns;"></mat-row>

        </mat-table>
      </mat-card-content>
    </mat-card>

getOfficePinsByGroup(id: number): void {
    this.officePinService.getOfficePinByGroup(id).subscribe((data: OfficePin[]) => {
      this.officePinList = data;
      this.tableDataSource.data = this.officePinList;
    });
  }