Menu
I am using this code
<mat-table #table [dataSource]="dataSource" matSort > <ng-container matColumnDef="tache"> <mat-header-cell *matHeaderCellDef mat-sort-header> tâche </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.tache}} </mat-cell> </ng-container> <ng-container matColumnDef="outil"> <mat-header-cell *matHeaderCellDef mat-sort-header> outil </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.outil}} </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"> </mat-row> </mat-table> So, how to show empty message "No Record found" in data table.
710
MatCellDef extends CdkCellDefCell definition for the mat-table. Captures the template of a column's data row cell as well as cell-specific properties.
A DataSource is simply a class that has at a minimum the following methods: connect and disconnect . The connect method will be called by the table to provide an Observable that emits the data array that should be rendered.
How to hide Pagination in Angular Material Datatable if there is no row? For this, we will simply add the [hidden] directive of Angular to show/ hide the element based on the boolean value provided. The [hidden] simply adds hidden attribute with style set to display:none if you are using bootstrap.
With Angular Material 10 or above If you want to show a message when not data matches the filter, you can use the *matNoDataRow directive.
<tr class="mat-row" *matNoDataRow> <td class="mat-cell" colspan="9999"> No data matching the filter </td> </tr> It's like bugs is saying, you can just use *ngIf. Compare these two tables here:
https://stackblitz.com/edit/angular-w9ckf8
<mat-toolbar color="primary">My empty table</mat-toolbar> <mat-table #table [dataSource]="dataSourceEmpty" matSort *ngIf="dataSourceEmpty.length > 0"> <ng-container matColumnDef="Name"> <mat-header-cell *matHeaderCellDef mat-sort-header>Name </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell> </ng-container> <ng-container matColumnDef="Age"> <mat-header-cell *matHeaderCellDef mat-sort-header>Age </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.age}} </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="row.toggle(row)"> </mat-row> </mat-table> <div *ngIf="dataSourceEmpty.length === 0">No records found</div> <hr> <mat-toolbar color="primary">My full table</mat-toolbar> <mat-table #table [dataSource]="dataSource" matSort *ngIf="dataSource.length > 0"> <ng-container matColumnDef="Name"> <mat-header-cell *matHeaderCellDef mat-sort-header>Name </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell> </ng-container> <ng-container matColumnDef="Age"> <mat-header-cell *matHeaderCellDef mat-sort-header>Age </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.age}} </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="row.toggle(row)"> </mat-row> </mat-table> <div *ngIf="dataSource.length === 0">No data</div> TS with data:
displayedColumns = ['Name', 'Age'] dataSource = [{name:'Sara',age:17}, {name: 'John', age: 20}] dataSourceEmpty = [] If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
