Menggunakan Angular Material Table – 1

by

Angular Material Table berguna untuk menampilkan data dalam bentuk row dan column. Angular Material memiliki fitur yang memudahkan developer untuk melakukan sorting, filtering dan pagination.

Kita akan implementasikan fitur-fitur diatas untuk data notes.

Untuk dokumentasi lengkap lihat di https://material.angular.io/components/table/overview

Cara Passing Data

Cara passing data Material Table yang dapat digunakan:

  • Data array, cara passing data paling mudah. Namun banyak keterbatasan, misalnya perubahan data pada data array harus ditrigger untuk ditampilkan pada table.
  • Observable Stream, component table secara otomatis akan memeriksa perubahan yang terjadi dan otomatis menampilkan perubahan data dalam table.
  • DataSource, menggunakan datasource instance umum digunakan pada real aplikasi.

Kita akan gunakan pendekatan datasource, Dokumentasi lihat di https://material.angular.io/components/table/overview#datasource

Membuat Component Notes

Kita akan buat component baru, yaitu component notes

$ ng g c contactmanager/components/notes --skip-tests

Buka file main-content.component.html, lalu tambahkan code untuk menampilkan <app-notes> component.

<div *ngIf="!user">
    <mat-spinner></mat-spinner>
</div>
<div *ngIf="user">
    <mat-card>
        <mat-card-header>
            <mat-icon mat-card-avatar svgIcon="{{user.avatar}}"></mat-icon>
            <mat-card-title>{{ user.name }}</mat-card-title>
            <mat-card-subtitle>Birthday {{ user.birthDate | date:'d LLLL' }}</mat-card-subtitle>
          </mat-card-header>
          <mat-card-content>
            <mat-tab-group>
              <mat-tab label="Bio"> <p>{{ user.bio }}</p> </mat-tab>
              <mat-tab label="Notes"> <app-notes [notes]="user.notes"></app-notes> </mat-tab>
            </mat-tab-group>            
            
          </mat-card-content>        
    </mat-card>
</div>

Buka file notes.component.ts, tambahkan code untuk menggunakan MatTableDataSource dan property notes.

import { Component, Input, OnInit } from '@angular/core';
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 {
  displayedColumns: string[] = ['position', 'title', 'date'];
  dataSource! : MatTableDataSource<Note>;
    
  @Input() notes! : Note[];

  constructor() { }

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

}

Buka file notes.component.html, lalu tambahkan code dibawah

<div class="mat-elevation-z8">
    <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>
    </table>
</div>

Sampai disini kita sudah berhasil menggunakan MatTabDataSource.

Pada modul berikutnya kita akan mengimplementasikan paginator.

Sharing is caring:

Leave a Comment