tests

Author: andrewseguin

src/cdk/table/table.spec.ts

@@ -24,6 +24,7 @@ fdescribe('CdkTable', () => {
         DynamicDataSourceCdkTableApp,
         CustomRoleCdkTableApp,
         TrackByCdkTableApp,
+        DynamicColumnDefinitionsCdkTableApp,
         RowContextCdkTableApp,
       ],
     }).compileComponents();
@@ -107,6 +108,16 @@ fdescribe('CdkTable', () => {
     expect(fixture.nativeElement.querySelector('cdk-table').getAttribute('role')).toBe('treegrid');
   });
 
+  fit('should be able to dynamically add/remove column definitions', () => {
+    const dynamicColumnDefFixture = TestBed.createComponent(DynamicColumnDefinitionsCdkTableApp);
+    dynamicColumnDefFixture.detectChanges();
+
+    const dynamicColumnDefComp = dynamicColumnDefFixture.componentInstance;
+    expect(dynamicColumnDefComp.dynamicColumns.push('columnA'));
+
+    dynamicColumnDefFixture.detectChanges();
+  });
+
   it('should re-render the rows when the data changes', () => {
     dataSource.addData();
     fixture.detectChanges();
@@ -590,34 +601,25 @@ 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 [cdkColumnDef]="column" *ngFor="let column of dynamicColumns">
+        <cdk-header-cell *cdkHeaderCellDef> {{column}}</cdk-header-cell>
+        <cdk-cell *cdkCellDef="let row"> {{column}}</cdk-cell>
       </ng-container>
 
-      <cdk-header-row *cdkHeaderRowDef="dynamicColumnIds"></cdk-header-row>
-      <cdk-row *cdkRowDef="let row; columns: dynamicColumnIds;"></cdk-row>
+      <cdk-header-row *cdkHeaderRowDef="dynamicColumns"></cdk-header-row>
+      <cdk-row *cdkRowDef="let row; columns: dynamicColumns;"></cdk-row>
     </cdk-table>
   `
 })
 class DynamicColumnDefinitionsCdkTableApp {
-  dynamicColumnDefs: any[] = [];
-  dynamicColumnIds: string[] = [];
+  dynamicColumns: any[] = [];
 
   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);
+    this.dynamicColumns.push(this.dynamicColumns.length);
   }
 }
 

src/cdk/table/table.ts

@@ -190,6 +190,7 @@ export class CdkTable<T> implements CollectionViewer {
   }
 
   ngAfterContentChecked() {
+    console.log('Content checked');
     this._updateColumnDefinitions();
   }
 
@@ -224,6 +225,7 @@ export class CdkTable<T> implements CollectionViewer {
 
   /** Update the map containing the content's column definitions. */
   private _updateColumnDefinitions() {
+    console.log('Updating columns');
     this._columnDefinitionsByName.clear();
     this._columnDefinitions.forEach(columnDef => {
       if (this._columnDefinitionsByName.has(columnDef.name)) {

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

@@ -36,7 +36,7 @@
 <h3>CdkTable With Dynamic Column Def</h3>
 
 <cdk-table [dataSource]="dataSource">
-  <ng-container [cdkColumnDef]="column.id" *ngFor="let column of dynamicColumnDefs">
+  <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>