update

Author: andrewseguin

src/cdk/table/row.ts

@@ -50,7 +50,7 @@ export abstract class BaseRowDef {
   }
 
   /**
-   * Returns the difference between the current columns and the collumns from the last diff, or null
+   * Returns the difference between the current columns and the columns from the last diff, or null
    * if there is no difference.
    */
   getColumnsDiff(): IterableChanges<any> | null {

src/cdk/table/table.spec.ts

@@ -8,7 +8,7 @@ import {combineLatest} from 'rxjs/observable/combineLatest';
 import {CdkTableModule} from './index';
 import {map} from 'rxjs/operator/map';
 
-describe('CdkTable', () => {
+fdescribe('CdkTable', () => {
   let fixture: ComponentFixture<SimpleCdkTableApp>;
 
   let component: SimpleCdkTableApp;
@@ -587,6 +587,40 @@ class TrackByCdkTableApp {
   }
 }
 
+@Component({
+  template: `
+    <cdk-table [dataSource]="dataSource">
+      <ng-container [cdkColumnDef]="column.id" *ngFor="let column of dynamicColumnDefs">
+        <cdk-header-cell *cdkHeaderCellDef> {{column.headerText}} </cdk-header-cell>
+        <cdk-cell *cdkCellDef="let row"> {{row[column.property]}} </cdk-cell>
+      </ng-container>
+
+      <cdk-header-row *cdkHeaderRowDef="dynamicColumnIds"></cdk-header-row>
+      <cdk-row *cdkRowDef="let row; columns: dynamicColumnIds;"></cdk-row>
+    </cdk-table>
+  `
+})
+class DynamicColumnDefinitionsCdkTableApp {
+  dynamicColumnDefs: any[] = [];
+  dynamicColumnIds: string[] = [];
+
+  dataSource: FakeDataSource = new FakeDataSource();
+  columnsToRender = ['column_a', 'column_b'];
+
+  @ViewChild(CdkTable) table: CdkTable<TestData>;
+
+  addDynamicColumnDef() {
+    const nextProperty = this.dynamicColumnDefs.length;
+    this.dynamicColumnDefs.push({
+      id: nextProperty,
+      property: nextProperty,
+      headerText: nextProperty
+    });
+
+    this.dynamicColumnIds = this.dynamicColumnDefs.map(columnDef => columnDef.id);
+  }
+}
+
 @Component({
   template: `
     <cdk-table [dataSource]="dataSource" role="treegrid">

src/cdk/table/table.ts

@@ -36,6 +36,7 @@ import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {Subscription} from 'rxjs/Subscription';
 import {Subject} from 'rxjs/Subject';
 import {CdkCellDef, CdkColumnDef, CdkHeaderCellDef} from './cell';
+import {startWith} from 'rxjs/operator/startWith';
 
 /**
  * Returns an error to be thrown when attempting to find an unexisting column.
@@ -46,6 +47,14 @@ export function getTableUnknownColumnError(id: string) {
   return new Error(`cdk-table: Could not find column with id "${id}".`);
 }
 
+/**
+ * Returns an error to be thrown when attempting to find an unexisting column.
+ * @docs-private
+ */
+export function getTableDuplicateColumnNameError(name: string) {
+  return new Error(`cdk-table: Duplicate column definition name provided: "${name}".`);
+}
+
 /**
  * Provides a handle for the table to grab the view container's ng-container to insert data rows.
  * @docs-private
@@ -175,6 +184,11 @@ export class CdkTable<T> implements CollectionViewer {
     this._dataDiffer = this._differs.find([]).create(this._trackByFn);
   }
 
+  ngAfterContentInit() {
+    this._updateColumnDefinitions();
+    this._columnDefinitions.changes.subscribe(() => this._updateColumnDefinitions());
+  }
+
   ngAfterContentChecked() {
     this._updateColumnDefinitions();
   }
@@ -210,8 +224,11 @@ export class CdkTable<T> implements CollectionViewer {
 
   /** Update the map containing the content's column definitions. */
   private _updateColumnDefinitions() {
-    // TODO(andrewseguin): Throw an error if two columns share the same name
+    this._columnDefinitionsByName.clear();
     this._columnDefinitions.forEach(columnDef => {
+      if (this._columnDefinitionsByName.has(columnDef.name)) {
+        throw getTableDuplicateColumnNameError(columnDef.name);
+      }
       this._columnDefinitionsByName.set(columnDef.name, columnDef);
     });
   }

src/demo-app/table/table-demo.ts

@@ -47,6 +47,7 @@ export class TableDemo {
       property: nextProperty,
       headerText: nextProperty
     });
+
     this.dynamicColumnIds = this.dynamicColumnDefs.map(columnDef => columnDef.id);
   }