580
回編集
差分
提供: fukudat.net
ナビゲーションに移動検索に移動
→table
</pre>
=== sortable table ===
上記の[[#table|table]]をソート可能なテーブルにする。
テンプレートのスニペット:
<pre>
<table mat-table [dataSource]="tableData" matSort (matSortChange)="sortData($event)">
... 以下同様
</pre>
コンポーネント （xxx.component.ts) のスニペット:
<pre>
import { MatSort, Sort } import from '@angular/material/sort';
...
export class XxxComponent implements OnInit {
sortData(sort: Sort) {
const sort_dir = sort.diretion === 'asc' ? 1 : -1;
this.tableData = this.tableData.slice(); // データをコピーする。
const compare = (a, b) => { return (a < b ? -1 : 1) * sort_dir; }
switch (sort.active) {
case 'NAME':
this.tableData.sort((a, b) => { return compare(a.NAME, b.NAME); }); break;
case 'AGE':
this.tableData.sort((a, b) => { return compare(a.AGE, b.AGE); }); break;
case 'HEIGHT:
this.tableData.sort((a, b) => { return compare(a.HEIGHT, b.HEIGHT); }); break;
default:
break;
}
...
}
</pre>
[[Category:Programming]]
