Estou tentando colocar ordenação na minha angular material mas ao clicar na seta correspondente da ordenação nada acontece.
Tentei algo como:
<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...
Os dados estão sendo mostrados normalmente, porém a ordenação não funciona.