Mat-Tableが0件の時の表示方法【Angular Material】

*matNoDataRow は Angular Material の MatTable を利用し、
テーブルに表示するデータの件数が０件の場合にメッセージ表示をしたい時に利用できます。
カネコチが確認した環境の Angular バージョンは 16 となります。

使い方

下記のように「*matNoDataRow」をmat-tableのタグ内で使用することで、

dataSource内のデータが1件もない時に「データがありません」と表示してくれます。

1
2
3


<mat-table [dataSource]="[hoge]">
  <div *matNoDataRow>データがありません。</div>
</mat-table>

単純に上記を記載すると列が2件以上ある場合に、

テーブルの明細行の画面の左端に「データがありません」と表示されると思います。

これは、１列目に「データがありません」という文字列が入っているためであり、

下記のようにCallSpanを設定し、列を結合した上でCSSを設定すれば行の真ん中に表示させる事が可能です。

1
2
3


<mat-table [dataSource]="[hoge]">
  <div *matNoDataRow [attr.colspan]="列数を指定">データがありません。</div>
</mat-table>

データが0件の時の表示について、

下記のように記載するのかと考えていましたが、

Angular Materialとして用意されているのは、ありがたいですね。

1
2
3


<mat-table [dataSource]="[hoge]">
  <div *ngIf="dataSource.length === 0">データがありません。</div>
</mat-table>