Estou tentando fazer sorting das minhas colunas com o material table sorting, porém eu clico no sort e não acontece nada.
Meu template:
<table id="tabelaLogs" mat-table [dataSource]="dataSource" matSort class="mat-elevation-z2 animated zoomIn delay-1s">
<ng-container matColumnDef="indice">
<th mat-header-cell *matHeaderCellDef mat-sort-header> indice </th>
<td mat-cell *matCellDef="let element"> {{element.indice}} </td>
</ng-container>
<ng-container matColumnDef="tipo">
<th mat-header-cell *matHeaderCellDef> Tipo </th>
<td mat-cell *matCellDef="let element"> {{element.tipo}} </td>
</ng-container>
<ng-container matColumnDef="data">
<th mat-header-cell *matHeaderCellDef> Data </th>
<td mat-cell *matCellDef="let element"> {{element.data}} </td>
</ng-container>
<ng-container matColumnDef="usuario">
<th mat-header-cell *matHeaderCellDef> Usuario </th>
<td mat-cell *matCellDef="let element"> {{element.usuario}} </td>
</ng-container>
<ng-container matColumnDef="acao">
<th mat-header-cell *matHeaderCellDef> Ação </th>
<td mat-cell *matCellDef="let element"> {{element.acao}} </td>
</ng-container>
<ng-container matColumnDef="detalhes">
<th mat-header-cell *matHeaderCellDef> Detalhes </th>
<td mat-cell *matCellDef="let element">
<a class="fa fa-chevron-down iconedetalhes crossRotate animated rotateIn"></a>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="colunasTabela"></tr>
<tr mat-row *matRowDef="let row; columns: colunasTabela;"></tr>
</table>
Meu ts:
colunasTabela:string[] = ['indice', 'tipo', 'data', 'usuario', 'acao', 'detalhes']
dadosTabela:any[] = [
{indice: 1, tipo: 'Exclusão', data: '11/09/2018', usuario: 'Renato', acao: 'Exclusão de operador', detalhes: 'Detalhe xxxxx'},
{indice: 2, tipo: 'Edição', data: '15/02/2019', usuario: 'Jessica', acao: 'Edição de produto', detalhes: 'Detalhe xxxxx'},
{indice: 3, tipo: 'Exclusão', data: '11/09/2018', usuario: 'Renato', acao: 'Exclusão de operador', detalhes: 'Detalhe xxxxx'},
{indice: 4, tipo: 'Exclusão', data: '11/09/2018', usuario: 'Renato', acao: 'Exclusão de operador', detalhes: 'Detalhe xxxxx'},
];
@ViewChild(MatSort) sort: MatSort;
dataSource = new MatTableDataSource(this.dadosTabela);
constructor() {
this.dataSource.sort = this.sort;
}
Estou importando no meu modulo tanto o MatSortModule quanto o MatTableModule, no app.module também, ambos depois do browser module/commom module... Alguma ideia?