feat(data-table): re-render when columns change

Author: andrewseguin

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

@@ -1,5 +1,9 @@
 <div class="demo-table-container mat-elevation-z4">
 
+  <table-header-demo (shiftColumns)="propertiesToDisplay.push(propertiesToDisplay.shift())"
+                     (toggleColorColumn)="toggleColorColumn()">
+  </table-header-demo>
+
   <cdk-table #table [dataSource]="dataSource">
 
     <!-- Column Definition: ID -->

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

@@ -3,6 +3,7 @@
   display: flex;
   flex-direction: column;
   max-height: 800px;
+  background: white;
 
   // Table fills in the remaining area with a scroll
   .cdk-table {
@@ -17,7 +18,6 @@
  */
 .cdk-table {
   display: block;
-  background: white;
 }
 
 .cdk-row, .cdk-header-row {

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

@@ -22,4 +22,13 @@ export class DataTableDemo {
     let distanceFromMiddle = Math.abs(50 - progress);
     return distanceFromMiddle / 50 + .3;
   }
+
+  toggleColorColumn() {
+    let colorColumnIndex = this.propertiesToDisplay.findIndex((col: string) => col === 'color');
+    if (colorColumnIndex == -1) {
+      this.propertiesToDisplay.push('color');
+    } else {
+      this.propertiesToDisplay.splice(colorColumnIndex, 1);
+    }
+  }
 }

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

@@ -0,0 +1,19 @@
+<div class="title">
+  Users
+</div>
+
+<div class="actions">
+  <button md-icon-button [mdMenuTriggerFor]="menu">
+    <md-icon>more_vert</md-icon>
+  </button>
+  <md-menu #menu="mdMenu">
+    <button md-menu-item (click)="shiftColumns.next()">
+      <md-icon>subdirectory_arrow_left</md-icon>
+      Shift Columns Left
+    </button>
+    <button md-menu-item (click)="toggleColorColumn.next()">
+      <md-icon>color_lens</md-icon>
+      Toggle Color Column
+    </button>
+  </md-menu>
+</div>

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

@@ -0,0 +1,15 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 64px;
+  padding: 0 16px;
+}
+
+.title {
+  font-size: 20px;
+}
+
+.actions {
+  color: rgba(0, 0, 0, 0.54);
+}

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

@@ -0,0 +1,12 @@
+import {Component, EventEmitter, Output} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'table-header-demo',
+  templateUrl: 'table-header-demo.html',
+  styleUrls: ['table-header-demo.css'],
+})
+export class TableHeaderDemo {
+  @Output() shiftColumns = new EventEmitter<void>();
+  @Output() toggleColorColumn = new EventEmitter<void>();
+}

src/demo-app/demo-app-module.ts

@@ -72,6 +72,7 @@ import {
   MdTooltipModule,
   OverlayContainer
 } from '@angular/material';
+import {TableHeaderDemo} from './data-table/table-header-demo';
 
 /**
  * NgModule that includes all Material modules that are required to serve the demo-app.
@@ -161,6 +162,7 @@ export class DemoMaterialModule {}
     SlideToggleDemo,
     SpagettiPanel,
     StyleDemo,
+    TableHeaderDemo,
     ToolbarDemo,
     TooltipDemo,
     TabsDemo,

src/lib/core/data-table/data-table.spec.ts

@@ -2,7 +2,6 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {Component, ViewChild} from '@angular/core';
 import {CdkTable} from './data-table';
 import {CollectionViewer, DataSource} from './data-source';
-import {CommonModule} from '@angular/common';
 import {Observable} from 'rxjs/Observable';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {customMatchers} from '../testing/jasmine-matchers';
@@ -118,6 +117,23 @@ describe('CdkTable', () => {
     dataSource.data.forEach(rowData => changedTableContent.push([rowData.a, rowData.b, rowData.c]));
     expect(tableElement).toMatchTableContent(changedTableContent);
   });
+
+  it('should be able to dynamically change the columns for header and rows', () => {
+    expect(dataSource.data.length).toBe(3);
+
+    let initialTableContent = [['Column A', 'Column B', 'Column C']];
+    dataSource.data.forEach(rowData => initialTableContent.push([rowData.a, rowData.b, rowData.c]));
+    expect(tableElement).toMatchTableContent(initialTableContent);
+
+    // Remove column_a and swap column_b/column_c.
+    component.columnsToRender = ['column_c', 'column_b'];
+    fixture.detectChanges();
+    fixture.detectChanges();
+
+    let changedTableContent = [['Column C', 'Column B']];
+    dataSource.data.forEach(rowData => changedTableContent.push([rowData.c, rowData.b]));
+    expect(tableElement).toMatchTableContent(changedTableContent);
+  });
 });
 
 interface TestData {

src/lib/core/data-table/data-table.ts

@@ -5,19 +5,21 @@ import {
   ContentChild,
   ContentChildren,
   Directive,
-  Input,
+  Input, IterableChanges,
   QueryList,
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation
 } from '@angular/core';
+import {CollectionViewer, DataSource} from './data-source';
+import {BaseRowDef, CdkCellOutlet, CdkHeaderRowDef, CdkRowDef} from './row';
+import {CdkCellDef, CdkColumnDef, CdkHeaderCellDef} from './cell';
+import {Subject} from 'rxjs/Subject';
+import {Observable} from 'rxjs/Observable';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import 'rxjs/add/operator/let';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/observable/combineLatest';
-import {CollectionViewer, DataSource} from './data-source';
-import {CdkCellOutlet, CdkHeaderRowDef, CdkRowDef} from './row';
-import {CdkCellDef, CdkColumnDef, CdkHeaderCellDef} from './cell';
 
 /**
  * Provides a handle for the table to grab the view container's ng-container to insert data rows.
@@ -62,14 +64,17 @@ export class CdkTable implements CollectionViewer {
   @Input() dataSource: DataSource<any>;
 
   // TODO(andrewseguin): Remove max value as the end index
-  // and instead calculate the view on init and scroll.
+  //   and instead calculate the view on init and scroll.
   /**
    * Stream containing the latest information on what rows are being displayed on screen.
    * Can be used by the data source to as a heuristic of what data should be provided.
    */
   viewChanged =
       new BehaviorSubject<{start: number, end: number}>({start: 0, end: Number.MAX_VALUE});
 
+  /** Stream that emits when a row def has a change to its array of columns to render. */
+  columnsChange = new Observable<void[]>();
+
   /**
    * Map of all the user's defined columns identified by name.
    * Contains the header and data-cell templates.
@@ -99,7 +104,7 @@ export class CdkTable implements CollectionViewer {
 
   ngOnDestroy() {
     // TODO(andrewseguin): Disconnect from the data source so
-    // that it can unsubscribe from its streams.
+    //   that it can unsubscribe from its streams.
   }
 
   ngOnInit() {
@@ -112,21 +117,32 @@ export class CdkTable implements CollectionViewer {
     this._columnDefinitions.forEach(columnDef => {
       this._columnDefinitionsByName.set(columnDef.name, columnDef);
     });
+
+    // Get and merge the streams for column changes made to the row defs
+    const rowDefs = this._rowDefinitions.toArray().concat(this._headerDefinition);
+    const columnChangeStreams = rowDefs.map((rowDef: BaseRowDef) => rowDef.columnsChange);
+    this.columnsChange = Observable.combineLatest(columnChangeStreams);
   }
 
   ngAfterViewInit() {
-    // TODO(andrewseguin): Re-render the header when the header's columns change.
     this.renderHeaderRow();
 
-    // TODO(andrewseguin): Re-render rows when their list of columns change.
+    // Re-render the header row if the columns changed.
+    this.columnsChange.subscribe(() => {
+      this._headerRowPlaceholder.viewContainer.clear();
+      this.renderHeaderRow();
+    });
+
     // TODO(andrewseguin): If the data source is not
     //   present after view init, connect it when it is defined.
     // TODO(andrewseguin): Unsubscribe from this on destroy.
-    this.dataSource.connect(this).subscribe((rowsData: any[]) => {
+    const streams = [this.dataSource.connect(this), this.columnsChange];
+    Observable.combineLatest(streams).subscribe((result: any[]) => {
+      console.log('Rendering all rows');
       // TODO(andrewseguin): Add a differ that will check if the data has changed,
       //   rather than re-rendering all rows
       this._rowPlaceholder.viewContainer.clear();
-      rowsData.forEach(rowData => this.insertRow(rowData));
+      result[0].forEach(rowData => this.insertRow(rowData));
       this._changeDetectorRef.markForCheck();
     });
   }
@@ -138,8 +154,8 @@ export class CdkTable implements CollectionViewer {
     const cells = this.getHeaderCellTemplatesForRow(this._headerDefinition);
 
     // TODO(andrewseguin): add some code to enforce that exactly
-    // one CdkCellOutlet was instantiated as a result
-    // of `createEmbeddedView`.
+    //   one CdkCellOutlet was instantiated as a result
+    //   of `createEmbeddedView`.
     this._headerRowPlaceholder.viewContainer
         .createEmbeddedView(this._headerDefinition.template, {cells});
     CdkCellOutlet.mostRecentCellOutlet.cells = cells;
@@ -174,6 +190,7 @@ export class CdkTable implements CollectionViewer {
    */
   getHeaderCellTemplatesForRow(headerDef: CdkHeaderRowDef): CdkHeaderCellDef[] {
     return headerDef.columns.map(columnId => {
+      // TODO(andrewseguin): Throw an error if there is no column with this columnId
       return this._columnDefinitionsByName.get(columnId).headerCell;
     });
   }
@@ -184,6 +201,7 @@ export class CdkTable implements CollectionViewer {
    */
   getCellTemplatesForRow(rowDef: CdkRowDef): CdkCellDef[] {
     return rowDef.columns.map(columnId => {
+      // TODO(andrewseguin): Throw an error if there is no column with this columnId
       return this._columnDefinitionsByName.get(columnId).cell;
     });
   }

src/lib/core/data-table/row.ts

@@ -2,35 +2,83 @@ import {
   ChangeDetectionStrategy,
   Component,
   Directive,
-  Input,
+  IterableDiffer,
+  IterableDiffers,
+  SimpleChanges,
   TemplateRef,
   ViewContainerRef
 } from '@angular/core';
 import {CdkCellDef} from './cell';
+import {Subject} from 'rxjs/Subject';
+
+/**
+ * Base class for the CdkHeaderRowDef and CdkRowDef that handles checking their columns inputs
+ * for changes and notifying the table.
+ */
+export abstract class BaseRowDef {
+  /** The columns to be displayed on this row. */
+  columns: string[];
+
+  /** Event stream that emits when changes are made to the columns. */
+  columnsChange: Subject<void> = new Subject<void>();
+
+  /** Differ used to check if any changes were made to the columns. */
+  protected _columnsDiffer: IterableDiffer<any>;
+
+  private viewInitialized = false;
+
+  constructor(public template: TemplateRef<any>,
+              protected _differs: IterableDiffers) { }
+
+  ngAfterViewInit() {
+    this.viewInitialized = true;
+  }
+
+  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.
+    if (!this._columnsDiffer) {
+      this._columnsDiffer = this._differs.find(changes['columns'].currentValue).create();
+    }
+  }
+
+  ngDoCheck(): void {
+    if (!this.viewInitialized || !this._columnsDiffer || !this.columns) { return; }
+
+    // Notify the table if there are any changes to the columns.
+    const changes = this._columnsDiffer.diff(this.columns);
+    if (changes) { this.columnsChange.next(); }
+  }
+}
 
 /**
  * Header row definition for the CDK data-table.
  * Captures the header row's template and other header properties such as the columns to display.
  */
-@Directive({selector: '[cdkHeaderRowDef]'})
-export class CdkHeaderRowDef {
-  @Input('cdkHeaderRowDef') columns: string[];
-
-  constructor(public template: TemplateRef<any>) { }
+@Directive({
+  selector: '[cdkHeaderRowDef]',
+  inputs: ['columns: cdkHeaderRowDef'],
+})
+export class CdkHeaderRowDef extends BaseRowDef {
+  constructor(template: TemplateRef<any>, _differs: IterableDiffers) {
+    super(template, _differs);
+  }
 }
 
 /**
  * Data row definition for the CDK data-table.
  * Captures the header row's template and other row properties such as the columns to display.
  */
-@Directive({selector: '[cdkRowDef]'})
-export class CdkRowDef {
-  @Input('cdkRowDefColumns') columns: string[];
-
+@Directive({
+  selector: '[cdkRowDef]',
+  inputs: ['columns: cdkRowDefColumns'],
+})
+export class CdkRowDef extends BaseRowDef {
   // TODO(andrewseguin): Add an input for providing a switch function to determine
   //   if this template should be used.
-
-  constructor(public template: TemplateRef<any>) { }
+  constructor(template: TemplateRef<any>, _differs: IterableDiffers) {
+    super(template, _differs);
+  }
 }
 
 /**