0

Estou tentando colocar ordenação na minha angular material mas ao clicar na seta correspondente da ordenação nada acontece.

Tentei algo como:

<mat-table #table id="tabelaLogs" [dataSource]="dataSource" matSort class="mat-elevation-z2">

    <ng-container matColumnDef="operacao">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Tipo </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <span class="mobile-label">Tipo</span>
        <span class="acaoCadastro" *ngIf="element.operacao == 1">Cadastro</span>
        <span class="acaoEditar" *ngIf="element.operacao == 2">Edição</span>
        <span class="acaoExclusao" *ngIf="element.operacao == 3">Exclusão</span>

      </mat-cell>
    </ng-container>


    <ng-container matColumnDef="created_at">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Data</mat-header-cell>
      <mat-cell *matCellDef="let element">  
        <span class="mobile-label">Data</span>
        {{element.created_at | date:'dd/MM/yyyy' }} {{element.created_at | date:'shortTime' }}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="nome">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Usuario </mat-header-cell>
        <mat-cell *matCellDef="let element">
          <span class="mobile-label">Usuario</span>
          {{element.nome}}
        </mat-cell>
    </ng-container>

    <ng-container matColumnDef="ato">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Ação </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <span class="mobile-label">Ação</span>
        {{element.ato | titlecase}}
      </mat-cell>
    </ng-container>




    <mat-header-row *matHeaderRowDef="colunasTabela"></mat-header-row>
    <mat-row *matRowDef="let row; columns: colunasTabela;"></mat-row>
  </mat-table>

TS:

colunasTabela:string[] = ['operacao', 'created_at', 'nome', 'ato'];
this.dataSource = new MatTableDataSource(this.dataSource) //Dado que é recebido através de um request http...

Os dados estão sendo mostrados normalmente, porém a ordenação não funciona.

1 Resposta 1

0

Consegui resolver, depois que faz faço o

this.dataSource = new MatTableDataSource(this.dataSource)

devo fazer:

this.dataSource.sort = this.sort;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .