diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html index 56068ab5665..9d5c5e19bd5 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.html +++ b/src/universal-app/kitchen-sink/kitchen-sink.html @@ -227,3 +227,15 @@ This is the content text that makes sense here. Action + +

CDK Table

+ + + + ID + {{row.userId}} + + + + + diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index 57b3514e87c..0a7e2ab3dc9 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/src/universal-app/kitchen-sink/kitchen-sink.ts @@ -1,6 +1,7 @@ import {Component, NgModule} from '@angular/core'; import {ServerModule} from '@angular/platform-server'; import {BrowserModule} from '@angular/platform-browser'; +import {Observable} from 'rxjs/Observable'; import { MdAutocompleteModule, MdButtonModule, @@ -29,14 +30,33 @@ import { MdToolbarModule, MdTooltipModule, } from '@angular/material'; +import { + CdkTableModule, + DataSource +} from '@angular/cdk/table'; +import 'rxjs/add/observable/of'; @Component({ selector: 'kitchen-sink', templateUrl: './kitchen-sink.html', styleUrls: ['./kitchen-sink.css'], }) -export class KitchenSink { } +export class KitchenSink { + + /** List of columns for the CDK table. */ + cdkTableColumns = ['userId']; + + /** Data source for the CDK table. */ + cdkTableDataSource: DataSource = { + connect: () => Observable.of([ + { userId: 1 }, + { userId: 2 } + ]), + disconnect: () => {} + }; + +} @NgModule({ @@ -70,7 +90,10 @@ export class KitchenSink { } MdTabsModule, MdToolbarModule, MdTooltipModule, - MdExpansionModule + MdExpansionModule, + + // CDK Modules + CdkTableModule ], bootstrap: [KitchenSink], declarations: [KitchenSink],