docs(table): add example using http

src/material-examples/example-module.ts

@@ -69,6 +69,7 @@ import {PizzaPartyComponent,SnackBarComponentExample} from './snack-bar-componen
 import {SnackBarOverviewExample} from './snack-bar-overview/snack-bar-overview-example';
 import {SortOverviewExample} from './sort-overview/sort-overview-example';
 import {TableBasicExample} from './table-basic/table-basic-example';
+import {TableHttpExample} from './table-http/table-http-example';
 import {TableFilteringExample} from './table-filtering/table-filtering-example';
 import {TableOverviewExample} from './table-overview/table-overview-example';
 import {TablePaginationExample} from './table-pagination/table-pagination-example';
@@ -417,6 +418,12 @@ export const EXAMPLE_COMPONENTS = {
     additionalFiles: null,
     selectorName: null
   },
+  'table-http': {
+    title: 'Table retrieving data through HTTP',
+    component: TableHttpExample,
+    additionalFiles: null,
+    selectorName: null
+  },
   'table-filtering': {
     title: 'Table with filtering',
     component: TableFilteringExample,

src/material-examples/table-http/table-http-example.css

@@ -0,0 +1,33 @@
+/* Structure */
+.example-container {
+  display: flex;
+  flex-direction: column;
+  max-height: 500px;
+  min-width: 300px;
+}
+
+.example-header {
+  min-height: 64px;
+  display: flex;
+  align-items: center;
+  padding-left: 24px;
+  font-size: 20px;
+}
+
+.mat-table {
+  overflow: auto;
+}
+
+.mat-column-title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Column Widths */
+.mat-column-number,
+.mat-column-state,
+.mat-column-commentCount {
+  max-width: 64px;
+}

src/material-examples/table-http/table-http-example.html

@@ -0,0 +1,28 @@
+<div class="example-container mat-elevation-z8">
+  <md-table #table [dataSource]="dataSource">
+
+    <!--- Note that these columns can be defined in any order.
+          The actual rendered columns are set as a property on the row definition" -->
+
+    <!-- Number Column -->
+    <ng-container cdkColumnDef="number">
+      <md-header-cell *cdkHeaderCellDef> Number </md-header-cell>
+      <md-cell *cdkCellDef="let row"> {{row.number}} </md-cell>
+    </ng-container>
+
+    <!-- Title Column -->
+    <ng-container cdkColumnDef="title">
+      <md-header-cell *cdkHeaderCellDef> Title </md-header-cell>
+      <md-cell *cdkCellDef="let row"> {{row.title}} </md-cell>
+    </ng-container>
+
+    <!-- State Column -->
+    <ng-container cdkColumnDef="state">
+      <md-header-cell *cdkHeaderCellDef> State </md-header-cell>
+      <md-cell *cdkCellDef="let row"> {{row.state}} </md-cell>
+    </ng-container>
+
+    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
+    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
+  </md-table>
+</div>

src/material-examples/table-http/table-http-example.ts

@@ -0,0 +1,70 @@
+import {Component} from '@angular/core';
+import {Http, Response} from '@angular/http';
+import {DataSource} from '@angular/cdk';
+import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/operator/startWith';
+import 'rxjs/add/observable/merge';
+import 'rxjs/add/operator/map';
+
+@Component({
+  selector: 'table-http-example',
+  styleUrls: ['table-http-example.css'],
+  templateUrl: 'table-http-example.html',
+})
+export class TableHttpExample {
+  displayedColumns = ['number', 'state', 'title'];
+  exampleDatabase: ExampleHttpDatabase | null;
+  dataSource: ExampleDataSource | null;
+
+  constructor(http: Http) {
+    this.exampleDatabase = new ExampleHttpDatabase(http);
+    this.dataSource = new ExampleDataSource(this.exampleDatabase);
+  }
+}
+
+export interface MyGithubIssue {
+  number: string;
+  state: string;
+  title: string;
+}
+
+/** An example database that the data source uses to retrieve data for the table. */
+export class ExampleHttpDatabase {
+  private issuesUrl = 'https://api.github.com/repos/angular/material2/issues';  // URL to web API
+
+  constructor(private http: Http) {}
+
+  getRepoIssues(): Observable<MyGithubIssue[]> {
+    return this.http.get(this.issuesUrl).map(this.extractData);
+  }
+
+  extractData(result: Response): MyGithubIssue[] {
+    return result.json().map(issue => {
+      return {
+        number: issue.number,
+        state: issue.state,
+        title: issue.title,
+      };
+    });
+  }
+}
+
+/**
+ * Data source to provide what data should be rendered in the table. Note that the data source
+ * can retrieve its data in any way. In this case, the data source is provided a reference
+ * to a common data base, ExampleHttpDatabase. It is not the data source's responsibility to manage
+ * the underlying data. Instead, it only needs to take the data and send the table exactly what
+ * should be rendered.
+ */
+export class ExampleDataSource extends DataSource<MyGithubIssue> {
+  constructor(private _exampleDatabase: ExampleHttpDatabase) {
+    super();
+  }
+
+  /** Connect function called by the table to retrieve one stream containing the data to render. */
+  connect(): Observable<MyGithubIssue[]> {
+    return this._exampleDatabase.getRepoIssues();
+  }
+
+  disconnect() {}
+}