feat(table): add MatTableDataSource

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';
 
 /**
@@ -72,6 +76,9 @@ export interface 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>;
 
@@ -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

@@ -209,4 +209,62 @@ <h3> MatTable Using 'When' Rows for Interactive Details</h3>
             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,6 +29,7 @@ export interface Sort {
 /** Container for MatSortables to manage the sort state and provide default sort parameters. */
 @Directive({
   selector: '[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';