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

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

* minor changes

* comment stuff

* add column type

* explicit testing:

* fix observable type

* sync

* remove fdescribe

* fix test

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

@@ -2,6 +2,8 @@ import {Component} from '@angular/core';
 import {PeopleDatabase} from './people-database';
 import {PersonDataSource} from './person-data-source';
 
+type UserProperties = 'userId' | 'userName' | 'progress' | 'color';
+
 @Component({
   moduleId: module.id,
   selector: 'data-table-demo',
@@ -10,7 +12,7 @@ import {PersonDataSource} from './person-data-source';
 })
 export class DataTableDemo {
   dataSource: PersonDataSource;
-  propertiesToDisplay = ['userId', 'userName', 'progress', 'color'];
+  propertiesToDisplay: UserProperties[] = ['userId', 'userName', 'progress', 'color'];
 
   constructor(private _peopleDatabase: PeopleDatabase) { }
 
@@ -22,4 +24,13 @@ export class DataTableDemo {
     let distanceFromMiddle = Math.abs(50 - progress);
     return distanceFromMiddle / 50 + .3;
   }
+
+  toggleColorColumn() {
+    let colorColumnIndex = this.propertiesToDisplay.indexOf('color');
+    if (colorColumnIndex == -1) {
+      this.propertiesToDisplay.push('color');
+    } else {
+      this.propertiesToDisplay.splice(colorColumnIndex, 1);
+    }
+  }
 }

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

@@ -10,7 +10,7 @@ export class PersonDataSource extends DataSource<any> {
   }
 
   connect(collectionViewer: CollectionViewer): Observable<UserData[]> {
-    return collectionViewer.viewChanged.map((view: {start: number, end: number}) => {
+    return collectionViewer.viewChange.map((view: {start: number, end: number}) => {
       // Set the rendered rows length to the virtual page size. Fill in the data provided
       // from the index start until the end index or pagination size, whichever is smaller.
       this._renderedData.length = this._peopleDatabase.data.length;

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

@@ -75,6 +75,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.
@@ -165,6 +166,7 @@ export class DemoMaterialModule {}
     SlideToggleDemo,
     SpagettiPanel,
     StyleDemo,
+    TableHeaderDemo,
     ToolbarDemo,
     TooltipDemo,
     TabsDemo,

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

@@ -1,7 +1,7 @@
 import {Observable} from 'rxjs/Observable';
 
 export interface CollectionViewer {
-  viewChanged: Observable<{start: number, end: number}>;
+  viewChange: Observable<{start: number, end: number}>;
 }
 
 export abstract class DataSource<T> {

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

@@ -96,6 +96,8 @@ describe('CdkTable', () => {
     });
   });
 
+  // TODO(andrewseguin): Add test for dynamic classes on header/rows
+
   it('should use differ to add/remove/move rows', () => {
     // Each row receives an attribute 'initialIndex' the element's original place
     getRows(tableElement).forEach((row: Element, index: number) => {
@@ -129,26 +131,57 @@ describe('CdkTable', () => {
     expect(changedRows[2].getAttribute('initialIndex')).toBe(null);
   });
 
-  // TODO(andrewseguin): Add test for dynamic classes on header/rows
-
   it('should match the right table content with dynamic data', () => {
     const initialDataLength = dataSource.data.length;
     expect(dataSource.data.length).toBe(3);
-    const headerContent = ['Column A', 'Column B', 'Column C'];
 
-    const initialTableContent = [headerContent];
-    dataSource.data.forEach(rowData => initialTableContent.push([rowData.a, rowData.b, rowData.c]));
-    expect(tableElement).toMatchTableContent(initialTableContent);
+    let data = dataSource.data;
+    expect(tableElement).toMatchTableContent([
+      ['Column A', 'Column B', 'Column C'],
+      [data[0].a, data[0].b, data[0].c],
+      [data[1].a, data[1].b, data[1].c],
+      [data[2].a, data[2].b, data[2].c],
+    ]);
 
     // Add data to the table and recreate what the rendered output should be.
     dataSource.addData();
     expect(dataSource.data.length).toBe(initialDataLength + 1); // Make sure data was added
+
+    data = dataSource.data;
+    expect(tableElement).toMatchTableContent([
+      ['Column A', 'Column B', 'Column C'],
+      [data[0].a, data[0].b, data[0].c],
+      [data[1].a, data[1].b, data[1].c],
+      [data[2].a, data[2].b, data[2].c],
+      [data[3].a, data[3].b, data[3].c],
+    ]);
+  });
+
+  it('should be able to dynamically change the columns for header and rows', () => {
+    expect(dataSource.data.length).toBe(3);
+
+    let data = dataSource.data;
+    expect(tableElement).toMatchTableContent([
+      ['Column A', 'Column B', 'Column C'],
+      [data[0].a, data[0].b, data[0].c],
+      [data[1].a, data[1].b, data[1].c],
+      [data[2].a, data[2].b, data[2].c],
+    ]);
+
+    // Remove column_a and swap column_b/column_c.
+    component.columnsToRender = ['column_c', 'column_b'];
     fixture.detectChanges();
-    fixture.detectChanges();
 
-    const changedTableContent = [headerContent];
-    dataSource.data.forEach(rowData => changedTableContent.push([rowData.a, rowData.b, rowData.c]));
-    expect(tableElement).toMatchTableContent(changedTableContent);
+    let changedTableContent = [['Column C', 'Column B']];
+    dataSource.data.forEach(rowData => changedTableContent.push([rowData.c, rowData.b]));
+
+    data = dataSource.data;
+    expect(tableElement).toMatchTableContent([
+      ['Column C', 'Column B'],
+      [data[0].c, data[0].b],
+      [data[1].c, data[1].b],
+      [data[2].c, data[2].b],
+    ]);
   });
 });
 
@@ -172,11 +205,8 @@ class FakeDataSource extends DataSource<TestData> {
 
   connect(collectionViewer: CollectionViewer): Observable<TestData[]> {
     this.isConnected = true;
-    const streams = [collectionViewer.viewChanged, this._dataChange];
-    return Observable.combineLatest(streams).map((results: any[]) => {
-      const [view, data] = results;
-      return data;
-    });
+    const streams = [this._dataChange, collectionViewer.viewChange];
+    return Observable.combineLatest(streams).map(([data]) => data);
   }
 
   addData() {