fix(table): gracefully handle undefined/null columns (#6862)

Author: andrewseguin

src/cdk/table/row.ts

@@ -42,8 +42,8 @@ export abstract class BaseRowDef {
 
   ngOnChanges(changes: SimpleChanges): void {
     // Create a new columns differ if one does not yet exist. Initialize it based on initial value
-    // of the columns property.
-    const columns = changes['columns'].currentValue;
+    // of the columns property or an empty array if none is provided.
+    const columns = changes['columns'].currentValue || [];
     if (!this._columnsDiffer && columns) {
       this._columnsDiffer = this._differs.find(columns).create();
       this._columnsDiffer.diff(columns);

src/cdk/table/table.spec.ts

@@ -30,6 +30,7 @@ describe('CdkTable', () => {
         DuplicateColumnDefNameCdkTableApp,
         MissingColumnDefCdkTableApp,
         CrazyColumnNameCdkTableApp,
+        UndefinedColumnsCdkTableApp,
       ],
     }).compileComponents();
   }));
@@ -133,6 +134,21 @@ describe('CdkTable', () => {
         .toThrowError(getTableUnknownColumnError('column_a').message);
   });
 
+  it('should not throw an error if columns are undefined on initialization', () => {
+    const undefinedColumnsFixture = TestBed.createComponent(UndefinedColumnsCdkTableApp);
+    undefinedColumnsFixture.detectChanges();
+
+    tableElement = undefinedColumnsFixture.nativeElement.querySelector('cdk-table');
+
+    expect(getHeaderRow(tableElement)).toBeNull('Should be no header without cells');
+
+    // Rows should be empty since there are no columns to display.
+    const rows = getRows(tableElement);
+    expect(rows[0].textContent).toBe('');
+    expect(rows[1].textContent).toBe('');
+    expect(rows[2].textContent).toBe('');
+  });
+
   it('should be able to dynamically add/remove column definitions', () => {
     const dynamicColumnDefFixture = TestBed.createComponent(DynamicColumnDefinitionsCdkTableApp);
     dynamicColumnDefFixture.detectChanges();
@@ -753,6 +769,24 @@ class MissingColumnDefCdkTableApp {
   dataSource: FakeDataSource = new FakeDataSource();
 }
 
+@Component({
+  template: `
+    <cdk-table [dataSource]="dataSource">
+      <ng-container cdkColumnDef="column_a">
+        <cdk-header-cell *cdkHeaderCellDef> Column A</cdk-header-cell>
+        <cdk-cell *cdkCellDef="let row"> {{row.a}}</cdk-cell>
+      </ng-container>
+
+      <cdk-header-row *cdkHeaderRowDef="undefinedColumns"></cdk-header-row>
+      <cdk-row *cdkRowDef="let row; columns: undefinedColumns"></cdk-row>
+    </cdk-table>
+  `
+})
+class UndefinedColumnsCdkTableApp {
+  undefinedColumns;
+  dataSource: FakeDataSource = new FakeDataSource();
+}
+
 @Component({
   template: `
     <cdk-table [dataSource]="dataSource">