diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index c5b67a5e4a3a..c6c6016711e2 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -205,7 +205,7 @@ /src/dev-app/mdc-snack-bar/** @andrewseguin /src/dev-app/mdc-slide-toggle/** @crisbeto /src/dev-app/mdc-slider/** @devversion -/src/dev-app/mdc-table/** @andrewseguin +/src/dev-app/legacy-table/** @andrewseguin /src/dev-app/mdc-tabs/** @crisbeto /src/dev-app/mdc-tooltip/** @crisbeto /src/dev-app/menu/** @crisbeto diff --git a/src/components-examples/material-experimental/mdc-table/index.ts b/src/components-examples/material/index.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/index.ts rename to src/components-examples/material/index.ts diff --git a/src/components-examples/material-experimental/mdc-table/BUILD.bazel b/src/components-examples/material/legacy-table/BUILD.bazel similarity index 96% rename from src/components-examples/material-experimental/mdc-table/BUILD.bazel rename to src/components-examples/material/legacy-table/BUILD.bazel index 112d166812b2..d298b884ab71 100644 --- a/src/components-examples/material-experimental/mdc-table/BUILD.bazel +++ b/src/components-examples/material/legacy-table/BUILD.bazel @@ -3,7 +3,7 @@ load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite" package(default_visibility = ["//visibility:public"]) ng_module( - name = "mdc-table", + name = "legacy-table", srcs = glob( ["**/*.ts"], exclude = ["**/*.spec.ts"], @@ -47,7 +47,7 @@ ng_test_library( name = "unit_tests_lib", srcs = glob(["**/*.spec.ts"]), deps = [ - ":mdc-table", + ":legacy-table", "//src/cdk/testing", "//src/cdk/testing/testbed", "//src/material/legacy-table", diff --git a/src/components-examples/material/legacy-table/index.ts b/src/components-examples/material/legacy-table/index.ts new file mode 100644 index 000000000000..385829e894b9 --- /dev/null +++ b/src/components-examples/material/legacy-table/index.ts @@ -0,0 +1,134 @@ +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {MatRippleModule} from '@angular/material/core'; +import {MatLegacyButtonModule} from '@angular/material/legacy-button'; +import {MatButtonToggleModule} from '@angular/material/button-toggle'; +import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; +import {MatIconModule} from '@angular/material/icon'; +import {MatLegacyInputModule} from '@angular/material/legacy-input'; +import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator'; +import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner'; +import {MatSortModule} from '@angular/material/sort'; +import {MatLegacyTableModule} from '@angular/material/legacy-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, + MatLegacyButtonModule, + MatButtonToggleModule, + MatLegacyCheckboxModule, + MatIconModule, + MatLegacyInputModule, + MatLegacyPaginatorModule, + MatLegacyProgressSpinnerModule, + MatRippleModule, + MatSortModule, + MatLegacyTableModule, + CdkTableModule, + DragDropModule, + ], + declarations: EXAMPLES, + exports: EXAMPLES, +}) +export class TableExamplesModule {} diff --git a/src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.css b/src/components-examples/material/legacy-table/table-basic/table-basic-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.css rename to src/components-examples/material/legacy-table/table-basic/table-basic-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.html b/src/components-examples/material/legacy-table/table-basic/table-basic-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.html rename to src/components-examples/material/legacy-table/table-basic/table-basic-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.ts b/src/components-examples/material/legacy-table/table-basic/table-basic-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.ts rename to src/components-examples/material/legacy-table/table-basic/table-basic-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.css b/src/components-examples/material/legacy-table/table-column-styling/table-column-styling-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.css rename to src/components-examples/material/legacy-table/table-column-styling/table-column-styling-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.html b/src/components-examples/material/legacy-table/table-column-styling/table-column-styling-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.html rename to src/components-examples/material/legacy-table/table-column-styling/table-column-styling-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.ts b/src/components-examples/material/legacy-table/table-column-styling/table-column-styling-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.ts rename to src/components-examples/material/legacy-table/table-column-styling/table-column-styling-example.ts 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/legacy-table/table-dynamic-array-data/table-dynamic-array-data-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-dynamic-array-data/table-dynamic-array-data-example.css rename to src/components-examples/material/legacy-table/table-dynamic-array-data/table-dynamic-array-data-example.css 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/legacy-table/table-dynamic-array-data/table-dynamic-array-data-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-dynamic-array-data/table-dynamic-array-data-example.html rename to src/components-examples/material/legacy-table/table-dynamic-array-data/table-dynamic-array-data-example.html 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/legacy-table/table-dynamic-array-data/table-dynamic-array-data-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-dynamic-array-data/table-dynamic-array-data-example.ts rename to src/components-examples/material/legacy-table/table-dynamic-array-data/table-dynamic-array-data-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.css b/src/components-examples/material/legacy-table/table-dynamic-columns/table-dynamic-columns-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.css rename to src/components-examples/material/legacy-table/table-dynamic-columns/table-dynamic-columns-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.html b/src/components-examples/material/legacy-table/table-dynamic-columns/table-dynamic-columns-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.html rename to src/components-examples/material/legacy-table/table-dynamic-columns/table-dynamic-columns-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.ts b/src/components-examples/material/legacy-table/table-dynamic-columns/table-dynamic-columns-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-dynamic-columns/table-dynamic-columns-example.ts rename to src/components-examples/material/legacy-table/table-dynamic-columns/table-dynamic-columns-example.ts 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/legacy-table/table-dynamic-observable-data/table-dynamic-observable-data-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-dynamic-observable-data/table-dynamic-observable-data-example.css rename to src/components-examples/material/legacy-table/table-dynamic-observable-data/table-dynamic-observable-data-example.css 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/legacy-table/table-dynamic-observable-data/table-dynamic-observable-data-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-dynamic-observable-data/table-dynamic-observable-data-example.html rename to src/components-examples/material/legacy-table/table-dynamic-observable-data/table-dynamic-observable-data-example.html 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/legacy-table/table-dynamic-observable-data/table-dynamic-observable-data-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-dynamic-observable-data/table-dynamic-observable-data-example.ts rename to src/components-examples/material/legacy-table/table-dynamic-observable-data/table-dynamic-observable-data-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.css b/src/components-examples/material/legacy-table/table-expandable-rows/table-expandable-rows-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.css rename to src/components-examples/material/legacy-table/table-expandable-rows/table-expandable-rows-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.html b/src/components-examples/material/legacy-table/table-expandable-rows/table-expandable-rows-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.html rename to src/components-examples/material/legacy-table/table-expandable-rows/table-expandable-rows-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.ts b/src/components-examples/material/legacy-table/table-expandable-rows/table-expandable-rows-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.ts rename to src/components-examples/material/legacy-table/table-expandable-rows/table-expandable-rows-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.css b/src/components-examples/material/legacy-table/table-filtering/table-filtering-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.css rename to src/components-examples/material/legacy-table/table-filtering/table-filtering-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.html b/src/components-examples/material/legacy-table/table-filtering/table-filtering-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.html rename to src/components-examples/material/legacy-table/table-filtering/table-filtering-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.ts b/src/components-examples/material/legacy-table/table-filtering/table-filtering-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-filtering/table-filtering-example.ts rename to src/components-examples/material/legacy-table/table-filtering/table-filtering-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.css b/src/components-examples/material/legacy-table/table-flex-basic/table-flex-basic-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.css rename to src/components-examples/material/legacy-table/table-flex-basic/table-flex-basic-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.html b/src/components-examples/material/legacy-table/table-flex-basic/table-flex-basic-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.html rename to src/components-examples/material/legacy-table/table-flex-basic/table-flex-basic-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.ts b/src/components-examples/material/legacy-table/table-flex-basic/table-flex-basic-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-flex-basic/table-flex-basic-example.ts rename to src/components-examples/material/legacy-table/table-flex-basic/table-flex-basic-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.css b/src/components-examples/material/legacy-table/table-footer-row/table-footer-row-example.css similarity index 64% rename from src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.css rename to src/components-examples/material/legacy-table/table-footer-row/table-footer-row-example.css index 53ef90725254..de64c6e53694 100644 --- a/src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.css +++ b/src/components-examples/material/legacy-table/table-footer-row/table-footer-row-example.css @@ -2,6 +2,6 @@ table { width: 100%; } -tr.mat-mdc-footer-row td { +tr.mat-footer-row { 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/legacy-table/table-footer-row/table-footer-row-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.html rename to src/components-examples/material/legacy-table/table-footer-row/table-footer-row-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.ts b/src/components-examples/material/legacy-table/table-footer-row/table-footer-row-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-footer-row/table-footer-row-example.ts rename to src/components-examples/material/legacy-table/table-footer-row/table-footer-row-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.css b/src/components-examples/material/legacy-table/table-generated-columns/table-generated-columns-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.css rename to src/components-examples/material/legacy-table/table-generated-columns/table-generated-columns-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.html b/src/components-examples/material/legacy-table/table-generated-columns/table-generated-columns-example.html similarity index 70% rename from src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.html rename to src/components-examples/material/legacy-table/table-generated-columns/table-generated-columns-example.html index 3d5013802268..c1b5fa29128f 100644 --- a/src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.html +++ b/src/components-examples/material/legacy-table/table-generated-columns/table-generated-columns-example.html @@ -8,6 +8,6 @@ - - + + diff --git a/src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.ts b/src/components-examples/material/legacy-table/table-generated-columns/table-generated-columns-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-generated-columns/table-generated-columns-example.ts rename to src/components-examples/material/legacy-table/table-generated-columns/table-generated-columns-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.html b/src/components-examples/material/legacy-table/table-harness/table-harness-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.html rename to src/components-examples/material/legacy-table/table-harness/table-harness-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.spec.ts b/src/components-examples/material/legacy-table/table-harness/table-harness-example.spec.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.spec.ts rename to src/components-examples/material/legacy-table/table-harness/table-harness-example.spec.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.ts b/src/components-examples/material/legacy-table/table-harness/table-harness-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-harness/table-harness-example.ts rename to src/components-examples/material/legacy-table/table-harness/table-harness-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-http/table-http-example.css b/src/components-examples/material/legacy-table/table-http/table-http-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-http/table-http-example.css rename to src/components-examples/material/legacy-table/table-http/table-http-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-http/table-http-example.html b/src/components-examples/material/legacy-table/table-http/table-http-example.html similarity index 92% rename from src/components-examples/material-experimental/mdc-table/table-http/table-http-example.html rename to src/components-examples/material/legacy-table/table-http/table-http-example.html index 9c88d204de87..355ae60b0ff2 100644 --- a/src/components-examples/material-experimental/mdc-table/table-http/table-http-example.html +++ b/src/components-examples/material/legacy-table/table-http/table-http-example.html @@ -42,5 +42,5 @@ - + diff --git a/src/components-examples/material-experimental/mdc-table/table-http/table-http-example.ts b/src/components-examples/material/legacy-table/table-http/table-http-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-http/table-http-example.ts rename to src/components-examples/material/legacy-table/table-http/table-http-example.ts 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/legacy-table/table-multiple-header-footer/table-multiple-header-footer-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-multiple-header-footer/table-multiple-header-footer-example.css rename to src/components-examples/material/legacy-table/table-multiple-header-footer/table-multiple-header-footer-example.css 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/legacy-table/table-multiple-header-footer/table-multiple-header-footer-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-multiple-header-footer/table-multiple-header-footer-example.html rename to src/components-examples/material/legacy-table/table-multiple-header-footer/table-multiple-header-footer-example.html 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/legacy-table/table-multiple-header-footer/table-multiple-header-footer-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-multiple-header-footer/table-multiple-header-footer-example.ts rename to src/components-examples/material/legacy-table/table-multiple-header-footer/table-multiple-header-footer-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.css b/src/components-examples/material/legacy-table/table-overview/table-overview-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.css rename to src/components-examples/material/legacy-table/table-overview/table-overview-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.html b/src/components-examples/material/legacy-table/table-overview/table-overview-example.html similarity index 93% rename from src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.html rename to src/components-examples/material/legacy-table/table-overview/table-overview-example.html index 601acbfe9675..880c07608504 100644 --- a/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.html +++ b/src/components-examples/material/legacy-table/table-overview/table-overview-example.html @@ -39,6 +39,5 @@ - + - diff --git a/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.ts b/src/components-examples/material/legacy-table/table-overview/table-overview-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.ts rename to src/components-examples/material/legacy-table/table-overview/table-overview-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.css b/src/components-examples/material/legacy-table/table-pagination/table-pagination-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.css rename to src/components-examples/material/legacy-table/table-pagination/table-pagination-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.html b/src/components-examples/material/legacy-table/table-pagination/table-pagination-example.html similarity index 86% rename from src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.html rename to src/components-examples/material/legacy-table/table-pagination/table-pagination-example.html index a410ebbe9d05..c7c5e005baa5 100644 --- a/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.html +++ b/src/components-examples/material/legacy-table/table-pagination/table-pagination-example.html @@ -29,5 +29,8 @@ - + + diff --git a/src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.ts b/src/components-examples/material/legacy-table/table-pagination/table-pagination-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-pagination/table-pagination-example.ts rename to src/components-examples/material/legacy-table/table-pagination/table-pagination-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.css b/src/components-examples/material/legacy-table/table-recycle-rows/table-recycle-rows-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.css rename to src/components-examples/material/legacy-table/table-recycle-rows/table-recycle-rows-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.html b/src/components-examples/material/legacy-table/table-recycle-rows/table-recycle-rows-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.html rename to src/components-examples/material/legacy-table/table-recycle-rows/table-recycle-rows-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.ts b/src/components-examples/material/legacy-table/table-recycle-rows/table-recycle-rows-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-recycle-rows/table-recycle-rows-example.ts rename to src/components-examples/material/legacy-table/table-recycle-rows/table-recycle-rows-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.css b/src/components-examples/material/legacy-table/table-reorderable/table-reorderable-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.css rename to src/components-examples/material/legacy-table/table-reorderable/table-reorderable-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.html b/src/components-examples/material/legacy-table/table-reorderable/table-reorderable-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.html rename to src/components-examples/material/legacy-table/table-reorderable/table-reorderable-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.ts b/src/components-examples/material/legacy-table/table-reorderable/table-reorderable-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-reorderable/table-reorderable-example.ts rename to src/components-examples/material/legacy-table/table-reorderable/table-reorderable-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.css b/src/components-examples/material/legacy-table/table-row-binding/table-row-binding-example.css similarity index 76% rename from src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.css rename to src/components-examples/material/legacy-table/table-row-binding/table-row-binding-example.css index bfac75fd45c6..76a479d66d07 100644 --- a/src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.css +++ b/src/components-examples/material/legacy-table/table-row-binding/table-row-binding-example.css @@ -2,13 +2,13 @@ width: 100%; } -.mat-mdc-row .mat-mdc-cell { +.mat-row .mat-cell { border-bottom: 1px solid transparent; border-top: 1px solid transparent; cursor: pointer; } -.mat-mdc-row:hover .mat-mdc-cell { +.mat-row:hover .mat-cell { border-color: currentColor; } diff --git a/src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.html b/src/components-examples/material/legacy-table/table-row-binding/table-row-binding-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.html rename to src/components-examples/material/legacy-table/table-row-binding/table-row-binding-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.ts b/src/components-examples/material/legacy-table/table-row-binding/table-row-binding-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-row-binding/table-row-binding-example.ts rename to src/components-examples/material/legacy-table/table-row-binding/table-row-binding-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.css b/src/components-examples/material/legacy-table/table-row-context/table-row-context-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.css rename to src/components-examples/material/legacy-table/table-row-context/table-row-context-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.html b/src/components-examples/material/legacy-table/table-row-context/table-row-context-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.html rename to src/components-examples/material/legacy-table/table-row-context/table-row-context-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.ts b/src/components-examples/material/legacy-table/table-row-context/table-row-context-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-row-context/table-row-context-example.ts rename to src/components-examples/material/legacy-table/table-row-context/table-row-context-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.css b/src/components-examples/material/legacy-table/table-selection/table-selection-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.css rename to src/components-examples/material/legacy-table/table-selection/table-selection-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.html b/src/components-examples/material/legacy-table/table-selection/table-selection-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.html rename to src/components-examples/material/legacy-table/table-selection/table-selection-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.ts b/src/components-examples/material/legacy-table/table-selection/table-selection-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-selection/table-selection-example.ts rename to src/components-examples/material/legacy-table/table-selection/table-selection-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.css b/src/components-examples/material/legacy-table/table-sorting/table-sorting-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.css rename to src/components-examples/material/legacy-table/table-sorting/table-sorting-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.html b/src/components-examples/material/legacy-table/table-sorting/table-sorting-example.html similarity index 55% rename from src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.html rename to src/components-examples/material/legacy-table/table-sorting/table-sorting-example.html index 977bed07a81f..e11776461d7a 100644 --- a/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.html +++ b/src/components-examples/material/legacy-table/table-sorting/table-sorting-example.html @@ -1,26 +1,35 @@ - +
- + - + - + - + diff --git a/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.ts b/src/components-examples/material/legacy-table/table-sorting/table-sorting-example.ts similarity index 66% rename from src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.ts rename to src/components-examples/material/legacy-table/table-sorting/table-sorting-example.ts index 79b42c091a3c..9fd6f3c83514 100644 --- a/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.ts +++ b/src/components-examples/material/legacy-table/table-sorting/table-sorting-example.ts @@ -1,5 +1,6 @@ +import {LiveAnnouncer} from '@angular/cdk/a11y'; import {AfterViewInit, Component, ViewChild} from '@angular/core'; -import {MatSort} from '@angular/material/sort'; +import {MatSort, Sort} from '@angular/material/sort'; import {MatLegacyTableDataSource} from '@angular/material/legacy-table'; export interface PeriodicElement { @@ -34,9 +35,24 @@ export class TableSortingExample implements AfterViewInit { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; dataSource = new MatLegacyTableDataSource(ELEMENT_DATA); + constructor(private _liveAnnouncer: LiveAnnouncer) {} + @ViewChild(MatSort) sort: MatSort; ngAfterViewInit() { this.dataSource.sort = this.sort; } + + /** Announce the change in sort state for assistive technology. */ + announceSortChange(sortState: Sort) { + // This example uses English messages. If your application supports + // multiple language, you would internationalize these strings. + // Furthermore, you can customize the message to add additional + // details about the values being sorted. + if (sortState.direction) { + this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`); + } else { + this._liveAnnouncer.announce('Sorting cleared'); + } + } } diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.css b/src/components-examples/material/legacy-table/table-sticky-columns/table-sticky-columns-example.css similarity index 79% rename from src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.css rename to src/components-examples/material/legacy-table/table-sticky-columns/table-sticky-columns-example.css index b931bfc6acc6..52262aad13cf 100644 --- a/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.css +++ b/src/components-examples/material/legacy-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-mdc-table-sticky-border-elem-right { +.mat-table-sticky-border-elem-right { border-left: 1px solid #e0e0e0; } -.mat-mdc-table-sticky-border-elem-left { +.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/legacy-table/table-sticky-columns/table-sticky-columns-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.html rename to src/components-examples/material/legacy-table/table-sticky-columns/table-sticky-columns-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.ts b/src/components-examples/material/legacy-table/table-sticky-columns/table-sticky-columns-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.ts rename to src/components-examples/material/legacy-table/table-sticky-columns/table-sticky-columns-example.ts 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/legacy-table/table-sticky-complex-flex/table-sticky-complex-flex-example.css similarity index 61% rename from src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.css rename to src/components-examples/material/legacy-table/table-sticky-complex-flex/table-sticky-complex-flex-example.css index e1a4540ba09a..32cefbf61d4a 100644 --- a/src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.css +++ b/src/components-examples/material/legacy-table/table-sticky-complex-flex/table-sticky-complex-flex-example.css @@ -3,7 +3,7 @@ overflow: auto; } -.mat-mdc-table-sticky { +.mat-table-sticky { background: #59abfd; opacity: 1; } @@ -18,27 +18,27 @@ text-align: center; } -.mat-mdc-header-cell, .mat-mdc-footer-cell, .mat-mdc-cell { +.mat-header-cell, .mat-footer-cell, .mat-cell { min-width: 80px; box-sizing: border-box; } -.mat-mdc-header-row, .mat-mdc-footer-row, .mat-mdc-row { +.mat-header-row, .mat-footer-row, .mat-row { min-width: 1920px; /* 24 columns, 80px each */ } -.mat-mdc-table-sticky-border-elem-top { +.mat-table-sticky-border-elem-top { border-bottom: 2px solid midnightblue; } -.mat-mdc-table-sticky-border-elem-right { +.mat-table-sticky-border-elem-right { border-left: 2px solid midnightblue; } -.mat-mdc-table-sticky-border-elem-bottom { +.mat-table-sticky-border-elem-bottom { border-top: 2px solid midnightblue; } -.mat-mdc-table-sticky-border-elem-left { +.mat-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/legacy-table/table-sticky-complex-flex/table-sticky-complex-flex-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.html rename to src/components-examples/material/legacy-table/table-sticky-complex-flex/table-sticky-complex-flex-example.html 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/legacy-table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts rename to src/components-examples/material/legacy-table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.css b/src/components-examples/material/legacy-table/table-sticky-complex/table-sticky-complex-example.css similarity index 64% rename from src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.css rename to src/components-examples/material/legacy-table/table-sticky-complex/table-sticky-complex-example.css index 8bb485e0dd04..155ce9ef09ec 100644 --- a/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.css +++ b/src/components-examples/material/legacy-table/table-sticky-complex/table-sticky-complex-example.css @@ -3,7 +3,7 @@ overflow: auto; } -.mat-mdc-table-sticky { +.mat-table-sticky { background: #59abfd; opacity: 1; } @@ -18,23 +18,23 @@ text-align: center; } -.mat-mdc-header-cell, .mat-mdc-footer-cell, .mat-mdc-cell { +.mat-header-cell, .mat-footer-cell, .mat-cell { min-width: 80px; box-sizing: border-box; } -.mat-mdc-table-sticky-border-elem-top { +.mat-table-sticky-border-elem-top { border-bottom: 2px solid midnightblue; } -.mat-mdc-table-sticky-border-elem-right { +.mat-table-sticky-border-elem-right { border-left: 2px solid midnightblue; } -.mat-mdc-table-sticky-border-elem-bottom { +.mat-table-sticky-border-elem-bottom { border-top: 2px solid midnightblue; } -.mat-mdc-table-sticky-border-elem-left { +.mat-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/legacy-table/table-sticky-complex/table-sticky-complex-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.html rename to src/components-examples/material/legacy-table/table-sticky-complex/table-sticky-complex-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.ts b/src/components-examples/material/legacy-table/table-sticky-complex/table-sticky-complex-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.ts rename to src/components-examples/material/legacy-table/table-sticky-complex/table-sticky-complex-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.css b/src/components-examples/material/legacy-table/table-sticky-footer/table-sticky-footer-example.css similarity index 75% rename from src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.css rename to src/components-examples/material/legacy-table/table-sticky-footer/table-sticky-footer-example.css index 2afe062fed7a..6b5869e7c72b 100644 --- a/src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.css +++ b/src/components-examples/material/legacy-table/table-sticky-footer/table-sticky-footer-example.css @@ -7,10 +7,10 @@ table { width: 100%; } -tr.mat-mdc-footer-row { +tr.mat-footer-row { font-weight: bold; } -.mat-mdc-table-sticky { +.mat-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/legacy-table/table-sticky-footer/table-sticky-footer-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.html rename to src/components-examples/material/legacy-table/table-sticky-footer/table-sticky-footer-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.ts b/src/components-examples/material/legacy-table/table-sticky-footer/table-sticky-footer-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.ts rename to src/components-examples/material/legacy-table/table-sticky-footer/table-sticky-footer-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.css b/src/components-examples/material/legacy-table/table-sticky-header/table-sticky-header-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.css rename to src/components-examples/material/legacy-table/table-sticky-header/table-sticky-header-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.html b/src/components-examples/material/legacy-table/table-sticky-header/table-sticky-header-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.html rename to src/components-examples/material/legacy-table/table-sticky-header/table-sticky-header-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.ts b/src/components-examples/material/legacy-table/table-sticky-header/table-sticky-header-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.ts rename to src/components-examples/material/legacy-table/table-sticky-header/table-sticky-header-example.ts 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/legacy-table/table-text-column-advanced/table-text-column-advanced-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.css rename to src/components-examples/material/legacy-table/table-text-column-advanced/table-text-column-advanced-example.css 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/legacy-table/table-text-column-advanced/table-text-column-advanced-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.html rename to src/components-examples/material/legacy-table/table-text-column-advanced/table-text-column-advanced-example.html 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/legacy-table/table-text-column-advanced/table-text-column-advanced-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-text-column-advanced/table-text-column-advanced-example.ts rename to src/components-examples/material/legacy-table/table-text-column-advanced/table-text-column-advanced-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.css b/src/components-examples/material/legacy-table/table-text-column/table-text-column-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.css rename to src/components-examples/material/legacy-table/table-text-column/table-text-column-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.html b/src/components-examples/material/legacy-table/table-text-column/table-text-column-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.html rename to src/components-examples/material/legacy-table/table-text-column/table-text-column-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.ts b/src/components-examples/material/legacy-table/table-text-column/table-text-column-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-text-column/table-text-column-example.ts rename to src/components-examples/material/legacy-table/table-text-column/table-text-column-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.css b/src/components-examples/material/legacy-table/table-with-ripples/table-with-ripples-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.css rename to src/components-examples/material/legacy-table/table-with-ripples/table-with-ripples-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.html b/src/components-examples/material/legacy-table/table-with-ripples/table-with-ripples-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.html rename to src/components-examples/material/legacy-table/table-with-ripples/table-with-ripples-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.ts b/src/components-examples/material/legacy-table/table-with-ripples/table-with-ripples-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-with-ripples/table-with-ripples-example.ts rename to src/components-examples/material/legacy-table/table-with-ripples/table-with-ripples-example.ts diff --git a/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.css b/src/components-examples/material/legacy-table/table-wrapped/table-wrapped-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.css rename to src/components-examples/material/legacy-table/table-wrapped/table-wrapped-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.html b/src/components-examples/material/legacy-table/table-wrapped/table-wrapped-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.html rename to src/components-examples/material/legacy-table/table-wrapped/table-wrapped-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.ts b/src/components-examples/material/legacy-table/table-wrapped/table-wrapped-example.ts similarity index 78% rename from src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.ts rename to src/components-examples/material/legacy-table/table-wrapped/table-wrapped-example.ts index f8b049cdb7da..931a5c740261 100644 --- a/src/components-examples/material-experimental/mdc-table/table-wrapped/table-wrapped-example.ts +++ b/src/components-examples/material/legacy-table/table-wrapped/table-wrapped-example.ts @@ -11,13 +11,13 @@ import { } from '@angular/core'; import {MatSort} from '@angular/material/sort'; import { - MatColumnDef, - MatHeaderRowDef, - MatNoDataRow, - MatRowDef, - MatTable, - MatTableDataSource, -} from '@angular/material/table'; + MatLegacyColumnDef, + MatLegacyHeaderRowDef, + MatLegacyNoDataRow, + MatLegacyRowDef, + MatLegacyTable, + MatLegacyTableDataSource, +} from '@angular/material/legacy-table'; export interface PeriodicElement { name: string; @@ -49,7 +49,7 @@ const ELEMENT_DATA: PeriodicElement[] = [ }) export class TableWrappedExample implements AfterViewInit { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); + dataSource = new MatLegacyTableDataSource(ELEMENT_DATA); @ViewChild('sort') sort: MatSort; @@ -82,12 +82,12 @@ export class TableWrappedExample implements AfterViewInit { ], }) export class WrapperTable implements AfterContentInit { - @ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList; - @ContentChildren(MatRowDef) rowDefs: QueryList>; - @ContentChildren(MatColumnDef) columnDefs: QueryList; - @ContentChild(MatNoDataRow) noDataRow: MatNoDataRow; + @ContentChildren(MatLegacyHeaderRowDef) headerRowDefs: QueryList; + @ContentChildren(MatLegacyRowDef) rowDefs: QueryList>; + @ContentChildren(MatLegacyColumnDef) columnDefs: QueryList; + @ContentChild(MatLegacyNoDataRow) noDataRow: MatLegacyNoDataRow; - @ViewChild(MatTable, {static: true}) table: MatTable; + @ViewChild(MatLegacyTable, {static: true}) table: MatLegacyTable; @Input() columns: string[]; diff --git a/src/components-examples/material-experimental/mdc-table/table-wrapped/wrapper-table.html b/src/components-examples/material/legacy-table/table-wrapped/wrapper-table.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-wrapped/wrapper-table.html rename to src/components-examples/material/legacy-table/table-wrapped/wrapper-table.html diff --git a/src/components-examples/material/table/BUILD.bazel b/src/components-examples/material/table/BUILD.bazel index 3ce19289175c..7edfe39c2f6e 100644 --- a/src/components-examples/material/table/BUILD.bazel +++ b/src/components-examples/material/table/BUILD.bazel @@ -24,10 +24,10 @@ ng_module( "//src/material/legacy-checkbox", "//src/material/legacy-input", "//src/material/legacy-paginator", - "//src/material/legacy-progress-spinner", - "//src/material/legacy-table", - "//src/material/legacy-table/testing", + "//src/material/progress-spinner", "//src/material/sort", + "//src/material/table", + "//src/material/table/testing", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", "@npm//@types/jasmine", @@ -50,8 +50,8 @@ ng_test_library( ":table", "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/legacy-table", - "//src/material/legacy-table/testing", + "//src/material/table", + "//src/material/table/testing", "@npm//@angular/platform-browser-dynamic", ], ) diff --git a/src/components-examples/material/table/index.ts b/src/components-examples/material/table/index.ts index 385829e894b9..e7c4e4f1e118 100644 --- a/src/components-examples/material/table/index.ts +++ b/src/components-examples/material/table/index.ts @@ -9,7 +9,7 @@ import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator'; import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner'; import {MatSortModule} from '@angular/material/sort'; -import {MatLegacyTableModule} from '@angular/material/legacy-table'; +import {MatTableModule} from '@angular/material/table'; import {DragDropModule} from '@angular/cdk/drag-drop'; import {CdkTableModule} from '@angular/cdk/table'; @@ -43,6 +43,7 @@ import {TableRowBindingExample} from './table-row-binding/table-row-binding-exam 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'; +import {TableFlexLargeRowExample} from './table-flex-large-row/table-flex-large-row-example'; export { TableBasicExample, @@ -53,6 +54,7 @@ export { TableExpandableRowsExample, TableFilteringExample, TableFlexBasicExample, + TableFlexLargeRowExample, TableFooterRowExample, TableGeneratedColumnsExample, TableHarnessExample, @@ -87,6 +89,7 @@ const EXAMPLES = [ TableExpandableRowsExample, TableFilteringExample, TableFlexBasicExample, + TableFlexLargeRowExample, TableFooterRowExample, TableGeneratedColumnsExample, TableHarnessExample, @@ -124,7 +127,7 @@ const EXAMPLES = [ MatLegacyProgressSpinnerModule, MatRippleModule, MatSortModule, - MatLegacyTableModule, + MatTableModule, CdkTableModule, DragDropModule, ], diff --git a/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.ts b/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.ts index 8fde49de360f..bea1ba614316 100644 --- a/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.ts +++ b/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.ts @@ -1,5 +1,5 @@ import {Component, ViewChild} from '@angular/core'; -import {MatLegacyTable} from '@angular/material/legacy-table'; +import {MatTable} from '@angular/material/table'; export interface PeriodicElement { name: string; @@ -33,7 +33,7 @@ export class TableDynamicArrayDataExample { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; dataSource = [...ELEMENT_DATA]; - @ViewChild(MatLegacyTable) table: MatLegacyTable; + @ViewChild(MatTable) table: MatTable; addData() { const randomElementIndex = Math.floor(Math.random() * ELEMENT_DATA.length); diff --git a/src/components-examples/material/table/table-filtering/table-filtering-example.ts b/src/components-examples/material/table/table-filtering/table-filtering-example.ts index 400d7e54fd63..f24acf8cdd1f 100644 --- a/src/components-examples/material/table/table-filtering/table-filtering-example.ts +++ b/src/components-examples/material/table/table-filtering/table-filtering-example.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MatLegacyTableDataSource} from '@angular/material/legacy-table'; +import {MatTableDataSource} from '@angular/material/table'; export interface PeriodicElement { name: string; @@ -31,7 +31,7 @@ const ELEMENT_DATA: PeriodicElement[] = [ }) export class TableFilteringExample { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatLegacyTableDataSource(ELEMENT_DATA); + dataSource = new MatTableDataSource(ELEMENT_DATA); applyFilter(event: Event) { const filterValue = (event.target as HTMLInputElement).value; diff --git a/src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.css b/src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.css similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.css rename to src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.css diff --git a/src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.html b/src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.html similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.html rename to src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.html diff --git a/src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.ts b/src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.ts similarity index 100% rename from src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.ts rename to src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.ts diff --git a/src/components-examples/material/table/table-footer-row/table-footer-row-example.css b/src/components-examples/material/table/table-footer-row/table-footer-row-example.css index de64c6e53694..53ef90725254 100644 --- a/src/components-examples/material/table/table-footer-row/table-footer-row-example.css +++ b/src/components-examples/material/table/table-footer-row/table-footer-row-example.css @@ -2,6 +2,6 @@ table { width: 100%; } -tr.mat-footer-row { +tr.mat-mdc-footer-row td { font-weight: bold; } diff --git a/src/components-examples/material/table/table-harness/table-harness-example.spec.ts b/src/components-examples/material/table/table-harness/table-harness-example.spec.ts index 3316435feba7..89d9ded55bf5 100644 --- a/src/components-examples/material/table/table-harness/table-harness-example.spec.ts +++ b/src/components-examples/material/table/table-harness/table-harness-example.spec.ts @@ -1,8 +1,8 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; -import {MatLegacyTableHarness} from '@angular/material/legacy-table/testing'; +import {MatTableHarness} from '@angular/material/table/testing'; import {HarnessLoader, parallel} from '@angular/cdk/testing'; -import {MatLegacyTableModule} from '@angular/material/legacy-table'; +import {MatTableModule} from '@angular/material/table'; import {TableHarnessExample} from './table-harness-example'; describe('TableHarnessExample', () => { @@ -11,7 +11,7 @@ describe('TableHarnessExample', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MatLegacyTableModule], + imports: [MatTableModule], declarations: [TableHarnessExample], }).compileComponents(); fixture = TestBed.createComponent(TableHarnessExample); @@ -20,12 +20,12 @@ describe('TableHarnessExample', () => { }); it('should load harness for a table', async () => { - const tables = await loader.getAllHarnesses(MatLegacyTableHarness); + 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(MatLegacyTableHarness); + const table = await loader.getHarness(MatTableHarness); const headerRows = await table.getHeaderRows(); const footerRows = await table.getFooterRows(); const rows = await table.getRows(); @@ -35,7 +35,7 @@ describe('TableHarnessExample', () => { }); it('should get cells inside a row', async () => { - const table = await loader.getHarness(MatLegacyTableHarness); + const table = await loader.getHarness(MatTableHarness); const headerRows = await table.getHeaderRows(); const footerRows = await table.getFooterRows(); const rows = await table.getRows(); @@ -53,7 +53,7 @@ describe('TableHarnessExample', () => { }); it('should be able to get the text of a cell', async () => { - const table = await loader.getHarness(MatLegacyTableHarness); + 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())); @@ -61,7 +61,7 @@ describe('TableHarnessExample', () => { }); it('should be able to get the column name of a cell', async () => { - const table = await loader.getHarness(MatLegacyTableHarness); + 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())); @@ -69,7 +69,7 @@ describe('TableHarnessExample', () => { }); it('should be able to filter cells by text', async () => { - const table = await loader.getHarness(MatLegacyTableHarness); + 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())); @@ -77,7 +77,7 @@ describe('TableHarnessExample', () => { }); it('should be able to filter cells by column name', async () => { - const table = await loader.getHarness(MatLegacyTableHarness); + 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())); diff --git a/src/components-examples/material/table/table-overview/table-overview-example.html b/src/components-examples/material/table/table-overview/table-overview-example.html index 880c07608504..e91ebfbe2ea1 100644 --- a/src/components-examples/material/table/table-overview/table-overview-example.html +++ b/src/components-examples/material/table/table-overview/table-overview-example.html @@ -41,3 +41,4 @@ + diff --git a/src/components-examples/material/table/table-overview/table-overview-example.ts b/src/components-examples/material/table/table-overview/table-overview-example.ts index ab58f89960d3..bea833f685b8 100644 --- a/src/components-examples/material/table/table-overview/table-overview-example.ts +++ b/src/components-examples/material/table/table-overview/table-overview-example.ts @@ -1,7 +1,7 @@ import {AfterViewInit, Component, ViewChild} from '@angular/core'; import {MatLegacyPaginator} from '@angular/material/legacy-paginator'; import {MatSort} from '@angular/material/sort'; -import {MatLegacyTableDataSource} from '@angular/material/legacy-table'; +import {MatTableDataSource} from '@angular/material/table'; export interface UserData { id: string; @@ -53,7 +53,7 @@ const NAMES: string[] = [ }) export class TableOverviewExample implements AfterViewInit { displayedColumns: string[] = ['id', 'name', 'progress', 'fruit']; - dataSource: MatLegacyTableDataSource; + dataSource: MatTableDataSource; @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; @ViewChild(MatSort) sort: MatSort; @@ -63,7 +63,7 @@ export class TableOverviewExample implements AfterViewInit { 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 MatLegacyTableDataSource(users); + this.dataSource = new MatTableDataSource(users); } ngAfterViewInit() { diff --git a/src/components-examples/material/table/table-pagination/table-pagination-example.html b/src/components-examples/material/table/table-pagination/table-pagination-example.html index c7c5e005baa5..ec67d8f72ee1 100644 --- a/src/components-examples/material/table/table-pagination/table-pagination-example.html +++ b/src/components-examples/material/table/table-pagination/table-pagination-example.html @@ -30,7 +30,7 @@
No. + No. + {{element.position}} Name + Name + {{element.name}} Weight + Weight + {{element.weight}} Symbol + Symbol + {{element.symbol}}
diff --git a/src/components-examples/material/table/table-pagination/table-pagination-example.ts b/src/components-examples/material/table/table-pagination/table-pagination-example.ts index 218787853ab8..65bfe98eccc3 100644 --- a/src/components-examples/material/table/table-pagination/table-pagination-example.ts +++ b/src/components-examples/material/table/table-pagination/table-pagination-example.ts @@ -1,6 +1,6 @@ import {AfterViewInit, Component, ViewChild} from '@angular/core'; import {MatLegacyPaginator} from '@angular/material/legacy-paginator'; -import {MatLegacyTableDataSource} from '@angular/material/legacy-table'; +import {MatTableDataSource} from '@angular/material/table'; /** * @title Table with pagination @@ -12,7 +12,7 @@ import {MatLegacyTableDataSource} from '@angular/material/legacy-table'; }) export class TablePaginationExample implements AfterViewInit { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatLegacyTableDataSource(ELEMENT_DATA); + dataSource = new MatTableDataSource(ELEMENT_DATA); @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; diff --git a/src/components-examples/material/table/table-row-binding/table-row-binding-example.css b/src/components-examples/material/table/table-row-binding/table-row-binding-example.css index 76a479d66d07..bfac75fd45c6 100644 --- a/src/components-examples/material/table/table-row-binding/table-row-binding-example.css +++ b/src/components-examples/material/table/table-row-binding/table-row-binding-example.css @@ -2,13 +2,13 @@ width: 100%; } -.mat-row .mat-cell { +.mat-mdc-row .mat-mdc-cell { border-bottom: 1px solid transparent; border-top: 1px solid transparent; cursor: pointer; } -.mat-row:hover .mat-cell { +.mat-mdc-row:hover .mat-mdc-cell { border-color: currentColor; } diff --git a/src/components-examples/material/table/table-selection/table-selection-example.ts b/src/components-examples/material/table/table-selection/table-selection-example.ts index 2169f3bd8ee8..7da56a15757a 100644 --- a/src/components-examples/material/table/table-selection/table-selection-example.ts +++ b/src/components-examples/material/table/table-selection/table-selection-example.ts @@ -1,6 +1,6 @@ import {SelectionModel} from '@angular/cdk/collections'; import {Component} from '@angular/core'; -import {MatLegacyTableDataSource} from '@angular/material/legacy-table'; +import {MatTableDataSource} from '@angular/material/table'; export interface PeriodicElement { name: string; @@ -32,7 +32,7 @@ const ELEMENT_DATA: PeriodicElement[] = [ }) export class TableSelectionExample { displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol']; - dataSource = new MatLegacyTableDataSource(ELEMENT_DATA); + dataSource = new MatTableDataSource(ELEMENT_DATA); selection = new SelectionModel(true, []); /** Whether the number of selected elements matches the total number of rows. */ diff --git a/src/components-examples/material/table/table-sorting/table-sorting-example.html b/src/components-examples/material/table/table-sorting/table-sorting-example.html index e11776461d7a..76edcae012cb 100644 --- a/src/components-examples/material/table/table-sorting/table-sorting-example.html +++ b/src/components-examples/material/table/table-sorting/table-sorting-example.html @@ -1,5 +1,5 @@ + class="mat-elevation-z8"> diff --git a/src/components-examples/material/table/table-sorting/table-sorting-example.ts b/src/components-examples/material/table/table-sorting/table-sorting-example.ts index 9fd6f3c83514..13e95b6c87c4 100644 --- a/src/components-examples/material/table/table-sorting/table-sorting-example.ts +++ b/src/components-examples/material/table/table-sorting/table-sorting-example.ts @@ -1,7 +1,7 @@ import {LiveAnnouncer} from '@angular/cdk/a11y'; import {AfterViewInit, Component, ViewChild} from '@angular/core'; import {MatSort, Sort} from '@angular/material/sort'; -import {MatLegacyTableDataSource} from '@angular/material/legacy-table'; +import {MatTableDataSource} from '@angular/material/table'; export interface PeriodicElement { name: string; @@ -9,7 +9,6 @@ export interface PeriodicElement { 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'}, @@ -22,7 +21,6 @@ const ELEMENT_DATA: PeriodicElement[] = [ {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, ]; - /** * @title Table with sorting */ @@ -33,7 +31,7 @@ const ELEMENT_DATA: PeriodicElement[] = [ }) export class TableSortingExample implements AfterViewInit { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatLegacyTableDataSource(ELEMENT_DATA); + dataSource = new MatTableDataSource(ELEMENT_DATA); constructor(private _liveAnnouncer: LiveAnnouncer) {} diff --git a/src/components-examples/material/table/table-sticky-columns/table-sticky-columns-example.css b/src/components-examples/material/table/table-sticky-columns/table-sticky-columns-example.css index 52262aad13cf..b931bfc6acc6 100644 --- a/src/components-examples/material/table/table-sticky-columns/table-sticky-columns-example.css +++ b/src/components-examples/material/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; } diff --git a/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.css b/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.css index 32cefbf61d4a..e1a4540ba09a 100644 --- a/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.css +++ b/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.css @@ -3,7 +3,7 @@ overflow: auto; } -.mat-table-sticky { +.mat-mdc-table-sticky { background: #59abfd; opacity: 1; } @@ -18,27 +18,27 @@ text-align: center; } -.mat-header-cell, .mat-footer-cell, .mat-cell { +.mat-mdc-header-cell, .mat-mdc-footer-cell, .mat-mdc-cell { min-width: 80px; box-sizing: border-box; } -.mat-header-row, .mat-footer-row, .mat-row { +.mat-mdc-header-row, .mat-mdc-footer-row, .mat-mdc-row { min-width: 1920px; /* 24 columns, 80px each */ } -.mat-table-sticky-border-elem-top { +.mat-mdc-table-sticky-border-elem-top { border-bottom: 2px solid midnightblue; } -.mat-table-sticky-border-elem-right { +.mat-mdc-table-sticky-border-elem-right { border-left: 2px solid midnightblue; } -.mat-table-sticky-border-elem-bottom { +.mat-mdc-table-sticky-border-elem-bottom { border-top: 2px solid midnightblue; } -.mat-table-sticky-border-elem-left { +.mat-mdc-table-sticky-border-elem-left { border-right: 2px solid midnightblue; } diff --git a/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.css b/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.css index 155ce9ef09ec..8bb485e0dd04 100644 --- a/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.css +++ b/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.css @@ -3,7 +3,7 @@ overflow: auto; } -.mat-table-sticky { +.mat-mdc-table-sticky { background: #59abfd; opacity: 1; } @@ -18,23 +18,23 @@ text-align: center; } -.mat-header-cell, .mat-footer-cell, .mat-cell { +.mat-mdc-header-cell, .mat-mdc-footer-cell, .mat-mdc-cell { min-width: 80px; box-sizing: border-box; } -.mat-table-sticky-border-elem-top { +.mat-mdc-table-sticky-border-elem-top { border-bottom: 2px solid midnightblue; } -.mat-table-sticky-border-elem-right { +.mat-mdc-table-sticky-border-elem-right { border-left: 2px solid midnightblue; } -.mat-table-sticky-border-elem-bottom { +.mat-mdc-table-sticky-border-elem-bottom { border-top: 2px solid midnightblue; } -.mat-table-sticky-border-elem-left { +.mat-mdc-table-sticky-border-elem-left { border-right: 2px solid midnightblue; } diff --git a/src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.css b/src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.css index 6b5869e7c72b..2afe062fed7a 100644 --- a/src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.css +++ b/src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.css @@ -7,10 +7,10 @@ table { width: 100%; } -tr.mat-footer-row { +tr.mat-mdc-footer-row { font-weight: bold; } -.mat-table-sticky { +.mat-mdc-table-sticky { border-top: 1px solid #e0e0e0; } diff --git a/src/components-examples/material/table/table-text-column-advanced/table-text-column-advanced-example.ts b/src/components-examples/material/table/table-text-column-advanced/table-text-column-advanced-example.ts index af509427764f..8f72e053a086 100644 --- a/src/components-examples/material/table/table-text-column-advanced/table-text-column-advanced-example.ts +++ b/src/components-examples/material/table/table-text-column-advanced/table-text-column-advanced-example.ts @@ -1,6 +1,6 @@ import {Component} from '@angular/core'; import {DecimalPipe} from '@angular/common'; -import {MatLegacyTableDataSource} from '@angular/material/legacy-table'; +import {MatTableDataSource} from '@angular/material/table'; export interface PeriodicElement { name: string; @@ -32,7 +32,7 @@ const ELEMENT_DATA: PeriodicElement[] = [ }) export class TableTextColumnAdvancedExample { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatLegacyTableDataSource(ELEMENT_DATA); + dataSource = new MatTableDataSource(ELEMENT_DATA); headerText: string; diff --git a/src/components-examples/material/table/table-wrapped/table-wrapped-example.ts b/src/components-examples/material/table/table-wrapped/table-wrapped-example.ts index 931a5c740261..f8b049cdb7da 100644 --- a/src/components-examples/material/table/table-wrapped/table-wrapped-example.ts +++ b/src/components-examples/material/table/table-wrapped/table-wrapped-example.ts @@ -11,13 +11,13 @@ import { } from '@angular/core'; import {MatSort} from '@angular/material/sort'; import { - MatLegacyColumnDef, - MatLegacyHeaderRowDef, - MatLegacyNoDataRow, - MatLegacyRowDef, - MatLegacyTable, - MatLegacyTableDataSource, -} from '@angular/material/legacy-table'; + MatColumnDef, + MatHeaderRowDef, + MatNoDataRow, + MatRowDef, + MatTable, + MatTableDataSource, +} from '@angular/material/table'; export interface PeriodicElement { name: string; @@ -49,7 +49,7 @@ const ELEMENT_DATA: PeriodicElement[] = [ }) export class TableWrappedExample implements AfterViewInit { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatLegacyTableDataSource(ELEMENT_DATA); + dataSource = new MatTableDataSource(ELEMENT_DATA); @ViewChild('sort') sort: MatSort; @@ -82,12 +82,12 @@ export class TableWrappedExample implements AfterViewInit { ], }) export class WrapperTable implements AfterContentInit { - @ContentChildren(MatLegacyHeaderRowDef) headerRowDefs: QueryList; - @ContentChildren(MatLegacyRowDef) rowDefs: QueryList>; - @ContentChildren(MatLegacyColumnDef) columnDefs: QueryList; - @ContentChild(MatLegacyNoDataRow) noDataRow: MatLegacyNoDataRow; + @ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList; + @ContentChildren(MatRowDef) rowDefs: QueryList>; + @ContentChildren(MatColumnDef) columnDefs: QueryList; + @ContentChild(MatNoDataRow) noDataRow: MatNoDataRow; - @ViewChild(MatLegacyTable, {static: true}) table: MatLegacyTable; + @ViewChild(MatTable, {static: true}) table: MatTable; @Input() columns: string[]; diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel index 47fe1efecd87..51b99de4a63b 100644 --- a/src/dev-app/BUILD.bazel +++ b/src/dev-app/BUILD.bazel @@ -47,6 +47,7 @@ ng_module( "//src/dev-app/input", "//src/dev-app/input-modality", "//src/dev-app/layout", + "//src/dev-app/legacy-table", "//src/dev-app/list", "//src/dev-app/live-announcer", "//src/dev-app/mdc-autocomplete", @@ -66,7 +67,6 @@ ng_module( "//src/dev-app/mdc-slide-toggle", "//src/dev-app/mdc-slider", "//src/dev-app/mdc-snack-bar", - "//src/dev-app/mdc-table", "//src/dev-app/mdc-tabs", "//src/dev-app/mdc-tooltip", "//src/dev-app/menu", diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts index 92066b7e6b23..c0c4c4cb2580 100644 --- a/src/dev-app/dev-app/dev-app-layout.ts +++ b/src/dev-app/dev-app/dev-app-layout.ts @@ -122,7 +122,7 @@ export class DevAppLayout { {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'}, {name: 'MDC Slider', route: '/mdc-slider'}, {name: 'MDC Snack Bar', route: '/mdc-snack-bar'}, - {name: 'MDC Table', route: '/mdc-table'}, + {name: 'Legacy Table', route: '/legacy-table'}, ]; /** Currently selected density scale based on the index. */ diff --git a/src/dev-app/legacy-table/BUILD.bazel b/src/dev-app/legacy-table/BUILD.bazel new file mode 100644 index 000000000000..d77aa34fc754 --- /dev/null +++ b/src/dev-app/legacy-table/BUILD.bazel @@ -0,0 +1,14 @@ +load("//tools:defaults.bzl", "ng_module") + +package(default_visibility = ["//visibility:public"]) + +ng_module( + name = "legacy-table", + srcs = glob(["**/*.ts"]), + assets = ["table-demo.html"], + deps = [ + "//src/components-examples/cdk/table", + "//src/components-examples/material/legacy-table", + "//src/dev-app/example", + ], +) diff --git a/src/dev-app/mdc-table/mdc-table-demo.html b/src/dev-app/legacy-table/table-demo.html similarity index 84% rename from src/dev-app/mdc-table/mdc-table-demo.html rename to src/dev-app/legacy-table/table-demo.html index 2b28db9618af..4b85241a1952 100644 --- a/src/dev-app/mdc-table/mdc-table-demo.html +++ b/src/dev-app/legacy-table/table-demo.html @@ -1,3 +1,15 @@ +

Cdk table basic

+ + +

Cdk table with recycled rows

+ + +

Cdk table basic with fixed column widths

+ + +

Cdk table basic flex

+ +

Table basic

@@ -7,9 +19,6 @@

Table basic with recycled rows

Table basic flex

-

Table flex with large row

- -

Table dynamic columns

diff --git a/src/dev-app/legacy-table/table-demo.ts b/src/dev-app/legacy-table/table-demo.ts new file mode 100644 index 000000000000..d036f559089c --- /dev/null +++ b/src/dev-app/legacy-table/table-demo.ts @@ -0,0 +1,18 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {Component} from '@angular/core'; +import {CdkTableExamplesModule} from '@angular/components-examples/cdk/table'; +import {TableExamplesModule} from '@angular/components-examples/material/legacy-table'; + +@Component({ + templateUrl: './table-demo.html', + standalone: true, + imports: [CdkTableExamplesModule, TableExamplesModule], +}) +export class TableDemo {} diff --git a/src/dev-app/mdc-table/BUILD.bazel b/src/dev-app/mdc-table/BUILD.bazel deleted file mode 100644 index ed631dc4a31c..000000000000 --- a/src/dev-app/mdc-table/BUILD.bazel +++ /dev/null @@ -1,15 +0,0 @@ -load("//tools:defaults.bzl", "ng_module") - -package(default_visibility = ["//visibility:public"]) - -ng_module( - name = "mdc-table", - srcs = glob(["**/*.ts"]), - assets = [ - "mdc-table-demo.html", - ], - deps = [ - "//src/components-examples/material-experimental/mdc-table", - "//src/material/table", - ], -) diff --git a/src/dev-app/mdc-table/mdc-table-demo.ts b/src/dev-app/mdc-table/mdc-table-demo.ts deleted file mode 100644 index bc9ed984d7a5..000000000000 --- a/src/dev-app/mdc-table/mdc-table-demo.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {Component} from '@angular/core'; -import {MatIconModule} from '@angular/material/icon'; -import {MatTableModule} from '@angular/material/table'; -import {MdcTableExamplesModule} from '@angular/components-examples/material-experimental/mdc-table'; - -@Component({ - templateUrl: 'mdc-table-demo.html', - standalone: true, - imports: [MatIconModule, MatTableModule, MdcTableExamplesModule], -}) -export class MdcTableDemo {} diff --git a/src/dev-app/routes.ts b/src/dev-app/routes.ts index 63609d86ada7..1b5f30f2b483 100644 --- a/src/dev-app/routes.ts +++ b/src/dev-app/routes.ts @@ -216,8 +216,8 @@ export const DEV_APP_ROUTES: Routes = [ loadComponent: () => import('./mdc-slider/mdc-slider-demo').then(m => m.MdcSliderDemo), }, { - path: 'mdc-table', - loadComponent: () => import('./mdc-table/mdc-table-demo').then(m => m.MdcTableDemo), + path: 'legacy-table', + loadComponent: () => import('./legacy-table/table-demo').then(m => m.TableDemo), }, { path: 'mdc-tabs', diff --git a/src/dev-app/table/table-demo.html b/src/dev-app/table/table-demo.html index 4b85241a1952..387e2ae07567 100644 --- a/src/dev-app/table/table-demo.html +++ b/src/dev-app/table/table-demo.html @@ -19,6 +19,9 @@

Table basic with recycled rows

Table basic flex

+

Table flex with large row

+ +

Table dynamic columns

diff --git a/src/material/table/table-data-source.ts b/src/material/table/table-data-source.ts index b7fe7bff4b7e..318eaa83b76b 100644 --- a/src/material/table/table-data-source.ts +++ b/src/material/table/table-data-source.ts @@ -40,6 +40,8 @@ export interface MatTableDataSourcePaginator { initialized: Observable; pageSize: number; length: number; + firstPage: () => void; + lastPage: () => void; } /** diff --git a/tools/public_api_guard/material/table.md b/tools/public_api_guard/material/table.md index 862cd8f3b3cc..f288c24975c2 100644 --- a/tools/public_api_guard/material/table.md +++ b/tools/public_api_guard/material/table.md @@ -209,9 +209,13 @@ export interface MatTableDataSourcePageEvent { // @public export interface MatTableDataSourcePaginator { + // (undocumented) + firstPage: () => void; // (undocumented) initialized: Observable; // (undocumented) + lastPage: () => void; + // (undocumented) length: number; // (undocumented) page: Subject;