Angular Material Table（10分で基本的使用法を理解）

テーブルの基本的使用法

テーブル作成は、 Angular MaterialのTableを参照しています。
Tableは下記サイトのコンポーネントになります。
https://material.angular.io/

始めに、
cmaterial.module.tsファイルに、
MatTableModuleをインポートします。
cmaterial.module.tsの詳細は、
（別ファイル作成ページ）をご覧ください。

追加するコードは斜め太字になります。


  
import { NgModule } from "@angular/core";
import {MatTableModule} from '@angular/material/table';

@NgModule({
 imports:[MatTableModule],
 exports:[MatTableModule]
})
export class CmaterialModule{}

次は、
app.component.cssファイルに入力します。
widthを100％にすると、
モバイルに合わせて、
画面の横幅一杯に表示されます。


  
table {
    width: 100%;
  }

app.component.tsファイルでは、
まずexport interface Element｛｝で、
データの型を定義します。
そして、
ELEMENT_DATAに、データを書き入れます。
ここで使用しているデータは、
2021年1月13日の新型コロナの都道府県別の感染者数と、
人口密度です。
プログラミング言語はTypeScriptなので、
interfaceで定義した型Elementが、
ELEMENT_DATAの型になります。

app.component.htmlで使うため、
displayedColumnsデータ列を定義します。
dataSource変数には、ELEMENT_DATAを入力します。
下記プログラムの追加コードは、斜め太字になります。


  
import {Component} from '@angular/core';

export interface Element {
  name: string;
  position: number;
  covid19_total:number;
  population_density: number;  
}
 
const ELEMENT_DATA: Element[] = [
  {position: 1, name: '東京都', covid19_total: 78566, population_density:6367},
  {position: 2, name: '大阪府', covid19_total: 35842, population_density:4627},
  {position: 3, name: '神奈川県', covid19_total: 29706, population_density:3813},
  {position: 4, name: '愛知県', covid19_total: 20087, population_density:1457},
  {position: 5, name: '埼玉県', covid19_total: 18824, population_density:1933}  
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  title = 'exe-app';

  displayedColumns: string[] = ['position', 'name', 'covid19_total', 'population_density'];
  dataSource = ELEMENT_DATA;
}

次はapp.component.htmlです。
上から順にみていきます。

table mat-tableで、
マテリアルテーブルを定義しています。
[dataSource]="dataSource"では、
テーブルに表示したいデータを入力しています。
mat-elevation-z8は、マテリアルデザイン要素の高さを表します。
これはAngular Materialのスペック（仕様）に適合するものです。
elevation（高さ）は0から24までありますが、
z8は8番目の高さです。

ng-containerタグで、小部分に分けています。
matColumnDefセレクターは、マットテーブルの列を定義しています。
th mat-header-cell は
マットテーブルの見出しを定義しています。
matHeaderCellDefセレクターは、ヘッダーセルを定義しています。

td mat-cellは
マットテーブルの個々のセルを定義しています。
matCellDefセレクターはセルを定義しています。

{{式}}は埋め込まれた式を参照します。
"let element"ではデータの数だけ、
elementが繰り返されます。


  
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>
  
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> 都道府県名 </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
  
    <ng-container matColumnDef="covid19_total">
      <th mat-header-cell *matHeaderCellDef> 新型コロナ感染者数 （人）</th>
      <td mat-cell *matCellDef="let element"> {{element.covid19_total}} </td>
    </ng-container>
  
    <ng-container matColumnDef="population_density">
      <th mat-header-cell *matHeaderCellDef> 人口密度（人/㎢） </th>
      <td mat-cell *matCellDef="let element"> {{element.population_density}} </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

マットテーブルはテンプレートの終わりに、 


  
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

このコードが必要になります。
tr mat-header-rowは、マットヘッダー行です。
matHeaderRowDefセレクタでは、displayedColumnsを定義しています。
tr mat-rowは、マットヘッダー行です。
matRowDefセレクタでは、
各行、各列にdisplayedColumnsのデータ列を定義しています。

今回は以上です。