Angular JavaScript Webアプリケーション

AngularによるWebアプリ開発⑧~Mat-Tableでテーブルを作成する

この記事は約8分で読めます。

 

シリーズ一覧

 

 

 

【作業環境】

  • windows10
  • Angular8.23

 

 

Angular Materialによるテーブル作成

 

# サンプル用コンポーネントを作成
$ ng generate component

 

<app.module.ts>

~~~~
import { MatTableModule } from "@angular/material"; //これを追加

@NgModule({
  declarations: [
    AppComponent,
    ~~~~
    NgtableSampleComponent, //
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ~~~~
    MatTableModule, // これを追加!
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

 

 

<app.routing.module.ts>

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
~~~~
import { NgtableSampleComponent } from "./ngtable-sample/ngtable-sample.component"; //これを追加!


const routes: Routes = [
  ~~~~
  { path:'mattable-sample', component:NgtableSampleComponent} //これを追加!
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

 

 

スポンサーリンク
スポンサーリンク

mat-tableの作成

 

これでコンポーネントとモジュールの読み込みは完了したので、テーブルを作っていきます。

 

<ngtable-sample.component.ts>

import { Component, OnInit } from "@angular/core";

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

@Component({
  selector: "app-ngtable-sample",
  templateUrl: "./ngtable-sample.component.html",
  styleUrls: ["./ngtable-sample.component.css"],
})
export class NgtableSampleComponent implements OnInit {
  ELEMENT_DATA: PeriodicElement[] = [
    { position: 1, name: "Hydrogen", weight: 1.0079, symbol: "H" },
    { position: 2, name: "Helium", weight: 4.0026, symbol: "He" },
    { position: 3, name: "Lithium", weight: 6.941, symbol: "Li" },
    { position: 4, name: "Beryllium", weight: 9.0122, symbol: "Be" },
    { position: 5, name: "Boron", weight: 10.811, symbol: "B" },
    { position: 6, name: "Carbon", weight: 12.0107, symbol: "C" },
    { position: 7, name: "Nitrogen", weight: 14.0067, symbol: "N" },
    { position: 8, name: "Oxygen", weight: 15.9994, symbol: "O" },
    { position: 9, name: "Fluorine", weight: 18.9984, symbol: "F" },
    { position: 10, name: "Neon", weight: 20.1797, symbol: "Ne" },
  ];

  constructor() {}

  ngOnInit() {}

  displayedColumns: string[] = ["position", "name", "weight", "symbol"];
  dataSource = this.ELEMENT_DATA;
}

 

 

<ngtable-sample.component.html>

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

<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>

<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>

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

 

<ngtable-sample.component.css>

 

 

 

コードを見れば分かりますが、tsファイルでテーブルに表示させるデータの中身と列名(displaycolumn)を定義してhtml側でそれを表示させるという感じになっています。

 

そして、http://localhost:4200/mattable-sampleにアクセスすると以下のような画面になっています。

 

 

 

 

終わり

 

Angularのテーブルはちょっと扱いずらいし、別にそこまでモダンって感じでもないので使わなくてもいいような気がする。

 

縦線が入ってないのも気になるし、ヘッダーが複数行の場合なんかもちょっと手間がかかる。この辺りのmat-tableのカスタマイズの知見については別の記事で解説しているのでそちらを参考にしてほしい。

 

 

関連記事:

 

 

 

 

参照:https://material.angular.io/components/table/overview

 

 

 

 

 

 


プログラミング・スクレイピングツール作成の相談を受け付けています!

クラウドワークス・ココナラ・MENTAなどでPython・SQL・GASなどのプログラミングに関する相談やツール作成などを承っております!

過去の案件事例:

  • Twitter・インスタグラムの自動化ツール作成
  • ウェブサイトのスクレイピングサポート
  • ダッシュボード・サイト作成
  • データエンジニア転職相談

これまでの案件例を見る

キャリア相談もお気軽に!文系学部卒からエンジニア・データサイエンティストへの転職経験をもとに、未経験者がどう進むべきかのアドバイスを提供します。


スポンサーリンク
/* プログラミング速報関連記事一覧表示 */
ミナピピンの研究室

コメント

  1. […] 前回の記事でAngular-materialによるmat-tableの作り方については解説しましたが、実際の業務ではヘッダーが複数行あったり、編集ボタンでテーブルの中身が書き替えられるみたいな機能の実 […]

タイトルとURLをコピーしました