580
回編集
差分
提供: fukudat.net
ナビゲーションに移動検索に移動
→繰り返し要素
綺麗なテーブルは[[#table|table]]参照。
=== table ===
Material の table を使うと、ヘッダを固定したり、フッタに集計を表示して、テーブルの中身をスクロールさせたり、カラムをダイナミックに選んだり、行をソートしたりできる。
インストールは [[#Material|Material]] を参照。
コンポーネント （xxx.component.ts) のスニペット:
<pre>
class MyRow {
name: string; // カラム1
age: number; // カラム2
height: number; // カラム3
hobby: string; // カラム4
}
export class XxxComponent implements OnInit {
tableData: MyRow[]; // テーブルに表示するデータ
displayedColumns = [ "NAME", "AGE", "HOBBY" ]; // 表示するカラム
ngOnInit() {
// ここである必要はないけど、どこかでデータをセット。外部サービスからデータを入手するの実用的な使い方。
this.tableData = [ { "name": "Andy", "age": 9, "height": 132.5, "hobby": "Video Game" },
{ ... }, ];
}
}
</pre>
テンプレートのスニペット:
<pre>
<table mat-table [dataSource]="tableData">
<!-- NAME column -->
<ng-container matColumnDef="NAME">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">{{ row.name }}</td>
</ng-container>
<!-- AGE column -->
<ng-container matColumnDef="AGE">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Age</th>
<td mat-cell *matCellDef="let row">{{ row.age }}</td>
</ng-container>
<!-- HEIGHT column -->
<ng-container matColumnDef="HEIGHT">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Height</th>
<td mat-cell *matCellDef="let row">{{ row.height | number: '.1' }}</td> <!-- フォーマットが | で指定できる -->
</ng-container>
<!-- HOBBY column -->
<ng-container matColumnDef="HOBBY">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Hobby</th>
<td mat-cell *matCellDef="let row">{{ row.height }}</td>
</ng-container>
<!-- ここで行の繰り返しを指定 -->
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
</pre>
[[Category:Programming]]
