I've read multiple questions here in SO but I can't make it work.
I call a service to retrieve data. Everything works fine -> Filter, paginator and the data rendered. But I don't know why sorting is not working
And this is my code:
displayedColumns: string[] = ['fecha', 'horaexamen', 'rut', 'nombre', 'tipoexamen', 'correo', 'telefono', 'epivigila', 'codigo', 'valor', 'verdetalles'];
dataSource: MatTableDataSource<ExamenModel>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(private es: ExamenesService) {
}
ngOnInit(): void {
this.es.getExamenes().subscribe( data => {
this.examenes = data;
this.dataSource = new MatTableDataSource(this.examenes);
this.dataSource.paginator = this.paginator;
});
}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
Almost everyone suggest to put this.dataSource.sort = this.sort; inside ngAfterViewInit. I did this the first time because I saw it in Material documentation. Please help, I'm running out of ideas.
Thanks !
EDIT html code:
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="fecha">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Fecha </th>
<td mat-cell *matCellDef="let row"> {{row.fecha }} </td>
</ng-container>
<ng-container matColumnDef="horaexamen">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Hora </th>
<td mat-cell *matCellDef="let row"> {{row.horaexamen}} </td>
</ng-container>
<ng-container matColumnDef="rut">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Rut </th>
<td mat-cell *matCellDef="let row"> {{row.rut}} </td>
</ng-container>
...
</table>
EDIT 2: I've tried with static data from material docs examples and didn't work