diff --git a/src/cdk/table/table.spec.ts b/src/cdk/table/table.spec.ts index c230023c675..a4039547fc4 100644 --- a/src/cdk/table/table.spec.ts +++ b/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 { } } +class BooleanDataSource extends DataSource { + _dataChange = new BehaviorSubject([false, true, false, true]); + + connect(): Observable { + return this._dataChange; + } + + disconnect() { } +} + @Component({ template: ` @@ -668,6 +694,23 @@ class SimpleCdkTableApp { @ViewChild(CdkTable) table: CdkTable; } +@Component({ + template: ` + + + + {{data}} + + + + + + ` +}) +class BooleanRowCdkTableApp { + dataSource = new BooleanDataSource(); +} + @Component({ template: ` diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts index e19152df749..b2df1ea5cca 100644 --- a/src/cdk/table/table.ts +++ b/src/cdk/table/table.ts @@ -360,10 +360,7 @@ export class CdkTable 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); });