Angular Material Data Table Sorting

Let's a take at sorting in data tables, Just like filtering angular material makes it really simple to implement the sorting feature for your data table. now there are 3 simple steps.

The first step is to import the material sorting module so in material.module.ts we're gonna import MatSortModule and add it to the MaterialComponents[] array.

import { MatSortModule } from "@angular/material";

const MaterialComponents = [
  MatSortModule,
]

The second step we need to add directives to the material table in the HTML, so on the <mat-table> itself we need to add the matSort directive and to each column header cell that should trigger sorting we need to add the mat-sort-header directive let's add it to the first 3 columns on <mat-header-cell>


<mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <mat-header-cell mat-sort-header *matHeaderCellDef> No. </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{ element.position }} </mat-cell>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <mat-header-cell mat-sort-header *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{ element.name }} </mat-cell>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <mat-header-cell mat-sort-header *matHeaderCellDef> Weight </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{ element.weight }} </mat-cell>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{ element.symbol }} </mat-cell>
  </ng-container>

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

The final step is to provide the matSort directive to the dataSource so in the component class import MatStort from @angular/material, next we use the ViewChild decorator to get hold of a reference to the MatSort component, so first import ViewChild from @angular/core and then in the component class add @ViewChild(MatSort) sort: MatSort; and finally in the ngOnInit method we assigned the MatSort component to the sort property of the data table, so import OnInit from @angular/core as well and implement it in the class then we define ngOnInit method.

import { Component, ViewChild, OnInit } from "@angular/core";
import { MatSnackBar, MatSort } from "@angular/material";

import { MatTableDataSource } from "@angular/material";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {
  displayedColumns: string[] = ["position", "name", "symbol", "weight"];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    this.dataSource.sort = this.sort;
  }

}

That's pretty much it, let's save the file and take a look at the browser, when I hover on the column header you can see and arrow mark. angular material data table sorting When I click on the header the elements are sorted in ascending order click on the header again and the elements are sorted in descending order. angular material sort data table click again and the sorting is removed, similarly you can also sort on name and weight, the symbol column on the other hand is not sortable that is because we didn't attach the mat-sort-header directive to this column.

So there we go sorting data table in three simple steps.

  1. Include the MatSortModule in material module file.
  2. Add the directives in the HTML matSort and mat-sort-header.
  3. Assign the MatSort component to the sort property of the dataSource.