feat(data-table): allow dynamic data source (#5093)

Author: andrewseguin

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

@@ -1,3 +1,8 @@
+<div class="demo-data-source-actions">
+  <button md-raised-button (click)="connect()">Connect New Data Source</button>
+  <button md-raised-button (click)="disconnect()" [disabled]="!dataSource">Disconnect Data Source</button>
+</div>
+
 <div class="demo-table-container mat-elevation-z4">
 
   <table-header-demo (shiftColumns)="propertiesToDisplay.push(propertiesToDisplay.shift())"

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

@@ -12,6 +12,10 @@
   }
 }
 
+.demo-data-source-actions {
+  margin: 16px 0;
+}
+
 /*
  * Styles to make the demo's cdk-table match the material design spec
  * https://material.io/guidelines/components/data-tables.html
@@ -87,3 +91,4 @@
     font-family: cursive;
   }
 }
+

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

@@ -12,12 +12,21 @@ export type UserProperties = 'userId' | 'userName' | 'progress' | 'color';
 })
 export class DataTableDemo {
   dataSource: PersonDataSource;
-  propertiesToDisplay: UserProperties[] = ['userId', 'userName', 'progress', 'color'];
+  propertiesToDisplay: UserProperties[] = [];
 
-  constructor(private _peopleDatabase: PeopleDatabase) { }
+  constructor(private _peopleDatabase: PeopleDatabase) {
+    this.connect();
+  }
 
-  ngOnInit() {
+  connect() {
+    this.propertiesToDisplay = ['userId', 'userName', 'progress', 'color'];
     this.dataSource = new PersonDataSource(this._peopleDatabase);
+    this._peopleDatabase.initialize();
+  }
+
+  disconnect() {
+    this.dataSource = null;
+    this.propertiesToDisplay = [];
   }
 
   getOpacity(progress: number) {

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

@@ -16,6 +16,12 @@ export class PeopleDatabase {
   data: UserData[] = [];
 
   constructor() {
+    this.initialize();
+  }
+
+  initialize() {
+    LATEST_ID = 0;
+    this.data = [];
     for (let i = 0; i < 100; i++) { this.addPerson(); }
   }
 

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

@@ -21,7 +21,7 @@ describe('CdkTable', () => {
 
     TestBed.configureTestingModule({
       imports: [CdkDataTableModule],
-      declarations: [SimpleCdkTableApp, CustomRoleCdkTableApp],
+      declarations: [SimpleCdkTableApp, DynamicDataSourceCdkTableApp, CustomRoleCdkTableApp],
     }).compileComponents();
 
     fixture = TestBed.createComponent(SimpleCdkTableApp);
@@ -164,6 +164,40 @@ describe('CdkTable', () => {
     ]);
   });
 
+  it('should match the right table content with dynamic data source', () => {
+    fixture = TestBed.createComponent(DynamicDataSourceCdkTableApp);
+    component = fixture.componentInstance;
+    tableElement = fixture.nativeElement.querySelector('cdk-table');
+
+    fixture.detectChanges();  // Let the table render the rows
+    fixture.detectChanges();  // Let the rows render their cells
+
+    // Expect that the component has no data source and the table element reflects empty data.
+    expect(component.dataSource).toBe(undefined);
+    expect(tableElement).toMatchTableContent([
+      ['Column A']
+    ]);
+
+    // Add a data source that has initialized data. Expect that the table shows this data.
+    component.dataSource = new FakeDataSource();
+    fixture.detectChanges();
+
+    let data = component.dataSource.data;
+    expect(tableElement).toMatchTableContent([
+      ['Column A'],
+      [data[0].a],
+      [data[1].a],
+      [data[2].a],
+    ]);
+
+    // Remove the data source and check to make sure the table is empty again.
+    component.dataSource = null;
+    fixture.detectChanges();
+    expect(tableElement).toMatchTableContent([
+      ['Column A']
+    ]);
+  });
+
   it('should be able to dynamically change the columns for header and rows', () => {
     expect(dataSource.data.length).toBe(3);
 
@@ -262,6 +296,26 @@ class SimpleCdkTableApp {
   @ViewChild(CdkTable) table: CdkTable<TestData>;
 }
 
+@Component({
+  template: `
+    <cdk-table [dataSource]="dataSource">
+      <ng-container cdkColumnDef="column_a">
+        <cdk-header-cell *cdkHeaderCellDef> Column A</cdk-header-cell>
+        <cdk-cell *cdkCellDef="let row"> {{row.a}}</cdk-cell>
+      </ng-container>
+
+      <cdk-header-row *cdkHeaderRowDef="columnsToRender"></cdk-header-row>
+      <cdk-row *cdkRowDef="let row; columns: columnsToRender"></cdk-row>
+    </cdk-table>
+  `
+})
+class DynamicDataSourceCdkTableApp {
+  dataSource: FakeDataSource;
+  columnsToRender = ['column_a'];
+
+  @ViewChild(CdkTable) table: CdkTable<TestData>;
+}
+
 @Component({
   template: `
     <cdk-table [dataSource]="dataSource" role="treegrid">
@@ -317,13 +371,19 @@ const tableCustomMatchers: jasmine.CustomMatcherFactories = {
         // Check header cells
         const expectedHeaderContent = expectedTableContent.shift();
         getHeaderCells(tableElement).forEach((cell, index) => {
-          return checkCellContent(cell, expectedHeaderContent[index]);
+          const expected = expectedHeaderContent ?
+              expectedHeaderContent[index] :
+              null;
+          checkCellContent(cell, expected);
         });
 
         // Check data row cells
         getRows(tableElement).forEach((row, rowIndex) => {
           getCells(row).forEach((cell, cellIndex) => {
-            checkCellContent(cell, expectedTableContent[rowIndex][cellIndex]);
+            const expected = expectedHeaderContent ?
+                expectedTableContent[rowIndex][cellIndex] :
+                null;
+            checkCellContent(cell, expected);
           });
         });