How to show empty message in data table angular material, If no data found

前端 未结 18 749
别那么骄傲
别那么骄傲 2021-01-07 16:51

I am using this code

 
  
    

        
相关标签:
18条回答
  • 2021-01-07 17:27

    Step #0

    In ts

      dataSource: any = new MatTableDataSource()
    

    Step #1

          <table [dataSource]="dataSource">
    
            <ng-container matColumnDef="nodata">
              <td mat-footer-row *matFooterCellDef [colSpan]="displayedColumns.length" 
              style="text-align: center;">No Data Available</td>
            </ng-container>
    
           <tr mat-footer-row 
             [hidden]="dataSource.data.length >0"
            *matFooterRowDef="['nodata']">
           </tr>
    
         </table>
    
    0 讨论(0)
  • 2021-01-07 17:27

    If anyone uses filter with dataSource, you should watch for dataSource.filteredData.length.

    i.e.

    if (this.dataSource.filteredData.length < 1) {
      this.presentDialog();
    }
    

    or

    <div class="container" *ngIf="dataSource.filteredData.length < 1">
        // Your message here...
    </div>
    
    0 讨论(0)
  • 2021-01-07 17:28

    If you console.log dataSource, you will see the following: dataSource example

    It is not the dataSource itself that is the array, but dataSource.data. dataSource is actually a class that has a property data that contains what you pass into MatTableDataSource (https://github.com/angular/material2/blob/master/src/lib/table/table-data-source.ts) Therefore, this is what you should be using for your *ngIf statement.

    <div *ngIf="dataSource.data.length === 0">
    No Records Found!
    </div>
    

    Hope this helps!

    0 讨论(0)
  • 2021-01-07 17:29

    this worked for me:

    <ng-container matColumnDef="noRecords">
      <td mat-footer-cell *matFooterCellDef>
        No records found
      </td>
    </ng-container>
    
    <tr mat-footer-row *matFooterRowDef="!dataSource.filteredData.length ? ['noRecords'] : []" colspan="2"></tr>
    

    Also note that it's possible you have to add a <td mat-footer-cell *matFooterCellDef></td> for every row if you already use the footer.

    0 讨论(0)
  • 2021-01-07 17:31

    For anyone having the option to do this in the Footer, I have been able to do this by doing following steps in Angular 6/7/8:

    1) In your [ComponentName].component.html

    <table mat-table [dataSource]="dataSourceTable">
        <ng-container matColumnDef="columneName">
                <th mat-header-cell *matHeaderCellDef> Name </th>
                <td mat-cell *matCellDef="let element"> {{element.columnname}} </td>
                <td mat-footer-cell *matFooterCellDef>
                    <!-- Display a download button in the footer when data is available-->
                    <button mat-raised-button color="primary" 
    *ngIf="dataSourceTable.data.length > 0">Download</button>
                    <!--Below code is displayed when there is no data-->
                    <a mat-button *ngIf="dataSourceTable.data.length === 0">No Data 
    Found</a>
                </td>
            </ng-container>
            <!--Below Lines of code generates Header, Row and footer for your table  -->
            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;">
            </tr>
            <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
        </table>
    
    0 讨论(0)
  • 2021-01-07 17:35

    You can simply use the *ngIf directive to check if dataSource is not empty.

     <mat-table *ngIf="dataSource.length > 0" #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>
    
    <p *ngIf="dataSource.length === 0">No records found</p>
    
    0 讨论(0)
提交回复
热议问题