Skip to content

Commit 00e1691

Browse files
andrewseguinandrewseguin
committed
docs(material/table): add examples with changing data
1 parent 0b04570 commit 00e1691

File tree

7 files changed

+259
-28
lines changed

7 files changed

+259
-28
lines changed

‎src/components-examples/material/table/index.ts

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -46,43 +46,51 @@ import {TableHarnessExample} from './table-harness/table-harness-example';
4646
import {TableWithRipplesExample} from './table-with-ripples/table-with-ripples-example';
4747
import {TableColumnStylingExample} from './table-column-styling/table-column-styling-example';
4848
import {TableRowBindingExample} from './table-row-binding/table-row-binding-example';
49+
import {
50+
TableDynamicArrayDataExample
51+
} from './table-dynamic-array-data/table-dynamic-array-data-example';
52+
import {
53+
TableDynamicObservableDataExample
54+
} from './table-dynamic-observable-data/table-dynamic-observable-data-example';
4955
import {
5056
TableGeneratedColumnsExample
5157
} from './table-generated-columns/table-generated-columns-example';
5258

5359
export {
54-
TableBasicExample, TableFlexBasicExample,
55-
TableDynamicColumnsExample, TableExpandableRowsExample,
56-
TableFilteringExample, TableFooterRowExample,
57-
TableHttpExample, TableMultipleHeaderFooterExample,
58-
TableOverviewExample, TablePaginationExample,
59-
TableRowContextExample, TableSelectionExample,
60-
TableSortingExample, TableStickyColumnsExample,
61-
TableStickyComplexExample, TableStickyComplexFlexExample,
62-
TableStickyFooterExample, TableStickyHeaderExample,
63-
TableTextColumnExample, TableTextColumnAdvancedExample,
64-
TableWrappedExample, WrapperTable,
65-
TableReorderableExample, TableRecycleRowsExample,
66-
TableHarnessExample, TableColumnStylingExample,
67-
TableRowBindingExample, TableWithRipplesExample,
60+
TableBasicExample, TableFlexBasicExample,
61+
TableDynamicColumnsExample, TableExpandableRowsExample,
62+
TableFilteringExample, TableFooterRowExample,
63+
TableHttpExample, TableMultipleHeaderFooterExample,
64+
TableOverviewExample, TablePaginationExample,
65+
TableRowContextExample, TableSelectionExample,
66+
TableSortingExample, TableStickyColumnsExample,
67+
TableStickyComplexExample, TableStickyComplexFlexExample,
68+
TableStickyFooterExample, TableStickyHeaderExample,
69+
TableTextColumnExample, TableTextColumnAdvancedExample,
70+
TableWrappedExample, WrapperTable,
71+
TableReorderableExample, TableRecycleRowsExample,
72+
TableHarnessExample, TableColumnStylingExample,
73+
TableRowBindingExample, TableWithRipplesExample,
74+
TableDynamicArrayDataExample, TableDynamicObservableDataExample,
6875
TableGeneratedColumnsExample,
6976
};
7077

7178
const EXAMPLES = [
72-
TableBasicExample, TableFlexBasicExample,
73-
TableDynamicColumnsExample, TableExpandableRowsExample,
74-
TableFilteringExample, TableFooterRowExample,
75-
TableHttpExample, TableMultipleHeaderFooterExample,
76-
TableOverviewExample, TablePaginationExample,
77-
TableRowContextExample, TableSelectionExample,
78-
TableSortingExample, TableStickyColumnsExample,
79-
TableStickyComplexExample, TableStickyComplexFlexExample,
80-
TableStickyFooterExample, TableStickyHeaderExample,
81-
TableTextColumnExample, TableTextColumnAdvancedExample,
82-
TableWrappedExample, WrapperTable,
83-
TableReorderableExample, TableRecycleRowsExample,
84-
TableHarnessExample, TableColumnStylingExample,
85-
TableRowBindingExample, TableWithRipplesExample,
79+
TableBasicExample, TableFlexBasicExample,
80+
TableDynamicColumnsExample, TableExpandableRowsExample,
81+
TableFilteringExample, TableFooterRowExample,
82+
TableHttpExample, TableMultipleHeaderFooterExample,
83+
TableOverviewExample, TablePaginationExample,
84+
TableRowContextExample, TableSelectionExample,
85+
TableSortingExample, TableStickyColumnsExample,
86+
TableStickyComplexExample, TableStickyComplexFlexExample,
87+
TableStickyFooterExample, TableStickyHeaderExample,
88+
TableTextColumnExample, TableTextColumnAdvancedExample,
89+
TableWrappedExample, WrapperTable,
90+
TableReorderableExample, TableRecycleRowsExample,
91+
TableHarnessExample, TableColumnStylingExample,
92+
TableRowBindingExample, TableWithRipplesExample,
93+
TableDynamicArrayDataExample, TableDynamicObservableDataExample,
8694
TableGeneratedColumnsExample,
8795
];
8896

‎src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.demo-table {
2+
width: 100%;
3+
}
4+
5+
.demo-button-container {
6+
padding-bottom: 16px;
7+
}
8+
9+
.demo-button + .demo-button {
10+
margin-left: 8px;
11+
}

‎src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<div class="demo-button-container">
2+
<button mat-raised-button (click)="addData()" class="demo-button">
3+
Add data
4+
</button>
5+
<button
6+
mat-raised-button
7+
[disabled]="!dataSource.length"
8+
(click)="removeData()"
9+
class="demo-button">
10+
Remove data
11+
</button>
12+
</div>
13+
14+
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
15+
<!-- Position Column -->
16+
<ng-container matColumnDef="position">
17+
<th mat-header-cell *matHeaderCellDef>No.</th>
18+
<td mat-cell *matCellDef="let element">{{element.position}}</td>
19+
</ng-container>
20+
21+
<!-- Name Column -->
22+
<ng-container matColumnDef="name">
23+
<th mat-header-cell *matHeaderCellDef>Name</th>
24+
<td mat-cell *matCellDef="let element">{{element.name}}</td>
25+
</ng-container>
26+
27+
<!-- Weight Column -->
28+
<ng-container matColumnDef="weight">
29+
<th mat-header-cell *matHeaderCellDef>Weight</th>
30+
<td mat-cell *matCellDef="let element">{{element.weight}}</td>
31+
</ng-container>
32+
33+
<!-- Symbol Column -->
34+
<ng-container matColumnDef="symbol">
35+
<th mat-header-cell *matHeaderCellDef>Symbol</th>
36+
<td mat-cell *matCellDef="let element">{{element.symbol}}</td>
37+
</ng-container>
38+
39+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
40+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
41+
</table>

‎src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.ts

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import {Component, ViewChild} from '@angular/core';
2+
import {MatTable} from '@angular/material/table';
3+
4+
export interface PeriodicElement {
5+
name: string;
6+
position: number;
7+
weight: number;
8+
symbol: string;
9+
}
10+
11+
const ELEMENT_DATA: PeriodicElement[] = [
12+
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
13+
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
14+
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
15+
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
16+
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
17+
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
18+
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
19+
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
20+
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
21+
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
22+
];
23+
24+
/**
25+
* @title Adding and removing data when using an array-based datasource.
26+
*/
27+
@Component({
28+
selector: 'table-dynamic-array-data-example',
29+
styleUrls: ['table-dynamic-array-data-example.css'],
30+
templateUrl: 'table-dynamic-array-data-example.html',
31+
})
32+
export class TableDynamicArrayDataExample {
33+
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
34+
dataSource = [...ELEMENT_DATA];
35+
36+
@ViewChild(MatTable) table: MatTable<PeriodicElement>;
37+
38+
addData() {
39+
const randomElementIndex = Math.floor(Math.random() * ELEMENT_DATA.length);
40+
this.dataSource.push(ELEMENT_DATA[randomElementIndex]);
41+
this.table.renderRows();
42+
}
43+
44+
removeData() {
45+
this.dataSource.pop();
46+
this.table.renderRows();
47+
}
48+
}

‎src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.demo-table {
2+
width: 100%;
3+
}
4+
5+
.demo-button-container {
6+
padding-bottom: 16px;
7+
}
8+
9+
.demo-button + .demo-button {
10+
margin-left: 8px;
11+
}

‎src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<div class="demo-button-container">
2+
<button mat-raised-button (click)="addData()" class="demo-button">
3+
Add data
4+
</button>
5+
<button
6+
mat-raised-button
7+
[disabled]="!dataToDisplay.length"
8+
(click)="removeData()"
9+
class="demo-button">
10+
Remove data
11+
</button>
12+
</div>
13+
14+
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
15+
<!-- Position Column -->
16+
<ng-container matColumnDef="position">
17+
<th mat-header-cell *matHeaderCellDef>No.</th>
18+
<td mat-cell *matCellDef="let element">{{element.position}}</td>
19+
</ng-container>
20+
21+
<!-- Name Column -->
22+
<ng-container matColumnDef="name">
23+
<th mat-header-cell *matHeaderCellDef>Name</th>
24+
<td mat-cell *matCellDef="let element">{{element.name}}</td>
25+
</ng-container>
26+
27+
<!-- Weight Column -->
28+
<ng-container matColumnDef="weight">
29+
<th mat-header-cell *matHeaderCellDef>Weight</th>
30+
<td mat-cell *matCellDef="let element">{{element.weight}}</td>
31+
</ng-container>
32+
33+
<!-- Symbol Column -->
34+
<ng-container matColumnDef="symbol">
35+
<th mat-header-cell *matHeaderCellDef>Symbol</th>
36+
<td mat-cell *matCellDef="let element">{{element.symbol}}</td>
37+
</ng-container>
38+
39+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
40+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
41+
</table>

‎src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.ts

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import {Component} from '@angular/core';
2+
import {DataSource} from '@angular/cdk/collections';
3+
import {Observable, ReplaySubject} from 'rxjs';
4+
5+
export interface PeriodicElement {
6+
name: string;
7+
position: number;
8+
weight: number;
9+
symbol: string;
10+
}
11+
12+
const ELEMENT_DATA: PeriodicElement[] = [
13+
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
14+
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
15+
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
16+
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
17+
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
18+
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
19+
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
20+
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
21+
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
22+
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
23+
];
24+
25+
/**
26+
* @title Adding and removing data when using an observable-based datasource.
27+
*/
28+
@Component({
29+
selector: 'table-dynamic-observable-data-example',
30+
styleUrls: ['table-dynamic-observable-data-example.css'],
31+
templateUrl: 'table-dynamic-observable-data-example.html',
32+
})
33+
export class TableDynamicObservableDataExample {
34+
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
35+
dataToDisplay = [...ELEMENT_DATA];
36+
37+
dataSource = new ExampleDataSource(this.dataToDisplay);
38+
39+
addData() {
40+
const randomElementIndex = Math.floor(Math.random() * ELEMENT_DATA.length);
41+
this.dataToDisplay = [
42+
...this.dataToDisplay,
43+
ELEMENT_DATA[randomElementIndex]
44+
];
45+
this.dataSource.setData(this.dataToDisplay);
46+
}
47+
48+
removeData() {
49+
this.dataToDisplay = this.dataToDisplay.slice(0, -1);
50+
this.dataSource.setData(this.dataToDisplay);
51+
}
52+
}
53+
54+
class ExampleDataSource extends DataSource<PeriodicElement> {
55+
private _dataStream = new ReplaySubject<PeriodicElement[]>();
56+
57+
constructor(initialData: PeriodicElement[]) {
58+
super();
59+
this.setData(initialData);
60+
}
61+
62+
connect(): Observable<PeriodicElement[]> {
63+
return this._dataStream;
64+
}
65+
66+
disconnect() {}
67+
68+
setData(data: PeriodicElement[]) {
69+
this._dataStream.next(data);
70+
}
71+
}

0 commit comments

Comments
 (0)