Material Table 教學 - slioplark/angular-tutorial GitHub Wiki

定義 table 的欄位

1. 宣告 displayedColumns 陣列

陣列中的每個「元素」表示 table 的各個欄位。

displayedColumns: Array<string> = ['id', 'name'];

2. 使用 matColumnDef 定義欄位

在 html 中，必須要有可對應 displayedColumns 的欄位，否則 table 無法正常顯示。

  • matColumnDef：對應 displayedColumns 的元素名稱
  • th 標籤：顯示欄位名稱
<!-- Id Column -->
<ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> Id </th>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
</ng-container>

顯示 table 的資料

1. 宣告 table 變數

table = new MatTableDataSource<any>();

2. 資料綁定

透過 table 的「data 屬性」進行資料綁定，以提供 table 顯示的資料。

this.table.data = value;

3. 使用 dataSource 進行「屬性綁定」

<table mat-table [dataSource]="table"></table>

4. 顯示欄位內容

綁定完成的資料，可使用row來顯示欄位的內容。

row 是使用 *matCellDef 宣告的變數，可視為 table 的「列」資料。

<td mat-cell *matCellDef="let row"> {{ row.id }} </td>

5. 完整的 html

<table mat-table [dataSource]="table">
    <!-- Id Column -->
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> Id </th>
        <td mat-cell *matCellDef="let row"> {{ row.id }} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let row"> {{ row.name }} </td>
    </ng-container>
</table>

排序功能

1. 使用 @ViewChild 取得排序功能

@ViewChild(MatSort, { static: true }) sort: MatSort;

2. 排序綁定

透過 table 的「sort 屬性」與上述的「sort 變數」進行排序綁定，以提供 table 排序功能。

this.table.sort = this.sort;

3. 加入排序相關的 directive

  • matSort：用於 table 標籤的 directive
  • mat-sort-header：用於 th 標籤的 directive
<table mat-table [dataSource]="table" matSort>
    <!-- Id Column -->
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
        <td mat-cell *matCellDef="let row"> {{ row.id }} </td>
    </ng-container>
</table>
⚠️ **GitHub.com Fallback** ⚠️