Table with angular material

tabela.component.html

  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort>
      <ng-container matColumnDef="codigo">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Código </th>
        <td mat-cell *matCellDef="let row"> {{row?.codigo || '-'}} </td>
      </ng-container>
      <ng-container matColumnDef="descricao">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Descrição </th>
        <td mat-cell *matCellDef="let row"> {{row?.descricao || '-'}} </td>
      </ng-container>
      <ng-container matColumnDef="pertenceRol">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Pertence ao ROL </th>
        <td mat-cell *matCellDef="let row"> {{row?.pertenceRol || '-'}} </td>
      </ng-container>
      <ng-container matColumnDef="DUP">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Diretriz de Utilidade Pública </th>
        <td mat-cell *matCellDef="let row"> <a *ngIf="row.arquivoDut" href="{{row.arquivoDut}}"><img src="../../../assets/ic_file.png"
              alt="Download"></a></td>
      </ng-container>
      <ng-container matColumnDef="PAC">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> PAC </th>
        <td mat-cell *matCellDef="let row"> {{row?.row || '-'}} </td>
      </ng-container>
      <ng-container matColumnDef="RAC">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> RAC </th>
        <td mat-cell *matCellDef="let row"> {{row?.rac || '-'}} </td>
      </ng-container>
      <ng-container matColumnDef="porteMedico">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Porte Médico </th>
        <td mat-cell *matCellDef="let row"> {{row?.porteMedico || '-'}} </td>
      </ng-container>
      <ng-container matColumnDef="porteAnestesico">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Porte Anestésico </th>
        <td mat-cell *matCellDef="let row"> {{row?.porteAnestesico || '-'}} </td>
      </ng-container>
      <ng-container matColumnDef="aux">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Aux. </th>
        <td mat-cell *matCellDef="let row"> {{row?.aux || '-'}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;">
      </tr>
    </table>
    <div class="error-data-length" *ngIf="dataSource?.filteredData?.length === 0 || dataSource?.length === 0">Nenhum
      item encontrado.</div>
    <mat-button-toggle-group *ngIf="dataDetails" #group="matButtonToggleGroup" class="paginatiorButton">
      {{(dataDetails?.qtdItensPagina * dataDetails?.paginaAtual) - (dataDetails?.qtdItensPagina - 1)}} - {{dataDetails?.qtdItensPagina *
      dataDetails?.paginaAtual}} de {{dataDetails?.qtdItensTotal}}
      <mat-button-toggle value="Anterior" [disabled]="firstPage" (click)="previousPage()"> <img src="../../../assets/ic_back_chevron.png"
          alt="Voltar"> </mat-button-toggle>
      <mat-button-toggle value="Póximo" (click)="nextPage()"> <img src="../../../assets/ic_next_chevron.png" alt="Próximo"></mat-button-toggle>
    </mat-button-toggle-group>
  </div>

tabela.component.scss

.container {
    table {
        width: 100%;
        font-family: 'Raleway', sans-serif;
    }
    .mat-form-field {
        font-size: 14px;
        width: 100%;
    }
    td,
    th {
        padding: 10px;
        font-size: 15px;
        line-height: 20px;
    }
    th {
        background-color: #008e57;
        color: #fff;
        font-size: 14px;
        line-height: 16px;
    }
    td {
        img {
            vertical-align: middle;
        }
    }
    .error-data-length {
        color: #4A4A4A;
        font-size: 16px;
        font-weight: 600;
        line-height: 19px;
        padding: 26px 10px;
    }
    .header {
        align-items: center;
    }

    .paginatiorButton {
      font-family: 'Raleway', sans-serif;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
    }
}

tabela.component.ts

public loading = false;
  public actualPage = 1;
  public firstPage = true;
  busca = new FormControl('');


  displayedColumns: string[] = [
    'codigo',
    'descricao',
    'pertenceRol',
    'DUP',
    'RAC',
    'PAC',
    'porteMedico',
    'porteAnestesico',
    'aux',
  ];
  dataSource: MatTableDataSource<tableData>;
  dataDetails: any;

  @ViewChild(MatSort) sort: MatSort;

  constructor(private tabelaProcedimentoService: TabelaProcedimentoService) { }

  async ngOnInit() {
    this.loading = true;
    await this.tabelaProcedimentoService.getTable(this.actualPage)
      .subscribe(
        data => (
          this.dataSource = new MatTableDataSource(data.dados),
          this.dataDetails = data,
          this.loading = false
          )
      );
    if (this.dataSource) {
      this.dataSource.sort = this.sort;
      console.log(this.dataSource)
    }
  }

  nextPage() {
    this.loading = true;
    let nextPage = this.actualPage += 1;
    this.firstPage = false,
      this.tabelaProcedimentoService.getTable(nextPage)
        .subscribe(
          data => (
            this.dataSource = new MatTableDataSource(data.dados),
            this.dataDetails = data,
            this.loading = false,
            this.actualPage = nextPage
          )
        )
  }

  previousPage() {
    this.loading = true;
    let previousPage = this.actualPage -= 1;
    if (previousPage < 1) {
      this.loading = false;
      return this.firstPage = true;
    } else {
      this.tabelaProcedimentoService.getTable(previousPage)
        .subscribe(
          data => (
            this.dataSource = new MatTableDataSource(data.dados),
            this.dataDetails = data,
            this.loading = false,
            this.actualPage = previousPage
          )
        )
    }
  }