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

…9994)

There's an early `return` in the function that renders all the rows, including the one that is shown for no data, if there were no changes to the data source. This was preventing the no data row from showing up if the data source starts off as empty.

Fixes #19992.

(cherry picked from commit b3099c8)

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', () => {