Skip to content

Commit 8c16f01

Browse files
andrewseguinjelbourn
andrewseguin
authored and
jelbourn
committed
chore: update table examples (#11112)
1 parent 714f065 commit 8c16f01

File tree

47 files changed

+603
-476
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+603
-476
lines changed

‎src/demo-app/table/custom-table/custom-table.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import {Component, ViewChild} from '@angular/core';
1010
import {MatSort, MatTableDataSource} from '@angular/material';
11-
import {Element, ELEMENT_DATA} from '../element-data';
11+
import {PeriodicElement, ELEMENT_DATA} from '../element-data';
1212

1313

1414
@Component({
@@ -18,9 +18,9 @@ import {Element, ELEMENT_DATA} from '../element-data';
1818
})
1919
export class CustomTableDemo {
2020
columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
21-
simpleTableDataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
22-
wrapperTableDataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
23-
getWeight = (data: Element) => '~' + data.weight;
21+
simpleTableDataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
22+
wrapperTableDataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
23+
getWeight = (data: PeriodicElement) => '~' + data.weight;
2424

2525
@ViewChild('simpleTableSort') simpleTableSort: MatSort;
2626
@ViewChild('wrapperTableSort') wrapperTableSort: MatSort;

‎src/demo-app/table/data-input-table/data-input-table.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
import {Component, ViewChild} from '@angular/core';
10-
import {Element, ELEMENT_DATA} from '../element-data';
10+
import {PeriodicElement, ELEMENT_DATA} from '../element-data';
1111
import {CdkTable} from '@angular/cdk/table';
1212
import {MatRadioChange, MatTable, MatTableDataSource} from '@angular/material';
1313
import {Observable} from 'rxjs';
@@ -28,18 +28,20 @@ export class DataInputTableDemo {
2828
matTableDataSource = new MatTableDataSource(this.data);
2929

3030
trackByStrategy: TrackByStrategy = 'reference';
31-
trackBy = (index: number, item: Element) => {
31+
trackBy = (index: number, item: PeriodicElement) => {
3232
switch (this.trackByStrategy) {
3333
case 'position': return item.position;
3434
case 'reference': return item;
3535
case 'index': return index;
3636
}
3737
}
3838

39-
dataSource: DataSource<Element> | Observable<Element[]> | Element[] | null = this.data;
39+
dataSource: DataSource<PeriodicElement> |
40+
Observable<PeriodicElement[]> |
41+
PeriodicElement[] | null = this.data;
4042

41-
@ViewChild(CdkTable) cdkTable: CdkTable<Element>;
42-
@ViewChild(MatTable) matTable: MatTable<Element>;
43+
@ViewChild(CdkTable) cdkTable: CdkTable<PeriodicElement>;
44+
@ViewChild(MatTable) matTable: MatTable<PeriodicElement>;
4345

4446
changeInput(e: MatRadioChange) {
4547
this.inputType = e.value;

‎src/demo-app/table/dynamic-columns/dynamic-columns.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
import {Component} from '@angular/core';
10-
import {Element, ELEMENT_DATA} from '../element-data';
10+
import {PeriodicElement, ELEMENT_DATA} from '../element-data';
1111

1212
@Component({
1313
moduleId: module.id,
@@ -16,7 +16,7 @@ import {Element, ELEMENT_DATA} from '../element-data';
1616
export class DynamicColumnsDemo {
1717
definedColumns = ['name', 'weight', 'symbol', 'position'];
1818
columnsToDisplay = this.definedColumns.slice();
19-
dataSource: Element[] = ELEMENT_DATA.slice();
19+
dataSource: PeriodicElement[] = ELEMENT_DATA.slice();
2020

2121
addColumn() {
2222
const randomColumn = Math.floor(Math.random() * 4);

‎src/demo-app/table/element-data.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
export interface Element {
9+
export interface PeriodicElement {
1010
position: number;
1111
name: string;
1212
weight: number;
1313
symbol: string;
1414
}
1515

16-
export const ELEMENT_DATA: Element[] = [
16+
export const ELEMENT_DATA: PeriodicElement[] = [
1717
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
1818
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
1919
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},

‎src/demo-app/table/expandable-rows/expandable-rows.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
import {Component, ViewChild} from '@angular/core';
10-
import {Element, ELEMENT_DATA} from 'table/element-data';
10+
import {PeriodicElement, ELEMENT_DATA} from 'table/element-data';
1111
import {animate, state, style, transition, trigger} from '@angular/animations';
1212
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
1313

@@ -48,7 +48,7 @@ import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
4848
export class ExpandableRowsDemo {
4949
dataSource = new MatTableDataSource(ELEMENT_DATA.slice());
5050
columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
51-
expandedElement: Element;
51+
expandedElement: PeriodicElement;
5252

5353
@ViewChild(MatSort) sort: MatSort;
5454
@ViewChild(MatPaginator) paginator: MatPaginator;

‎src/demo-app/table/mat-table-data-source/mat-table-data-source.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import {Component, ElementRef, ViewChild} from '@angular/core';
1010
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
11-
import {Element, ELEMENT_DATA} from '../element-data';
11+
import {PeriodicElement, ELEMENT_DATA} from '../element-data';
1212
import {fromEvent} from 'rxjs';
1313

1414
@Component({
@@ -21,7 +21,7 @@ import {fromEvent} from 'rxjs';
2121
})
2222
export class MatTableDataSourceDemo {
2323
columns = ['name', 'weight', 'symbol', 'position'];
24-
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
24+
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
2525

2626
// Add button that lets you override the filter predicate with a strict name match
2727
originalFilterPredicate = this.dataSource.filterPredicate;
@@ -41,7 +41,7 @@ export class MatTableDataSourceDemo {
4141
toggleFilterPredicate() {
4242
this.useOverrideFilterPredicate = !this.useOverrideFilterPredicate;
4343
this.dataSource.filterPredicate = this.useOverrideFilterPredicate ?
44-
(d: Element, filter: string) => d.name.indexOf(filter) != -1 :
44+
(d: PeriodicElement, filter: string) => d.name.indexOf(filter) != -1 :
4545
this.originalFilterPredicate;
4646
}
4747
}

‎src/demo-app/table/table-demo.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
import {Component} from '@angular/core';
10-
import {Element, ELEMENT_DATA} from './element-data';
10+
import {PeriodicElement, ELEMENT_DATA} from './element-data';
1111

1212
@Component({
1313
moduleId: module.id,
@@ -26,5 +26,5 @@ import {Element, ELEMENT_DATA} from './element-data';
2626
})
2727
export class TableDemo {
2828
columns = ['name', 'weight', 'symbol', 'position'];
29-
dataSource: Element[] = ELEMENT_DATA.slice();
29+
dataSource: PeriodicElement[] = ELEMENT_DATA.slice();
3030
}

‎src/demo-app/table/when-rows/when-rows.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export interface DemoDataObject {
1616
}
1717

1818
@Component({
19+
selector: 'when-rows-demo',
1920
moduleId: module.id,
2021
templateUrl: 'when-rows.html',
2122
})

‎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 PeriodicElement {
19+
name: string;
20+
position: number;
21+
weight: number;
22+
symbol: string;
23+
}
24+
25+
const ELEMENT_DATA: PeriodicElement[] = [
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<PeriodicElement> {
46+
/** Stream of data that is provided to the table. */
47+
data: BehaviorSubject<PeriodicElement[]> = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
48+
49+
/** Connect function called by the table to retrieve one stream containing the data to render. */
50+
connect(): Observable<PeriodicElement[]> {
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>

0 commit comments

Comments
 (0)