Skip to content

Commit deedebd

Browse files
andrewseguinmmalerba
andrewseguin
authored and
mmalerba
committed
chore(table): clean up demo pages (#10669)
* chore(table): clean up demo pages * fix errors * update row contexts * fix imports * fix aot
1 parent 3b7fe64 commit deedebd

29 files changed

+374
-1084
lines changed

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<mat-card>
22
<h3> MatTable with Simple Columns </h3>
33

4-
<mat-table [dataSource]="simpleTableDataSource"
4+
<table mat-table [dataSource]="simpleTableDataSource"
55
matSort #simpleTableSort="matSort">
66
<!-- Basic column: name is used for header label AND data property -->
77
<simple-column name="name" sortable></simple-column>
@@ -13,9 +13,9 @@ <h3> MatTable with Simple Columns </h3>
1313
<!-- Name doesn't match desired header text; define a custom label -->
1414
<simple-column name="symbol" label="SYMBOL!"></simple-column>
1515

16-
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
17-
<mat-row *matRowDef="let data; columns: columnsToDisplay;"></mat-row>
18-
</mat-table>
16+
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
17+
<tr mat-row *matRowDef="let data; columns: columnsToDisplay;"></tr>
18+
</table>
1919
</mat-card>
2020

2121

@@ -27,14 +27,14 @@ <h3> Wrapper Table </h3>
2727
matSort #wrapperTableSort="matSort">
2828
<!-- Name (normal column) -->
2929
<ng-container matColumnDef="name">
30-
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
31-
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
30+
<th mat-header-cell *matHeaderCellDef> Name </th>
31+
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
3232
</ng-container>
3333

3434
<!-- Position (simple column) -->
3535
<simple-column name="position"></simple-column>
3636

37-
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
38-
<mat-row *matRowDef="let row; columns: columnsToDisplay; "></mat-row>
37+
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
38+
<tr mat-row *matRowDef="let row; columns: columnsToDisplay; "></tr>
3939
</wrapper-table>
4040
</mat-card>

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
.mat-table {
2-
height: 300px;
3-
overflow: auto;
1+
.mat-table, wrapper-table {
2+
width: 100%;
43
}
54

65
.mat-card {
76
margin: 8px 0;
7+
height: 300px;
8+
overflow: auto;
89
}

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,8 @@ import {MatColumnDef, MatTable} from '@angular/material';
2727
selector: 'simple-column',
2828
template: `
2929
<ng-container matColumnDef>
30-
<mat-header-cell *matHeaderCellDef mat-sort-header>
31-
{{label || name}}
32-
</mat-header-cell>
33-
34-
<mat-cell *matCellDef="let data">
35-
{{getData(data)}}
36-
</mat-cell>
30+
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{label || name}} </th>
31+
<td mat-cell *matCellDef="let data"> {{getData(data)}}</td>
3732
</ng-container>
3833
`,
3934
host: {

‎src/demo-app/table/custom-table/wrapper-table.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
<mat-table [dataSource]="dataSource">
1+
<table mat-table [dataSource]="dataSource">
22
<ng-content></ng-content>
33

44
<!-- Weight Column -->
55
<ng-container matColumnDef="weight">
6-
<mat-header-cell *matHeaderCellDef mat-sort-header> Weight </mat-header-cell>
7-
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
6+
<th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
7+
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
88
</ng-container>
99

1010
<!-- Color Column -->
1111
<ng-container matColumnDef="symbol">
12-
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
13-
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
12+
<th mat-header-cell *matHeaderCellDef> Symbol </th>
13+
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
1414
</ng-container>
15-
</mat-table>
15+
</table>

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,13 @@ import {SimpleColumn} from './simple-column';
1717
selector: 'wrapper-table',
1818
templateUrl: 'wrapper-table.html',
1919
styles: [`
20+
:host {
21+
display: block;
22+
width: 100%;
23+
}
24+
2025
.mat-table {
21-
height: 300px;
22-
overflow: auto;
26+
width: 100%;
2327
}
2428
`]
2529
})

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

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@
99

1010
<div class="demo-actions">
1111
<strong>Data Changes: </strong>
12-
<button mat-raised-button (click)="addRow()">Add Row</button>
13-
<button mat-raised-button (click)="removeRow()">Remove Row</button>
14-
<button mat-raised-button (click)="reassignDataClone()">Clone Data</button>
12+
<button mat-raised-button (click)="addRow()"> Add Row </button>
13+
<button mat-raised-button (click)="removeRow()"> Remove Row </button>
14+
<button mat-raised-button (click)="reassignDataClone()"> Clone Data </button>
15+
<button mat-raised-button (click)="shuffle()"> Shuffle </button>
1516
</div>
1617

1718
<div class="demo-actions">
@@ -20,32 +21,32 @@
2021
<button mat-raised-button (click)="this.removeDataSource()">Remove Data Source</button>
2122
</div>
2223

23-
<mat-card>
24-
<h3> CdkTable </h3>
25-
26-
<cdk-table #cdkTable [dataSource]="dataSourceInput">
27-
<!-- Name (normal column) -->
28-
<ng-container [cdkColumnDef]="column" *ngFor="let column of columnsToDisplay">
29-
<cdk-header-cell *cdkHeaderCellDef> {{column}} </cdk-header-cell>
30-
<cdk-cell *cdkCellDef="let element"> {{element[column]}} </cdk-cell>
31-
</ng-container>
24+
<div class="demo-actions">
25+
<button mat-raised-button (click)="highlightFirstRow()"> Highlight first row </button>
26+
</div>
3227

33-
<cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></cdk-header-row>
34-
<cdk-row *cdkRowDef="let data; columns: columnsToDisplay;"></cdk-row>
35-
</cdk-table>
36-
</mat-card>
28+
<div class="demo-actions">
29+
<div class="demo-track-by-select">
30+
<div class="demo-track-by-label">Track By</div>
31+
<mat-radio-group [(ngModel)]="trackByStrategy">
32+
<mat-radio-button [value]="'reference'"> Reference </mat-radio-button>
33+
<mat-radio-button [value]="'position'"> Position </mat-radio-button>
34+
<mat-radio-button [value]="'index'"> Index </mat-radio-button>
35+
</mat-radio-group>
36+
</div>
37+
</div>
3738

3839
<mat-card>
39-
<h3> MatTable </h3>
40+
<h3> CdkTable </h3>
4041

41-
<mat-table #matTable [dataSource]="dataSourceInput">
42+
<table cdk-table #cdkTable [dataSource]="dataSource" [trackBy]="trackBy">
4243
<!-- Name (normal column) -->
43-
<ng-container [matColumnDef]="column" *ngFor="let column of columnsToDisplay">
44-
<mat-header-cell *matHeaderCellDef> {{column}} </mat-header-cell>
45-
<mat-cell *matCellDef="let element"> {{element[column]}} </mat-cell>
44+
<ng-container [cdkColumnDef]="column" *ngFor="let column of columnsToDisplay">
45+
<th cdk-header-cell *cdkHeaderCellDef> {{column}} </th>
46+
<td cdk-cell *cdkCellDef="let element"> {{element[column]}} </td>
4647
</ng-container>
4748

48-
<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
49-
<mat-row *matRowDef="let data; columns: columnsToDisplay;"></mat-row>
50-
</mat-table>
49+
<tr cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></tr>
50+
<tr cdk-row *cdkRowDef="let data; columns: columnsToDisplay;"></tr>
51+
</table>
5152
</mat-card>

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

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,11 @@
22
margin-top: 24px;
33
}
44

5-
mat-card {
6-
margin: 8px 0;
7-
}
8-
9-
cdk-table {
10-
display: table;
11-
width: 100%;
12-
13-
cdk-header-row, cdk-row {
14-
display: table-row;
15-
}
5+
.demo-track-by-select {
6+
display: flex;
7+
align-items: center;
168

17-
cdk-header-cell, cdk-cell {
18-
display: table-cell;
9+
.demo-track-by-label {
10+
margin-right: 8px;
1911
}
2012
}

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

Lines changed: 50 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import {MatRadioChange, MatTable, MatTableDataSource} from '@angular/material';
1313
import {Observable} from 'rxjs';
1414
import {DataSource} from '@angular/cdk/collections';
1515

16+
export type TrackByStrategy = 'position' | 'reference' | 'index';
17+
1618
@Component({
1719
moduleId: module.id,
1820
templateUrl: 'data-input-table.html',
@@ -23,39 +25,71 @@ export class DataInputTableDemo {
2325

2426
inputType: 'source' | 'stream' | 'array' | null = 'array';
2527
data = ELEMENT_DATA.slice();
26-
tableDataSource = new MatTableDataSource(this.data);
28+
matTableDataSource = new MatTableDataSource(this.data);
29+
30+
trackByStrategy: TrackByStrategy = 'reference';
31+
trackBy = (index: number, item: Element) => {
32+
switch (this.trackByStrategy) {
33+
case 'position': return item.position;
34+
case 'reference': return item;
35+
case 'index': return index;
36+
}
37+
}
2738

28-
dataSourceInput: DataSource<Element> | Observable<Element[]> | Element[] | null = this.data;
39+
dataSource: DataSource<Element> | Observable<Element[]> | Element[] | null = this.data;
2940

3041
@ViewChild(CdkTable) cdkTable: CdkTable<Element>;
3142
@ViewChild(MatTable) matTable: MatTable<Element>;
3243

3344
changeInput(e: MatRadioChange) {
3445
this.inputType = e.value;
3546
switch (this.inputType) {
36-
case 'array': this.dataSourceInput = this.data; break;
37-
case 'stream': this.dataSourceInput = this.tableDataSource.connect(); break;
38-
case 'source': this.dataSourceInput = this.tableDataSource; break;
47+
case 'array': this.dataSource = this.data; break;
48+
case 'stream': this.dataSource = this.matTableDataSource.connect(); break;
49+
case 'source': this.dataSource = this.matTableDataSource; break;
3950
}
4051
}
4152

4253
addRow() {
43-
this.data.push({name: 'new', weight: 0, symbol: 'New', position: 0});
44-
this.tableDataSource.data = this.data;
54+
this.data.push({
55+
name: 'new',
56+
weight: Math.floor(Math.random() * 25),
57+
symbol: 'New',
58+
position: Math.floor(Math.random() * 25)
59+
});
60+
61+
this.matTableDataSource.data = this.data;
62+
}
63+
64+
shuffle() {
65+
let dataToShuffle = this.data.slice();
66+
let currentIndex = dataToShuffle.length;
67+
while (0 !== currentIndex) {
68+
let randomIndex = Math.floor(Math.random() * currentIndex);
69+
currentIndex -= 1;
70+
71+
// Swap
72+
let temp = dataToShuffle[currentIndex];
73+
dataToShuffle[currentIndex] = dataToShuffle[randomIndex];
74+
dataToShuffle[randomIndex] = temp;
75+
}
76+
77+
this.data = dataToShuffle;
78+
this.matTableDataSource.data = dataToShuffle;
4579
}
4680

4781
removeRow() {
4882
this.data.pop();
49-
this.tableDataSource.data = this.data;
83+
this.matTableDataSource.data = this.data;
5084
}
5185

5286
reassignDataClone() {
5387
this.data = this.data.slice();
5488

55-
if (this.dataSourceInput instanceof Array) {
56-
this.dataSourceInput = this.data;
89+
if (this.dataSource instanceof Array) {
90+
this.dataSource = this.data;
5791
}
58-
this.tableDataSource.data = this.data;
92+
this.matTableDataSource.data = this.data;
5993
}
6094

6195
renderRows() {
@@ -64,7 +98,11 @@ export class DataInputTableDemo {
6498
}
6599

66100
removeDataSource() {
67-
this.dataSourceInput = null;
101+
this.dataSource = null;
68102
this.inputType = null;
69103
}
104+
105+
highlightFirstRow() {
106+
document.querySelector('table tbody tr')!.setAttribute('style', 'background: red');
107+
}
70108
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="demo-action">
2+
<button mat-raised-button (click)="addColumn()"> Add column </button>
3+
<button mat-raised-button (click)="removeColumn()"> Remove column </button>
4+
<button mat-raised-button (click)="shuffle()"> Shuffle </button>
5+
</div>
6+
7+
<mat-card>
8+
<table cdk-table [dataSource]="dataSource">
9+
<ng-container cdkColumnDef="{{column}}" *ngFor="let column of definedColumns">
10+
<th cdk-header-cell *cdkHeaderCellDef> {{column}} </th>
11+
<td cdk-cell *cdkCellDef="let element"> {{element[column]}} </td>
12+
</ng-container>
13+
14+
<tr cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></tr>
15+
<tr cdk-row *cdkRowDef="let row; columns: columnsToDisplay;"></tr>
16+
</table>
17+
</mat-card>

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
import {Element, ELEMENT_DATA} from '../element-data';
11+
12+
@Component({
13+
moduleId: module.id,
14+
templateUrl: 'dynamic-columns.html',
15+
})
16+
export class DynamicColumnsDemo {
17+
definedColumns = ['name', 'weight', 'symbol', 'position'];
18+
columnsToDisplay = this.definedColumns.slice();
19+
dataSource: Element[] = ELEMENT_DATA.slice();
20+
21+
addColumn() {
22+
const randomColumn = Math.floor(Math.random() * 4);
23+
this.columnsToDisplay.push(this.definedColumns[randomColumn]);
24+
}
25+
26+
removeColumn() {
27+
if (!this.columnsToDisplay.length) { return; }
28+
this.columnsToDisplay.pop();
29+
}
30+
31+
shuffle() {
32+
let currentIndex = this.columnsToDisplay.length;
33+
while (0 !== currentIndex) {
34+
let randomIndex = Math.floor(Math.random() * currentIndex);
35+
currentIndex -= 1;
36+
37+
// Swap
38+
let temp = this.columnsToDisplay[currentIndex];
39+
this.columnsToDisplay[currentIndex] = this.columnsToDisplay[randomIndex];
40+
this.columnsToDisplay[randomIndex] = temp;
41+
}
42+
}
43+
}

0 commit comments

Comments
 (0)