feat(table): add MatTableDataSource (#6747)

* feat(table): add MdTableDataSource

* change license

Author: andrewseguin

src/cdk/rxjs/rx-operators.ts

@@ -6,7 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Observable, ObservableInput} from 'rxjs/Observable';
+// Subscribable needs to be imported because combineLatest has or is using it, but it does not need
+// to be used in any of the explicit typings in this file.
+// tslint:disable-next-line:no-unused-variable
+import {Observable, ObservableInput, Subscribable} from 'rxjs/Observable';
 import {PartialObserver} from 'rxjs/Observer';
 import {Subscription} from 'rxjs/Subscription';
 import {IScheduler} from 'rxjs/Scheduler';
@@ -22,6 +25,7 @@ import {startWith as startWithOperator} from 'rxjs/operator/startWith';
 import {debounceTime as debounceTimeOperator} from 'rxjs/operator/debounceTime';
 import {auditTime as auditTimeOperator} from 'rxjs/operator/auditTime';
 import {takeUntil as takeUntilOperator} from 'rxjs/operator/takeUntil';
+import {combineLatest as combineLatestOperator} from 'rxjs/operator/combineLatest';
 import {delay as delayOperator} from 'rxjs/operator/delay';
 
 /**
@@ -38,16 +42,16 @@ import {delay as delayOperator} from 'rxjs/operator/delay';
  */
 export interface StrictRxChain<T> {
   call<R>(operator: mapOperatorType<T, R>,
-      project: (value: T, index: number) => R, thisArg?: any): StrictRxChain<R>;
+          project: (value: T, index: number) => R, thisArg?: any): StrictRxChain<R>;
 
   call<R>(operator: switchMapOperatorType<T, R>,
-      project: (value: T, index: number) => ObservableInput<R>): StrictRxChain<R>;
+          project: (value: T, index: number) => ObservableInput<R>): StrictRxChain<R>;
 
   call<R>(operator: catchOperatorType<T, R>,
-      selector: (err: any, caught: Observable<T>) => ObservableInput<R>): StrictRxChain<T | R>;
+          selector: (err: any, caught: Observable<T>) => ObservableInput<R>): StrictRxChain<T | R>;
 
   call(operator: filterOperatorType<T>,
-      predicate: (value: T, index: number) => boolean, thisArg?: any): StrictRxChain<T>;
+       predicate: (value: T, index: number) => boolean, thisArg?: any): StrictRxChain<T>;
 
   call(operator: shareOperatorType<T>): StrictRxChain<T>;
 
@@ -65,15 +69,18 @@ export interface StrictRxChain<T> {
   call(operator: startWithOperatorType<T>, ...args: any[]): StrictRxChain<T>;
 
   call(operator: debounceTimeOperatorType<T>, dueTime: number,
-      scheduler?: IScheduler): StrictRxChain<T>;
+       scheduler?: IScheduler): StrictRxChain<T>;
 
   call(operator: auditTimeOperatorType<T>, duration: number,
-      scheduler?: IScheduler): StrictRxChain<T>;
+       scheduler?: IScheduler): StrictRxChain<T>;
 
   call(operator: takeUntilOperatorType<T>, notifier: Observable<any>): StrictRxChain<T>;
 
+  call<T2>(operator: combineLatestOperatorType<T, T2>,
+           v2: ObservableInput<T2>): StrictRxChain<[T, T2]>;
+
   call(operator: delayOperatorType<T>, delay: number | Date, scheduler?: IScheduler):
-        StrictRxChain<T>;
+      StrictRxChain<T>;
 
   subscribe(fn: (t: T) => void): Subscription;
 
@@ -93,6 +100,7 @@ export class StartWithBrand { private _; }
 export class DebounceTimeBrand { private _; }
 export class AuditTimeBrand { private _; }
 export class TakeUntilBrand { private _; }
+export class CombineLatestBrand { private _; }
 export class DelayBrand { private _; }
 /* tslint:enable:no-unused-variable */
 
@@ -109,9 +117,10 @@ export type startWithOperatorType<T> = typeof startWithOperator & StartWithBrand
 export type debounceTimeOperatorType<T> = typeof debounceTimeOperator & DebounceTimeBrand;
 export type auditTimeOperatorType<T> = typeof auditTimeOperator & AuditTimeBrand;
 export type takeUntilOperatorType<T> = typeof takeUntilOperator & TakeUntilBrand;
+export type combineLatestOperatorType<T, R> = typeof combineLatestOperator & CombineLatestBrand;
 export type delayOperatorType<T> = typeof delayOperator & DelayBrand;
 
-// We add `Function` to the type intersection to make this nomically different from
+// We add `Function` to the type intersection to make this nominally different from
 // `finallyOperatorType` while still being structurally the same. Without this, TypeScript tries to
 // reduce `typeof _finallyOperator & FinallyBrand` to `finallyOperatorType<T>` and then fails
 // because `T` isn't known.
@@ -129,4 +138,6 @@ export const debounceTime =
     debounceTimeOperator as typeof debounceTimeOperator & DebounceTimeBrand & Function;
 export const auditTime = auditTimeOperator as typeof auditTimeOperator & AuditTimeBrand & Function;
 export const takeUntil = takeUntilOperator as typeof takeUntilOperator & TakeUntilBrand & Function;
+export const combineLatest =
+    combineLatestOperator as typeof combineLatestOperator & CombineLatestBrand & Function;
 export const delay = delayOperator as typeof delayOperator & DelayBrand & Function;

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

@@ -59,24 +59,24 @@ <h3>CdkTable Example</h3>
   </div>
 
   <cdk-table #table matSort
-               [dataSource]="dataSource"
-               [trackBy]="userTrackBy">
+             [dataSource]="dataSource"
+             [trackBy]="userTrackBy">
 
     <!-- Column Definition: ID -->
     <ng-container cdkColumnDef="userId">
       <cdk-header-cell *cdkHeaderCellDef
                        mat-sort-header arrowPosition="before">
-          ID
-        </cdk-header-cell>
+        ID
+      </cdk-header-cell>
       <cdk-cell *cdkCellDef="let row"> {{row.id}} </cdk-cell>
     </ng-container>
 
     <!-- Column Definition: Progress -->
     <ng-container cdkColumnDef="progress">
       <cdk-header-cell *cdkHeaderCellDef
-                         mat-sort-header start="desc">
-          Progress
-        </cdk-header-cell>
+                       mat-sort-header start="desc">
+        Progress
+      </cdk-header-cell>
       <cdk-cell *cdkCellDef="let row">
         <div class="demo-progress-stat">{{row.progress}}%</div>
         <div class="demo-progress-indicator-container">
@@ -91,30 +91,30 @@ <h3>CdkTable Example</h3>
     <!-- Column Definition: Name -->
     <ng-container cdkColumnDef="userName">
       <cdk-header-cell *cdkHeaderCellDef mat-sort-header>
-          Name
-        </cdk-header-cell>
+        Name
+      </cdk-header-cell>
       <cdk-cell *cdkCellDef="let row"> {{row.name}} </cdk-cell>
     </ng-container>
 
     <!-- Column Definition: Color -->
     <ng-container cdkColumnDef="color">
       <cdk-header-cell *cdkHeaderCellDef
-                         mat-sort-header disableClear>
-          Color
-        </cdk-header-cell>
+                       mat-sort-header disableClear>
+        Color
+      </cdk-header-cell>
       <cdk-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </cdk-cell>
     </ng-container>
 
     <cdk-header-row *cdkHeaderRowDef="displayedColumns"></cdk-header-row>
     <cdk-row *cdkRowDef="let row; columns: displayedColumns;
                            let first = first; let last = last; let even = even; let odd = odd"
-               [ngClass]="{
+             [ngClass]="{
                  'demo-row-highlight-first': highlights.has('first') && first,
                  'demo-row-highlight-last': highlights.has('last') && last,
                  'demo-row-highlight-even': highlights.has('even') && even,
                  'demo-row-highlight-odd': highlights.has('odd') && odd
                }">
-      </cdk-row>
+    </cdk-row>
   </cdk-table>
 </mat-card>
 
@@ -168,7 +168,7 @@ <h3>MatTable Example</h3>
   <mat-paginator #paginator
                 [length]="_peopleDatabase.data.length"
                 [pageSize]="10"
-                [pageSizeOptions]="[5, 10, 25, 100]">
+                 [pageSizeOptions]="[5, 10, 25, 100]">
   </mat-paginator>
 </div>
 
@@ -200,13 +200,71 @@ <h3> MatTable Using 'When' Rows for Interactive Details</h3>
 
     <mat-header-row *matHeaderRowDef="['userId', 'userName']"></mat-header-row>
     <mat-row *matRowDef="let row; columns: ['userId', 'userName'];"
-            matRipple
-            class="user-row"
-            [style.borderBottomColor]="expandedPerson == row ? 'transparent' : ''"
-            (click)="expandedPerson = row; wasExpanded.add(row)"></mat-row>
+             matRipple
+             class="user-row"
+             [style.borderBottomColor]="expandedPerson == row ? 'transparent' : ''"
+             (click)="expandedPerson = row; wasExpanded.add(row)"></mat-row>
     <mat-row *matRowDef="let row; columns: ['details']; when: isDetailRow"
-            [@detailExpand]="row.data == expandedPerson ? 'expanded' : 'collapsed'"
-            style="overflow: hidden">
+             [@detailExpand]="row.data == expandedPerson ? 'expanded' : 'collapsed'"
+             style="overflow: hidden">
     </mat-row>
   </mat-table>
-</mat-card>
+</mat-card>
+
+<h3>MatTable With MatTableDataSource Example</h3>
+
+<mat-form-field>
+  <input matInput [formControl]="filter">
+</mat-form-field>
+
+<div class="demo-table-container demo-mat-table-example mat-elevation-z4">
+
+  <table-header-demo (shiftColumns)="displayedColumns.push(displayedColumns.shift())"
+                     (toggleColorColumn)="toggleColorColumn()">
+  </table-header-demo>
+
+  <mat-table [dataSource]="matTableDataSource" [trackBy]="userTrackBy" matSort
+             #sortForDataSource="matSort">
+
+    <!-- Column Definition: ID -->
+    <ng-container cdkColumnDef="userId">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
+      <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
+    </ng-container>
+
+    <!-- Column Definition: Progress -->
+    <ng-container matColumnDef="progress">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Progress </mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <div class="demo-progress-stat">{{row.progress}}%</div>
+        <div class="demo-progress-indicator-container">
+          <div class="demo-progress-indicator"
+               [style.background]="row.progress > 50 ? 'green' : 'red'"
+               [style.opacity]="getOpacity(row.progress)"
+               [style.width.%]="row.progress"></div>
+        </div>
+      </mat-cell>
+    </ng-container>
+
+    <!-- Column Definition: Name -->
+    <ng-container matColumnDef="userName">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
+      <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
+    </ng-container>
+
+    <!-- Column Definition: Color -->
+    <ng-container matColumnDef="color">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>Color</mat-header-cell>
+      <mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+
+  </mat-table>
+
+  <mat-paginator #paginatorForDataSource
+                 [length]="_peopleDatabase.data.length"
+                 [pageSizeOptions]="[10, 25, 100]">
+  </mat-paginator>
+</div>

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

@@ -1,9 +1,10 @@
 import {Component, ViewChild} from '@angular/core';
 import {PeopleDatabase, UserData} from './people-database';
 import {PersonDataSource} from './person-data-source';
-import {MatPaginator, MatSort} from '@angular/material';
+import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
 import {DetailRow, PersonDetailDataSource} from './person-detail-data-source';
 import {animate, state, style, transition, trigger} from '@angular/animations';
+import {FormControl} from '@angular/forms';
 
 export type UserProperties = 'userId' | 'userName' | 'progress' | 'color' | undefined;
 
@@ -27,24 +28,48 @@ const properties = ['id', 'name', 'progress', 'color'];
 export class TableDemo {
   dataSource: PersonDataSource | null;
   dataSourceWithDetails: PersonDetailDataSource | null;
+  matTableDataSource = new MatTableDataSource<UserData>();
   displayedColumns: UserProperties[] = [];
   trackByStrategy: TrackByStrategy = 'reference';
   changeReferences = false;
   highlights = new Set<string>();
   wasExpanded = new Set<UserData>();
 
+  filter = new FormControl();
+
   dynamicColumnDefs: any[] = [];
   dynamicColumnIds: string[] = [];
 
   expandedPerson: UserData;
 
-  @ViewChild(MatPaginator) _paginator: MatPaginator;
-
+  @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
   isDetailRow = (row: DetailRow|UserData) => row.hasOwnProperty('detailRow');
 
-  constructor(public _peopleDatabase: PeopleDatabase) { }
+  @ViewChild('paginatorForDataSource') paginatorForDataSource: MatPaginator;
+  @ViewChild('sortForDataSource') sortForDataSource: MatSort;
+
+  constructor(public _peopleDatabase: PeopleDatabase) {
+    this.matTableDataSource.sortingDataAccessor = (data: UserData, property: string) => {
+      switch (property) {
+        case 'userId': return +data.id;
+        case 'userName': return data.name;
+        case 'progress': return +data.progress;
+        case 'color': return data.color;
+        default: return '';
+      }
+    };
+    this.matTableDataSource.filterTermAccessor = (data: UserData) => data.name;
+    this.filter.valueChanges.subscribe(filter => this.matTableDataSource!.filter = filter);
+  }
+
+  ngAfterViewInit() {
+    // Needs to be set up after the view is initialized since the data source will look at the sort
+    // and paginator's initial values to know what data should be rendered.
+    this.matTableDataSource!.paginator = this.paginatorForDataSource;
+    this.matTableDataSource!.sort = this.sortForDataSource;
+  }
 
   ngOnInit() {
     this.connect();
@@ -69,9 +94,10 @@ export class TableDemo {
   connect() {
     this.displayedColumns = ['userId', 'userName', 'progress', 'color'];
     this.dataSource = new PersonDataSource(this._peopleDatabase,
-        this._paginator, this.sort);
+        this.paginator, this.sort);
     this.dataSourceWithDetails = new PersonDetailDataSource(this.dataSource);
     this._peopleDatabase.initialize();
+    this.matTableDataSource!.data = this._peopleDatabase.data.slice();
   }
 
   disconnect() {

src/lib/sort/sort-header.html

@@ -16,5 +16,5 @@
 </div>
 
 <span class="cdk-visually-hidden" *ngIf="_isSorted()">
-  {{_intl.sortDescriptionLabel(id, _sort.direction)}}
+  &nbsp;{{_intl.sortDescriptionLabel(id, _sort.direction)}}
 </span>

src/lib/sort/sort.ts

@@ -29,7 +29,7 @@ export interface Sort {
 /** Container for MatSortables to manage the sort state and provide default sort parameters. */
 @Directive({
   selector: '[matSort]',
-  exportAs: 'matSort',
+  exportAs: 'matSort'
 })
 export class MatSort {
   /** Collection of all registered sortables that this directive manages. */

src/lib/table/public-api.ts

@@ -10,4 +10,4 @@ export * from './table-module';
 export * from './cell';
 export * from './table';
 export * from './row';
-
+export * from './table-data-source';