mat-table Sorting does not work in Angular

Question

I’m trying to Sorting my columns with the material table Sorting, but 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>

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;
  }

I am importing in my module both Matsortmodule and Mattablemodule, in the app.module also, both after the browser module/Commom module... Any idea?

Answer 1

Hello!

Try to make the following change, instead of instantiating the Sort inside the constructor use the same inside ngAfterViewInit(). I made this change here and it met correctly. Also check your app.module and see if it is importing Matsortmodule correctly.

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';

@Component({
  selector: 'app-tabela',
  templateUrl: './tabela.component.html',
  styleUrls: ['./tabela.component.scss']
})

export class TabelaComponent implements OnInit {

  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() {}

  // tslint:disable-next-line:use-life-cycle-interface
  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

  ngOnInit() {
  }

I hope I’ve helped :)