Skip to content

Commit e15fc0b

Browse files
andrewseguinmmalerba
andrewseguin
authored and
mmalerba
committed
docs(table): change docs to use MatTableDataSource (#8007)
* chore(table): change docs to use MatTableDataSource * review changes * comments
1 parent 4e9e75b commit e15fc0b

16 files changed

+267
-731
lines changed

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

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import {Component} from '@angular/core';
2-
import {DataSource} from '@angular/cdk/collections';
3-
import {Observable} from 'rxjs/Observable';
4-
import 'rxjs/add/observable/of';
2+
import {MatTableDataSource} from '@angular/material';
53

64
/**
75
* @title Basic table
@@ -13,7 +11,7 @@ import 'rxjs/add/observable/of';
1311
})
1412
export class TableBasicExample {
1513
displayedColumns = ['position', 'name', 'weight', 'symbol'];
16-
dataSource = new ExampleDataSource();
14+
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
1715
}
1816

1917
export interface Element {
@@ -23,7 +21,7 @@ export interface Element {
2321
symbol: string;
2422
}
2523

26-
const data: Element[] = [
24+
const ELEMENT_DATA: Element[] = [
2725
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
2826
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
2927
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
@@ -45,18 +43,3 @@ const data: Element[] = [
4543
{position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
4644
{position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
4745
];
48-
49-
/**
50-
* Data source to provide what data should be rendered in the table. The observable provided
51-
* in connect should emit exactly the data that should be rendered by the table. If the data is
52-
* altered, the observable should emit that new set of data on the stream. In our case here,
53-
* we return a stream that contains only one set of data that doesn't change.
54-
*/
55-
export class ExampleDataSource extends DataSource<any> {
56-
/** Connect function called by the table to retrieve one stream containing the data to render. */
57-
connect(): Observable<Element[]> {
58-
return Observable.of(data);
59-
}
60-
61-
disconnect() {}
62-
}

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,12 @@
77

88
.example-header {
99
min-height: 64px;
10-
display: flex;
11-
align-items: baseline;
1210
padding: 8px 24px 0;
13-
font-size: 20px;
14-
justify-content: space-between;
1511
}
1612

1713
.mat-form-field {
1814
font-size: 14px;
19-
flex-grow: 1;
20-
margin-left: 32px;
15+
width: 100%;
2116
}
2217

2318
.mat-table {

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

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,34 @@
11
<div class="example-container mat-elevation-z8">
22
<div class="example-header">
3-
<mat-form-field floatPlaceholder="never">
4-
<input matInput #filter placeholder="Filter users">
3+
<mat-form-field>
4+
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
55
</mat-form-field>
66
</div>
77

88
<mat-table #table [dataSource]="dataSource">
99

10-
<!--- Note that these columns can be defined in any order.
11-
The actual rendered columns are set as a property on the row definition" -->
12-
13-
<!-- ID Column -->
14-
<ng-container matColumnDef="userId">
15-
<mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
16-
<mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
17-
</ng-container>
18-
19-
<!-- Progress Column -->
20-
<ng-container matColumnDef="progress">
21-
<mat-header-cell *matHeaderCellDef> Progress </mat-header-cell>
22-
<mat-cell *matCellDef="let row"> {{row.progress}}% </mat-cell>
10+
<!-- Position Column -->
11+
<ng-container matColumnDef="position">
12+
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
13+
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
2314
</ng-container>
2415

2516
<!-- Name Column -->
26-
<ng-container matColumnDef="userName">
17+
<ng-container matColumnDef="name">
2718
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
28-
<mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
19+
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
20+
</ng-container>
21+
22+
<!-- Weight Column -->
23+
<ng-container matColumnDef="weight">
24+
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
25+
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
2926
</ng-container>
3027

3128
<!-- Color Column -->
32-
<ng-container matColumnDef="color">
33-
<mat-header-cell *matHeaderCellDef> Color </mat-header-cell>
34-
<mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </mat-cell>
29+
<ng-container matColumnDef="symbol">
30+
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
31+
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
3532
</ng-container>
3633

3734
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

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

Lines changed: 34 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
1-
import {Component, ElementRef, ViewChild} from '@angular/core';
2-
import {DataSource} from '@angular/cdk/collections';
3-
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
4-
import {Observable} from 'rxjs/Observable';
5-
import 'rxjs/add/operator/startWith';
6-
import 'rxjs/add/observable/merge';
7-
import 'rxjs/add/operator/map';
8-
import 'rxjs/add/operator/debounceTime';
9-
import 'rxjs/add/operator/distinctUntilChanged';
10-
import 'rxjs/add/observable/fromEvent';
1+
import {Component} from '@angular/core';
2+
import {MatTableDataSource} from '@angular/material';
113

124
/**
135
* @title Table with filtering
@@ -18,101 +10,42 @@ import 'rxjs/add/observable/fromEvent';
1810
templateUrl: 'table-filtering-example.html',
1911
})
2012
export class TableFilteringExample {
21-
displayedColumns = ['userId', 'userName', 'progress', 'color'];
22-
exampleDatabase = new ExampleDatabase();
23-
dataSource: ExampleDataSource | null;
13+
displayedColumns = ['position', 'name', 'weight', 'symbol'];
14+
dataSource = new MatTableDataSource(ELEMENT_DATA);
2415

25-
@ViewChild('filter') filter: ElementRef;
26-
27-
ngOnInit() {
28-
this.dataSource = new ExampleDataSource(this.exampleDatabase);
29-
Observable.fromEvent(this.filter.nativeElement, 'keyup')
30-
.debounceTime(150)
31-
.distinctUntilChanged()
32-
.subscribe(() => {
33-
if (!this.dataSource) { return; }
34-
this.dataSource.filter = this.filter.nativeElement.value;
35-
});
16+
applyFilter(filterValue: string) {
17+
filterValue = filterValue.trim(); // Remove whitespace
18+
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
19+
this.dataSource.filter = filterValue;
3620
}
3721
}
3822

39-
/** Constants used to fill up our data base. */
40-
const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
41-
'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
42-
const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
43-
'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
44-
'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
45-
46-
export interface UserData {
47-
id: string;
23+
export interface Element {
4824
name: string;
49-
progress: string;
50-
color: string;
51-
}
52-
53-
/** An example database that the data source uses to retrieve data for the table. */
54-
export class ExampleDatabase {
55-
/** Stream that emits whenever the data has been modified. */
56-
dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
57-
get data(): UserData[] { return this.dataChange.value; }
58-
59-
constructor() {
60-
// Fill up the database with 100 users.
61-
for (let i = 0; i < 100; i++) { this.addUser(); }
62-
}
63-
64-
/** Adds a new user to the database. */
65-
addUser() {
66-
const copiedData = this.data.slice();
67-
copiedData.push(this.createNewUser());
68-
this.dataChange.next(copiedData);
69-
}
70-
71-
/** Builds and returns a new User. */
72-
private createNewUser() {
73-
const name =
74-
NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
75-
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
76-
77-
return {
78-
id: (this.data.length + 1).toString(),
79-
name: name,
80-
progress: Math.round(Math.random() * 100).toString(),
81-
color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
82-
};
83-
}
25+
position: number;
26+
weight: number;
27+
symbol: string;
8428
}
8529

86-
/**
87-
* Data source to provide what data should be rendered in the table. Note that the data source
88-
* can retrieve its data in any way. In this case, the data source is provided a reference
89-
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
90-
* the underlying data. Instead, it only needs to take the data and send the table exactly what
91-
* should be rendered.
92-
*/
93-
export class ExampleDataSource extends DataSource<any> {
94-
_filterChange = new BehaviorSubject('');
95-
get filter(): string { return this._filterChange.value; }
96-
set filter(filter: string) { this._filterChange.next(filter); }
97-
98-
constructor(private _exampleDatabase: ExampleDatabase) {
99-
super();
100-
}
101-
102-
/** Connect function called by the table to retrieve one stream containing the data to render. */
103-
connect(): Observable<UserData[]> {
104-
const displayDataChanges = [
105-
this._exampleDatabase.dataChange,
106-
this._filterChange,
107-
];
108-
109-
return Observable.merge(...displayDataChanges).map(() => {
110-
return this._exampleDatabase.data.slice().filter((item: UserData) => {
111-
let searchStr = (item.name + item.color).toLowerCase();
112-
return searchStr.indexOf(this.filter.toLowerCase()) != -1;
113-
});
114-
});
115-
}
116-
117-
disconnect() {}
118-
}
30+
const ELEMENT_DATA: Element[] = [
31+
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
32+
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
33+
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
34+
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
35+
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
36+
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
37+
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
38+
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
39+
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
40+
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
41+
{position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
42+
{position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
43+
{position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
44+
{position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
45+
{position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
46+
{position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
47+
{position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
48+
{position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
49+
{position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
50+
{position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
51+
];

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

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,23 +20,6 @@
2020
min-height: 300px;
2121
}
2222

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-
4023
.example-loading-shade {
4124
position: absolute;
4225
top: 0;
@@ -55,3 +38,13 @@
5538
max-width: 360px;
5639
text-align: center;
5740
}
41+
42+
/* Column Widths */
43+
.mat-column-number,
44+
.mat-column-state {
45+
max-width: 64px;
46+
}
47+
48+
.mat-column-created {
49+
max-width: 124px;
50+
}

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<div class="example-container mat-elevation-z8">
22
<div class="example-loading-shade"
3-
*ngIf="dataSource.isLoadingResults || dataSource.isRateLimitReached">
4-
<mat-spinner *ngIf="dataSource.isLoadingResults"></mat-spinner>
5-
<div class="example-rate-limit-reached" *ngIf="dataSource.isRateLimitReached">
3+
*ngIf="isLoadingResults || isRateLimitReached">
4+
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
5+
<div class="example-rate-limit-reached" *ngIf="isRateLimitReached">
66
GitHub's API rate limit has been reached. It will be reset in one minute.
77
</div>
88
</div>
99

1010
<mat-table #table [dataSource]="dataSource" class="example-table"
11-
matSort matSortActive="created_at" matSortDisableClear matSortDirection="asc">
11+
matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
1212

1313
<!--- Note that these columns can be defined in any order.
1414
The actual rendered columns are set as a property on the row definition" -->
@@ -32,10 +32,10 @@
3232
</ng-container>
3333

3434
<!-- Created Column -->
35-
<ng-container matColumnDef="created_at">
35+
<ng-container matColumnDef="created">
3636
<mat-header-cell *matHeaderCellDef
37-
mat-sort-header
38-
disableClear="true">
37+
mat-sort-header
38+
disableClear="true">
3939
Created
4040
</mat-header-cell>
4141
<mat-cell *matCellDef="let row">{{ row.created_at | date }}</mat-cell>
@@ -45,7 +45,6 @@
4545
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
4646
</mat-table>
4747

48-
<mat-paginator [length]="dataSource.resultsLength"
49-
[pageSize]="30">
48+
<mat-paginator [length]="resultsLength" [pageSize]="30">
5049
</mat-paginator>
5150
</div>

0 commit comments

Comments
 (0)