feat(cdk/table): add API for registering no data row (#20658)

We have APIs that allow for rows and cells to be registered programmatically for cases
where they aren't descendants of the table, but we didn't have something similar for
the "no data" row. These changes add a method and update the examples.

Fixes #20560.

Author: crisbeto

src/cdk/table/table.spec.ts

@@ -15,7 +15,7 @@ import {BehaviorSubject, combineLatest, Observable, of as observableOf} from 'rx
 import {map} from 'rxjs/operators';
 import {CdkColumnDef} from './cell';
 import {CdkTableModule} from './index';
-import {CdkHeaderRowDef, CdkRowDef, CdkCellOutlet} from './row';
+import {CdkHeaderRowDef, CdkRowDef, CdkCellOutlet, CdkNoDataRow} from './row';
 import {CdkTable} from './table';
 import {
   getTableDuplicateColumnNameError,
@@ -703,6 +703,15 @@ describe('CdkTable', () => {
     ]);
   });
 
+  it('should be able to register a no data row defined outside the table', () => {
+    setupTableTestApp(OuterTableApp, [WrapperCdkTableApp]);
+
+    fixture.componentInstance.dataSource.data = [];
+    fixture.detectChanges();
+
+    expect(tableElement.textContent).toContain('No data');
+  });
+
   describe('using when predicate', () => {
     it('should be able to display different row templates based on the row data', () => {
       setupTableTestApp(WhenRowCdkTableApp);
@@ -2308,13 +2317,15 @@ class RowContextCdkTableApp {
       </ng-container>
 
       <cdk-row *cdkRowDef="let row; columns: columns"></cdk-row>
+      <ng-template cdkNoDataRow>No data</ng-template>
     </cdk-table>
   `
 })
 class WrapperCdkTableApp<T> implements AfterContentInit {
   @ContentChildren(CdkColumnDef) columnDefs: QueryList<CdkColumnDef>;
   @ContentChild(CdkHeaderRowDef) headerRowDef: CdkHeaderRowDef;
   @ContentChildren(CdkRowDef) rowDefs: QueryList<CdkRowDef<T>>;
+  @ContentChild(CdkNoDataRow) noDataRow: CdkNoDataRow;
 
   @ViewChild(CdkTable, {static: true}) table: CdkTable<T>;
 
@@ -2326,6 +2337,7 @@ class WrapperCdkTableApp<T> implements AfterContentInit {
     this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef));
     this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
     this.table.addHeaderRowDef(this.headerRowDef);
+    this.table.setNoDataRow(this.noDataRow);
   }
 }
 

src/cdk/table/table.ts

@@ -281,6 +281,9 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
    */
   private _customFooterRowDefs = new Set<CdkFooterRowDef>();
 
+  /** No data row that was defined outside of the direct content children of the table. */
+  private _customNoDataRow: CdkNoDataRow | null;
+
   /**
    * Whether the header row definition has been changed. Triggers an update to the header row after
    * content is checked. Initialized as true so that the table renders the initial set of rows.
@@ -694,6 +697,11 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
     this._footerRowDefChanged = true;
   }
 
+  /** Sets a no data row definition that was not included as a part of the content children. */
+  setNoDataRow(noDataRow: CdkNoDataRow | null) {
+    this._customNoDataRow = noDataRow;
+  }
+
   /**
    * Updates the header sticky styles. First resets all applied styles with respect to the cells
    * sticking to the top. Then, evaluating which cells need to be stuck to the top. This is
@@ -1228,12 +1236,14 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
 
   /** Creates or removes the no data row, depending on whether any data is being shown. */
   private _updateNoDataRow() {
-    if (this._noDataRow) {
+    const noDataRow = this._customNoDataRow || this._noDataRow;
+
+    if (noDataRow) {
       const shouldShow = this._rowOutlet.viewContainer.length === 0;
 
       if (shouldShow !== this._isShowingNoDataRow) {
         const container = this._noDataRowOutlet.viewContainer;
-        shouldShow ? container.createEmbeddedView(this._noDataRow.templateRef) : container.clear();
+        shouldShow ? container.createEmbeddedView(noDataRow.templateRef) : container.clear();
         this._isShowingNoDataRow = shouldShow;
       }
     }

src/components-examples/material/table/table-wrapped/table-wrapped-example.css

@@ -1,3 +1,7 @@
 table {
   width: 100%;
 }
+
+button {
+  margin: 0 8px 8px 0;
+}

src/components-examples/material/table/table-wrapped/table-wrapped-example.html

@@ -1,3 +1,8 @@
+<div>
+  <button mat-raised-button (click)="clearTable()">Clear table</button>
+  <button mat-raised-button (click)="addData()">Add data</button>
+</div>
+
 <wrapper-table [dataSource]="dataSource" [columns]="displayedColumns"
                matSort #sort="matSort">
   <!-- Custom column definition to be provided to the wrapper table. -->
@@ -8,5 +13,10 @@
 
   <!-- Custom row definitions to be provided to the wrapper table. -->
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns; "></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+  <!-- Row shown when there is no matching data that will be provided to the wrapper table. -->
+  <tr class="mat-row" *matNoDataRow>
+    <td class="mat-cell" colspan="4">No data</td>
+  </tr>
 </wrapper-table>

src/components-examples/material/table/table-wrapped/table-wrapped-example.ts

@@ -6,12 +6,14 @@ import {
   Input,
   AfterViewInit,
   QueryList,
-  ViewChild
+  ViewChild,
+  ContentChild,
 } from '@angular/core';
 import {MatSort} from '@angular/material/sort';
 import {
   MatColumnDef,
   MatHeaderRowDef,
+  MatNoDataRow,
   MatRowDef,
   MatTable,
   MatTableDataSource
@@ -54,6 +56,14 @@ export class TableWrappedExample implements AfterViewInit {
   ngAfterViewInit() {
     this.dataSource.sort = this.sort;
   }
+
+  clearTable() {
+    this.dataSource.data = [];
+  }
+
+  addData() {
+    this.dataSource.data = ELEMENT_DATA;
+  }
 }
 
 /**
@@ -73,6 +83,7 @@ export class WrapperTable<T> implements AfterContentInit {
   @ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList<MatHeaderRowDef>;
   @ContentChildren(MatRowDef) rowDefs: QueryList<MatRowDef<T>>;
   @ContentChildren(MatColumnDef) columnDefs: QueryList<MatColumnDef>;
+  @ContentChild(MatNoDataRow) noDataRow: MatNoDataRow;
 
   @ViewChild(MatTable, {static: true}) table: MatTable<T>;
 
@@ -84,5 +95,6 @@ export class WrapperTable<T> implements AfterContentInit {
     this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef));
     this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
     this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef));
+    this.table.setNoDataRow(this.noDataRow);
   }
 }

tools/public_api_guard/cdk/table.d.ts

@@ -234,6 +234,7 @@ export declare class CdkTable<T> implements AfterContentChecked, CollectionViewe
     removeHeaderRowDef(headerRowDef: CdkHeaderRowDef): void;
     removeRowDef(rowDef: CdkRowDef<T>): void;
     renderRows(): void;
+    setNoDataRow(noDataRow: CdkNoDataRow | null): void;
     updateStickyColumnStyles(): void;
     updateStickyFooterRowStyles(): void;
     updateStickyHeaderRowStyles(): void;