Angular Material有提供表格(table)這個元件，並提供方便的features，包括排序(sorting)、篩選(filter)、換頁(pagination)等等。
官方文件：https://material.angular.io/components/table/overview

1. 建立資料來源datasource

Angular Material有MatTableDataSource這個class可以使用，也可以自己customize。
首先在元件的ts檔，還有module.ts都有imports MatTableModule。

在table.component.ts定義要獲取的資料：

1
2
3
4
5
6
7
8
9
10
11
export class PastTrainingsComponent implements OnInit {
    dataSource = new MatTableDataSource<any>();

    ngOnInit() {
        <!-- 1. static資料 -->
        this.dataSource.data = this.tableService.getData();
        <!-- 2. API -->
        this.httpClient.get<any>('URL').subscribe(data => {
            this.dataSource.data = data;
        });
    }

2. 定義表格

在table.component.html定義表格，先定義資料來源，並建立各欄位。
最後使用mat-header-row和mat-row來呈現，這裡的陣列對應到前面欄位的def，若順序調換，欄位呈現的順序會依陣列來決定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 綁定資料來源 -->
<mat-table [dataSource]="dataSource">

    <!-- 建立"姓名"欄位 -->
    <ng-container matColumnDef="name">

        <!-- 標題列 -->
        <mat-header-cell *matHeaderCellDef mat-sort-header>姓名</mat-header-cell>
        <!-- 子欄位 -->
        <mat-cell *matCellDef="let element">{{ element.name }}</mat-cell>

    </ng-container>

    <!-- 顯示標題列 -->
    <mat-header-row *matHeaderRowDef="['name', ...]"></mat-header-row>
    <!-- 顯示資料列 -->
    <mat-row *matRowDef="let row; columns: ['name', ...]"></mat-row>
</mat-table>