0

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

This is a view from my table: enter image description here

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.

enter image description here

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

  • Are you sure you added the module to component imports? import {MatSortModule} from '@angular/material/sort'; – usalin Jul 28 '21 at 17:11
  • Does this answer your question? [Mat-table Sorting Demo not Working](https://stackoverflow.com/questions/46893164/mat-table-sorting-demo-not-working) – Yong Shun Jul 29 '21 at 00:34
  • Yes, I've added the proper import. – JavierOrellana7 Jul 29 '21 at 13:46
  • Hi, can you attach your data to the question or create a Minimal, Reproducible Example on [StackBlitz](https://stackblitz.com). Thank you. – Yong Shun Jul 30 '21 at 03:04

0 Answers0