Skip to content

Commit 4b44801

Browse files
andrewseguinandrewseguin
committed
chore: update table examples
1 parent 29bf024 commit 4b44801

38 files changed

+564
-440
lines changed

‎src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* Add basic flex styling so that the cells evenly space themselves in the row.
3+
*/
4+
cdk-row, cdk-header-row, cdk-footer-row {
5+
display: flex;
6+
}
7+
8+
cdk-cell, cdk-header-cell, cdk-footer-cell {
9+
flex: 1;
10+
}

‎src/material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<cdk-table [dataSource]="dataSource">
2+
<!-- Position Column -->
3+
<ng-container cdkColumnDef="position">
4+
<cdk-header-cell *cdkHeaderCellDef> No. </cdk-header-cell>
5+
<cdk-cell *cdkCellDef="let element"> {{element.position}} </cdk-cell>
6+
</ng-container>
7+
8+
<!-- Name Column -->
9+
<ng-container cdkColumnDef="name">
10+
<cdk-header-cell *cdkHeaderCellDef> Name </cdk-header-cell>
11+
<cdk-cell *cdkCellDef="let element"> {{element.name}} </cdk-cell>
12+
</ng-container>
13+
14+
<!-- Weight Column -->
15+
<ng-container cdkColumnDef="weight">
16+
<cdk-header-cell *cdkHeaderCellDef> Weight </cdk-header-cell>
17+
<cdk-cell *cdkCellDef="let element"> {{element.weight}} </cdk-cell>
18+
</ng-container>
19+
20+
<!-- Symbol Column -->
21+
<ng-container cdkColumnDef="symbol">
22+
<cdk-header-cell *cdkHeaderCellDef> Symbol </cdk-header-cell>
23+
<cdk-cell *cdkCellDef="let element"> {{element.symbol}} </cdk-cell>
24+
</ng-container>
25+
26+
<cdk-header-row *cdkHeaderRowDef="displayedColumns"></cdk-header-row>
27+
<cdk-row *cdkRowDef="let row; columns: displayedColumns;"></cdk-row>
28+
</cdk-table>

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import {DataSource} from '@angular/cdk/collections';
2+
import {Component} from '@angular/core';
3+
import {BehaviorSubject, Observable} from 'rxjs';
4+
5+
/**
6+
* @title Basic use of `<cdk-table>` (uses display flex)
7+
*/
8+
@Component({
9+
selector: 'cdk-table-basic-flex-example',
10+
styleUrls: ['cdk-table-basic-flex-example.css'],
11+
templateUrl: 'cdk-table-basic-flex-example.html',
12+
})
13+
export class CdkTableBasicFlexExample {
14+
displayedColumns = ['position', 'name', 'weight', 'symbol'];
15+
dataSource = new ExampleDataSource();
16+
}
17+
18+
export interface Element {
19+
name: string;
20+
position: number;
21+
weight: number;
22+
symbol: string;
23+
}
24+
25+
const ELEMENT_DATA: Element[] = [
26+
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
27+
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
28+
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
29+
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
30+
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
31+
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
32+
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
33+
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
34+
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
35+
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
36+
];
37+
38+
/**
39+
* Data source to provide what data should be rendered in the table. Note that the data source
40+
* can retrieve its data in any way. In this case, the data source is provided a reference
41+
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
42+
* the underlying data. Instead, it only needs to take the data and send the table exactly what
43+
* should be rendered.
44+
*/
45+
export class ExampleDataSource extends DataSource<Element> {
46+
/** Stream of data that is provided to the table. */
47+
data: BehaviorSubject<Element[]> = new BehaviorSubject<Element[]>(ELEMENT_DATA);
48+
49+
/** Connect function called by the table to retrieve one stream containing the data to render. */
50+
connect(): Observable<Element[]> {
51+
return this.data;
52+
}
53+
54+
disconnect() {}
55+
}

‎src/material-examples/cdk-table-basic/cdk-table-basic-example.css

Lines changed: 4 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,7 @@
1-
/* Structure */
2-
.example-container {
3-
display: flex;
4-
flex-direction: column;
5-
min-width: 300px;
1+
table {
2+
width: 100%;
63
}
74

8-
/*
9-
* Styles to make the demo's cdk-table match the material design spec
10-
* https://material.io/guidelines/components/data-tables.html
11-
*/
12-
.example-table {
13-
flex: 1 1 auto;
14-
overflow: auto;
15-
max-height: 500px;
16-
}
17-
18-
.example-header-row, .example-row {
19-
display: flex;
20-
border-bottom: 1px solid #ccc;
21-
align-items: center;
22-
height: 32px;
23-
padding: 0 8px;
24-
}
25-
26-
.example-cell, .example-header-cell {
27-
flex: 1;
28-
}
29-
30-
.example-header-cell {
31-
font-size: 12px;
32-
font-weight: bold;
33-
color: rgba(0, 0, 0, 0.54);
34-
}
35-
36-
.example-cell {
37-
font-size: 13px;
38-
color: rgba(0, 0, 0, 0.87);
5+
th {
6+
text-align: left;
397
}

‎src/material-examples/cdk-table-basic/cdk-table-basic-example.html

Lines changed: 24 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,28 @@
1-
<div class="example-container mat-elevation-z8">
2-
<cdk-table #table [dataSource]="dataSource" class="example-table">
3-
<!--- Note that these columns can be defined in any order.
4-
The actual rendered columns are set as a property on the row definition" -->
1+
<table cdk-table [dataSource]="dataSource">
2+
<!-- Position Column -->
3+
<ng-container cdkColumnDef="position">
4+
<th cdk-header-cell *cdkHeaderCellDef> No. </th>
5+
<td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
6+
</ng-container>
57

6-
<!-- ID Column -->
7-
<ng-container cdkColumnDef="userId">
8-
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> ID </cdk-header-cell>
9-
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.id}} </cdk-cell>
10-
</ng-container>
8+
<!-- Name Column -->
9+
<ng-container cdkColumnDef="name">
10+
<th cdk-header-cell *cdkHeaderCellDef> Name </th>
11+
<td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
12+
</ng-container>
1113

12-
<!-- Progress Column -->
13-
<ng-container cdkColumnDef="progress">
14-
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Progress </cdk-header-cell>
15-
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.progress}}% </cdk-cell>
16-
</ng-container>
14+
<!-- Weight Column -->
15+
<ng-container cdkColumnDef="weight">
16+
<th cdk-header-cell *cdkHeaderCellDef> Weight </th>
17+
<td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
18+
</ng-container>
1719

18-
<!-- Name Column -->
19-
<ng-container cdkColumnDef="userName">
20-
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Name </cdk-header-cell>
21-
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.name}} </cdk-cell>
22-
</ng-container>
20+
<!-- Symbol Column -->
21+
<ng-container cdkColumnDef="symbol">
22+
<th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
23+
<td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
24+
</ng-container>
2325

24-
<!-- Color Column -->
25-
<ng-container cdkColumnDef="color">
26-
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell">Color</cdk-header-cell>
27-
<cdk-cell *cdkCellDef="let row" class="example-cell"
28-
[style.color]="row.color">
29-
{{row.color}}
30-
</cdk-cell>
31-
</ng-container>
32-
33-
<cdk-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"></cdk-header-row>
34-
<cdk-row *cdkRowDef="let row; columns: displayedColumns;" class="example-row"></cdk-row>
35-
</cdk-table>
36-
</div>
26+
<tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
27+
<tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
28+
</table>

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

Lines changed: 23 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -11,61 +11,29 @@ import {BehaviorSubject, Observable} from 'rxjs';
1111
templateUrl: 'cdk-table-basic-example.html',
1212
})
1313
export class CdkTableBasicExample {
14-
displayedColumns = ['userId', 'userName', 'progress', 'color'];
15-
exampleDatabase = new ExampleDatabase();
16-
dataSource: ExampleDataSource | null;
17-
18-
ngOnInit() {
19-
this.dataSource = new ExampleDataSource(this.exampleDatabase);
20-
}
14+
displayedColumns = ['position', 'name', 'weight', 'symbol'];
15+
dataSource = new ExampleDataSource();
2116
}
2217

23-
/** Constants used to fill up our data base. */
24-
const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
25-
'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
26-
const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
27-
'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
28-
'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
29-
30-
export interface UserData {
31-
id: string;
18+
export interface Element {
3219
name: string;
33-
progress: string;
34-
color: string;
20+
position: number;
21+
weight: number;
22+
symbol: string;
3523
}
3624

37-
/** An example database that the data source uses to retrieve data for the table. */
38-
export class ExampleDatabase {
39-
/** Stream that emits whenever the data has been modified. */
40-
dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
41-
get data(): UserData[] { return this.dataChange.value; }
42-
43-
constructor() {
44-
// Fill up the database with 100 users.
45-
for (let i = 0; i < 100; i++) { this.addUser(); }
46-
}
47-
48-
/** Adds a new user to the database. */
49-
addUser() {
50-
const copiedData = this.data.slice();
51-
copiedData.push(this.createNewUser());
52-
this.dataChange.next(copiedData);
53-
}
54-
55-
/** Builds and returns a new User. */
56-
private createNewUser() {
57-
const name =
58-
NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
59-
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
60-
61-
return {
62-
id: (this.data.length + 1).toString(),
63-
name: name,
64-
progress: Math.round(Math.random() * 100).toString(),
65-
color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
66-
};
67-
}
68-
}
25+
const ELEMENT_DATA: Element[] = [
26+
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
27+
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
28+
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
29+
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
30+
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
31+
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
32+
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
33+
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
34+
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
35+
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
36+
];
6937

7038
/**
7139
* Data source to provide what data should be rendered in the table. Note that the data source
@@ -74,14 +42,13 @@ export class ExampleDatabase {
7442
* the underlying data. Instead, it only needs to take the data and send the table exactly what
7543
* should be rendered.
7644
*/
77-
export class ExampleDataSource extends DataSource<any> {
78-
constructor(private _exampleDatabase: ExampleDatabase) {
79-
super();
80-
}
45+
export class ExampleDataSource extends DataSource<Element> {
46+
/** Stream of data that is provided to the table. */
47+
data: BehaviorSubject<Element[]> = new BehaviorSubject<Element[]>(ELEMENT_DATA);
8148

8249
/** Connect function called by the table to retrieve one stream containing the data to render. */
83-
connect(): Observable<UserData[]> {
84-
return this._exampleDatabase.dataChange;
50+
connect(): Observable<Element[]> {
51+
return this.data;
8552
}
8653

8754
disconnect() {}

‎src/material-examples/table-basic-flex/table-basic-flex-example.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
table {
2+
width: 100%;
3+
}

‎src/material-examples/table-basic-flex/table-basic-flex-example.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
2+
<!-- Position Column -->
3+
<ng-container matColumnDef="position">
4+
<th mat-header-cell *matHeaderCellDef> No. </th>
5+
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
6+
</ng-container>
7+
8+
<!-- Name Column -->
9+
<ng-container matColumnDef="name">
10+
<th mat-header-cell *matHeaderCellDef> Name </th>
11+
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
12+
</ng-container>
13+
14+
<!-- Weight Column -->
15+
<ng-container matColumnDef="weight">
16+
<th mat-header-cell *matHeaderCellDef> Weight </th>
17+
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
18+
</ng-container>
19+
20+
<!-- Symbol Column -->
21+
<ng-container matColumnDef="symbol">
22+
<th mat-header-cell *matHeaderCellDef> Symbol </th>
23+
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
24+
</ng-container>
25+
26+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
27+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
28+
</table>

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Basic use of `<mat-table>` (uses display flex)
5+
*/
6+
@Component({
7+
selector: 'table-basic-flex-example',
8+
styleUrls: ['table-basic-flex-example.css'],
9+
templateUrl: 'table-basic-flex-example.html',
10+
})
11+
export class TableBasicFlexExample {
12+
displayedColumns = ['position', 'name', 'weight', 'symbol'];
13+
dataSource = ELEMENT_DATA;
14+
}
15+
16+
export interface Element {
17+
name: string;
18+
position: number;
19+
weight: number;
20+
symbol: string;
21+
}
22+
23+
const ELEMENT_DATA: Element[] = [
24+
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
25+
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
26+
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
27+
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
28+
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
29+
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
30+
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
31+
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
32+
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
33+
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
34+
];

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.example-container {
2-
display: flex;
3-
flex-direction: column;
4-
max-height: 500px;
5-
min-width: 300px;
6-
overflow: auto;
1+
table {
2+
width: 100%;
73
}

0 commit comments

Comments
 (0)