fix(table): render cells even if data is falsy (#7914)

* fix(table): render cells even if data is falsy

* add test

* test naming

* fix all usages of evensimpler

Author: andrewseguin

src/cdk/table/table.spec.ts

@@ -37,7 +37,8 @@ describe('CdkTable', () => {
         UndefinedColumnsCdkTableApp,
         WhenRowCdkTableApp,
         WhenRowWithoutDefaultCdkTableApp,
-        WhenRowMultipleDefaultsCdkTableApp
+        WhenRowMultipleDefaultsCdkTableApp,
+        BooleanRowCdkTableApp
       ],
     }).compileComponents();
   }));
@@ -106,6 +107,21 @@ describe('CdkTable', () => {
     });
   });
 
+  it('should render cells even if row data is falsy', () => {
+    const booleanRowCdkTableAppFixture = TestBed.createComponent(BooleanRowCdkTableApp);
+    const booleanRowCdkTableElement =
+        booleanRowCdkTableAppFixture.nativeElement.querySelector('cdk-table');
+    booleanRowCdkTableAppFixture.detectChanges();
+
+    expectTableToMatchContent(booleanRowCdkTableElement, [
+      [''], // Header row
+      ['false'], // Data rows
+      ['true'],
+      ['false'],
+      ['true'],
+    ]);
+  });
+
   it('should be able to apply class-friendly css class names for the column cells', () => {
     const crazyColumnNameAppFixture = TestBed.createComponent(CrazyColumnNameCdkTableApp);
     const crazyColumnNameTableElement =
@@ -636,6 +652,16 @@ class FakeDataSource extends DataSource<TestData> {
   }
 }
 
+class BooleanDataSource extends DataSource<boolean> {
+  _dataChange = new BehaviorSubject<boolean[]>([false, true, false, true]);
+
+  connect(): Observable<boolean[]> {
+    return this._dataChange;
+  }
+
+  disconnect() { }
+}
+
 @Component({
   template: `
     <cdk-table [dataSource]="dataSource">
@@ -668,6 +694,23 @@ class SimpleCdkTableApp {
   @ViewChild(CdkTable) table: CdkTable<TestData>;
 }
 
+@Component({
+  template: `
+    <cdk-table [dataSource]="dataSource">
+      <ng-container cdkColumnDef="column_a">
+        <cdk-header-cell *cdkHeaderCellDef></cdk-header-cell>
+        <cdk-cell *cdkCellDef="let data"> {{data}} </cdk-cell>
+      </ng-container>
+
+      <cdk-header-row *cdkHeaderRowDef="['column_a']"></cdk-header-row>
+      <cdk-row *cdkRowDef="let row; columns: ['column_a']"></cdk-row>
+    </cdk-table>
+  `
+})
+class BooleanRowCdkTableApp {
+  dataSource = new BooleanDataSource();
+}
+
 @Component({
   template: `
     <cdk-table [dataSource]="dataSource">

src/cdk/table/table.ts

@@ -360,10 +360,7 @@ export class CdkTable<T> implements CollectionViewer {
     //   CdkCellOutlet was instantiated as a result  of `createEmbeddedView`.
     this._rowPlaceholder.viewContainer.createEmbeddedView(row.template, context, index);
 
-    // Insert empty cells if there is no data to improve rendering time.
-    const cells = rowData ? this._getCellTemplatesForRow(row) : [];
-
-    cells.forEach(cell => {
+    this._getCellTemplatesForRow(row).forEach(cell => {
       CdkCellOutlet.mostRecentCellOutlet._viewContainer.createEmbeddedView(cell.template, context);
     });