checkin

Author: andrewseguin

src/cdk/table/table.ts

@@ -193,6 +193,10 @@ export class CdkTable<T> implements CollectionViewer {
       this._columnDefinitionsByName.set(columnDef.name, columnDef);
     });
 
+    this._columnDefinitions.changes.subscribe(() => {
+      console.log('Column def change');
+    });
+
     // Re-render the rows if any of their columns change.
     // TODO(andrewseguin): Determine how to only re-render the rows that have their columns changed.
     const columnChangeEvents = this._rowDefinitions.map(rowDef => rowDef.columnsChange);
@@ -206,6 +210,7 @@ export class CdkTable<T> implements CollectionViewer {
 
     // Re-render the header row if the columns change
     takeUntil.call(this._headerDefinition.columnsChange, this._onDestroy).subscribe(() => {
+      console.log('Header columns changed');
       this._headerRowPlaceholder.viewContainer.clear();
       this._renderHeaderRow();
     });

src/demo-app/table/table-demo.html

@@ -25,8 +25,24 @@
     <md-checkbox (change)="toggleHighlight('even', $event.checked)">Even Rows</md-checkbox>
     <md-checkbox (change)="toggleHighlight('odd', $event.checked)">Odd Rows</md-checkbox>
   </div>
+
+  <div>
+    <button md-raised-button (click)="addDynamicColumnDef()">Add Dynamic Column Def</button>
+  </div>
 </div>
 
+<h3>CdkTable With Dynamic Column Def</h3>
+
+<cdk-table [dataSource]="dataSource">
+  <ng-container cdkColumnDef="column.id" *ngFor="let column of dynamicColumns">
+    <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>
+
 <h3>CdkTable Example</h3>
 
 <cdk-table #table mdSort

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

@@ -21,6 +21,9 @@ export class TableDemo {
   changeReferences = false;
   highlights = new Set<string>();
 
+  dynamicColumns: any[] = [];
+  dynamicColumnIds: string[] = [];
+
   @ViewChild(MdPaginator) _paginator: MdPaginator;
 
   @ViewChild(MdSort) sort: MdSort;
@@ -31,6 +34,18 @@ export class TableDemo {
     this.connect();
   }
 
+  addDynamicColumnDef() {
+    const properties = ['userId', 'userName', 'progress', 'color'];
+    const nextProperty = properties[this.dynamicColumns.length];
+    this.dynamicColumns.push({
+      id: nextProperty,
+      property: nextProperty,
+      headerText: nextProperty
+    });
+
+    this.dynamicColumnIds.push(nextProperty);
+  }
+
   connect() {
     this.displayedColumns = ['userId', 'userName', 'progress', 'color'];
     this.dataSource = new PersonDataSource(this._peopleDatabase,