Skip to content

Commit 7a87ef9

Browse files
andrewseguinandrewseguin
authored
docs(material/table): add examples with changing data (#22808)
* docs(material/table): add examples with changing data * docs(material/table): flat list * docs(material/table): flat list
1 parent 0b04570 commit 7a87ef9

File tree

7 files changed

+289
-28
lines changed

7 files changed

+289
-28
lines changed

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

Lines changed: 66 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -46,44 +46,82 @@ 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,
61+
TableColumnStylingExample,
62+
TableDynamicArrayDataExample,
63+
TableDynamicColumnsExample,
64+
TableDynamicObservableDataExample,
65+
TableExpandableRowsExample,
66+
TableFilteringExample,
67+
TableFlexBasicExample,
68+
TableFooterRowExample,
6869
TableGeneratedColumnsExample,
70+
TableHarnessExample,
71+
TableHttpExample,
72+
TableMultipleHeaderFooterExample,
73+
TableOverviewExample,
74+
TablePaginationExample,
75+
TableRecycleRowsExample,
76+
TableReorderableExample,
77+
TableRowBindingExample,
78+
TableRowContextExample,
79+
TableSelectionExample,
80+
TableSortingExample,
81+
TableStickyColumnsExample,
82+
TableStickyComplexExample,
83+
TableStickyComplexFlexExample,
84+
TableStickyFooterExample,
85+
TableStickyHeaderExample,
86+
TableTextColumnAdvancedExample,
87+
TableTextColumnExample,
88+
TableWithRipplesExample,
89+
TableWrappedExample,
90+
WrapperTable,
6991
};
7092

7193
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,
94+
TableBasicExample,
95+
TableColumnStylingExample,
96+
TableDynamicArrayDataExample,
97+
TableDynamicColumnsExample,
98+
TableDynamicObservableDataExample,
99+
TableExpandableRowsExample,
100+
TableFilteringExample,
101+
TableFlexBasicExample,
102+
TableFooterRowExample,
86103
TableGeneratedColumnsExample,
104+
TableHarnessExample,
105+
TableHttpExample,
106+
TableMultipleHeaderFooterExample,
107+
TableOverviewExample,
108+
TablePaginationExample,
109+
TableRecycleRowsExample,
110+
TableReorderableExample,
111+
TableRowBindingExample,
112+
TableRowContextExample,
113+
TableSelectionExample,
114+
TableSortingExample,
115+
TableStickyColumnsExample,
116+
TableStickyComplexExample,
117+
TableStickyComplexFlexExample,
118+
TableStickyFooterExample,
119+
TableStickyHeaderExample,
120+
TableTextColumnAdvancedExample,
121+
TableTextColumnExample,
122+
TableWithRipplesExample,
123+
TableWrappedExample,
124+
WrapperTable,
87125
];
88126

89127
@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)