CODEWITHSUNDEEP
angularmat-table
abrsu
abrsu

Reputation: 11

matSort on dynamic mat-table angular

I am trying to sort headers in a dynamic mat-table and it doesn't seem to do anything. I feel like I tried everything. HTML

<table fxFlex mat-table matSort [dataSource]="dataSource">
  <ng-container *ngFor="let column of columns">
    <ng-container [matColumnDef]="column.jsonPath">
      <th mat-header-cell mat-sort-header *matHeaderCellDef>{{column.label}}</th>
      <td mat-cell *matCellDef="let obj">
        {{getValueByJsonPath(obj: any}}
      </td>
    </ng-container>
  </ng-container>
</table>

TS

dataSource = new MatTableDataSource<any>([]);

...

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

But matSortActive seem to force something but does nothing on second click.

  <table fxFlex mat-table matSort matSortActive="name" matSortDirection="asc"[dataSource]="dataSource">

Upvotes: 1

Views: 1911

Answers (1)

Benedikt
Benedikt

Reputation: 31

Just had a similar problem. I forgot to import the MatSortModule

import {MatSortModule} from '@angular/material/sort';

After doing so, i got the sort arrows.

Upvotes: 3

Related Questions