Angular 7 - How to implement sorting in mat-table

Question

I am trying to implement sorting in <mat-table> using Angular version 7.3.

Below is my source code:

<table
  mat-table
  [dataSource]='dataSource'>
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>
</table>

Here is the TypeScript file source is:

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}
];

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}

I am using Angular version 7 and the sorting feature I am not able to write. Need help with that as I am new to Angular.

Answer 1

1. Import MatSortModule to AppModule.

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

@NgModule({
  imports: [
    ...,
    MatSortModule,
  ],
  ...
})
export class AppModule {}

Or if you have another module such as MaterialModule:

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

@NgModule({
  exports: [
    ...,
    MatSortModule,
  ],
  ...
})
export class MaterialModule {}

import { MaterialModule } from /* material.module.ts path */;

@NgModule({
  imports: [
    ...,
    MaterialModule,
  ],
  ...
})
export class AppModule {}

2.1. Apply matSort directive to table (parent) element.

2.2. Apply mat-sort-header directive to each mat-header-cell element.

(Reference: Adding sort to table headers)

<table
  mat-table
  [dataSource]='dataSource' matSort>

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

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

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

</table>

3. Would suggest passing the data by creating a MatTableDataSource instance.

dataSource = new MatTableDataSource(ELEMENT_DATA);

export class TableSortingExample implements OnInit {
  ...
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  @ViewChild(MatSort) sort: MatSort;

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

Sample Demo on StackBlitz

---

Reference

Sort Header | Angular Material