Day12-Angular Material 介紹
Day14-Angular Material: DatePicker 日期選擇器
Day15-Angular Material: Select 下拉選單
Day16-Angular Material: Checkbox
Day17-Angular Material: Dialog 彈出視窗

Angular Material-Table

官方中文網站 - Table
有多行資料可以使用表格來呈現，這篇會介紹基礎的Angular Material Table、分頁功能、排序功能。
而官方網站的範例中還有介紹一些功能：釘選表頭、表尾的設置、Click 事件，有空可以去看看~

建立一個基本的表格

官方文件的範例

1. imort module （依個人習慣放置，詳情請見 Day13）

   import { MatTableModule } from '@angular/material/table';
   
   @NgModule({
     imports: [
   	MatTableModule,
     ],
   })
   

2. 設定HTML、TS。（有簡寫）
   可能剛開始會很不習慣，這樣子的寫法是從一整列（直行）的方式去設定。

   <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>
   
     <ng-container matColumnDef="symbol">
       <th mat-header-cell *matHeaderCellDef> Symbol </th>
       <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
     </ng-container>
   
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
   

   import { Component } from '@angular/core';
   import { MatTableModule } from '@angular/material/table';
   
   @Component({
     selector: 'XXX',
     styleUrls: ['XXX.component.css'],
     templateUrl: 'XXX.component.html',
   })
   export class XXXComponent {
     // 要顯示的欄位 ( 對應 matColumnDef )
     displayedColumns: string[] = [
   	'position', 
   	'name',
   	'weight',
   	'symbol'
     ];
   
     // 資料
     dataSource = [
   	{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'},
     ];
   }
   

   
   粉紅框：一個 <ng-container></ng-container> 裡面的內容

設定分頁

官方文件的範例

1. 放置於 Table 外

   <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>
     <ng-container matColumnDef="symbol">
       <th mat-header-cell *matHeaderCellDef> Symbol </th>
       <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
     </ng-container>
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
   <mat-paginator [pageSizeOptions]="[5, 10, 20]"
                  showFirstLastButtons
                  aria-label="Select page of periodic elements">
   </mat-paginator>
   

   import { AfterViewInit, Component, ViewChild } from '@angular/core';
   import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
   import { MatTableDataSource, MatTableModule } from '@angular/material/table';
   
   @Component({
     selector: 'XXX',
     styleUrls: ['XXX.component.css'],
     templateUrl: 'XXX.component.html',
   })
   export class XXXComponent{
     displayedColumns: string[] = [
   	'position', 
   	'name',
   	'weight',
   	'symbol'
     ];
   
     // 這邊使用 MatTableDataSource ，是 @angular/material 內建的 class
     // 若要自己實現資料分頁邏輯也可以，就監聽 page 輸出、把該頁的資料發給表格
     // ※型別設為 any 是為了方便展示，實務上的話還是盡量把型別填上去
     dataSource = new MatTableDataSource<any>();
   
     // 子組件
     @ViewChild(MatPaginator) paginator: MatPaginator;
   
     ngOnInit(): void {
       this.dataSource.data = [
         {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'},
       ];
     }
     ngAfterViewInit() {
       this.dataSource.paginator = this.paginator;
     }
   
   }
   

   

設定排序

官方文件的範例

1. 不囉嗦上範例

   <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 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> Weight </th>
       <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
     </ng-container>
     <ng-container matColumnDef="symbol">
       <th mat-header-cell *matHeaderCellDef> Symbol </th>
       <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
     </ng-container>
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
   

   import { AfterViewInit, Component, ViewChild } from '@angular/core';
   import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
   import { MatTableDataSource, MatTableModule } from '@angular/material/table';
   
   @Component({
     selector: 'XXX',
     styleUrls: ['XXX.component.css'],
     templateUrl: 'XXX.component.html',
   })
   export class XXXComponent{
     displayedColumns: string[] = [
   	'position', 
   	'name',
   	'weight',
   	'symbol'
     ];
   
     // ※型別設為 any 是為了方便展示，實務上的話還是盡量把型別填上去
     dataSource = new MatTableDataSource<any>();
   
     // 子組件
     @ViewChild(MatSort) sort: MatSort;
   
     ngOnInit(): void {
       this.dataSource.data = [
         {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'},
       ];
   
     }
     ngAfterViewInit() {
       this.dataSource.sort = this.sort;
     }
   
   }
   

   

參考來源

Angular Material 入門指南
[Angular Material完全攻略] Day 01 - 開始 & 簡介