From 313de59a2dbd746a510d6190cb8b49f82b68c834 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Tue, 13 Jul 2021 09:00:08 -0600 Subject: [PATCH 1/2] fix(material-experimental/mdc-table): match legacy examples --- .../mdc-table/BUILD.bazel | 64 +++++ .../material-experimental/mdc-table/index.ts | 148 +++++++++++ .../table-basic/table-basic-example.css | 3 + .../table-basic/table-basic-example.html | 33 +++ .../table-basic/table-basic-example.ts | 34 +++ .../table-column-styling-example.css | 25 ++ .../table-column-styling-example.html | 29 +++ .../table-column-styling-example.ts | 34 +++ .../table-dynamic-array-data-example.css | 11 + .../table-dynamic-array-data-example.html | 41 +++ .../table-dynamic-array-data-example.ts | 48 ++++ .../table-dynamic-columns-example.css | 7 + .../table-dynamic-columns-example.html | 13 + .../table-dynamic-columns-example.ts | 59 +++++ .../table-dynamic-observable-data-example.css | 11 + ...table-dynamic-observable-data-example.html | 41 +++ .../table-dynamic-observable-data-example.ts | 71 ++++++ .../table-expandable-rows-example.css | 47 ++++ .../table-expandable-rows-example.html | 35 +++ .../table-expandable-rows-example.ts | 113 +++++++++ .../table-filtering-example.css | 9 + .../table-filtering-example.html | 39 +++ .../table-filtering-example.ts | 40 +++ .../table-flex-basic-example.css | 3 + .../table-flex-basic-example.html | 28 ++ .../table-flex-basic-example.ts | 34 +++ .../table-footer-row-example.css | 7 + .../table-footer-row-example.html | 19 ++ .../table-footer-row-example.ts | 31 +++ .../table-generated-columns-example.css | 3 + .../table-generated-columns-example.html | 13 + .../table-generated-columns-example.ts | 56 ++++ .../table-harness/table-harness-example.html | 29 +++ .../table-harness-example.spec.ts | 93 +++++++ .../table-harness/table-harness-example.ts | 25 ++ .../table-http/table-http-example.css | 43 ++++ .../table-http/table-http-example.html | 46 ++++ .../table-http/table-http-example.ts | 87 +++++++ .../table-multiple-header-footer-example.css | 19 ++ .../table-multiple-header-footer-example.html | 45 ++++ .../table-multiple-header-footer-example.ts | 32 +++ .../table-overview/table-overview-example.css | 12 + .../table-overview-example.html | 44 ++++ .../table-overview/table-overview-example.ts | 71 ++++++ .../table-pagination-example.css | 3 + .../table-pagination-example.html | 33 +++ .../table-pagination-example.ts | 52 ++++ .../table-recycle-rows-example.css | 3 + .../table-recycle-rows-example.html | 29 +++ .../table-recycle-rows-example.ts | 34 +++ .../table-reorderable-example.css | 3 + .../table-reorderable-example.html | 29 +++ .../table-reorderable-example.ts | 39 +++ .../table-row-binding-example.css | 17 ++ .../table-row-binding-example.html | 49 ++++ .../table-row-binding-example.ts | 35 +++ .../table-row-context-example.css | 3 + .../table-row-context-example.html | 46 ++++ .../table-row-context-example.ts | 14 + .../table-selection-example.css | 3 + .../table-selection-example.html | 49 ++++ .../table-selection-example.ts | 62 +++++ .../table-sorting/table-sorting-example.css | 7 + .../table-sorting/table-sorting-example.html | 29 +++ .../table-sorting/table-sorting-example.ts | 42 +++ .../table-sticky-columns-example.css | 27 ++ .../table-sticky-columns-example.html | 39 +++ .../table-sticky-columns-example.ts | 35 +++ .../table-sticky-complex-flex-example.css | 44 ++++ .../table-sticky-complex-flex-example.html | 78 ++++++ .../table-sticky-complex-flex-example.ts | 53 ++++ .../table-sticky-complex-example.css | 40 +++ .../table-sticky-complex-example.html | 78 ++++++ .../table-sticky-complex-example.ts | 53 ++++ .../table-sticky-footer-example.css | 16 ++ .../table-sticky-footer-example.html | 21 ++ .../table-sticky-footer-example.ts | 31 +++ .../table-sticky-header-example.css | 8 + .../table-sticky-header-example.html | 31 +++ .../table-sticky-header-example.ts | 34 +++ .../table-text-column-advanced-example.css | 3 + .../table-text-column-advanced-example.html | 15 ++ .../table-text-column-advanced-example.ts | 46 ++++ .../table-text-column-example.css | 3 + .../table-text-column-example.html | 9 + .../table-text-column-example.ts | 35 +++ .../table-with-ripples-example.css | 0 .../table-with-ripples-example.html | 9 + .../table-with-ripples-example.ts | 27 ++ .../table-wrapped/table-wrapped-example.css | 7 + .../table-wrapped/table-wrapped-example.html | 22 ++ .../table-wrapped/table-wrapped-example.ts | 100 ++++++++ .../table-wrapped/wrapper-table.html | 21 ++ src/dev-app/mdc-table/BUILD.bazel | 9 +- .../mdc-table/mdc-table-demo-module.ts | 2 + src/dev-app/mdc-table/mdc-table-demo.html | 239 +++++------------- src/dev-app/mdc-table/mdc-table-demo.scss | 80 ------ src/dev-app/mdc-table/mdc-table-demo.ts | 26 -- 98 files changed, 3232 insertions(+), 285 deletions(-) create mode 100644 src/components-examples/material-experimental/mdc-table/BUILD.bazel create mode 100644 src/components-examples/material-experimental/mdc-table/index.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-dynamic-array-data/table-dynamic-array-data-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-dynamic-array-data/table-dynamic-array-data-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-dynamic-array-data/table-dynamic-array-data-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-dynamic-observable-data/table-dynamic-observable-data-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-dynamic-observable-data/table-dynamic-observable-data-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-dynamic-observable-data/table-dynamic-observable-data-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.spec.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-http/table-http-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-http/table-http-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-http/table-http-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-multiple-header-footer/table-multiple-header-footer-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-multiple-header-footer/table-multiple-header-footer-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-multiple-header-footer/table-multiple-header-footer-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.css create mode 100644 src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.html create mode 100644 src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.ts create mode 100644 src/components-examples/material-experimental/mdc-table/table-wrapped/wrapper-table.html delete mode 100644 src/dev-app/mdc-table/mdc-table-demo.scss diff --git a/src/components-examples/material-experimental/mdc-table/BUILD.bazel b/src/components-examples/material-experimental/mdc-table/BUILD.bazel new file mode 100644 index 000000000000..e4cedf2e015a --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/BUILD.bazel @@ -0,0 +1,64 @@ +load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite") + +package(default_visibility = ["//visibility:public"]) + +ng_module( + name = "mdc-table", + srcs = glob( + ["**/*.ts"], + exclude = ["**/*.spec.ts"], + ), + assets = glob([ + "**/*.html", + "**/*.css", + ]), + module_name = "@angular/components-examples/material-experimental/mdc-table", + deps = [ + "//src/cdk/drag-drop", + "//src/cdk/table", + "//src/cdk/testing", + "//src/cdk/testing/testbed", + "//src/material-experimental/mdc-table", + "//src/material/button", + "//src/material/button-toggle", + "//src/material/checkbox", + "//src/material/core", + "//src/material/icon", + "//src/material/input", + "//src/material/paginator", + "//src/material/progress-spinner", + "//src/material/sort", + "//src/material/table/testing", + "@npm//@angular/platform-browser", + "@npm//@angular/platform-browser-dynamic", + "@npm//@types/jasmine", + ], +) + +filegroup( + name = "source-files", + srcs = glob([ + "**/*.html", + "**/*.css", + "**/*.ts", + ]), +) + +ng_test_library( + name = "unit_tests_lib", + srcs = glob(["**/*.spec.ts"]), + deps = [ + ":mdc-table", + "//src/cdk/testing", + "//src/cdk/testing/testbed", + "//src/material/table", + "//src/material/table/testing", + "@npm//@angular/platform-browser-dynamic", + ], +) + +ng_web_test_suite( + name = "unit_tests", + exclude_init_script = True, + deps = [":unit_tests_lib"], +) diff --git a/src/components-examples/material-experimental/mdc-table/index.ts b/src/components-examples/material-experimental/mdc-table/index.ts new file mode 100644 index 000000000000..40c325508502 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/index.ts @@ -0,0 +1,148 @@ +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {MatRippleModule} from '@angular/material/core'; +import {MatButtonModule} from '@angular/material/button'; +import {MatButtonToggleModule} from '@angular/material/button-toggle'; +import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatIconModule} from '@angular/material/icon'; +import {MatInputModule} from '@angular/material/input'; +import {MatPaginatorModule} from '@angular/material/paginator'; +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; +import {MatSortModule} from '@angular/material/sort'; +import {MatTableModule} from '@angular/material-experimental/mdc-table'; +import {DragDropModule} from '@angular/cdk/drag-drop'; +import {CdkTableModule} from '@angular/cdk/table'; + +import {TableFlexBasicExample} from './table-flex-basic/table-flex-basic-example'; +import {TableBasicExample} from './table-basic/table-basic-example'; +import {TableDynamicColumnsExample} from './table-dynamic-columns/table-dynamic-columns-example'; +import {TableExpandableRowsExample} from './table-expandable-rows/table-expandable-rows-example'; +import {TableFilteringExample} from './table-filtering/table-filtering-example'; +import {TableFooterRowExample} from './table-footer-row/table-footer-row-example'; +import {TableHttpExample} from './table-http/table-http-example'; +import { + TableMultipleHeaderFooterExample +} from './table-multiple-header-footer/table-multiple-header-footer-example'; +import {TableOverviewExample} from './table-overview/table-overview-example'; +import {TablePaginationExample} from './table-pagination/table-pagination-example'; +import {TableRowContextExample} from './table-row-context/table-row-context-example'; +import {TableSelectionExample} from './table-selection/table-selection-example'; +import {TableSortingExample} from './table-sorting/table-sorting-example'; +import {TableStickyColumnsExample} from './table-sticky-columns/table-sticky-columns-example'; +import { + TableStickyComplexFlexExample +} from './table-sticky-complex-flex/table-sticky-complex-flex-example'; +import {TableStickyComplexExample} from './table-sticky-complex/table-sticky-complex-example'; +import {TableStickyFooterExample} from './table-sticky-footer/table-sticky-footer-example'; +import {TableStickyHeaderExample} from './table-sticky-header/table-sticky-header-example'; +import { + TableTextColumnAdvancedExample +} from './table-text-column-advanced/table-text-column-advanced-example'; +import {TableTextColumnExample} from './table-text-column/table-text-column-example'; +import {TableWrappedExample, WrapperTable} from './table-wrapped/table-wrapped-example'; +import {TableReorderableExample} from './table-reorderable/table-reorderable-example'; +import {TableRecycleRowsExample} from './table-recycle-rows/table-recycle-rows-example'; +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, + TableColumnStylingExample, + TableDynamicArrayDataExample, + TableDynamicColumnsExample, + TableDynamicObservableDataExample, + TableExpandableRowsExample, + TableFilteringExample, + TableFlexBasicExample, + TableFooterRowExample, + TableGeneratedColumnsExample, + 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, + TableGeneratedColumnsExample, + TableHarnessExample, + TableHttpExample, + TableMultipleHeaderFooterExample, + TableOverviewExample, + TablePaginationExample, + TableRecycleRowsExample, + TableReorderableExample, + TableRowBindingExample, + TableRowContextExample, + TableSelectionExample, + TableSortingExample, + TableStickyColumnsExample, + TableStickyComplexExample, + TableStickyComplexFlexExample, + TableStickyFooterExample, + TableStickyHeaderExample, + TableTextColumnAdvancedExample, + TableTextColumnExample, + TableWithRipplesExample, + TableWrappedExample, + WrapperTable, +]; + +@NgModule({ + imports: [ + CommonModule, + MatButtonModule, + MatButtonToggleModule, + MatCheckboxModule, + MatIconModule, + MatInputModule, + MatPaginatorModule, + MatProgressSpinnerModule, + MatRippleModule, + MatSortModule, + MatTableModule, + CdkTableModule, + DragDropModule, + ], + declarations: EXAMPLES, + exports: EXAMPLES, + entryComponents: EXAMPLES, +}) +export class MdcTableExamplesModule { +} diff --git a/src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.css b/src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.css new file mode 100644 index 000000000000..1922e7ffa3ad --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.css @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.html b/src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.html new file mode 100644 index 000000000000..054cb0c6ae41 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.html @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
+ diff --git a/src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.ts b/src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.ts new file mode 100644 index 000000000000..517218a256ea --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.ts @@ -0,0 +1,34 @@ +import {Component} from '@angular/core'; + +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 Basic use of `` + */ +@Component({ + selector: 'table-basic-example', + styleUrls: ['table-basic-example.css'], + templateUrl: 'table-basic-example.html', +}) +export class TableBasicExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = ELEMENT_DATA; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.css b/src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.css new file mode 100644 index 000000000000..92a61946af0c --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.css @@ -0,0 +1,25 @@ +.demo-table { + width: 100%; +} + +.mat-column-demo-position { + width: 32px; + border-right: 1px solid currentColor; + padding-right: 24px; + text-align: center; +} + +.mat-column-demo-name { + padding-left: 16px; + font-size: 20px; +} + +.mat-column-demo-weight { + font-style: italic; +} + +.mat-column-demo-symbol { + width: 32px; + text-align: center; + font-weight: bold; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.html b/src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.html new file mode 100644 index 000000000000..db278dd04306 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.html @@ -0,0 +1,29 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
+ diff --git a/src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.ts b/src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.ts new file mode 100644 index 000000000000..5fff93db8b67 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.ts @@ -0,0 +1,34 @@ +import {Component} from '@angular/core'; + +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 Styling columns using their auto-generated column names + */ +@Component({ + selector: 'table-column-styling-example', + styleUrls: ['table-column-styling-example.css'], + templateUrl: 'table-column-styling-example.html', +}) +export class TableColumnStylingExample { + displayedColumns: string[] = ['demo-position', 'demo-name', 'demo-weight', 'demo-symbol']; + dataSource = ELEMENT_DATA; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-dynamic-array-data/table-dynamic-array-data-example.css b/src/components-examples/material-experimental/mdc-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-experimental/mdc-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-experimental/mdc-table/table-dynamic-array-data/table-dynamic-array-data-example.html b/src/components-examples/material-experimental/mdc-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-experimental/mdc-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-experimental/mdc-table/table-dynamic-array-data/table-dynamic-array-data-example.ts b/src/components-examples/material-experimental/mdc-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-experimental/mdc-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-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.css b/src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.css new file mode 100644 index 000000000000..879b4295bb15 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.css @@ -0,0 +1,7 @@ +table { + width: 100%; +} + +button { + margin: 16px 8px; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.html b/src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.html new file mode 100644 index 000000000000..9d2fcac7ac34 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.html @@ -0,0 +1,13 @@ + + + + + + + + + + + + +
{{column}} {{element[column]}}
diff --git a/src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.ts b/src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.ts new file mode 100644 index 000000000000..4948c44ae4f3 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.ts @@ -0,0 +1,59 @@ +import {Component} from '@angular/core'; + +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 Table dynamically changing the columns displayed + */ +@Component({ + selector: 'table-dynamic-columns-example', + styleUrls: ['table-dynamic-columns-example.css'], + templateUrl: 'table-dynamic-columns-example.html', +}) +export class TableDynamicColumnsExample { + displayedColumns: string[] = ['name', 'weight', 'symbol', 'position']; + columnsToDisplay: string[] = this.displayedColumns.slice(); + data: PeriodicElement[] = ELEMENT_DATA; + + addColumn() { + const randomColumn = Math.floor(Math.random() * this.displayedColumns.length); + this.columnsToDisplay.push(this.displayedColumns[randomColumn]); + } + + removeColumn() { + if (this.columnsToDisplay.length) { + this.columnsToDisplay.pop(); + } + } + + shuffle() { + let currentIndex = this.columnsToDisplay.length; + while (0 !== currentIndex) { + let randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex -= 1; + + // Swap + let temp = this.columnsToDisplay[currentIndex]; + this.columnsToDisplay[currentIndex] = this.columnsToDisplay[randomIndex]; + this.columnsToDisplay[randomIndex] = temp; + } + } +} diff --git a/src/components-examples/material-experimental/mdc-table/table-dynamic-observable-data/table-dynamic-observable-data-example.css b/src/components-examples/material-experimental/mdc-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-experimental/mdc-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-experimental/mdc-table/table-dynamic-observable-data/table-dynamic-observable-data-example.html b/src/components-examples/material-experimental/mdc-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-experimental/mdc-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-experimental/mdc-table/table-dynamic-observable-data/table-dynamic-observable-data-example.ts b/src/components-examples/material-experimental/mdc-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-experimental/mdc-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); + } +} diff --git a/src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.css b/src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.css new file mode 100644 index 000000000000..a3cc2d66194c --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.css @@ -0,0 +1,47 @@ +table { + width: 100%; +} + +tr.example-detail-row { + height: 0; +} + +tr.example-element-row:not(.example-expanded-row):hover { + background: whitesmoke; +} + +tr.example-element-row:not(.example-expanded-row):active { + background: #efefef; +} + +.example-element-row td { + border-bottom-width: 0; +} + +.example-element-detail { + overflow: hidden; + display: flex; +} + +.example-element-diagram { + min-width: 80px; + border: 2px solid black; + padding: 8px; + font-weight: lighter; + margin: 8px 0; + height: 104px; +} + +.example-element-symbol { + font-weight: bold; + font-size: 40px; + line-height: normal; +} + +.example-element-description { + padding: 16px; +} + +.example-element-description-attribution { + opacity: 0.5; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.html b/src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.html new file mode 100644 index 000000000000..d3a22b11d547 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.html @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + +
{{column}} {{element[column]}} +
+
+
{{element.position}}
+
{{element.symbol}}
+
{{element.name}}
+
{{element.weight}}
+
+
+ {{element.description}} + -- Wikipedia +
+
+
diff --git a/src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.ts b/src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.ts new file mode 100644 index 000000000000..bf35aa6407b6 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.ts @@ -0,0 +1,113 @@ +import {Component} from '@angular/core'; +import {animate, state, style, transition, trigger} from '@angular/animations'; + +/** + * @title Table with expandable rows + */ +@Component({ + selector: 'table-expandable-rows-example', + styleUrls: ['table-expandable-rows-example.css'], + templateUrl: 'table-expandable-rows-example.html', + animations: [ + trigger('detailExpand', [ + state('collapsed', style({height: '0px', minHeight: '0'})), + state('expanded', style({height: '*'})), + transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')), + ]), + ], +}) +export class TableExpandableRowsExample { + dataSource = ELEMENT_DATA; + columnsToDisplay = ['name', 'weight', 'symbol', 'position']; + expandedElement: PeriodicElement | null; +} + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; + description: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + { + position: 1, + name: 'Hydrogen', + weight: 1.0079, + symbol: 'H', + description: `Hydrogen is a chemical element with symbol H and atomic number 1. With a standard + atomic weight of 1.008, hydrogen is the lightest element on the periodic table.` + }, { + position: 2, + name: 'Helium', + weight: 4.0026, + symbol: 'He', + description: `Helium is a chemical element with symbol He and atomic number 2. It is a + colorless, odorless, tasteless, non-toxic, inert, monatomic gas, the first in the noble gas + group in the periodic table. Its boiling point is the lowest among all the elements.` + }, { + position: 3, + name: 'Lithium', + weight: 6.941, + symbol: 'Li', + description: `Lithium is a chemical element with symbol Li and atomic number 3. It is a soft, + silvery-white alkali metal. Under standard conditions, it is the lightest metal and the + lightest solid element.` + }, { + position: 4, + name: 'Beryllium', + weight: 9.0122, + symbol: 'Be', + description: `Beryllium is a chemical element with symbol Be and atomic number 4. It is a + relatively rare element in the universe, usually occurring as a product of the spallation of + larger atomic nuclei that have collided with cosmic rays.` + }, { + position: 5, + name: 'Boron', + weight: 10.811, + symbol: 'B', + description: `Boron is a chemical element with symbol B and atomic number 5. Produced entirely + by cosmic ray spallation and supernovae and not by stellar nucleosynthesis, it is a + low-abundance element in the Solar system and in the Earth's crust.` + }, { + position: 6, + name: 'Carbon', + weight: 12.0107, + symbol: 'C', + description: `Carbon is a chemical element with symbol C and atomic number 6. It is nonmetallic + and tetravalent—making four electrons available to form covalent chemical bonds. It belongs + to group 14 of the periodic table.` + }, { + position: 7, + name: 'Nitrogen', + weight: 14.0067, + symbol: 'N', + description: `Nitrogen is a chemical element with symbol N and atomic number 7. It was first + discovered and isolated by Scottish physician Daniel Rutherford in 1772.` + }, { + position: 8, + name: 'Oxygen', + weight: 15.9994, + symbol: 'O', + description: `Oxygen is a chemical element with symbol O and atomic number 8. It is a member of + the chalcogen group on the periodic table, a highly reactive nonmetal, and an oxidizing + agent that readily forms oxides with most elements as well as with other compounds.` + }, { + position: 9, + name: 'Fluorine', + weight: 18.9984, + symbol: 'F', + description: `Fluorine is a chemical element with symbol F and atomic number 9. It is the + lightest halogen and exists as a highly toxic pale yellow diatomic gas at standard + conditions.` + }, { + position: 10, + name: 'Neon', + weight: 20.1797, + symbol: 'Ne', + description: `Neon is a chemical element with symbol Ne and atomic number 10. It is a noble gas. + Neon is a colorless, odorless, inert monatomic gas under standard conditions, with about + two-thirds the density of air.` + }, +]; diff --git a/src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.css b/src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.css new file mode 100644 index 000000000000..2d9da9228009 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.css @@ -0,0 +1,9 @@ +/* Structure */ +table { + width: 100%; +} + +.mat-form-field { + font-size: 14px; + width: 100%; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.html b/src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.html new file mode 100644 index 000000000000..dba75eb82e81 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.html @@ -0,0 +1,39 @@ + + Filter + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
No data matching the filter "{{input.value}}"
diff --git a/src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.ts b/src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.ts new file mode 100644 index 000000000000..f24acf8cdd1f --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.ts @@ -0,0 +1,40 @@ +import {Component} from '@angular/core'; +import {MatTableDataSource} 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 Table with filtering + */ +@Component({ + selector: 'table-filtering-example', + styleUrls: ['table-filtering-example.css'], + templateUrl: 'table-filtering-example.html', +}) +export class TableFilteringExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new MatTableDataSource(ELEMENT_DATA); + + applyFilter(event: Event) { + const filterValue = (event.target as HTMLInputElement).value; + this.dataSource.filter = filterValue.trim().toLowerCase(); + } +} diff --git a/src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.css b/src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.css new file mode 100644 index 000000000000..1922e7ffa3ad --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.css @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.html b/src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.html new file mode 100644 index 000000000000..09bb2c212897 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.html @@ -0,0 +1,28 @@ + + + + No. + {{element.position}} + + + + + Name + {{element.name}} + + + + + Weight + {{element.weight}} + + + + + Symbol + {{element.symbol}} + + + + + \ No newline at end of file diff --git a/src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.ts b/src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.ts new file mode 100644 index 000000000000..6a9ae8b725b2 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.ts @@ -0,0 +1,34 @@ +import {Component} from '@angular/core'; + +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 Basic use of `` (uses display flex) + */ +@Component({ + selector: 'table-flex-basic-example', + styleUrls: ['table-flex-basic-example.css'], + templateUrl: 'table-flex-basic-example.html', +}) +export class TableFlexBasicExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = ELEMENT_DATA; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.css b/src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.css new file mode 100644 index 000000000000..53ef90725254 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.css @@ -0,0 +1,7 @@ +table { + width: 100%; +} + +tr.mat-mdc-footer-row td { + font-weight: bold; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.html b/src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.html new file mode 100644 index 000000000000..c5faed4ef69d --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + +
Item {{transaction.item}} Total Cost {{transaction.cost | currency}} {{getTotalCost() | currency}}
diff --git a/src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.ts b/src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.ts new file mode 100644 index 000000000000..f61a659176c2 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.ts @@ -0,0 +1,31 @@ +import {Component} from '@angular/core'; + +interface Transaction { + item: string; + cost: number; +} + +/** + * @title Footer row table + */ +@Component({ + selector: 'table-footer-row-example', + styleUrls: ['table-footer-row-example.css'], + templateUrl: 'table-footer-row-example.html', +}) +export class TableFooterRowExample { + displayedColumns: string[] = ['item', 'cost']; + transactions: Transaction[] = [ + {item: 'Beach ball', cost: 4}, + {item: 'Towel', cost: 5}, + {item: 'Frisbee', cost: 2}, + {item: 'Sunscreen', cost: 4}, + {item: 'Cooler', cost: 25}, + {item: 'Swim suit', cost: 15}, + ]; + + /** Gets the total cost of all transactions. */ + getTotalCost() { + return this.transactions.map(t => t.cost).reduce((acc, value) => acc + value, 0); + } +} diff --git a/src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.css b/src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.css new file mode 100644 index 000000000000..9ec1ae70cedc --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.css @@ -0,0 +1,3 @@ +.demo-table { + width: 100%; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.html b/src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.html new file mode 100644 index 000000000000..3d5013802268 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.html @@ -0,0 +1,13 @@ + + + + + + + + +
+ {{column.header}} + + {{column.cell(row)}} +
diff --git a/src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.ts b/src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.ts new file mode 100644 index 000000000000..e00aa88e886a --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.ts @@ -0,0 +1,56 @@ +import {Component} from '@angular/core'; + +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 Table with columns defined using ngFor instead of statically written in the template. + */ +@Component({ + selector: 'table-generated-columns-example', + styleUrls: ['table-generated-columns-example.css'], + templateUrl: 'table-generated-columns-example.html', +}) +export class TableGeneratedColumnsExample { + columns = [ + { + columnDef: 'position', + header: 'No.', + cell: (element: PeriodicElement) => `${element.position}` + }, + { + columnDef: 'name', + header: 'Name', + cell: (element: PeriodicElement) => `${element.name}` + }, + { + columnDef: 'weight', + header: 'Weight', + cell: (element: PeriodicElement) => `${element.weight}` + }, + { + columnDef: 'symbol', + header: 'Symbol', + cell: (element: PeriodicElement) => `${element.symbol}` + } + ]; + dataSource = ELEMENT_DATA; + displayedColumns = this.columns.map(c => c.columnDef); +} diff --git a/src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.html b/src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.html new file mode 100644 index 000000000000..e6e6dcb543db --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.html @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No.{{element.position}}Number of the elementName{{element.name}}Name of the elementWeight{{element.weight}}Weight of the elementSymbol{{element.symbol}}Symbol of the element
diff --git a/src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.spec.ts b/src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.spec.ts new file mode 100644 index 000000000000..3f5c3fd9332a --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.spec.ts @@ -0,0 +1,93 @@ +import {TestBed, ComponentFixture} from '@angular/core/testing'; +import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; +import {MatTableHarness} from '@angular/material/table/testing'; +import {HarnessLoader, parallel} from '@angular/cdk/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting, +} from '@angular/platform-browser-dynamic/testing'; +import {MatTableModule} from '@angular/material/table'; +import {TableHarnessExample} from './table-harness-example'; + +describe('TableHarnessExample', () => { + let fixture: ComponentFixture; + let loader: HarnessLoader; + + beforeAll(() => { + TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); + }); + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MatTableModule], + declarations: [TableHarnessExample] + }).compileComponents(); + fixture = TestBed.createComponent(TableHarnessExample); + fixture.detectChanges(); + loader = TestbedHarnessEnvironment.loader(fixture); + }); + + it('should load harness for a table', async () => { + const tables = await loader.getAllHarnesses(MatTableHarness); + expect(tables.length).toBe(1); + }); + + it('should get the different kinds of rows in the table', async () => { + const table = await loader.getHarness(MatTableHarness); + const headerRows = await table.getHeaderRows(); + const footerRows = await table.getFooterRows(); + const rows = await table.getRows(); + expect(headerRows.length).toBe(1); + expect(footerRows.length).toBe(1); + expect(rows.length).toBe(10); + }); + + it('should get cells inside a row', async () => { + const table = await loader.getHarness(MatTableHarness); + const headerRows = await table.getHeaderRows(); + const footerRows = await table.getFooterRows(); + const rows = await table.getRows(); + const headerCells = (await parallel(() => headerRows.map(row => row.getCells()))) + .map(row => row.length); + const footerCells = (await parallel(() => footerRows.map(row => row.getCells()))) + .map(row => row.length); + const cells = (await parallel(() => rows.map(row => row.getCells()))) + .map(row => row.length); + + expect(headerCells).toEqual([4]); + expect(cells).toEqual([4, 4, 4, 4, 4, 4, 4, 4, 4, 4]); + expect(footerCells).toEqual([4]); + }); + + it('should be able to get the text of a cell', async () => { + const table = await loader.getHarness(MatTableHarness); + const secondRow = (await table.getRows())[1]; + const cells = await secondRow.getCells(); + const cellTexts = await parallel(() => cells.map(cell => cell.getText())); + expect(cellTexts).toEqual(['2', 'Helium', '4.0026', 'He']); + }); + + it('should be able to get the column name of a cell', async () => { + const table = await loader.getHarness(MatTableHarness); + const fifthRow = (await table.getRows())[1]; + const cells = await fifthRow.getCells(); + const cellColumnNames = await parallel(() => cells.map(cell => cell.getColumnName())); + expect(cellColumnNames).toEqual(['position', 'name', 'weight', 'symbol']); + }); + + it('should be able to filter cells by text', async () => { + const table = await loader.getHarness(MatTableHarness); + const firstRow = (await table.getRows())[0]; + const cells = await firstRow.getCells({text: '1.0079'}); + const cellTexts = await parallel(() => cells.map(cell => cell.getText())); + expect(cellTexts).toEqual(['1.0079']); + }); + + it('should be able to filter cells by column name', async () => { + const table = await loader.getHarness(MatTableHarness); + const firstRow = (await table.getRows())[0]; + const cells = await firstRow.getCells({columnName: 'symbol'}); + const cellTexts = await parallel(() => cells.map(cell => cell.getText())); + expect(cellTexts).toEqual(['H']); + }); +}); diff --git a/src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.ts b/src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.ts new file mode 100644 index 000000000000..9a021ed94d62 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.ts @@ -0,0 +1,25 @@ +import {Component} from '@angular/core'; + +/** + * @title Testing with MatTableHarness + */ + +@Component({ + selector: 'table-harness-example', + templateUrl: 'table-harness-example.html', +}) +export class TableHarnessExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = [ + {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'}, + ]; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-http/table-http-example.css b/src/components-examples/material-experimental/mdc-table/table-http/table-http-example.css new file mode 100644 index 000000000000..1ecd1a098c1d --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-http/table-http-example.css @@ -0,0 +1,43 @@ +/* Structure */ +.example-container { + position: relative; +} + +.example-table-container { + position: relative; + min-height: 200px; + max-height: 400px; + overflow: auto; +} + +table { + width: 100%; +} + +.example-loading-shade { + position: absolute; + top: 0; + left: 0; + bottom: 56px; + right: 0; + background: rgba(0, 0, 0, 0.15); + z-index: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.example-rate-limit-reached { + max-width: 360px; + text-align: center; +} + +/* Column Widths */ +.mat-column-number, +.mat-column-state { + max-width: 64px; +} + +.mat-column-created { + max-width: 124px; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-http/table-http-example.html b/src/components-examples/material-experimental/mdc-table/table-http/table-http-example.html new file mode 100644 index 000000000000..9c88d204de87 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-http/table-http-example.html @@ -0,0 +1,46 @@ +
+
+ +
+ GitHub's API rate limit has been reached. It will be reset in one minute. +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#{{row.number}}Title{{row.title}}State{{row.state}} + Created + {{row.created_at | date}}
+
+ + +
diff --git a/src/components-examples/material-experimental/mdc-table/table-http/table-http-example.ts b/src/components-examples/material-experimental/mdc-table/table-http/table-http-example.ts new file mode 100644 index 000000000000..9b66d25e8b76 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-http/table-http-example.ts @@ -0,0 +1,87 @@ +import {HttpClient} from '@angular/common/http'; +import {Component, ViewChild, AfterViewInit} from '@angular/core'; +import {MatPaginator} from '@angular/material/paginator'; +import {MatSort, SortDirection} from '@angular/material/sort'; +import {merge, Observable, of as observableOf} from 'rxjs'; +import {catchError, map, startWith, switchMap} from 'rxjs/operators'; + +/** + * @title Table retrieving data through HTTP + */ +@Component({ + selector: 'table-http-example', + styleUrls: ['table-http-example.css'], + templateUrl: 'table-http-example.html', +}) +export class TableHttpExample implements AfterViewInit { + displayedColumns: string[] = ['created', 'state', 'number', 'title']; + exampleDatabase: ExampleHttpDatabase | null; + data: GithubIssue[] = []; + + resultsLength = 0; + isLoadingResults = true; + isRateLimitReached = false; + + @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatSort) sort: MatSort; + + constructor(private _httpClient: HttpClient) {} + + ngAfterViewInit() { + this.exampleDatabase = new ExampleHttpDatabase(this._httpClient); + + // If the user changes the sort order, reset back to the first page. + this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0); + + merge(this.sort.sortChange, this.paginator.page) + .pipe( + startWith({}), + switchMap(() => { + this.isLoadingResults = true; + return this.exampleDatabase!.getRepoIssues( + this.sort.active, this.sort.direction, this.paginator.pageIndex) + .pipe(catchError(() => observableOf(null))); + }), + map(data => { + // Flip flag to show that loading has finished. + this.isLoadingResults = false; + this.isRateLimitReached = data === null; + + if (data === null) { + return []; + } + + // Only refresh the result length if there is new data. In case of rate + // limit errors, we do not want to reset the paginator to zero, as that + // would prevent users from re-triggering requests. + this.resultsLength = data.total_count; + return data.items; + }) + ).subscribe(data => this.data = data); + } +} + +export interface GithubApi { + items: GithubIssue[]; + total_count: number; +} + +export interface GithubIssue { + created_at: string; + number: string; + state: string; + title: string; +} + +/** An example database that the data source uses to retrieve data for the table. */ +export class ExampleHttpDatabase { + constructor(private _httpClient: HttpClient) {} + + getRepoIssues(sort: string, order: SortDirection, page: number): Observable { + const href = 'https://api.github.com/search/issues'; + const requestUrl = + `${href}?q=repo:angular/components&sort=${sort}&order=${order}&page=${page + 1}`; + + return this._httpClient.get(requestUrl); + } +} diff --git a/src/components-examples/material-experimental/mdc-table/table-multiple-header-footer/table-multiple-header-footer-example.css b/src/components-examples/material-experimental/mdc-table/table-multiple-header-footer/table-multiple-header-footer-example.css new file mode 100644 index 000000000000..d5753bd38c61 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-multiple-header-footer/table-multiple-header-footer-example.css @@ -0,0 +1,19 @@ +table { + width: 100%; +} + +.example-first-header-row th { + border-bottom: none; +} + +.example-second-header-row { + font-style: italic; +} + +.example-first-footer-row { + font-weight: bold; +} + +.example-second-footer-row td { + font-style: italic; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-multiple-header-footer/table-multiple-header-footer-example.html b/src/components-examples/material-experimental/mdc-table/table-multiple-header-footer/table-multiple-header-footer-example.html new file mode 100644 index 000000000000..04b5b162bbb2 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-multiple-header-footer/table-multiple-header-footer-example.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Item {{transaction.item}} Total Cost {{transaction.cost | currency}} {{getTotalCost() | currency}} Name of the item purchased Cost of the item in USD + Please note that the cost of items displayed are completely and totally made up. +
diff --git a/src/components-examples/material-experimental/mdc-table/table-multiple-header-footer/table-multiple-header-footer-example.ts b/src/components-examples/material-experimental/mdc-table/table-multiple-header-footer/table-multiple-header-footer-example.ts new file mode 100644 index 000000000000..388201f6e1a9 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-multiple-header-footer/table-multiple-header-footer-example.ts @@ -0,0 +1,32 @@ +import {Component} from '@angular/core'; + +interface Transaction { + item: string; + cost: number; +} + + +/** + * @title Table with multiple header and footer rows + */ +@Component({ + selector: 'table-multiple-header-footer-example', + styleUrls: ['table-multiple-header-footer-example.css'], + templateUrl: 'table-multiple-header-footer-example.html', +}) +export class TableMultipleHeaderFooterExample { + displayedColumns: string[] = ['item', 'cost']; + transactions: Transaction[] = [ + {item: 'Beach ball', cost: 4}, + {item: 'Towel', cost: 5}, + {item: 'Frisbee', cost: 2}, + {item: 'Sunscreen', cost: 4}, + {item: 'Cooler', cost: 25}, + {item: 'Swim suit', cost: 15}, + ]; + + /** Gets the total cost of all transactions. */ + getTotalCost() { + return this.transactions.map(t => t.cost).reduce((acc, value) => acc + value, 0); + } +} diff --git a/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.css b/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.css new file mode 100644 index 000000000000..369cbec26d5e --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.css @@ -0,0 +1,12 @@ +table { + width: 100%; +} + +.mat-form-field { + font-size: 14px; + width: 100%; +} + +td, th { + width: 25%; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.html b/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.html new file mode 100644 index 000000000000..601acbfe9675 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.html @@ -0,0 +1,44 @@ + + Filter + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ID {{row.id}} Progress {{row.progress}}% Name {{row.name}} Fruit {{row.fruit}}
No data matching the filter "{{input.value}}"
+ + +
+ diff --git a/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.ts b/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.ts new file mode 100644 index 000000000000..047610b834dd --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.ts @@ -0,0 +1,71 @@ +import {AfterViewInit, Component, ViewChild} from '@angular/core'; +import {MatPaginator} from '@angular/material/paginator'; +import {MatSort} from '@angular/material/sort'; +import {MatTableDataSource} from '@angular/material/table'; + +export interface UserData { + id: string; + name: string; + progress: string; + fruit: string; +} + +/** Constants used to fill up our data base. */ +const FRUITS: string[] = [ + 'blueberry', 'lychee', 'kiwi', 'mango', 'peach', 'lime', 'pomegranate', 'pineapple' +]; +const NAMES: string[] = [ + 'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', 'Charlotte', 'Theodore', 'Isla', 'Oliver', + 'Isabella', 'Jasper', 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth' +]; + +/** + * @title Data table with sorting, pagination, and filtering. + */ +@Component({ + selector: 'table-overview-example', + styleUrls: ['table-overview-example.css'], + templateUrl: 'table-overview-example.html', +}) +export class TableOverviewExample implements AfterViewInit { + displayedColumns: string[] = ['id', 'name', 'progress', 'fruit']; + dataSource: MatTableDataSource; + + @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatSort) sort: MatSort; + + constructor() { + // Create 100 users + const users = Array.from({length: 100}, (_, k) => createNewUser(k + 1)); + + // Assign the data to the data source for the table to render + this.dataSource = new MatTableDataSource(users); + } + + ngAfterViewInit() { + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + } + + applyFilter(event: Event) { + const filterValue = (event.target as HTMLInputElement).value; + this.dataSource.filter = filterValue.trim().toLowerCase(); + + if (this.dataSource.paginator) { + this.dataSource.paginator.firstPage(); + } + } +} + +/** Builds and returns a new User. */ +function createNewUser(id: number): UserData { + const name = NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + + NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + + return { + id: id.toString(), + name: name, + progress: Math.round(Math.random() * 100).toString(), + fruit: FRUITS[Math.round(Math.random() * (FRUITS.length - 1))] + }; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.css b/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.css new file mode 100644 index 000000000000..1922e7ffa3ad --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.css @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.html b/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.html new file mode 100644 index 000000000000..a410ebbe9d05 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.html @@ -0,0 +1,33 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
+ + +
diff --git a/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.ts b/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.ts new file mode 100644 index 000000000000..1634c917dd8b --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.ts @@ -0,0 +1,52 @@ +import {AfterViewInit, Component, ViewChild} from '@angular/core'; +import {MatPaginator} from '@angular/material/paginator'; +import {MatTableDataSource} from '@angular/material/table'; + +/** + * @title Table with pagination + */ +@Component({ + selector: 'table-pagination-example', + styleUrls: ['table-pagination-example.css'], + templateUrl: 'table-pagination-example.html', +}) +export class TablePaginationExample implements AfterViewInit { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new MatTableDataSource(ELEMENT_DATA); + + @ViewChild(MatPaginator) paginator: MatPaginator; + + ngAfterViewInit() { + this.dataSource.paginator = this.paginator; + } +} + +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'}, + {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'}, + {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'}, + {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'}, + {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'}, + {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'}, + {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'}, + {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'}, + {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'}, + {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'}, + {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'}, +]; diff --git a/src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.css b/src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.css new file mode 100644 index 000000000000..cedd44731369 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.css @@ -0,0 +1,3 @@ +.example-table { + width: 100%; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.html b/src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.html new file mode 100644 index 000000000000..d35381653f3a --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.html @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
+ diff --git a/src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.ts b/src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.ts new file mode 100644 index 000000000000..924df7aec559 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.ts @@ -0,0 +1,34 @@ +import {Component} from '@angular/core'; + +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 Table that uses the recycle view repeater strategy. + */ +@Component({ + selector: 'table-recycle-rows-example', + styleUrls: ['table-recycle-rows-example.css'], + templateUrl: 'table-recycle-rows-example.html', +}) +export class TableRecycleRowsExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = ELEMENT_DATA; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.css b/src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.css new file mode 100644 index 000000000000..1922e7ffa3ad --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.css @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.html b/src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.html new file mode 100644 index 000000000000..c60ec7dc4a50 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.html @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + +
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
diff --git a/src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.ts b/src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.ts new file mode 100644 index 000000000000..11c1dd003bde --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.ts @@ -0,0 +1,39 @@ +import {Component} from '@angular/core'; +import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop'; + +/** + * @title Table with re-orderable columns + */ +@Component({ + selector: 'table-reorderable-example', + templateUrl: './table-reorderable-example.html', + styleUrls: ['./table-reorderable-example.css'] +}) +export class TableReorderableExample { + columns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = ELEMENT_DATA; + + drop(event: CdkDragDrop) { + moveItemInArray(this.columns, event.previousIndex, event.currentIndex); + } +} + +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'}, +]; diff --git a/src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.css b/src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.css new file mode 100644 index 000000000000..bfac75fd45c6 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.css @@ -0,0 +1,17 @@ +.demo-table { + width: 100%; +} + +.mat-mdc-row .mat-mdc-cell { + border-bottom: 1px solid transparent; + border-top: 1px solid transparent; + cursor: pointer; +} + +.mat-mdc-row:hover .mat-mdc-cell { + border-color: currentColor; +} + +.demo-row-is-clicked { + font-weight: bold; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.html b/src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.html new file mode 100644 index 000000000000..d8ecfda58fd4 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.html @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No.{{element.position}}Name{{element.name}}Weight{{element.weight}}Symbol{{element.symbol}}
+ +
+

+ Click Log +

+
+ +
+ Clicked rows will be logged here +
+ +
    +
  • + Clicked on {{clickedRow.name}} +
    • +
diff --git a/src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.ts b/src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.ts new file mode 100644 index 000000000000..9721a23a171e --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.ts @@ -0,0 +1,35 @@ +import {Component} from '@angular/core'; + +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 Binding event handlers and properties to the table rows. + */ +@Component({ + selector: 'table-row-binding-example', + styleUrls: ['table-row-binding-example.css'], + templateUrl: 'table-row-binding-example.html', +}) +export class TableRowBindingExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = ELEMENT_DATA; + clickedRows = new Set(); +} diff --git a/src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.css b/src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.css new file mode 100644 index 000000000000..1922e7ffa3ad --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.css @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.html b/src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.html new file mode 100644 index 000000000000..970f6fa5fb87 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
$implicit {{data}} index {{index}} count {{count}} first {{first}} last {{last}} even {{even}} odd {{odd}}
diff --git a/src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.ts b/src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.ts new file mode 100644 index 000000000000..5c041552f05c --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.ts @@ -0,0 +1,14 @@ +import {Component} from '@angular/core'; + +/** + * @title Table showing each row context properties. + */ +@Component({ + selector: 'table-row-context-example', + styleUrls: ['table-row-context-example.css'], + templateUrl: 'table-row-context-example.html', +}) +export class TableRowContextExample { + displayedColumns: string[] = ['$implicit', 'index', 'count', 'first', 'last', 'even', 'odd']; + data: string[] = ['one', 'two', 'three', 'four', 'five']; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.css b/src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.css new file mode 100644 index 000000000000..1922e7ffa3ad --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.css @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.html b/src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.html new file mode 100644 index 000000000000..9bf76f15a326 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.html @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
diff --git a/src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.ts b/src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.ts new file mode 100644 index 000000000000..4bf15c0c881f --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.ts @@ -0,0 +1,62 @@ +import {SelectionModel} from '@angular/cdk/collections'; +import {Component} from '@angular/core'; +import {MatTableDataSource} 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 Table with selection + */ +@Component({ + selector: 'table-selection-example', + styleUrls: ['table-selection-example.css'], + templateUrl: 'table-selection-example.html', +}) +export class TableSelectionExample { + displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol']; + dataSource = new MatTableDataSource(ELEMENT_DATA); + selection = new SelectionModel(true, []); + + /** Whether the number of selected elements matches the total number of rows. */ + isAllSelected() { + const numSelected = this.selection.selected.length; + const numRows = this.dataSource.data.length; + return numSelected === numRows; + } + + /** Selects all rows if they are not all selected; otherwise clear selection. */ + masterToggle() { + if (this.isAllSelected()) { + this.selection.clear(); + return; + } + + this.selection.select(...this.dataSource.data); + } + + /** The label for the checkbox on the passed row */ + checkboxLabel(row?: PeriodicElement): string { + if (!row) { + return `${this.isAllSelected() ? 'deselect' : 'select'} all`; + } + return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`; + } +} diff --git a/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.css b/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.css new file mode 100644 index 000000000000..11b40820cb5b --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.css @@ -0,0 +1,7 @@ +table { + width: 100%; +} + +th.mat-sort-header-sorted { + color: black; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.html b/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.html new file mode 100644 index 000000000000..977bed07a81f --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.html @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
diff --git a/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.ts b/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.ts new file mode 100644 index 000000000000..bf1d12bd1741 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.ts @@ -0,0 +1,42 @@ +import {AfterViewInit, Component, ViewChild} from '@angular/core'; +import {MatSort} from '@angular/material/sort'; +import {MatTableDataSource} 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 Table with sorting + */ +@Component({ + selector: 'table-sorting-example', + styleUrls: ['table-sorting-example.css'], + templateUrl: 'table-sorting-example.html', +}) +export class TableSortingExample implements AfterViewInit { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new MatTableDataSource(ELEMENT_DATA); + + @ViewChild(MatSort) sort: MatSort; + + ngAfterViewInit() { + this.dataSource.sort = this.sort; + } +} diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.css b/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.css new file mode 100644 index 000000000000..52262aad13cf --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.css @@ -0,0 +1,27 @@ +.example-container { + height: 400px; + width: 550px; + max-width: 100%; + overflow: auto; +} + +table { + width: 800px; +} + +td.mat-column-star { + width: 20px; + padding-right: 8px; +} + +th.mat-column-position, td.mat-column-position { + padding-left: 8px; +} + +.mat-table-sticky-border-elem-right { + border-left: 1px solid #e0e0e0; +} + +.mat-table-sticky-border-elem-left { + border-right: 1px solid #e0e0e0; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.html b/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.html new file mode 100644 index 000000000000..73b460f52121 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.html @@ -0,0 +1,39 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name {{element.name}} No. {{element.position}} Weight {{element.weight}} Symbol {{element.symbol}} + more_vert +
+
diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.ts b/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.ts new file mode 100644 index 000000000000..2ff3d00cb264 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.ts @@ -0,0 +1,35 @@ +import {Component} from '@angular/core'; + +/** + * @title Table with sticky columns + */ +@Component({ + selector: 'table-sticky-columns-example', + styleUrls: ['table-sticky-columns-example.css'], + templateUrl: 'table-sticky-columns-example.html', +}) +export class TableStickyColumnsExample { + displayedColumns = + ['name', 'position', 'weight', 'symbol', 'position', 'weight', 'symbol', 'star']; + dataSource = ELEMENT_DATA; +} + +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'}, +]; diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.css b/src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.css new file mode 100644 index 000000000000..e1a4540ba09a --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.css @@ -0,0 +1,44 @@ +.example-container { + height: 400px; + overflow: auto; +} + +.mat-mdc-table-sticky { + background: #59abfd; + opacity: 1; +} + +.example-sticky-toggle-group { + margin: 8px; +} + +.mat-column-filler { + padding: 0 8px; + font-size: 10px; + text-align: center; +} + +.mat-mdc-header-cell, .mat-mdc-footer-cell, .mat-mdc-cell { + min-width: 80px; + box-sizing: border-box; +} + +.mat-mdc-header-row, .mat-mdc-footer-row, .mat-mdc-row { + min-width: 1920px; /* 24 columns, 80px each */ +} + +.mat-mdc-table-sticky-border-elem-top { + border-bottom: 2px solid midnightblue; +} + +.mat-mdc-table-sticky-border-elem-right { + border-left: 2px solid midnightblue; +} + +.mat-mdc-table-sticky-border-elem-bottom { + border-top: 2px solid midnightblue; +} + +.mat-mdc-table-sticky-border-elem-left { + border-right: 2px solid midnightblue; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.html b/src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.html new file mode 100644 index 000000000000..c403cd0bd4ad --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.html @@ -0,0 +1,78 @@ +
+ + +
+ +
+ Sticky Headers: + + Row 1 + Row 2 + +
+ +
+ Sticky Footers: + + Row 1 + Row 2 + +
+ +
+ Sticky Columns: + + Position + Name + Weight + Symbol + +
+ +
+ + + Position + {{element.position}} + Position Footer + + + + Name + {{element.name}} + Name Footer + + + + Weight + {{element.weight}} + Weight Footer + + + + Symbol + {{element.symbol}} + Symbol Footer + + + + Filler header cell + Filler data cell + Filler footer cell + + + + + + + + + + +
diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts b/src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts new file mode 100644 index 000000000000..d52196e444bf --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts @@ -0,0 +1,53 @@ +import {Component} from '@angular/core'; +import {MatButtonToggleGroup} from '@angular/material/button-toggle'; + +/** + * @title Flex-layout tables with toggle-able sticky headers, footers, and columns + */ +@Component({ + selector: 'table-sticky-complex-flex-example', + styleUrls: ['table-sticky-complex-flex-example.css'], + templateUrl: 'table-sticky-complex-flex-example.html', +}) +export class TableStickyComplexFlexExample { + displayedColumns: string[] = []; + dataSource = ELEMENT_DATA; + + tables = [0]; + + constructor() { + this.displayedColumns.length = 24; + this.displayedColumns.fill('filler'); + + // The first two columns should be position and name; the last two columns: weight, symbol + this.displayedColumns[0] = 'position'; + this.displayedColumns[1] = 'name'; + this.displayedColumns[22] = 'weight'; + this.displayedColumns[23] = 'symbol'; + } + + /** Whether the button toggle group contains the id as an active value. */ + isSticky(buttonToggleGroup: MatButtonToggleGroup, id: string) { + return (buttonToggleGroup.value || []).indexOf(id) !== -1; + } +} + +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'}, +]; diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.css b/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.css new file mode 100644 index 000000000000..8bb485e0dd04 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.css @@ -0,0 +1,40 @@ +.example-container { + height: 400px; + overflow: auto; +} + +.mat-mdc-table-sticky { + background: #59abfd; + opacity: 1; +} + +.example-sticky-toggle-group { + margin: 8px; +} + +.mat-column-filler { + padding: 0 8px; + font-size: 10px; + text-align: center; +} + +.mat-mdc-header-cell, .mat-mdc-footer-cell, .mat-mdc-cell { + min-width: 80px; + box-sizing: border-box; +} + +.mat-mdc-table-sticky-border-elem-top { + border-bottom: 2px solid midnightblue; +} + +.mat-mdc-table-sticky-border-elem-right { + border-left: 2px solid midnightblue; +} + +.mat-mdc-table-sticky-border-elem-bottom { + border-top: 2px solid midnightblue; +} + +.mat-mdc-table-sticky-border-elem-left { + border-right: 2px solid midnightblue; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.html b/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.html new file mode 100644 index 000000000000..24944caefeff --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.html @@ -0,0 +1,78 @@ +
+ + +
+ +
+ Sticky Headers: + + Row 1 + Row 2 + +
+ +
+ Sticky Footers: + + Row 1 + Row 2 + +
+ +
+ Sticky Columns: + + Position + Name + Weight + Symbol + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Position {{element.position}} Position Footer Name {{element.name}} Name Footer Weight {{element.weight}} Weight Footer Symbol {{element.symbol}} Symbol Footer Filler header cell Filler data cell Filler footer cell
+
diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.ts b/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.ts new file mode 100644 index 000000000000..496652931991 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.ts @@ -0,0 +1,53 @@ +import {Component} from '@angular/core'; +import {MatButtonToggleGroup} from '@angular/material/button-toggle'; + +/** + * @title Tables with toggle-able sticky headers, footers, and columns + */ +@Component({ + selector: 'table-sticky-complex-example', + styleUrls: ['table-sticky-complex-example.css'], + templateUrl: 'table-sticky-complex-example.html', +}) +export class TableStickyComplexExample { + displayedColumns: string[] = []; + dataSource = ELEMENT_DATA; + + tables = [0]; + + constructor() { + this.displayedColumns.length = 24; + this.displayedColumns.fill('filler'); + + // The first two columns should be position and name; the last two columns: weight, symbol + this.displayedColumns[0] = 'position'; + this.displayedColumns[1] = 'name'; + this.displayedColumns[22] = 'weight'; + this.displayedColumns[23] = 'symbol'; + } + + /** Whether the button toggle group contains the id as an active value. */ + isSticky(buttonToggleGroup: MatButtonToggleGroup, id: string) { + return (buttonToggleGroup.value || []).indexOf(id) !== -1; + } +} + +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'}, +]; diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.css b/src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.css new file mode 100644 index 000000000000..2afe062fed7a --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.css @@ -0,0 +1,16 @@ +.example-container { + height: 270px; + overflow: auto; +} + +table { + width: 100%; +} + +tr.mat-mdc-footer-row { + font-weight: bold; +} + +.mat-mdc-table-sticky { + border-top: 1px solid #e0e0e0; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.html b/src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.html new file mode 100644 index 000000000000..c8c7557566d0 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.html @@ -0,0 +1,21 @@ +
+ + + + + + + + + + + + + + + + + + +
Item {{transaction.item}} Total Cost {{transaction.cost | currency}} {{getTotalCost() | currency}}
+
diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.ts b/src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.ts new file mode 100644 index 000000000000..dbb4b265e3dd --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.ts @@ -0,0 +1,31 @@ +import {Component} from '@angular/core'; + +export interface Transaction { + item: string; + cost: number; +} + +/** + * @title Table with a sticky footer + */ +@Component({ + selector: 'table-sticky-footer-example', + styleUrls: ['table-sticky-footer-example.css'], + templateUrl: 'table-sticky-footer-example.html', +}) +export class TableStickyFooterExample { + displayedColumns = ['item', 'cost']; + transactions: Transaction[] = [ + {item: 'Beach ball', cost: 4}, + {item: 'Towel', cost: 5}, + {item: 'Frisbee', cost: 2}, + {item: 'Sunscreen', cost: 4}, + {item: 'Cooler', cost: 25}, + {item: 'Swim suit', cost: 15}, + ]; + + /** Gets the total cost of all transactions. */ + getTotalCost() { + return this.transactions.map(t => t.cost).reduce((acc, value) => acc + value, 0); + } +} diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.css b/src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.css new file mode 100644 index 000000000000..4eca688d9b47 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.css @@ -0,0 +1,8 @@ +.example-container { + height: 400px; + overflow: auto; +} + +table { + width: 100%; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.html b/src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.html new file mode 100644 index 000000000000..ccf93e2696d3 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.html @@ -0,0 +1,31 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
+
\ No newline at end of file diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.ts b/src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.ts new file mode 100644 index 000000000000..21a17a3536da --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.ts @@ -0,0 +1,34 @@ +import {Component} from '@angular/core'; + +/** + * @title Table with sticky header + */ +@Component({ + selector: 'table-sticky-header-example', + styleUrls: ['table-sticky-header-example.css'], + templateUrl: 'table-sticky-header-example.html', +}) +export class TableStickyHeaderExample { + displayedColumns = ['position', 'name', 'weight', 'symbol']; + dataSource = ELEMENT_DATA; +} + +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'}, +]; diff --git a/src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.css b/src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.css new file mode 100644 index 000000000000..1922e7ffa3ad --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.css @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.html b/src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.html new file mode 100644 index 000000000000..a609db477db1 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + +
diff --git a/src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.ts b/src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.ts new file mode 100644 index 000000000000..d2afe0b58c1e --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.ts @@ -0,0 +1,46 @@ +import {Component} from '@angular/core'; +import {DecimalPipe} from '@angular/common'; +import {MatTableDataSource} 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 Use of 'mat-text-column' with various configurations of the interface. + */ +@Component({ + selector: 'table-text-column-advanced-example', + styleUrls: ['table-text-column-advanced-example.css'], + templateUrl: 'table-text-column-advanced-example.html', +}) +export class TableTextColumnAdvancedExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new MatTableDataSource(ELEMENT_DATA); + + headerText: string; + + decimalPipe = new DecimalPipe('en-US'); + + /** Data accessor function that transforms the weight value to have at most 2 decimal digits. */ + getWeight = (data: PeriodicElement): string => { + const result = this.decimalPipe.transform(data.weight, '1.0-2'); + return result === null ? '' : result; + } +} diff --git a/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.css b/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.css new file mode 100644 index 000000000000..1922e7ffa3ad --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.css @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.html b/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.html new file mode 100644 index 000000000000..427692975ad0 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.html @@ -0,0 +1,9 @@ + + + + + + + + +
diff --git a/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.ts b/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.ts new file mode 100644 index 000000000000..21d800f0cdef --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.ts @@ -0,0 +1,35 @@ +import {Component} from '@angular/core'; + +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 Use of `mat-text-column` which can be used for simple columns that only need to display + * a text value for the header and cells. + */ +@Component({ + selector: 'table-text-column-example', + styleUrls: ['table-text-column-example.css'], + templateUrl: 'table-text-column-example.html', +}) +export class TableTextColumnExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = ELEMENT_DATA; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.css b/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.css new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.html b/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.html new file mode 100644 index 000000000000..0a2704e8a7b2 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.html @@ -0,0 +1,9 @@ + + + Name + {{element.name}} + + + + + diff --git a/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.ts b/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.ts new file mode 100644 index 000000000000..8bd776e21fbf --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.ts @@ -0,0 +1,27 @@ +import {Component} from '@angular/core'; + +const ELEMENT_DATA = [ + {name: 'Hydrogen'}, + {name: 'Helium'}, + {name: 'Lithium'}, + {name: 'Beryllium'}, + {name: 'Boron'}, + {name: 'Carbon'}, + {name: 'Nitrogen'}, + {name: 'Oxygen'}, + {name: 'Fluorine'}, + {name: 'Neon'}, +]; + +/** + * @title Tables with Material Design ripples. + */ +@Component({ + selector: 'table-with-ripples-example', + styleUrls: ['table-with-ripples-example.css'], + templateUrl: 'table-with-ripples-example.html', +}) +export class TableWithRipplesExample { + displayedColumns: string[] = ['name']; + dataSource = ELEMENT_DATA; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.css b/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.css new file mode 100644 index 000000000000..24c1e1546291 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.css @@ -0,0 +1,7 @@ +table { + width: 100%; +} + +button { + margin: 0 8px 8px 0; +} diff --git a/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.html b/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.html new file mode 100644 index 000000000000..540d3fcba236 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.html @@ -0,0 +1,22 @@ +
+ + +
+ + + + + Name + {{element.name}} + + + + + + + + + No data + + diff --git a/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.ts b/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.ts new file mode 100644 index 000000000000..98901b9d206d --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.ts @@ -0,0 +1,100 @@ +import {DataSource} from '@angular/cdk/collections'; +import { + AfterContentInit, + Component, + ContentChildren, + Input, + AfterViewInit, + QueryList, + ViewChild, + ContentChild, +} from '@angular/core'; +import {MatSort} from '@angular/material/sort'; +import { + MatColumnDef, + MatHeaderRowDef, + MatNoDataRow, + MatRowDef, + MatTable, + MatTableDataSource +} from '@angular/material-experimental/mdc-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 Table example that shows how to wrap a table component for definition and behavior reuse. + */ +@Component({ + selector: 'table-wrapped-example', + styleUrls: ['table-wrapped-example.css'], + templateUrl: 'table-wrapped-example.html', +}) +export class TableWrappedExample implements AfterViewInit { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new MatTableDataSource(ELEMENT_DATA); + + @ViewChild('sort') sort: MatSort; + + ngAfterViewInit() { + this.dataSource.sort = this.sort; + } + + clearTable() { + this.dataSource.data = []; + } + + addData() { + this.dataSource.data = ELEMENT_DATA; + } +} + +/** + * Table component that accepts column and row definitions in its content to be registered to the + * table. + */ +@Component({ + selector: 'wrapper-table', + templateUrl: 'wrapper-table.html', + styles: [` + table { + width: 100%; + } + `] +}) +export class WrapperTable implements AfterContentInit { + @ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList; + @ContentChildren(MatRowDef) rowDefs: QueryList>; + @ContentChildren(MatColumnDef) columnDefs: QueryList; + @ContentChild(MatNoDataRow) noDataRow: MatNoDataRow; + + @ViewChild(MatTable, {static: true}) table: MatTable; + + @Input() columns: string[]; + + @Input() dataSource: DataSource; + + ngAfterContentInit() { + this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef)); + this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef)); + this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef)); + this.table.setNoDataRow(this.noDataRow); + } +} diff --git a/src/components-examples/material-experimental/mdc-table/table-wrapped/wrapper-table.html b/src/components-examples/material-experimental/mdc-table/table-wrapped/wrapper-table.html new file mode 100644 index 000000000000..ad3946e88557 --- /dev/null +++ b/src/components-examples/material-experimental/mdc-table/table-wrapped/wrapper-table.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + +
No. {{element.position}} Weight {{element.weight}} Symbol {{element.symbol}}
diff --git a/src/dev-app/mdc-table/BUILD.bazel b/src/dev-app/mdc-table/BUILD.bazel index b3cb0c52f2f8..43df5fbb0370 100644 --- a/src/dev-app/mdc-table/BUILD.bazel +++ b/src/dev-app/mdc-table/BUILD.bazel @@ -1,4 +1,3 @@ -load("@io_bazel_rules_sass//:defs.bzl", "sass_binary") load("//tools:defaults.bzl", "ng_module") package(default_visibility = ["//visibility:public"]) @@ -8,16 +7,10 @@ ng_module( srcs = glob(["**/*.ts"]), assets = [ "mdc-table-demo.html", - ":mdc_table_demo_scss", ], deps = [ + "//src/components-examples/material-experimental/mdc-table", "//src/material-experimental/mdc-table", - "//src/material/icon", "@npm//@angular/router", ], ) - -sass_binary( - name = "mdc_table_demo_scss", - src = "mdc-table-demo.scss", -) diff --git a/src/dev-app/mdc-table/mdc-table-demo-module.ts b/src/dev-app/mdc-table/mdc-table-demo-module.ts index 209f0849d420..6ad801caf7bc 100644 --- a/src/dev-app/mdc-table/mdc-table-demo-module.ts +++ b/src/dev-app/mdc-table/mdc-table-demo-module.ts @@ -11,11 +11,13 @@ import {MatIconModule} from '@angular/material/icon'; import {MatTableModule} from '@angular/material-experimental/mdc-table'; import {RouterModule} from '@angular/router'; import {MdcTableDemo} from './mdc-table-demo'; +import {MdcTableExamplesModule} from '@angular/components-examples/material-experimental/mdc-table'; @NgModule({ imports: [ MatIconModule, MatTableModule, + MdcTableExamplesModule, RouterModule.forChild([{path: '', component: MdcTableDemo}]), ], declarations: [MdcTableDemo], diff --git a/src/dev-app/mdc-table/mdc-table-demo.html b/src/dev-app/mdc-table/mdc-table-demo.html index 856253ea5913..13661ed6f338 100644 --- a/src/dev-app/mdc-table/mdc-table-demo.html +++ b/src/dev-app/mdc-table/mdc-table-demo.html @@ -1,171 +1,68 @@ -

Basic

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
-
- -

Sticky Columns

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Name {{element.name}} No. {{element.position}} Weight {{element.weight}} Symbol {{element.symbol}} - more_vert -
-
- -

Sticky Header

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
-
- -

Sticky Footer

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
No. {{element.position}} number Name {{element.name}} string Weight {{element.weight}} number Symbol {{element.symbol}} string
-
- -

Basic flex table

- - - - No. - {{element.position}} - - - - - Name - {{element.name}} - - - - - Weight - {{element.weight}} - - - - - Symbol - {{element.symbol}} - - - - - +

Table basic

+ + +

Table basic with recycled rows

+ + +

Table basic flex

+ + +

Table dynamic columns

+ + +

Table expandable rows

+ + +

Table filtering

+ + +

Table footer row

+ + +

Table with http

+ + +

Table with multiple headers and footers

+ + +

Table overview

+ + +

Table row context

+ + +

Table with pagination

+ + +

Table with selection

+ + +

Table with sorting

+ + +

Table with sticky columns

+ + +

Table with sticky headers, footers and columns

+ + +

Table flex with sticky headers, footers and columns

+ + +

Table with sticky footer

+ + +

Table with sticky header

+ + +

Table with mat-text-column

+ + +

Table with mat-text-column advanced

+ + +

Table wrapped in reusable component

+ + +

Table wrapped re-orderable columns

+ diff --git a/src/dev-app/mdc-table/mdc-table-demo.scss b/src/dev-app/mdc-table/mdc-table-demo.scss deleted file mode 100644 index 57d509167aee..000000000000 --- a/src/dev-app/mdc-table/mdc-table-demo.scss +++ /dev/null @@ -1,80 +0,0 @@ -.example-container { - height: 400px; - margin-bottom: 24px; - width: 550px; - max-width: 100%; - overflow: auto; -} - -h2 { - margin: 0 0 16px; -} - -table { - width: 800px; -} - -.example-sticky-columns { - td { - background-color: white; - } - - td.mat-mdc-column-star { - width: 20px; - padding-right: 8px; - } - - th.mat-mdc-column-position, td.mat-mdc-column-position { - padding-left: 8px; - } - - // Unlike with the classic MatTable, border-right does not work due to border-collapse. - // Using :before to not conflict with popover-edit and column-resize which use :after. - .mat-mdc-table-sticky:first-child, - .mat-mdc-table-sticky:last-child { - &::before { - background-color: #e0e0e0; - bottom: 0; - content: ''; - position: absolute; - top: 0; - width: 1px; - } - } - - .mat-mdc-table-sticky:first-child::before { - right: 0; - } - - .mat-mdc-table-sticky:last-child::before { - left: 0; - } -} - -.example-sticky-header { - .mat-mdc-header-row th::before { - background-color: #e0e0e0; - bottom: 0; - content: ''; - height: 1px; - left: 0; - position: absolute; - right: 0; - } -} - -.example-sticky-footer { - td { - background-color: white; - } - - .mat-mdc-footer-row td::before { - background-color: #e0e0e0; - content: ''; - height: 1px; - left: 0; - position: absolute; - right: 0; - top: 0; - } -} diff --git a/src/dev-app/mdc-table/mdc-table-demo.ts b/src/dev-app/mdc-table/mdc-table-demo.ts index 435c7d89229e..205970d4fcbf 100644 --- a/src/dev-app/mdc-table/mdc-table-demo.ts +++ b/src/dev-app/mdc-table/mdc-table-demo.ts @@ -8,34 +8,8 @@ import {Component} from '@angular/core'; -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'}, -]; - @Component({ - selector: 'mdc-table-demo', templateUrl: 'mdc-table-demo.html', - styleUrls: ['mdc-table-demo.css'], }) export class MdcTableDemo { - readonly displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - readonly displayedColumns2 = - ['name', 'position', 'weight', 'symbol', 'position', 'weight', 'symbol', 'star']; - readonly dataSource = ELEMENT_DATA; } From 926c0e7ca2febd96b1d4ef237b722c6180efd338 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Tue, 13 Jul 2021 15:45:32 -0600 Subject: [PATCH 2/2] fix(material-experimental/mdc-table): fix mdc css class --- .../table-sticky-columns/table-sticky-columns-example.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.css b/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.css index 52262aad13cf..b931bfc6acc6 100644 --- a/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.css +++ b/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.css @@ -18,10 +18,10 @@ th.mat-column-position, td.mat-column-position { padding-left: 8px; } -.mat-table-sticky-border-elem-right { +.mat-mdc-table-sticky-border-elem-right { border-left: 1px solid #e0e0e0; } -.mat-table-sticky-border-elem-left { +.mat-mdc-table-sticky-border-elem-left { border-right: 1px solid #e0e0e0; }