fix(table): no data row not shown if data source is empty on init

src/cdk/table/table.spec.ts

@@ -301,6 +301,14 @@ describe('CdkTable', () => {
       expect(tableElement.textContent!.trim()).not.toContain('No data');
     });
 
+    it('should show the no data row if there is no data on init', () => {
+      fixture.destroy();
+      fixture = TestBed.createComponent(SimpleCdkTableApp);
+      fixture.componentInstance.dataSource.data = [];
+      fixture.detectChanges();
+      tableElement = fixture.nativeElement.querySelector('.cdk-table');
+      expect(tableElement.textContent!.trim()).toContain('No data');
+    });
   });
 
   it('should render no rows when the data is null', fakeAsync(() => {

src/cdk/table/table.ts

@@ -512,6 +512,7 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
     this._renderRows = this._getAllRenderRows();
     const changes = this._dataDiffer.diff(this._renderRows);
     if (!changes) {
+      this._updateNoDataRow();
       return;
     }
 

src/material-experimental/mdc-table/table.spec.ts

@@ -117,6 +117,15 @@ describe('MDC-based MatTable', () => {
       expect(tbody.textContent.trim()).not.toContain('No data');
     });
 
+    it('should show the no data row if there is no data on init', () => {
+      const fixture = TestBed.createComponent(MatTableApp);
+      fixture.componentInstance.dataSource!.data = [];
+      fixture.detectChanges();
+
+      const tbody = fixture.nativeElement.querySelector('tbody')!;
+      expect(tbody.textContent.trim()).toContain('No data');
+    });
+
   });
 
   it('should render with MatTableDataSource and sort', () => {

src/material/table/table.spec.ts

@@ -104,6 +104,15 @@ describe('MatTable', () => {
       expect(table.textContent.trim()).not.toContain('No data');
     });
 
+    it('should show the no data row if there is no data on init', () => {
+      const fixture = TestBed.createComponent(MatTableApp);
+      fixture.componentInstance.dataSource!.data = [];
+      fixture.detectChanges();
+
+      const table = fixture.nativeElement.querySelector('.mat-table')!;
+      expect(table.textContent.trim()).toContain('No data');
+    });
+
   });
 
   it('should be able to render a table correctly with native elements', () => {