From 083132b36548e94cadd87058a1e861113960d755 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 15 Jul 2020 17:28:39 +0200
Subject: [PATCH] fix(table): no data row not shown if data source is empty on
 init

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.
---
 src/cdk/table/table.spec.ts                       | 8 ++++++++
 src/cdk/table/table.ts                            | 1 +
 src/material-experimental/mdc-table/table.spec.ts | 9 +++++++++
 src/material/table/table.spec.ts                  | 9 +++++++++
 4 files changed, 27 insertions(+)

diff --git a/src/cdk/table/table.spec.ts b/src/cdk/table/table.spec.ts
index bc5a447ad723..6d28c1c66671 100644
--- a/src/cdk/table/table.spec.ts
+++ b/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(() => {
diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts
index 1dabd49ad286..9d2e4df98ddc 100644
--- a/src/cdk/table/table.ts
+++ b/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;
     }
 
diff --git a/src/material-experimental/mdc-table/table.spec.ts b/src/material-experimental/mdc-table/table.spec.ts
index 8a95ab53574c..eb2aaf736ba4 100644
--- a/src/material-experimental/mdc-table/table.spec.ts
+++ b/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', () => {
diff --git a/src/material/table/table.spec.ts b/src/material/table/table.spec.ts
index a64d1b7dc0d0..92a6b7b7b54b 100644
--- a/src/material/table/table.spec.ts
+++ b/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', () => {