Angular material matSort does not work

Question

I receive data through http request, the paginator and filter work, but the sorting directive does not work without any error. Therefore, I don't know where I was wrong, please help me out of this.

Here is my code:

component.ts:

displayedColumns = ['token name', 'industry'];
  dataSource = new MatTableDataSource();
  id: any;
  resultsLength = 0;
  pageSize = 5;

  tokens: Tokens[];

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(private apiService: ApiService) { }

  ngOnInit() {
    this.loadTokens();
  }

  loadTokens() {
    this.apiService.getTokens()
    .subscribe((data: any) => {
      this.tokens = data;
      this.dataSource.data = this.tokens;
      console.log(this.dataSource);
      this.resultsLength = this.tokens.length;
    }, error => {
      console.log(error);
    });
  }

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

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

component.html:

<mat-table [dataSource]="dataSource" matSort>              
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;">
    </mat-row>

    <ng-container matColumnDef="token name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> TOKEN NAME </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="industry">
      <mat-header-cell *matHeaderCellDef mat-sort-header> INDUSTRY </mat-header-cell>
      <mat-cell *matCellDef="let row" [style.color]=""> {{row.description}} </mat-cell>
    </ng-container>
  </mat-table>

  <mat-paginator #paginator [pageSize]="pageSize" [length]="resultsLength"></mat-paginator>

I did not implement sorting, sorting is based on the directive `matSort` from the angular material library — Hoàng Nguyễn, Mar 02 '18 at 10:10
material sorting also has logic ["check angular matSort"](https://stackblitz.com/angular/aexlxopkpyk?file=app%2Fsort-overview-example.ts) — Prasanth S, Mar 02 '18 at 10:25
Okay, the first answer from this corrected me (https://stackoverflow.com/questions/46893164/mat-table-sorting-demo-not-working) — Hoàng Nguyễn, Mar 02 '18 at 14:26
Possible duplicate of [Mat-table Sorting Demo not Working](https://stackoverflow.com/questions/46893164/mat-table-sorting-demo-not-working) — isherwood, Mar 02 '18 at 19:12
Possible duplicate of [MatSort is not working properly](https://stackoverflow.com/questions/49533125/matsort-is-not-working-properly) — Sreekumar P, Apr 12 '18 at 03:43

Rinsha CP · Answer 1 · 2018-04-07T09:12:35.493

Try the code below:

HTML

    <div class="example-container mat-elevation-z8">
        <mat-table [dataSource]="dataSource" matSort>
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
            <ng-container matColumnDef="name">
                <mat-header-cell *matHeaderCellDef mat-sort-header> TOKEN NAME </mat-header-cell>
                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="description">
                <mat-header-cell *matHeaderCellDef mat-sort-header> INDUSTRY </mat-header-cell>
                <mat-cell *matCellDef="let row" [style.color]=""> {{row.description}} </mat-cell>
            </ng-container>


        </mat-table>

        <mat-paginator #paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
    </div>


</div>

TS

displayedColumns = ['name', 'description'];
dataSource: MatTableDataSource<any>=  new MatTableDataSource(this.loadTokens());
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

constructor() { }

ngOnInit() {
  this.loadTokens();
}

loadTokens() {
//you can use your loadTkens() function here and fetch Json data.
 return [
  {
    "name": "sss",
    "description": "It"
  },
  {
    "name": "aa",
    "description": "Hositality"
  },
  {
    "name": "bbb",
    "description": "Construction"
  },
  {
    "name": "ccc",
    "description": "sample data1"
  },
  {
    "name": "ddd",
    "description": "sample data2"
  },
  {
    "name": "eee",
    "description": "sample data3"
  },
  ];}

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

applyFilter(filterValue: string) {
  filterValue = filterValue.trim(); // Remove whitespace
  filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
 this.dataSource.filter = filterValue;
 }

Working example : https://stackblitz.com/edit/mat-sort?file=app/app.component.ts

score 0 · Answer 2 · answered Jul 24 '18 at 12:40

0

The matColumnDef if says "token name", then the mat-cell should also say "row.token name" instead of row.name. I mean the matColumnDef and mat-cell should be same.

answered Jul 24 '18 at 12:40

Senorita

1

Angular material matSort does not work

2 Answers2