昨天我們把一個data table的基礎功能－「顯示資料、分頁、排序」都大致說明了一遍，今天我們來講一些進階的data table用法，以及分頁和排序元件的補充說明；Angular Material中的分頁和排序功能都很強，而且也不會和<mat-table>綁死，在任何地方可以應用。

就讓我們繼續往下看吧！

開始使用Angular Material的Data Table(進階篇)

篩選data table資料－filter

要篩選data table的資料，在前後端都不算困難，我們來看看該如何實作。

直接篩選前端資料

要篩選前端已經撈出來的資料並不困難，只需要為提供的data source設定filter屬性即可。

我們先在畫面上加入一個輸入框：

<mat-form-field>
  <input matInput #filter placeholder="搜尋">
</mat-form-field>

之後在程式中針對input變化時設定data source的filter：

export class EmailListComponent implements OnInit {
  @ViewChild('filter') filter: ElementRef;
  
  ngOnInit() {
    Observable.fromEvent(this.filter.nativeElement, 'keyup')
      .debounceTime(300)
      .distinctUntilChanged()
      .subscribe(() => {
        this.emailsDataSource.filter = (this.filter.nativeElement as HTMLInputElement).value;
      });
  }
}

成果如下：

自訂篩選前端資料的邏輯

剛才我們使用filter讓data source自己來過濾資料，不過這樣會有點問題，最主要是filter會篩選所有的欄位，只要有某個欄位包含filter內容，就會取出結果，但這未必是我們要的，以上面的例子來說，只看得到標題，卻過濾出一些標題不包含filter的資訊，依情境而定有可能會造成誤解。

Angular Material的MatTableDataSource中有一個filterPredicate方法，是用來對filter篩選資料用的，我們可以複寫這個方法，來針對需要的欄位篩選就好：

this.emailsDataSource.filterPredicate = (data: any, filter: string): boolean => {
  return data.title.indexOf(filter) !== -1;
};

這個方法有兩個傳入參數，分別是每列的資料物件(data)，以及要篩選的內容(filter)，我們可以回傳true代表這筆資料要顯示，反之則不顯示。

再來看看結果：

這時候就能夠只針對標題的欄位篩選囉。

篩選後端資料

關於後端篩選，就更加簡單了，不需要再使用data source的filter，只需要把篩選資料送給API就好：

@Component({
  selector: 'app-email-list',
  templateUrl: './email-list.component.html',
  styleUrls: ['./email-list.component.css']
})
export class EmailListComponent implements OnInit {
  ...
  @ViewChild('filter') filter: ElementRef;
  currentFilterData: string;

  ngOnInit() {
    ...

    Observable.fromEvent(this.filter.nativeElement, 'keyup')
      .debounceTime(300)
      .distinctUntilChanged()
      .subscribe((filterData: string) => {
        // 準備要提供給API的filter資料
        this.currentFilterData = filterData;
        this.getIssuees();
        // 後端篩選就不需要指定filter了
        // this.emailsDataSource.filter = (this.filter.nativeElement as HTMLInputElement).value;
      });

    // 後端篩選就用不到filterPredicate了
    // this.emailsDataSource.filterPredicate = (data: any, filter: string): boolean => {
    //   return data.title.indexOf(filter) !== -1;
    // };
  }

  getIssuees() {
    const baseUrl = 'https://api.github.com/search/issues?q=repo:angular/material2';
    let targetUrl = `${baseUrl}&page=${this.currentPage.pageIndex + 1}&per_page=${this.currentPage.pageSize}`;
    if (this.currentSort.direction) {
      targetUrl = `${targetUrl}&sort=${this.currentSort.active}&order=${this.currentSort.direction}`;
    }
    this.httpClient.get<any>(targetUrl).subscribe(data => {
      this.totalCount = data.total_count;
      this.emailsDataSource.data = data.items;
    });
  }
}

成果如下：

從篩選、分頁到排序，3個願望通通都滿足啦！

關於matSort和mat-sort-header的補充

在任何地方使用matSort和mat-sort-header

在之前的範例中，我們都是針對<mat-table>來進行排序，但其實matSort和mat-sort-header在任何地方都使用，只要在外層元素加上matSort，當內部的mat-sort-header點擊時，就會發生matSortChange事件。因此以下程式是完全可以正常運作的！

以下我們使用mat-sort-header="xxxx"，代表排序時的欄位名稱是title：

<table matSort (matSortChange)="sort($event)">
  <thead>
    <tr>
      <th mat-sort-header="title">標題</th>
    </tr>
  </thead>
</table>

只要任何地方有排序的需求，不管是不是<mat-table>只要加上matSort和mat-sort-header就搞定啦！

mat-sort-header的參數補充

使用mat-sort-header會在內容旁邊加上一個箭頭符號，方便我們判別目前的排序狀態，這個符號也是可以調整的，有以下幾個屬性可以設定：

• arrowPosition：箭頭符號要放在文字的前面(before)還是後面(after)
• disableClear：是否允許取消排序，預設為false，會以asc -> desc -> 無輪流切換；若設成true則只會在asc和desc之間切換。
• start：當按下排序時預設先顯示的排序狀態，預設為asc，可以選擇asc或desc。

以下程式會將欄位的排序規則改為，(1)把箭頭放在前面、(2)無法取消排序和(3)預設先以desc排序：

<mat-header-cell *matHeaderCellDef 
                 mat-sort-header 
                 arrowPosition="before" 
                 disableClear="true" 
                 start="desc">
  日期
</mat-header-cell>

結果如下：

可以看到大致上都如我們預期的顯示，唯一的問題是arrowPosition="before"後，整個內容被推到右邊了，這是因為flex設定的關係，從開發人員工具可以看到header cell的加上了一個mat-sort-header-position-before樣式如下：

不過這不是大問題，自行CSS調整一下即可：

.mat-sort-header-position-before {
  justify-content: flex-end;
}

成果如下：

看起來就正常多啦！

關於mat-paginator的補充

單獨使用mat-paginator

<mat-paginator>一樣不需要跟<mat-table>綁死，我們可以在任何需要呈現多筆資料的地方使用<mat-paginator>，只要設定好至確的參數及可正常顯示，並且得知分頁切換時的事件。

<mat-paginator #paginator 
               [length]="totalCount" 
               [pageIndex]="0" 
               [pageSize]="10"
               [pageSizeOptions]="[5, 10, 15]"
               (page)="pageChange($event)">
</mat-paginator>

相關的內容在上一篇文章都已經有詳細的說明了，在這邊就不多做說明囉。

設定mat-paginator的提示文字

在<mat-paginator>中的文字內容都是英文的，包含上一頁及下一頁按鈕，當滑鼠移過去時會呈現一個tooltip，如下：

當然這個文字我們也可以進行調整，只要在MatPaginatorIntl這個service裡面設定即可：

@Component({ })
export class EmailListComponent implements OnInit {

  constructor(private matPaginatorIntl: MatPaginatorIntl) {}

  ngOnInit() {
    // 設定顯示筆數資訊文字
    this.matPaginatorIntl.getRangeLabel = (page: number, pageSize: number, length: number): string => {
      if (length === 0 || pageSize === 0) {
        return `第 0 筆、共 ${length} 筆`;
      }

      length = Math.max(length, 0);
      const startIndex = page * pageSize;
      const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;

      return `第 ${startIndex + 1} - ${endIndex} 筆、共 ${length} 筆`;
    };

    // 設定其他顯示資訊文字
    this.matPaginatorIntl.itemsPerPageLabel = '每頁筆數：';
    this.matPaginatorIntl.nextPageLabel = '下一頁';
    this.matPaginatorIntl.previousPageLabel = '上一頁';
  }
}

成果如下：

所有的文字都變成中文呈現啦！

本日小結

今天我們介紹了另一個常在data table中常出現的功能，篩選資料(filter)，一樣的，不管是直接處理前端的資料還是後端，都不會造成問題；在前端篩選時我們甚至幾乎不用寫什麼程式即可完成篩選，當然我們也能透過自訂filterPredicate來決定篩選邏輯；在後端資料篩選時則沒有什麼特別，就是傳遞資料給API而已。

另外我們也補充了一些關於分頁及排序元件的使用方法，這些方法都是筆者個人認為比較重要的部分，但實際上則有更多可以調整的部分；例如排序功能其實也有一個MatSortHeaderIntl可以設定文字，但主要是在螢幕閱讀器的部分使用，比較難用畫面呈現，因此也就沒有特別介紹了。

關於排序、分頁還有許多可以設定的屬性、API等等，可以直接到官方的文件上去看，也有詳細的說明。

本日的程式碼GitHub：https://github.com/wellwind/it-ironman-demo-angular-material/tree/day-24-data-table-advanced

分支：day-24-table-advanced

我們終於把所有Angular Material目前版本(5.0.0)所有的30個主要功能和常見的使用情境都介紹過啦！有沒有覺得非常充實，也對於Angular Material的設計和互動感及考量的全面性感覺到非常佩服啊！？如果有任何問題不明白，或是覺得需要補充的內容，都歡迎你直接在下方留言喔！

明天開始我們要邁入從Angular Material衍伸出來的另一大主題－Angular CDK，讓你不必非得要綁死Angular Material，也能打造出具有互動感的元件，準備好迎接新的挑戰吧！！

相關資源

• Angular Material - Sort header
• Angular Material - Paginator