Skip to content

Commit 8c1e803

Browse files
andrewseguinkara
andrewseguin
authored and
kara
committed
docs(table): add example using http (#5766)
Fixes #5670
1 parent 35eb294 commit 8c1e803

File tree

4 files changed

+239
-0
lines changed

4 files changed

+239
-0
lines changed

‎src/material-examples/example-module.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ import {PizzaPartyComponent,SnackBarComponentExample} from './snack-bar-componen
7070
import {SnackBarOverviewExample} from './snack-bar-overview/snack-bar-overview-example';
7171
import {SortOverviewExample} from './sort-overview/sort-overview-example';
7272
import {TableBasicExample} from './table-basic/table-basic-example';
73+
import {TableHttpExample} from './table-http/table-http-example';
7374
import {TableFilteringExample} from './table-filtering/table-filtering-example';
7475
import {TableOverviewExample} from './table-overview/table-overview-example';
7576
import {TablePaginationExample} from './table-pagination/table-pagination-example';
@@ -424,6 +425,12 @@ export const EXAMPLE_COMPONENTS = {
424425
additionalFiles: null,
425426
selectorName: null
426427
},
428+
'table-http': {
429+
title: 'Table retrieving data through HTTP',
430+
component: TableHttpExample,
431+
additionalFiles: null,
432+
selectorName: null
433+
},
427434
'table-filtering': {
428435
title: 'Table with filtering',
429436
component: TableFilteringExample,

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/* Structure */
2+
.example-container {
3+
display: flex;
4+
flex-direction: column;
5+
max-height: 500px;
6+
min-width: 300px;
7+
position: relative;
8+
}
9+
10+
.example-header {
11+
min-height: 64px;
12+
display: flex;
13+
align-items: center;
14+
padding-left: 24px;
15+
font-size: 20px;
16+
}
17+
18+
.example-table {
19+
overflow: auto;
20+
min-height: 300px;
21+
}
22+
23+
.mat-column-title {
24+
text-overflow: ellipsis;
25+
white-space: nowrap;
26+
flex: 1;
27+
overflow: hidden;
28+
}
29+
30+
/* Column Widths */
31+
.mat-column-number,
32+
.mat-column-state {
33+
max-width: 64px;
34+
}
35+
36+
.mat-column-created {
37+
max-width: 124px;
38+
}
39+
40+
.example-loading-shade {
41+
position: absolute;
42+
top: 0;
43+
left: 0;
44+
bottom: 56px;
45+
right: 0;
46+
background: rgba(0, 0, 0, 0.15);
47+
z-index: 1;
48+
display: flex;
49+
align-items: center;
50+
justify-content: center;
51+
}
52+
53+
.example-rate-limit-reached {
54+
color: #980000;
55+
max-width: 360px;
56+
text-align: center;
57+
}

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<div class="example-container mat-elevation-z8">
2+
<div class="example-loading-shade"
3+
*ngIf="dataSource.isLoadingResults || dataSource.isRateLimitReached">
4+
<md-spinner *ngIf="dataSource.isLoadingResults"></md-spinner>
5+
<div class="example-rate-limit-reached" *ngIf="dataSource.isRateLimitReached">
6+
GitHub's API rate limit has been reached. It will be reset in one minute.
7+
</div>
8+
</div>
9+
10+
<md-table #table [dataSource]="dataSource" class="example-table"
11+
mdSort mdSortActive="created" mdSortDisableClear mdSortDirection="asc">
12+
13+
<!--- Note that these columns can be defined in any order.
14+
The actual rendered columns are set as a property on the row definition" -->
15+
16+
<!-- Number Column -->
17+
<ng-container cdkColumnDef="number">
18+
<md-header-cell *cdkHeaderCellDef> Number </md-header-cell>
19+
<md-cell *cdkCellDef="let row"> {{row.number}} </md-cell>
20+
</ng-container>
21+
22+
<!-- Title Column -->
23+
<ng-container cdkColumnDef="title">
24+
<md-header-cell *cdkHeaderCellDef> Title </md-header-cell>
25+
<md-cell *cdkCellDef="let row"> {{row.title}} </md-cell>
26+
</ng-container>
27+
28+
<!-- State Column -->
29+
<ng-container cdkColumnDef="state">
30+
<md-header-cell *cdkHeaderCellDef> State </md-header-cell>
31+
<md-cell *cdkCellDef="let row"> {{row.state}} </md-cell>
32+
</ng-container>
33+
34+
<!-- Created Column -->
35+
<ng-container cdkColumnDef="created">
36+
<md-header-cell *cdkHeaderCellDef md-sort-header disableClear="true"> Created </md-header-cell>
37+
<md-cell *cdkCellDef="let row"> {{row.created.toDateString()}} </md-cell>
38+
</ng-container>
39+
40+
<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
41+
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
42+
</md-table>
43+
<md-paginator [length]="dataSource.resultsLength"
44+
[pageSize]="30">
45+
</md-paginator>
46+
</div>

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

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import {Component, ViewChild} from '@angular/core';
2+
import {Http, Response} from '@angular/http';
3+
import {DataSource} from '@angular/cdk';
4+
import {MdPaginator, MdSort} from '@angular/material';
5+
import {Observable} from 'rxjs/Observable';
6+
import 'rxjs/add/operator/first';
7+
import 'rxjs/add/operator/startWith';
8+
import 'rxjs/add/operator/catch';
9+
import 'rxjs/add/operator/switchMap';
10+
import 'rxjs/add/observable/merge';
11+
import 'rxjs/add/observable/of';
12+
import 'rxjs/add/observable/interval';
13+
import 'rxjs/add/operator/map';
14+
15+
@Component({
16+
selector: 'table-http-example',
17+
styleUrls: ['table-http-example.css'],
18+
templateUrl: 'table-http-example.html',
19+
})
20+
export class TableHttpExample {
21+
displayedColumns = ['created', 'state', 'number', 'title'];
22+
exampleDatabase: ExampleHttpDao | null;
23+
dataSource: ExampleDataSource | null;
24+
25+
@ViewChild(MdPaginator) paginator: MdPaginator;
26+
@ViewChild(MdSort) sort: MdSort;
27+
28+
constructor(http: Http) {
29+
this.exampleDatabase = new ExampleHttpDao(http);
30+
}
31+
32+
ngOnInit() {
33+
this.dataSource = new ExampleDataSource(this.exampleDatabase!,
34+
this.sort, this.paginator);
35+
}
36+
}
37+
38+
export interface GithubIssue {
39+
number: string;
40+
state: string;
41+
title: string;
42+
created: Date;
43+
}
44+
45+
/** An example database that the data source uses to retrieve data for the table. */
46+
export class ExampleHttpDao {
47+
constructor(private http: Http) {}
48+
49+
getRepoIssues(sort: string, order: string, page: number): Observable<Response> {
50+
const href = 'https://api.github.com/search/issues';
51+
const requestUrl =
52+
`${href}?q=repo:angular/material2&sort=${sort}&order=${order}&page=${page + 1}`;
53+
return this.http.get(requestUrl);
54+
}
55+
}
56+
57+
/**
58+
* Data source to provide what data should be rendered in the table. Note that the data source
59+
* can retrieve its data in any way. In this case, the data source is provided a reference
60+
* to a common data base, ExampleHttpDao. It is not the data source's responsibility to manage
61+
* the underlying data. Instead, it only needs to take the data and send the table exactly what
62+
* should be rendered.
63+
*/
64+
export class ExampleDataSource extends DataSource<GithubIssue> {
65+
// The number of issues returned by github matching the query.
66+
resultsLength: number = 0;
67+
isLoadingResults: boolean;
68+
isRateLimitReached: boolean;
69+
70+
constructor(private _exampleDatabase: ExampleHttpDao,
71+
private _sort: MdSort,
72+
private _paginator: MdPaginator) {
73+
super();
74+
}
75+
76+
/** Connect function called by the table to retrieve one stream containing the data to render. */
77+
connect(): Observable<GithubIssue[]> {
78+
const displayDataChanges = [
79+
this._sort.mdSortChange,
80+
this._paginator.page,
81+
];
82+
83+
// If the user changes the sort order, reset back to the first page.
84+
this._sort.mdSortChange.subscribe(() => {
85+
this._paginator.pageIndex = 0;
86+
});
87+
88+
return Observable.merge(...displayDataChanges)
89+
.startWith(null)
90+
.switchMap(() => {
91+
this.isLoadingResults = true;
92+
return this._exampleDatabase.getRepoIssues(
93+
this._sort.active, this._sort.direction, this._paginator.pageIndex);
94+
})
95+
.catch(() => {
96+
// Catch if the GitHub API has reached its rate limit. Return empty result.
97+
this.isRateLimitReached = true;
98+
return Observable.of(null);
99+
})
100+
.map(result => {
101+
// Flip flag to show that loading has finished.
102+
this.isLoadingResults = false;
103+
return result;
104+
})
105+
.map(result => {
106+
if (!result) { return []; }
107+
108+
this.isRateLimitReached = false;
109+
this.resultsLength = result.json().total_count;
110+
111+
return this.readGithubResult(result);
112+
});
113+
114+
115+
}
116+
117+
disconnect() {}
118+
119+
private readGithubResult(result: Response): GithubIssue[] {
120+
return result.json().items.map(issue => {
121+
return {
122+
number: issue.number,
123+
created: new Date(issue.created_at),
124+
state: issue.state,
125+
title: issue.title,
126+
};
127+
});
128+
}
129+
}

0 commit comments

Comments
 (0)