Menggunakan Angular Material Table – 3

Pertama kita buka file notes.component.scss, kita tambahkan rule css sederhana untuk input type filter.

table {
    width: 100%;
  }

// untuk input type filter
.mat-form-field{
    font-size: 14px;
    width: 100%;
}

Kemudian kita buka file notes.component.html, tambahkan code untuk menampilkan filter input type. Dan kita tambahkan code juga untuk menampilkan tulisan pada table jika filter tidak ditemukan.

<div class="mat-elevation-z8">
    <!-- implement filter -->
    <mat-form-field>
        <mat-label>Filter</mat-label>
        <input matInput (keyup) = "applyFilter($event)" #input>
    </mat-form-field>

    <table mat-table [dataSource]="dataSource">  
      <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let note"> {{note.id}} </td>
      </ng-container>
  
      <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef> Title </th>
        <td mat-cell *matCellDef="let note"> {{note.title}} </td>
      </ng-container>
  
      <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef> 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>

        <!-- jika filter tidak ditemukan -->
        <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 buka file notes.component.ts, kita tambahkan method applyFilter untuk handling event ketika input type filter diisi.

import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
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;

  constructor() { }

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

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

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

Sesuai ekspektasi, filtering berjalan dengan baik.

Pada modul selanjutnyak kita akan menambahkan sorting.