Angular Material Table With Filter （10分でフィルター付きテーブル）

フィルター機能付きテーブルの作成法

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

フィルター機能付きテーブルは、
（テーブル　基本的使用法）をベースに作成しています。
不明な箇所はそちらの方も参照してください。

cmaterial.module.tsファイルは、
MatFormFieldModule　と、
MatInputModule を、
インポートします。
cmaterial.module.tsの詳細は、
（別ファイル作成ページ）も参照してください。

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


  
import { NgModule } from "@angular/core";
import {MatTableModule} from '@angular/material/table';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

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

次は、
app.component.cssファイルに入力します。
.mat-form-fieldでは、
フォント大きさを14pxと、
フィルタ入力欄の幅を100%に設定します。


  
  table {
    width: 100%;
  }
   .mat-form-field {
   font-size: 14px;
   width: 100%;
  }

app.component.tsファイルでは、
ベースクラスMatTableDataSourceをインポートする必要があります。
dataSource = new MatTableDataSource(ELEMENT_DATA); に、
使用しています。

ELEMENT_DATAに使用しているデータは、
2021年1月13日の新型コロナの都道府県別の感染者数と、
人口密度です。

applyFilter(event: Event) {...};　は、
app.component.htmlで使われます。
入力箇所に文字を入れると、
フィルター機能が働き、
テーブル の値が選別されます。
この時に使用される関数になります。


  
import {Component} from '@angular/core';
//追加コード
import {MatTableDataSource} from '@angular/material/table';

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 = new MatTableDataSource(ELEMENT_DATA);
  //追加コード
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

次はapp.component.htmlです。
追加コードを説明します。
（テーブル　基本的使用法）をベースに作成しています。
不明な箇所はそちらの方も参照してください。

始めの方にある、
mat-form-fieldは、
一般的なテキストフィールドスタイルに、
使用されるコンポーネント です。
mat-labelエレメントは、form fieldのラベル、
matInputディレクティブは、input要素を動作するためのものです。

終わりの方にある、
matNoDataRowデイレクテイブでは、
テキストを表示します。
colspan＝４は列の数が4を表します。
"{{input.value}}"では、input.value式を参照しています。


  
<!--追加コード-->
<mat-form-field>  
  <mat-label>Filter</mat-label>  
  <input matInput (keyup)="applyFilter($event)" placeholder="入力" #input> 
</mat-form-field>
<!---->  
  
<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>
    
    <!--追加コード--> 
    <tr class="mat-row" *matNoDataRow>
      <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
    </tr>  
    <!----> 
    
  </table>
table_filter1
table_filter2