【Angular】Mat Tableでデータがない場合の表示方法！

Q: matNoDataRowが動作しません。

mat-tableのdataSourceがnullまたはundefinedだと機能しません。 空の配列（[]）を設定してください。

2025年3月30日

いずみ

当ページのリンクには広告が含まれています。

この記事で解決できる悩み

AngularのMat Tableでデータがない場合の表示方法は？

いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴10年）で、資格は13個保有しています。

「AngularのMat Tableでデータがない場合の表示方法を知りたい」とお考えではありませんか？

結論からお伝えすると、matNoDataRowを使えばデータがない場合にメッセージを表示できます。

いずみ

超簡単なのでサクッと解説します。

本記事を読めば、AngularのMat Tableでデータがない場合の表示方法について分かるので早速見ていきましょう！

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいませ。

執筆者／監修者

フリーランスエンジニア（保有資格13個）
ブログ・アフィリエイト歴7年（2018年〜）
ブランドせどりで月利50万円⇨脱サラ
投資（仮想通貨・FX）歴7年（2018年〜）
X（旧Twitter）フォロワー約1,900人
運営者情報はこちら

いずみです

【Angular】Mat Tableでデータがない場合の表示方法

早速ですが、AngularのMat Tableでデータがない場合の表示方法を解説します。

matNoDataRowを使用する

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 名前 </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  <tr mat-no-data-row *matNoDataRow>データがありません</tr>
</table>

Angular Materialのmat-tableでは、matNoDataRowを使うとデータがない場合にメッセージを表示できます。

matNoDataRowを設定すれば、データがない場合でも見た目が崩れずユーザーにわかりやすく伝えられます。

列を連結する場合

<tr mat-no-data-row *matNoDataRow>
  <td [attr.colspan]="displayedColumns.length" class="text-center">
    データがありません
  </td>
</tr>

matNoDataRowを使うと1列にしかメッセージが表示されません。

表全体にメッセージを表示したい場合は、colspanを使います。

Angularのバージョンが15以上の場合

<tr *matNoDataRow class="mat-mdc-row mdc-data-table__row">
  <td class="mat-mdc-cell mdc-data-table__cell" [attr.colspan]="columns.length">データがありません。</td>
</tr>

Angularのバージョンが15以上の場合は、上記のように設定すればメッセージが正しく表示されます。