review

Author: andrewseguin

src/cdk/table/table.ts

@@ -88,7 +88,7 @@ export class CdkTable<T> implements CollectionViewer {
   private _renderChangeSubscription: Subscription | null;
 
   /** Map of all the user's defined columns (header and data cell template) identified by name. */
-  private _columnDefinitionsMap = new Map<string,  CdkColumnDef>();
+  private _columnDefinitionsByName = new Map<string,  CdkColumnDef>();
 
   /** Differ used to find the changes in the data provided by the data source. */
   private _dataDiffer: IterableDiffer<T>;
@@ -170,6 +170,7 @@ export class CdkTable<T> implements CollectionViewer {
   }
 
   ngAfterContentChecked() {
+    this._renderUpdatedColumns();
     this._cacheColumnDefinitionsByName();
   }
 
@@ -204,20 +205,20 @@ export class CdkTable<T> implements CollectionViewer {
 
   /** Update the map containing the content's column definitions. */
   private _cacheColumnDefinitionsByName() {
-    this._columnDefinitionsMap.clear();
+    this._columnDefinitionsByName.clear();
     this._columnDefinitions.forEach(columnDef => {
-      if (this._columnDefinitionsMap.has(columnDef.name)) {
+      if (this._columnDefinitionsByName.has(columnDef.name)) {
         throw getTableDuplicateColumnNameError(columnDef.name);
       }
-      this._columnDefinitionsMap.set(columnDef.name, columnDef);
+      this._columnDefinitionsByName.set(columnDef.name, columnDef);
     });
   }
 
   /**
    * Check if the header or rows have changed what columns they want to display. If there is a diff,
    * then re-render that section.
    */
-  private _checkColumnsChange() {
+  private _renderUpdatedColumns() {
     // Re-render the rows when the row definition columns change.
     this._rowDefinitions.forEach(def => {
       if (!!def.getColumnsDiff()) {
@@ -366,7 +367,7 @@ export class CdkTable<T> implements CollectionViewer {
   private _getHeaderCellTemplatesForRow(headerDef: CdkHeaderRowDef): CdkHeaderCellDef[] {
     if (!headerDef.columns) { return []; }
     return headerDef.columns.map(columnId => {
-      const column = this._columnDefinitionsMap.get(columnId);
+      const column = this._columnDefinitionsByName.get(columnId);
 
       if (!column) {
         throw getTableUnknownColumnError(columnId);
@@ -383,7 +384,7 @@ export class CdkTable<T> implements CollectionViewer {
   private _getCellTemplatesForRow(rowDef: CdkRowDef): CdkCellDef[] {
     if (!rowDef.columns) { return []; }
     return rowDef.columns.map(columnId => {
-      const column = this._columnDefinitionsMap.get(columnId);
+      const column = this._columnDefinitionsByName.get(columnId);
 
       if (!column) {
         throw getTableUnknownColumnError(columnId);

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

@@ -19,7 +19,7 @@
   </div>
 </div>
 
-<md-card>
+<md-card class="demo-table-card">
   <h3>
     CdkTable With Dynamic Column Def
     <div>
@@ -47,7 +47,7 @@ <h3>
   </cdk-table>
 </md-card>
 
-<md-card>
+<md-card class="demo-table-card">
   <h3>CdkTable Example</h3>
 
   <div class="demo-highlighter">

src/demo-app/table/table-demo.scss

@@ -22,7 +22,7 @@
 .demo-row-highlight-even { background: #ff0099; }
 .demo-row-highlight-odd { background: #83f52c; }
 
-.mat-card {
+.demo-table-card {
   margin: 24px 0;
   max-height: 200px;
   overflow: auto;