I'm trying to sorting my columns with the table sorting material, however I click on sort and nothing happens.
My 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>
My 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;
}
I'm importing in my module both MatSortModule and MatTableModule, in the app.module too, both after the browser module / commom module ... Any ideas?