Menggunakan Angular Material Table – 4

Dokumentasi Table Soring : https://material.angular.io/components/table/overview#sorting

Seperti yang dijelaskan dalam dokumentasi, kita perlu menambahkan matSort directive pada table dan menambahkan add mat-sort-header pada setiap column header cell.

Kita juga perlu meng-import MatSortModule untuk menggunakan matSort directive.

Pertama kita buka file notes.component.html, tambahkan matSort directing dan mat-sort-header.

<div class="mat-elevation-z8">
    <mat-form-field>
        <mat-label>Filter</mat-label>
        <input matInput (keyup) = "applyFilter($event)" #input>
    </mat-form-field>
    <!-- tambahkan matsort directive dan event listener-->
    <table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)">  
      <ng-container matColumnDef="position">
          <!-- tambahkan mat-sort-header -->
        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by number"> No. </th>
        <td mat-cell *matCellDef="let note"> {{note.id}} </td>
      </ng-container>
  
      <ng-container matColumnDef="title">
          <!-- tambahkan mat-sort-header -->
        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by title"> Title </th>
        <td mat-cell *matCellDef="let note"> {{note.title}} </td>
      </ng-container>
  
      <ng-container matColumnDef="date">
          <!-- tambahkan mat-sort-header -->
        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by date"> Date </th>
        <td mat-cell *matCellDef="let note"> {{note.date | date:'yyyy-MM-dd'}} </td>
      </ng-container>
  
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

        <tr class="mat-row" *matNoDataRow>
            <td class="mat-cell" colspan="3">No Data Matching {{input.value}}</td>
        </tr>
    </table>

    <mat-paginator [pageSize]="2" [pageSizeOptions]="[5, 10, 20]"
                   showFirstLastButtons 
                   aria-label="Select page of periodic elements">
    </mat-paginator>
</div>

Kemudian kita buka file notes.component.ts, kemudian implementasikan method sorting.

//import library LiveAnnouncer
import { LiveAnnouncer } from '@angular/cdk/a11y';
import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
//import sorting library
import {MatSort, Sort} from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Note } from '../../models/note';

@Component({
  selector: 'app-notes',
  templateUrl: './notes.component.html',
  styleUrls: ['./notes.component.scss']
})
export class NotesComponent implements OnInit, AfterViewInit {
  displayedColumns: string[] = ['position', 'title', 'date'];
  dataSource! : MatTableDataSource<Note>;
    
  @Input() notes! : Note[];
  
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  //implement sorting
  @ViewChild(MatSort) sort!: MatSort

  //inject LiveAnouncer
  constructor(private _liveAnnouncer: LiveAnnouncer) { }

  ngOnInit(): void {
    this.dataSource = new MatTableDataSource<Note>(this.notes);
  }

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

  applyFilter(event: Event){
    const filterVal = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterVal.trim().toLocaleLowerCase();
  }

  //implementasi sorting
  announceSortChange(sortState: Sort) {
    if (sortState.direction) {
      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
    } else {
      this._liveAnnouncer.announce('Sorting cleared');
    }
  }  
}

Jika kita test, sesuai ekspektasi, sorting berjalan dengan baik.