Angular material table is not doing sorting

Question

I am trying to put sorting in my material angular but by clicking on the corresponding ordering arrow nothing happens.

I tried something like:

<mat-table #table id="tabelaLogs" [dataSource]="dataSource" matSort class="mat-elevation-z2">

    <ng-container matColumnDef="operacao">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Tipo </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <span class="mobile-label">Tipo</span>
        <span class="acaoCadastro" *ngIf="element.operacao == 1">Cadastro</span>
        <span class="acaoEditar" *ngIf="element.operacao == 2">Edição</span>
        <span class="acaoExclusao" *ngIf="element.operacao == 3">Exclusão</span>

      </mat-cell>
    </ng-container>


    <ng-container matColumnDef="created_at">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Data</mat-header-cell>
      <mat-cell *matCellDef="let element">  
        <span class="mobile-label">Data</span>
        {{element.created_at | date:'dd/MM/yyyy' }} {{element.created_at | date:'shortTime' }}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="nome">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Usuario </mat-header-cell>
        <mat-cell *matCellDef="let element">
          <span class="mobile-label">Usuario</span>
          {{element.nome}}
        </mat-cell>
    </ng-container>

    <ng-container matColumnDef="ato">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Ação </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <span class="mobile-label">Ação</span>
        {{element.ato | titlecase}}
      </mat-cell>
    </ng-container>




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

TS:

colunasTabela:string[] = ['operacao', 'created_at', 'nome', 'ato'];
this.dataSource = new MatTableDataSource(this.dataSource) //Dado que é recebido através de um request http...

Data is being displayed normally, but sorting does not work.

Answer 1

I managed to fix it, after you do the

this.dataSource = new MatTableDataSource(this.dataSource)

must do:

this.dataSource.sort = this.sort;