Skip to content

Commit fc26778

Browse files
andrewseguinandrewseguin
committed
docs(material/table): add examples with changing data
1 parent d7e2109 commit fc26778

File tree

7 files changed

+255
-28
lines changed

7 files changed

+255
-28
lines changed

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

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -46,39 +46,43 @@ 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 {TableDynamicArrayDataExample} from './table-dynamic-array-data/table-dynamic-array-data-example';
50+
import {TableDynamicObservableDataExample} from './table-dynamic-observable-data/table-dynamic-observable-data-example';
4951

5052
export {
51-
TableBasicExample, TableFlexBasicExample,
52-
TableDynamicColumnsExample, TableExpandableRowsExample,
53-
TableFilteringExample, TableFooterRowExample,
54-
TableHttpExample, TableMultipleHeaderFooterExample,
55-
TableOverviewExample, TablePaginationExample,
56-
TableRowContextExample, TableSelectionExample,
57-
TableSortingExample, TableStickyColumnsExample,
58-
TableStickyComplexExample, TableStickyComplexFlexExample,
59-
TableStickyFooterExample, TableStickyHeaderExample,
60-
TableTextColumnExample, TableTextColumnAdvancedExample,
61-
TableWrappedExample, WrapperTable,
62-
TableReorderableExample, TableRecycleRowsExample,
63-
TableHarnessExample, TableColumnStylingExample,
64-
TableRowBindingExample, TableWithRipplesExample,
53+
TableBasicExample, TableFlexBasicExample,
54+
TableDynamicColumnsExample, TableExpandableRowsExample,
55+
TableFilteringExample, TableFooterRowExample,
56+
TableHttpExample, TableMultipleHeaderFooterExample,
57+
TableOverviewExample, TablePaginationExample,
58+
TableRowContextExample, TableSelectionExample,
59+
TableSortingExample, TableStickyColumnsExample,
60+
TableStickyComplexExample, TableStickyComplexFlexExample,
61+
TableStickyFooterExample, TableStickyHeaderExample,
62+
TableTextColumnExample, TableTextColumnAdvancedExample,
63+
TableWrappedExample, WrapperTable,
64+
TableReorderableExample, TableRecycleRowsExample,
65+
TableHarnessExample, TableColumnStylingExample,
66+
TableRowBindingExample, TableWithRipplesExample,
67+
TableDynamicArrayDataExample, TableDynamicObservableDataExample,
6568
};
6669

6770
const EXAMPLES = [
68-
TableBasicExample, TableFlexBasicExample,
69-
TableDynamicColumnsExample, TableExpandableRowsExample,
70-
TableFilteringExample, TableFooterRowExample,
71-
TableHttpExample, TableMultipleHeaderFooterExample,
72-
TableOverviewExample, TablePaginationExample,
73-
TableRowContextExample, TableSelectionExample,
74-
TableSortingExample, TableStickyColumnsExample,
75-
TableStickyComplexExample, TableStickyComplexFlexExample,
76-
TableStickyFooterExample, TableStickyHeaderExample,
77-
TableTextColumnExample, TableTextColumnAdvancedExample,
78-
TableWrappedExample, WrapperTable,
79-
TableReorderableExample, TableRecycleRowsExample,
80-
TableHarnessExample, TableColumnStylingExample,
81-
TableRowBindingExample, TableWithRipplesExample,
71+
TableBasicExample, TableFlexBasicExample,
72+
TableDynamicColumnsExample, TableExpandableRowsExample,
73+
TableFilteringExample, TableFooterRowExample,
74+
TableHttpExample, TableMultipleHeaderFooterExample,
75+
TableOverviewExample, TablePaginationExample,
76+
TableRowContextExample, TableSelectionExample,
77+
TableSortingExample, TableStickyColumnsExample,
78+
TableStickyComplexExample, TableStickyComplexFlexExample,
79+
TableStickyFooterExample, TableStickyHeaderExample,
80+
TableTextColumnExample, TableTextColumnAdvancedExample,
81+
TableWrappedExample, WrapperTable,
82+
TableReorderableExample, TableRecycleRowsExample,
83+
TableHarnessExample, TableColumnStylingExample,
84+
TableRowBindingExample, TableWithRipplesExample,
85+
TableDynamicArrayDataExample, TableDynamicObservableDataExample,
8286
];
8387

8488
@NgModule({

‎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)