From 00e1691ce6241f48e001847a4965a3bba3fe6b61 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Wed, 26 May 2021 06:56:32 -0600 Subject: [PATCH 1/3] docs(material/table): add examples with changing data --- .../material/table/index.ts | 64 +++++++++-------- .../table-dynamic-array-data-example.css | 11 +++ .../table-dynamic-array-data-example.html | 41 +++++++++++ .../table-dynamic-array-data-example.ts | 48 +++++++++++++ .../table-dynamic-observable-data-example.css | 11 +++ ...table-dynamic-observable-data-example.html | 41 +++++++++++ .../table-dynamic-observable-data-example.ts | 71 +++++++++++++++++++ 7 files changed, 259 insertions(+), 28 deletions(-) create mode 100644 src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.css create mode 100644 src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.html create mode 100644 src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.ts create mode 100644 src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.css create mode 100644 src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.html create mode 100644 src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.ts diff --git a/src/components-examples/material/table/index.ts b/src/components-examples/material/table/index.ts index 4887dad6e0c4..6a600d4acee3 100644 --- a/src/components-examples/material/table/index.ts +++ b/src/components-examples/material/table/index.ts @@ -46,43 +46,51 @@ import {TableHarnessExample} from './table-harness/table-harness-example'; import {TableWithRipplesExample} from './table-with-ripples/table-with-ripples-example'; import {TableColumnStylingExample} from './table-column-styling/table-column-styling-example'; import {TableRowBindingExample} from './table-row-binding/table-row-binding-example'; +import { + TableDynamicArrayDataExample +} from './table-dynamic-array-data/table-dynamic-array-data-example'; +import { + TableDynamicObservableDataExample +} from './table-dynamic-observable-data/table-dynamic-observable-data-example'; import { TableGeneratedColumnsExample } from './table-generated-columns/table-generated-columns-example'; export { - TableBasicExample, TableFlexBasicExample, - TableDynamicColumnsExample, TableExpandableRowsExample, - TableFilteringExample, TableFooterRowExample, - TableHttpExample, TableMultipleHeaderFooterExample, - TableOverviewExample, TablePaginationExample, - TableRowContextExample, TableSelectionExample, - TableSortingExample, TableStickyColumnsExample, - TableStickyComplexExample, TableStickyComplexFlexExample, - TableStickyFooterExample, TableStickyHeaderExample, - TableTextColumnExample, TableTextColumnAdvancedExample, - TableWrappedExample, WrapperTable, - TableReorderableExample, TableRecycleRowsExample, - TableHarnessExample, TableColumnStylingExample, - TableRowBindingExample, TableWithRipplesExample, + TableBasicExample, TableFlexBasicExample, + TableDynamicColumnsExample, TableExpandableRowsExample, + TableFilteringExample, TableFooterRowExample, + TableHttpExample, TableMultipleHeaderFooterExample, + TableOverviewExample, TablePaginationExample, + TableRowContextExample, TableSelectionExample, + TableSortingExample, TableStickyColumnsExample, + TableStickyComplexExample, TableStickyComplexFlexExample, + TableStickyFooterExample, TableStickyHeaderExample, + TableTextColumnExample, TableTextColumnAdvancedExample, + TableWrappedExample, WrapperTable, + TableReorderableExample, TableRecycleRowsExample, + TableHarnessExample, TableColumnStylingExample, + TableRowBindingExample, TableWithRipplesExample, + TableDynamicArrayDataExample, TableDynamicObservableDataExample, TableGeneratedColumnsExample, }; const EXAMPLES = [ - TableBasicExample, TableFlexBasicExample, - TableDynamicColumnsExample, TableExpandableRowsExample, - TableFilteringExample, TableFooterRowExample, - TableHttpExample, TableMultipleHeaderFooterExample, - TableOverviewExample, TablePaginationExample, - TableRowContextExample, TableSelectionExample, - TableSortingExample, TableStickyColumnsExample, - TableStickyComplexExample, TableStickyComplexFlexExample, - TableStickyFooterExample, TableStickyHeaderExample, - TableTextColumnExample, TableTextColumnAdvancedExample, - TableWrappedExample, WrapperTable, - TableReorderableExample, TableRecycleRowsExample, - TableHarnessExample, TableColumnStylingExample, - TableRowBindingExample, TableWithRipplesExample, + TableBasicExample, TableFlexBasicExample, + TableDynamicColumnsExample, TableExpandableRowsExample, + TableFilteringExample, TableFooterRowExample, + TableHttpExample, TableMultipleHeaderFooterExample, + TableOverviewExample, TablePaginationExample, + TableRowContextExample, TableSelectionExample, + TableSortingExample, TableStickyColumnsExample, + TableStickyComplexExample, TableStickyComplexFlexExample, + TableStickyFooterExample, TableStickyHeaderExample, + TableTextColumnExample, TableTextColumnAdvancedExample, + TableWrappedExample, WrapperTable, + TableReorderableExample, TableRecycleRowsExample, + TableHarnessExample, TableColumnStylingExample, + TableRowBindingExample, TableWithRipplesExample, + TableDynamicArrayDataExample, TableDynamicObservableDataExample, TableGeneratedColumnsExample, ]; diff --git a/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.css b/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.css new file mode 100644 index 000000000000..bf32694f2ff1 --- /dev/null +++ b/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.css @@ -0,0 +1,11 @@ +.demo-table { + width: 100%; +} + +.demo-button-container { + padding-bottom: 16px; +} + +.demo-button + .demo-button { + margin-left: 8px; +} diff --git a/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.html b/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.html new file mode 100644 index 000000000000..9e0cf9a588b7 --- /dev/null +++ b/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.html @@ -0,0 +1,41 @@ +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No.{{element.position}}Name{{element.name}}Weight{{element.weight}}Symbol{{element.symbol}}
diff --git a/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.ts b/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.ts new file mode 100644 index 000000000000..bea1ba614316 --- /dev/null +++ b/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.ts @@ -0,0 +1,48 @@ +import {Component, ViewChild} from '@angular/core'; +import {MatTable} from '@angular/material/table'; + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}, + {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}, + {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'}, + {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}, + {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'}, + {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'}, + {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'}, + {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'}, + {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, + {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, +]; + +/** + * @title Adding and removing data when using an array-based datasource. + */ +@Component({ + selector: 'table-dynamic-array-data-example', + styleUrls: ['table-dynamic-array-data-example.css'], + templateUrl: 'table-dynamic-array-data-example.html', +}) +export class TableDynamicArrayDataExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = [...ELEMENT_DATA]; + + @ViewChild(MatTable) table: MatTable; + + addData() { + const randomElementIndex = Math.floor(Math.random() * ELEMENT_DATA.length); + this.dataSource.push(ELEMENT_DATA[randomElementIndex]); + this.table.renderRows(); + } + + removeData() { + this.dataSource.pop(); + this.table.renderRows(); + } +} diff --git a/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.css b/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.css new file mode 100644 index 000000000000..bf32694f2ff1 --- /dev/null +++ b/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.css @@ -0,0 +1,11 @@ +.demo-table { + width: 100%; +} + +.demo-button-container { + padding-bottom: 16px; +} + +.demo-button + .demo-button { + margin-left: 8px; +} diff --git a/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.html b/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.html new file mode 100644 index 000000000000..b3388c5cc5b0 --- /dev/null +++ b/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.html @@ -0,0 +1,41 @@ +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No.{{element.position}}Name{{element.name}}Weight{{element.weight}}Symbol{{element.symbol}}
diff --git a/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.ts b/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.ts new file mode 100644 index 000000000000..5c4593ddd198 --- /dev/null +++ b/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.ts @@ -0,0 +1,71 @@ +import {Component} from '@angular/core'; +import {DataSource} from '@angular/cdk/collections'; +import {Observable, ReplaySubject} from 'rxjs'; + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}, + {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}, + {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'}, + {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}, + {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'}, + {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'}, + {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'}, + {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'}, + {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, + {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, +]; + +/** + * @title Adding and removing data when using an observable-based datasource. + */ +@Component({ + selector: 'table-dynamic-observable-data-example', + styleUrls: ['table-dynamic-observable-data-example.css'], + templateUrl: 'table-dynamic-observable-data-example.html', +}) +export class TableDynamicObservableDataExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataToDisplay = [...ELEMENT_DATA]; + + dataSource = new ExampleDataSource(this.dataToDisplay); + + addData() { + const randomElementIndex = Math.floor(Math.random() * ELEMENT_DATA.length); + this.dataToDisplay = [ + ...this.dataToDisplay, + ELEMENT_DATA[randomElementIndex] + ]; + this.dataSource.setData(this.dataToDisplay); + } + + removeData() { + this.dataToDisplay = this.dataToDisplay.slice(0, -1); + this.dataSource.setData(this.dataToDisplay); + } +} + +class ExampleDataSource extends DataSource { + private _dataStream = new ReplaySubject(); + + constructor(initialData: PeriodicElement[]) { + super(); + this.setData(initialData); + } + + connect(): Observable { + return this._dataStream; + } + + disconnect() {} + + setData(data: PeriodicElement[]) { + this._dataStream.next(data); + } +} From 355f5797a2e62b19cbacd8c987a2ac28ae305bad Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Wed, 26 May 2021 10:06:24 -0600 Subject: [PATCH 2/3] docs(material/table): flat list --- .../material/table/index.ts | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/src/components-examples/material/table/index.ts b/src/components-examples/material/table/index.ts index 6a600d4acee3..bb496407e2ed 100644 --- a/src/components-examples/material/table/index.ts +++ b/src/components-examples/material/table/index.ts @@ -57,6 +57,7 @@ import { } from './table-generated-columns/table-generated-columns-example'; export { +<<<<<<< HEAD TableBasicExample, TableFlexBasicExample, TableDynamicColumnsExample, TableExpandableRowsExample, TableFilteringExample, TableFooterRowExample, @@ -92,6 +93,71 @@ const EXAMPLES = [ TableRowBindingExample, TableWithRipplesExample, TableDynamicArrayDataExample, TableDynamicObservableDataExample, TableGeneratedColumnsExample, +======= + TableBasicExample, + TableColumnStylingExample, + TableDynamicArrayDataExample, + TableDynamicColumnsExample, + TableDynamicObservableDataExample, + TableExpandableRowsExample, + TableFilteringExample, + TableFlexBasicExample, + TableFooterRowExample, + TableHarnessExample, + TableHttpExample, + TableMultipleHeaderFooterExample, + TableOverviewExample, + TablePaginationExample, + TableRecycleRowsExample, + TableReorderableExample, + TableRowBindingExample, + TableRowContextExample, + TableSelectionExample, + TableSortingExample, + TableStickyColumnsExample, + TableStickyComplexExample, + TableStickyComplexFlexExample, + TableStickyFooterExample, + TableStickyHeaderExample, + TableTextColumnAdvancedExample, + TableTextColumnExample, + TableWithRipplesExample, + TableWrappedExample, + WrapperTable, +}; + +const EXAMPLES = [ + TableBasicExample, + TableColumnStylingExample, + TableDynamicArrayDataExample, + TableDynamicColumnsExample, + TableDynamicObservableDataExample, + TableExpandableRowsExample, + TableFilteringExample, + TableFlexBasicExample, + TableFooterRowExample, + TableHarnessExample, + TableHttpExample, + TableMultipleHeaderFooterExample, + TableOverviewExample, + TablePaginationExample, + TableRecycleRowsExample, + TableReorderableExample, + TableRowBindingExample, + TableRowContextExample, + TableSelectionExample, + TableSortingExample, + TableStickyColumnsExample, + TableStickyComplexExample, + TableStickyComplexFlexExample, + TableStickyFooterExample, + TableStickyHeaderExample, + TableTextColumnAdvancedExample, + TableTextColumnExample, + TableWithRipplesExample, + TableWrappedExample, + WrapperTable, +>>>>>>> 045e8744f (docs(material/table): flat list) ]; @NgModule({ From 234ead955dc4c04a557c3ac0fc6bb0a68b1050a2 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Wed, 26 May 2021 12:54:58 -0600 Subject: [PATCH 3/3] docs(material/table): flat list --- .../material/table/index.ts | 40 +------------------ 1 file changed, 2 insertions(+), 38 deletions(-) diff --git a/src/components-examples/material/table/index.ts b/src/components-examples/material/table/index.ts index bb496407e2ed..18bcc5d49e39 100644 --- a/src/components-examples/material/table/index.ts +++ b/src/components-examples/material/table/index.ts @@ -57,43 +57,6 @@ import { } from './table-generated-columns/table-generated-columns-example'; export { -<<<<<<< HEAD - TableBasicExample, TableFlexBasicExample, - TableDynamicColumnsExample, TableExpandableRowsExample, - TableFilteringExample, TableFooterRowExample, - TableHttpExample, TableMultipleHeaderFooterExample, - TableOverviewExample, TablePaginationExample, - TableRowContextExample, TableSelectionExample, - TableSortingExample, TableStickyColumnsExample, - TableStickyComplexExample, TableStickyComplexFlexExample, - TableStickyFooterExample, TableStickyHeaderExample, - TableTextColumnExample, TableTextColumnAdvancedExample, - TableWrappedExample, WrapperTable, - TableReorderableExample, TableRecycleRowsExample, - TableHarnessExample, TableColumnStylingExample, - TableRowBindingExample, TableWithRipplesExample, - TableDynamicArrayDataExample, TableDynamicObservableDataExample, - TableGeneratedColumnsExample, -}; - -const EXAMPLES = [ - TableBasicExample, TableFlexBasicExample, - TableDynamicColumnsExample, TableExpandableRowsExample, - TableFilteringExample, TableFooterRowExample, - TableHttpExample, TableMultipleHeaderFooterExample, - TableOverviewExample, TablePaginationExample, - TableRowContextExample, TableSelectionExample, - TableSortingExample, TableStickyColumnsExample, - TableStickyComplexExample, TableStickyComplexFlexExample, - TableStickyFooterExample, TableStickyHeaderExample, - TableTextColumnExample, TableTextColumnAdvancedExample, - TableWrappedExample, WrapperTable, - TableReorderableExample, TableRecycleRowsExample, - TableHarnessExample, TableColumnStylingExample, - TableRowBindingExample, TableWithRipplesExample, - TableDynamicArrayDataExample, TableDynamicObservableDataExample, - TableGeneratedColumnsExample, -======= TableBasicExample, TableColumnStylingExample, TableDynamicArrayDataExample, @@ -103,6 +66,7 @@ const EXAMPLES = [ TableFilteringExample, TableFlexBasicExample, TableFooterRowExample, + TableGeneratedColumnsExample, TableHarnessExample, TableHttpExample, TableMultipleHeaderFooterExample, @@ -136,6 +100,7 @@ const EXAMPLES = [ TableFilteringExample, TableFlexBasicExample, TableFooterRowExample, + TableGeneratedColumnsExample, TableHarnessExample, TableHttpExample, TableMultipleHeaderFooterExample, @@ -157,7 +122,6 @@ const EXAMPLES = [ TableWithRipplesExample, TableWrappedExample, WrapperTable, ->>>>>>> 045e8744f (docs(material/table): flat list) ]; @NgModule({