【Angular】mat-tableでテーブル作成

mat-tableは、Angularが提供するマテリアルデザイン(ユーザーが直感的に操作しやすいデザイン)のテーブルコンポーネントになります。

本記事では、このmat-tableを用いてAngularでテーブルを表示させましょう。

本記事のAngularのバージョン

バージョン　Angular CLI: 16.1.5

準備

コンポーネント生成

Angularのワークスペースで新しくコンポーネントを用意します。

$ ng g c mat-table

mat-tableは、好みのコンポーネント名に変えていただいてよいです。

app.component.html

<app-mat-table></app-mat-table>

app.module.ts

mat-tableを用いるには、必要なモジュールをインポートする必要があります。

// 省略
import {MatTableModule} from '@angular/material/table';　// 追加

@NgModule({
  declarations: [
　　// 省略
  ],
  imports: [
    // 省略
    MatTableModule,　//追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

サンプルコード

mat-tableが使えるようになりましたので、コンポーネントにコードを書いていきます。

mat-table.component.ts

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

export interface AreaByPrefecture {
  name:string,
  area:number
}

@Component({
  selector: 'app-mat-table',
  templateUrl: './mat-table.component.html',
  styleUrls: ['./mat-table.component.css']
})


export class MatTableSimpleComponent {
  areaByPrefecture:AreaByPrefecture[] = 
  [ { name: '北海道', area: 83456 },
    { name: '青森' , area: 9607 },
    { name: '岩手県', area: 15278 },
    { name: '宮城県', area: 7734 },
    { name: '秋田県', area: 11612},
    { name: '山形県', area: 9323 },
    { name: '福島県', area: 13782}
  ];
  columns:string[] = ['都道府県名','面積(km^2)'];
}

areaByPrefectureは、mat-tableで表示させるデータになります。

columnsは、mat-tableのテーブルヘッダーになります。

mat-table.component.html

<mat-table [dataSource]="areaByPrefecture">
    <ng-container matColumnDef="都道府県名">
        <th mat-header-cell *matHeaderCellDef>都道府県名</th>
        <td mat-cell *matCellDef="let data">{{ data.name }}</td>
    </ng-container>
    <ng-container matColumnDef="面積(km^2)">
        <th mat-header-cell *matHeaderCellDef>面積(km^2)</th>
        <td mat-cell *matCellDef="let data">{{ data.area }}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="columns"></tr>
    <tr mat-row *matRowDef="let row; columns: columns"></tr>
</mat-table>

１行目のdataSourceにデータを渡します。

2~5行目と6~9行目は、テーブルの列を定義しています。

10,11行目は、テーブルの行を定義しています。