mat-table sorting does not work in Angular

Question

mat-table sorting does not work in Angular

Navigation

#1 by (1 votes)

0

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?

angular material

asked by anonymous 26.12.2018 / 17:49

1 answer

How to organize forms messages in Ionic 3 project? How to read a return xml containing CDATA in PHP

score 1 · Answer 1

Hello

Try to make the following change, instead of instantiating the sort inside the constructor, use the same within ngAfterViewInit (). I made this change here and it answered 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 have helped:)