diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 1dee4918c3eb..06092f6ee881 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -33,7 +33,7 @@ /src/material/legacy-snack-bar/** @andrewseguin @crisbeto /src/material/sort/** @andrewseguin /src/material/stepper/** @mmalerba -/src/material/table/** @andrewseguin +/src/material/legacy-table/** @andrewseguin /src/material/legacy-tabs/** @andrewseguin /src/material/testing/** @andrewseguin /src/material/toolbar/** @devversion @@ -131,7 +131,7 @@ /src/material/slider/** @devversion /src/material/tabs/** @crisbeto /src/material-experimental/mdc-tooltip/** @crisbeto -/src/material-experimental/mdc-table/** @andrewseguin +/src/material/table/** @andrewseguin /src/material-experimental/menubar/** @jelbourn /src/material-experimental/popover-edit/** @andrewseguin /src/material-experimental/selection/** @andrewseguin @@ -347,7 +347,7 @@ /tools/public_api_guard/material/legacy-snack-bar** @andrewseguin @crisbeto /tools/public_api_guard/material/sort** @andrewseguin /tools/public_api_guard/material/stepper** @mmalerba -/tools/public_api_guard/material/table** @andrewseguin +/tools/public_api_guard/material/legacy-table** @andrewseguin /tools/public_api_guard/material/legacy-tabs** @andrewseguin /tools/public_api_guard/material/toolbar** @devversion /tools/public_api_guard/material/legacy-tooltip** @andrewseguin diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts index bf8b9469f6e5..3f33167a3c2f 100644 --- a/.ng-dev/commit-message.mts +++ b/.ng-dev/commit-message.mts @@ -52,7 +52,7 @@ export const commitMessage: CommitMessageConfig = { 'material-experimental/mdc-progress-spinner', 'material/slide-toggle', 'material/snack-bar', - 'material-experimental/mdc-table', + 'material/table', 'material/tabs', 'material-experimental/menubar', 'material-experimental/popover-edit', @@ -103,7 +103,7 @@ export const commitMessage: CommitMessageConfig = { 'material/legacy-snack-bar', 'material/sort', 'material/stepper', - 'material/table', + 'material/legacy-table', 'material/legacy-tabs', 'material/testing', 'material/theming', diff --git a/integration/mdc-migration/golden/src/app/app.module.ts b/integration/mdc-migration/golden/src/app/app.module.ts index 9f2ba0223062..0798be383bd4 100644 --- a/integration/mdc-migration/golden/src/app/app.module.ts +++ b/integration/mdc-migration/golden/src/app/app.module.ts @@ -22,7 +22,7 @@ import {MatSelectModule} from '@angular/material-experimental/mdc-select'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import {MatSliderModule} from '@angular/material-experimental/mdc-slider'; import {MatSnackBarModule} from '@angular/material/legacy-snack-bar'; -import {MatTableModule} from '@angular/material-experimental/mdc-table'; +import {MatTableModule} from '@angular/material/table'; import {MatTabsModule} from '@angular/material/tabs'; import {MatTooltipModule} from '@angular/material-experimental/mdc-tooltip'; import {AutocompleteComponent} from './components/autocomplete/autocomplete.component'; diff --git a/integration/mdc-migration/golden/src/app/components/table/table.component.spec.ts b/integration/mdc-migration/golden/src/app/components/table/table.component.spec.ts index a2c230ffe12d..33f4828d8c83 100644 --- a/integration/mdc-migration/golden/src/app/components/table/table.component.spec.ts +++ b/integration/mdc-migration/golden/src/app/components/table/table.component.spec.ts @@ -1,6 +1,6 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {MatTableModule} from '@angular/material/table'; +import {MatTableModule} from '@angular/material/legacy-table'; import {TableComponent} from './table.component'; describe('TableComponent', () => { diff --git a/integration/mdc-migration/golden/src/styles.scss b/integration/mdc-migration/golden/src/styles.scss index e5e7fb772964..bb792ff18df3 100644 --- a/integration/mdc-migration/golden/src/styles.scss +++ b/integration/mdc-migration/golden/src/styles.scss @@ -67,8 +67,8 @@ $sample-project-theme: mat.define-light-theme(( @include mat.mdc-slider-theme($sample-project-theme); @include mat.mdc-slider-typography($sample-project-theme); @include mat.snack-bar-typography($sample-project-theme); -@include mat.mdc-table-theme($sample-project-theme); -@include mat.mdc-table-typography($sample-project-theme); +@include mat.table-theme($sample-project-theme); +@include mat.table-typography($sample-project-theme); @include mat.tabs-theme($sample-project-theme); @include mat.tabs-typography($sample-project-theme); @include mat.mdc-tooltip-theme($sample-project-theme); diff --git a/integration/mdc-migration/sample-project/src/app/app.module.ts b/integration/mdc-migration/sample-project/src/app/app.module.ts index 8a4aa8e4b3f9..bd714a9934d9 100644 --- a/integration/mdc-migration/sample-project/src/app/app.module.ts +++ b/integration/mdc-migration/sample-project/src/app/app.module.ts @@ -22,7 +22,7 @@ import {MatSelectModule} from '@angular/material/select'; import {MatSlideToggleModule} from '@angular/material/legacy-slide-toggle'; import {MatSliderModule} from '@angular/material/slider'; import {MatSnackBarModule} from '@angular/material/legacy-snack-bar'; -import {MatTableModule} from '@angular/material/table'; +import {MatTableModule} from '@angular/material/legacy-table'; import {MatTabsModule} from '@angular/material/legacy-tabs'; import {MatTooltipModule} from '@angular/material/tooltip'; import {AutocompleteComponent} from './components/autocomplete/autocomplete.component'; diff --git a/integration/mdc-migration/sample-project/src/app/components/table/table.component.spec.ts b/integration/mdc-migration/sample-project/src/app/components/table/table.component.spec.ts index a2c230ffe12d..33f4828d8c83 100644 --- a/integration/mdc-migration/sample-project/src/app/components/table/table.component.spec.ts +++ b/integration/mdc-migration/sample-project/src/app/components/table/table.component.spec.ts @@ -1,6 +1,6 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {MatTableModule} from '@angular/material/table'; +import {MatTableModule} from '@angular/material/legacy-table'; import {TableComponent} from './table.component'; describe('TableComponent', () => { diff --git a/integration/mdc-migration/sample-project/src/styles.scss b/integration/mdc-migration/sample-project/src/styles.scss index 2ef01996e7c2..751b72811dc9 100644 --- a/integration/mdc-migration/sample-project/src/styles.scss +++ b/integration/mdc-migration/sample-project/src/styles.scss @@ -45,7 +45,7 @@ $sample-project-theme: mat.define-light-theme(( @include mat.legacy-slide-toggle-theme($sample-project-theme); @include mat.slider-theme($sample-project-theme); @include mat.legacy-snack-bar-theme($sample-project-theme); -@include mat.table-theme($sample-project-theme); +@include mat.legacy-table-theme($sample-project-theme); @include mat.legacy-tabs-theme($sample-project-theme); @include mat.tooltip-theme($sample-project-theme); diff --git a/src/components-examples/material-experimental/column-resize/BUILD.bazel b/src/components-examples/material-experimental/column-resize/BUILD.bazel index d66a9a68742a..ed57f03aa5a9 100644 --- a/src/components-examples/material-experimental/column-resize/BUILD.bazel +++ b/src/components-examples/material-experimental/column-resize/BUILD.bazel @@ -11,7 +11,7 @@ ng_module( ]), deps = [ "//src/material-experimental/column-resize", - "//src/material/table", + "//src/material/legacy-table", ], ) diff --git a/src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example-module.ts b/src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example-module.ts index 0a63692ffa7f..e7f7bfdafbd1 100644 --- a/src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example-module.ts +++ b/src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example-module.ts @@ -7,13 +7,13 @@ */ import {NgModule} from '@angular/core'; -import {MatTableModule} from '@angular/material/table'; +import {MatLegacyTableModule} from '@angular/material/legacy-table'; import {MatDefaultEnabledColumnResizeModule} from '@angular/material-experimental/column-resize'; import {DefaultEnabledColumnResizeFlexExample} from './default-enabled-column-resize-flex-example'; @NgModule({ - imports: [MatDefaultEnabledColumnResizeModule, MatTableModule], + imports: [MatDefaultEnabledColumnResizeModule, MatLegacyTableModule], declarations: [DefaultEnabledColumnResizeFlexExample], exports: [DefaultEnabledColumnResizeFlexExample], }) diff --git a/src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example-module.ts b/src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example-module.ts index dcc2063a91a4..bf7170fb002f 100644 --- a/src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example-module.ts +++ b/src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example-module.ts @@ -7,13 +7,13 @@ */ import {NgModule} from '@angular/core'; -import {MatTableModule} from '@angular/material/table'; +import {MatLegacyTableModule} from '@angular/material/legacy-table'; import {MatDefaultEnabledColumnResizeModule} from '@angular/material-experimental/column-resize'; import {DefaultEnabledColumnResizeExample} from './default-enabled-column-resize-example'; @NgModule({ - imports: [MatDefaultEnabledColumnResizeModule, MatTableModule], + imports: [MatDefaultEnabledColumnResizeModule, MatLegacyTableModule], declarations: [DefaultEnabledColumnResizeExample], exports: [DefaultEnabledColumnResizeExample], }) diff --git a/src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example-module.ts b/src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example-module.ts index 92f1d6014ad2..a36259d861db 100644 --- a/src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example-module.ts +++ b/src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example-module.ts @@ -7,13 +7,13 @@ */ import {NgModule} from '@angular/core'; -import {MatTableModule} from '@angular/material/table'; +import {MatLegacyTableModule} from '@angular/material/legacy-table'; import {MatColumnResizeModule} from '@angular/material-experimental/column-resize'; import {OptInColumnResizeExample} from './opt-in-column-resize-example'; @NgModule({ - imports: [MatColumnResizeModule, MatTableModule], + imports: [MatColumnResizeModule, MatLegacyTableModule], declarations: [OptInColumnResizeExample], exports: [OptInColumnResizeExample], }) diff --git a/src/components-examples/material-experimental/mdc-table/BUILD.bazel b/src/components-examples/material-experimental/mdc-table/BUILD.bazel index 63070eeddd48..2685f9bb6467 100644 --- a/src/components-examples/material-experimental/mdc-table/BUILD.bazel +++ b/src/components-examples/material-experimental/mdc-table/BUILD.bazel @@ -17,7 +17,6 @@ ng_module( "//src/cdk/table", "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material-experimental/mdc-table", "//src/material/button-toggle", "//src/material/core", "//src/material/icon", @@ -25,9 +24,10 @@ ng_module( "//src/material/legacy-checkbox", "//src/material/legacy-input", "//src/material/legacy-paginator", + "//src/material/legacy-table", + "//src/material/legacy-table/testing", "//src/material/progress-spinner", "//src/material/sort", - "//src/material/table/testing", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", "@npm//@types/jasmine", @@ -50,8 +50,8 @@ ng_test_library( ":mdc-table", "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/table", - "//src/material/table/testing", + "//src/material/legacy-table", + "//src/material/legacy-table/testing", "@npm//@angular/platform-browser-dynamic", ], ) diff --git a/src/components-examples/material-experimental/mdc-table/index.ts b/src/components-examples/material-experimental/mdc-table/index.ts index 1b1285632c94..2d0189cd026f 100644 --- a/src/components-examples/material-experimental/mdc-table/index.ts +++ b/src/components-examples/material-experimental/mdc-table/index.ts @@ -9,7 +9,7 @@ import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatSortModule} from '@angular/material/sort'; -import {MatTableModule} from '@angular/material-experimental/mdc-table'; +import {MatTableModule} from '@angular/material/table'; import {DragDropModule} from '@angular/cdk/drag-drop'; import {CdkTableModule} from '@angular/cdk/table'; 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 index bea1ba614316..8fde49de360f 100644 --- 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 @@ -1,5 +1,5 @@ import {Component, ViewChild} from '@angular/core'; -import {MatTable} from '@angular/material/table'; +import {MatLegacyTable} from '@angular/material/legacy-table'; export interface PeriodicElement { name: string; @@ -33,7 +33,7 @@ export class TableDynamicArrayDataExample { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; dataSource = [...ELEMENT_DATA]; - @ViewChild(MatTable) table: MatTable; + @ViewChild(MatLegacyTable) table: MatLegacyTable; addData() { const randomElementIndex = Math.floor(Math.random() * ELEMENT_DATA.length); 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 index f24acf8cdd1f..400d7e54fd63 100644 --- 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 @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MatTableDataSource} from '@angular/material/table'; +import {MatLegacyTableDataSource} from '@angular/material/legacy-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 MatTableDataSource(ELEMENT_DATA); + dataSource = new MatLegacyTableDataSource(ELEMENT_DATA); applyFilter(event: Event) { const filterValue = (event.target as HTMLInputElement).value; 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 index 89d9ded55bf5..3316435feba7 100644 --- 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 @@ -1,8 +1,8 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; -import {MatTableHarness} from '@angular/material/table/testing'; +import {MatLegacyTableHarness} from '@angular/material/legacy-table/testing'; import {HarnessLoader, parallel} from '@angular/cdk/testing'; -import {MatTableModule} from '@angular/material/table'; +import {MatLegacyTableModule} from '@angular/material/legacy-table'; import {TableHarnessExample} from './table-harness-example'; describe('TableHarnessExample', () => { @@ -11,7 +11,7 @@ describe('TableHarnessExample', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MatTableModule], + imports: [MatLegacyTableModule], 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(MatTableHarness); + const tables = await loader.getAllHarnesses(MatLegacyTableHarness); expect(tables.length).toBe(1); }); it('should get the different kinds of rows in the table', async () => { - const table = await loader.getHarness(MatTableHarness); + const table = await loader.getHarness(MatLegacyTableHarness); 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(MatTableHarness); + const table = await loader.getHarness(MatLegacyTableHarness); 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(MatTableHarness); + const table = await loader.getHarness(MatLegacyTableHarness); 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(MatTableHarness); + const table = await loader.getHarness(MatLegacyTableHarness); 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(MatTableHarness); + const table = await loader.getHarness(MatLegacyTableHarness); 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(MatTableHarness); + const table = await loader.getHarness(MatLegacyTableHarness); 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-experimental/mdc-table/table-overview/table-overview-example.ts b/src/components-examples/material-experimental/mdc-table/table-overview/table-overview-example.ts index bea833f685b8..ab58f89960d3 100644 --- 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 @@ -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 {MatTableDataSource} from '@angular/material/table'; +import {MatLegacyTableDataSource} from '@angular/material/legacy-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: MatTableDataSource; + dataSource: MatLegacyTableDataSource; @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 MatTableDataSource(users); + this.dataSource = new MatLegacyTableDataSource(users); } ngAfterViewInit() { 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 index 65bfe98eccc3..218787853ab8 100644 --- 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 @@ -1,6 +1,6 @@ import {AfterViewInit, Component, ViewChild} from '@angular/core'; import {MatLegacyPaginator} from '@angular/material/legacy-paginator'; -import {MatTableDataSource} from '@angular/material/table'; +import {MatLegacyTableDataSource} from '@angular/material/legacy-table'; /** * @title Table with pagination @@ -12,7 +12,7 @@ import {MatTableDataSource} from '@angular/material/table'; }) export class TablePaginationExample implements AfterViewInit { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); + dataSource = new MatLegacyTableDataSource(ELEMENT_DATA); @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; 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 index 7da56a15757a..2169f3bd8ee8 100644 --- 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 @@ -1,6 +1,6 @@ import {SelectionModel} from '@angular/cdk/collections'; import {Component} from '@angular/core'; -import {MatTableDataSource} from '@angular/material/table'; +import {MatLegacyTableDataSource} from '@angular/material/legacy-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 MatTableDataSource(ELEMENT_DATA); + dataSource = new MatLegacyTableDataSource(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-experimental/mdc-table/table-sorting/table-sorting-example.ts b/src/components-examples/material-experimental/mdc-table/table-sorting/table-sorting-example.ts index bf1d12bd1741..79b42c091a3c 100644 --- 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 @@ -1,6 +1,6 @@ import {AfterViewInit, Component, ViewChild} from '@angular/core'; import {MatSort} from '@angular/material/sort'; -import {MatTableDataSource} from '@angular/material/table'; +import {MatLegacyTableDataSource} from '@angular/material/legacy-table'; export interface PeriodicElement { name: string; @@ -32,7 +32,7 @@ const ELEMENT_DATA: PeriodicElement[] = [ }) export class TableSortingExample implements AfterViewInit { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); + dataSource = new MatLegacyTableDataSource(ELEMENT_DATA); @ViewChild(MatSort) sort: MatSort; 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 index 8f72e053a086..af509427764f 100644 --- 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 @@ -1,6 +1,6 @@ import {Component} from '@angular/core'; import {DecimalPipe} from '@angular/common'; -import {MatTableDataSource} from '@angular/material/table'; +import {MatLegacyTableDataSource} from '@angular/material/legacy-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 MatTableDataSource(ELEMENT_DATA); + dataSource = new MatLegacyTableDataSource(ELEMENT_DATA); headerText: string; 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 index 7d423828c163..f8b049cdb7da 100644 --- 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 @@ -17,7 +17,7 @@ import { MatRowDef, MatTable, MatTableDataSource, -} from '@angular/material-experimental/mdc-table'; +} from '@angular/material/table'; export interface PeriodicElement { name: string; diff --git a/src/components-examples/material-experimental/popover-edit/BUILD.bazel b/src/components-examples/material-experimental/popover-edit/BUILD.bazel index 02d9764f50fb..5b79c2264ee8 100644 --- a/src/components-examples/material-experimental/popover-edit/BUILD.bazel +++ b/src/components-examples/material-experimental/popover-edit/BUILD.bazel @@ -17,7 +17,7 @@ ng_module( "//src/material/legacy-input", "//src/material/legacy-list", "//src/material/legacy-snack-bar", - "//src/material/table", + "//src/material/legacy-table", "@npm//@angular/common", "@npm//@angular/forms", ], diff --git a/src/components-examples/material-experimental/popover-edit/index.ts b/src/components-examples/material-experimental/popover-edit/index.ts index debe0bae25db..8ac2870f1020 100644 --- a/src/components-examples/material-experimental/popover-edit/index.ts +++ b/src/components-examples/material-experimental/popover-edit/index.ts @@ -8,7 +8,7 @@ import {MatIconModule} from '@angular/material/icon'; import {MatLegacyInputModule} from '@angular/material/legacy-input'; import {MatLegacyListModule} from '@angular/material/legacy-list'; import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar'; -import {MatTableModule} from '@angular/material/table'; +import {MatLegacyTableModule} from '@angular/material/legacy-table'; import {PopoverEditCellSpanMatTableExample} from './popover-edit-cell-span-mat-table/popover-edit-cell-span-mat-table-example'; import {PopoverEditMatTableFlexExample} from './popover-edit-mat-table-flex/popover-edit-mat-table-flex-example'; import {PopoverEditMatTableExample} from './popover-edit-mat-table/popover-edit-mat-table-example'; @@ -38,7 +38,7 @@ const EXAMPLES = [ MatLegacyListModule, MatPopoverEditModule, MatLegacySnackBarModule, - MatTableModule, + MatLegacyTableModule, FormsModule, ], declarations: EXAMPLES, diff --git a/src/components-examples/material-experimental/selection/index.ts b/src/components-examples/material-experimental/selection/index.ts index 7f1c5c7c5317..f2ad5cbd173b 100644 --- a/src/components-examples/material-experimental/selection/index.ts +++ b/src/components-examples/material-experimental/selection/index.ts @@ -1,5 +1,5 @@ import {MatSelectionModule} from '@angular/material-experimental/selection'; -import {MatTableModule} from '@angular/material/table'; +import {MatLegacyTableModule} from '@angular/material/legacy-table'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @@ -15,7 +15,7 @@ const EXAMPLES = [MatSelectionListExample, MatSelectionColumnExample]; @NgModule({ imports: [ MatSelectionModule, - MatTableModule, + MatLegacyTableModule, CommonModule, FormsModule, ReactiveFormsModule, diff --git a/src/components-examples/material/table/BUILD.bazel b/src/components-examples/material/table/BUILD.bazel index 7edfe39c2f6e..ed4d9718604b 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-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/table", - "//src/material/table/testing", + "//src/material/legacy-table", + "//src/material/legacy-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 2b6c5ce34d11..93023c29a563 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 {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatSortModule} from '@angular/material/sort'; -import {MatTableModule} from '@angular/material/table'; +import {MatLegacyTableModule} from '@angular/material/legacy-table'; import {DragDropModule} from '@angular/cdk/drag-drop'; import {CdkTableModule} from '@angular/cdk/table'; @@ -124,7 +124,7 @@ const EXAMPLES = [ MatProgressSpinnerModule, MatRippleModule, MatSortModule, - MatTableModule, + MatLegacyTableModule, 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 bea1ba614316..8fde49de360f 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 {MatTable} from '@angular/material/table'; +import {MatLegacyTable} from '@angular/material/legacy-table'; export interface PeriodicElement { name: string; @@ -33,7 +33,7 @@ export class TableDynamicArrayDataExample { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; dataSource = [...ELEMENT_DATA]; - @ViewChild(MatTable) table: MatTable; + @ViewChild(MatLegacyTable) table: MatLegacyTable; 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 f24acf8cdd1f..400d7e54fd63 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 {MatTableDataSource} from '@angular/material/table'; +import {MatLegacyTableDataSource} from '@angular/material/legacy-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 MatTableDataSource(ELEMENT_DATA); + dataSource = new MatLegacyTableDataSource(ELEMENT_DATA); applyFilter(event: Event) { const filterValue = (event.target as HTMLInputElement).value; 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 89d9ded55bf5..3316435feba7 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 {MatTableHarness} from '@angular/material/table/testing'; +import {MatLegacyTableHarness} from '@angular/material/legacy-table/testing'; import {HarnessLoader, parallel} from '@angular/cdk/testing'; -import {MatTableModule} from '@angular/material/table'; +import {MatLegacyTableModule} from '@angular/material/legacy-table'; import {TableHarnessExample} from './table-harness-example'; describe('TableHarnessExample', () => { @@ -11,7 +11,7 @@ describe('TableHarnessExample', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MatTableModule], + imports: [MatLegacyTableModule], 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(MatTableHarness); + const tables = await loader.getAllHarnesses(MatLegacyTableHarness); expect(tables.length).toBe(1); }); it('should get the different kinds of rows in the table', async () => { - const table = await loader.getHarness(MatTableHarness); + const table = await loader.getHarness(MatLegacyTableHarness); 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(MatTableHarness); + const table = await loader.getHarness(MatLegacyTableHarness); 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(MatTableHarness); + const table = await loader.getHarness(MatLegacyTableHarness); 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(MatTableHarness); + const table = await loader.getHarness(MatLegacyTableHarness); 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(MatTableHarness); + const table = await loader.getHarness(MatLegacyTableHarness); 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(MatTableHarness); + const table = await loader.getHarness(MatLegacyTableHarness); 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.ts b/src/components-examples/material/table/table-overview/table-overview-example.ts index bea833f685b8..ab58f89960d3 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 {MatTableDataSource} from '@angular/material/table'; +import {MatLegacyTableDataSource} from '@angular/material/legacy-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: MatTableDataSource; + dataSource: MatLegacyTableDataSource; @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 MatTableDataSource(users); + this.dataSource = new MatLegacyTableDataSource(users); } ngAfterViewInit() { 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 65bfe98eccc3..218787853ab8 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 {MatTableDataSource} from '@angular/material/table'; +import {MatLegacyTableDataSource} from '@angular/material/legacy-table'; /** * @title Table with pagination @@ -12,7 +12,7 @@ import {MatTableDataSource} from '@angular/material/table'; }) export class TablePaginationExample implements AfterViewInit { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); + dataSource = new MatLegacyTableDataSource(ELEMENT_DATA); @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; 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 7da56a15757a..2169f3bd8ee8 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 {MatTableDataSource} from '@angular/material/table'; +import {MatLegacyTableDataSource} from '@angular/material/legacy-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 MatTableDataSource(ELEMENT_DATA); + dataSource = new MatLegacyTableDataSource(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.ts b/src/components-examples/material/table/table-sorting/table-sorting-example.ts index 055a4ff8c84e..9fd6f3c83514 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 {MatTableDataSource} from '@angular/material/table'; +import {MatLegacyTableDataSource} from '@angular/material/legacy-table'; export interface PeriodicElement { name: string; @@ -33,7 +33,7 @@ const ELEMENT_DATA: PeriodicElement[] = [ }) export class TableSortingExample implements AfterViewInit { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); + dataSource = new MatLegacyTableDataSource(ELEMENT_DATA); constructor(private _liveAnnouncer: LiveAnnouncer) {} 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 8f72e053a086..af509427764f 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 {MatTableDataSource} from '@angular/material/table'; +import {MatLegacyTableDataSource} from '@angular/material/legacy-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 MatTableDataSource(ELEMENT_DATA); + dataSource = new MatLegacyTableDataSource(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 f8b049cdb7da..931a5c740261 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 { - 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/dev-app/mdc-table/BUILD.bazel b/src/dev-app/mdc-table/BUILD.bazel index 98cc5c76c466..ed631dc4a31c 100644 --- a/src/dev-app/mdc-table/BUILD.bazel +++ b/src/dev-app/mdc-table/BUILD.bazel @@ -10,6 +10,6 @@ ng_module( ], deps = [ "//src/components-examples/material-experimental/mdc-table", - "//src/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 index db27b82cdbbe..bc9ed984d7a5 100644 --- a/src/dev-app/mdc-table/mdc-table-demo.ts +++ b/src/dev-app/mdc-table/mdc-table-demo.ts @@ -8,7 +8,7 @@ import {Component} from '@angular/core'; import {MatIconModule} from '@angular/material/icon'; -import {MatTableModule} from '@angular/material-experimental/mdc-table'; +import {MatTableModule} from '@angular/material/table'; import {MdcTableExamplesModule} from '@angular/components-examples/material-experimental/mdc-table'; @Component({ diff --git a/src/dev-app/table-scroll-container/BUILD.bazel b/src/dev-app/table-scroll-container/BUILD.bazel index 8834e3cd13c8..2349a33881a8 100644 --- a/src/dev-app/table-scroll-container/BUILD.bazel +++ b/src/dev-app/table-scroll-container/BUILD.bazel @@ -11,9 +11,9 @@ ng_module( ], deps = [ "//src/cdk-experimental/table-scroll-container", - "//src/material-experimental/mdc-table", "//src/material/button", "//src/material/button-toggle", + "//src/material/legacy-table", "//src/material/table", "@npm//@angular/common", "@npm//@angular/core", diff --git a/src/dev-app/table-scroll-container/table-scroll-container-demo.ts b/src/dev-app/table-scroll-container/table-scroll-container-demo.ts index b39a95145d0d..18ab6f336d1a 100644 --- a/src/dev-app/table-scroll-container/table-scroll-container-demo.ts +++ b/src/dev-app/table-scroll-container/table-scroll-container-demo.ts @@ -11,7 +11,7 @@ import {CommonModule} from '@angular/common'; import {CdkTableScrollContainerModule} from '@angular/cdk-experimental/table-scroll-container'; import {MatButtonModule} from '@angular/material/button'; import {MatButtonToggleGroup, MatButtonToggleModule} from '@angular/material/button-toggle'; -import {MatTableModule} from '@angular/material/table'; +import {MatLegacyTableModule} from '@angular/material/legacy-table'; /** * @title Tables with toggle-able sticky headers, footers, and columns @@ -26,7 +26,7 @@ import {MatTableModule} from '@angular/material/table'; CommonModule, MatButtonModule, MatButtonToggleModule, - MatTableModule, + MatLegacyTableModule, ], }) export class TableScrollContainerDemo { diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel index daddccc9e5d3..eb55e8f69b50 100644 --- a/src/e2e-app/BUILD.bazel +++ b/src/e2e-app/BUILD.bazel @@ -43,7 +43,6 @@ ng_module( "//src/components-examples/material-experimental/mdc-card", "//src/components-examples/private", "//src/material-experimental/mdc-progress-spinner", - "//src/material-experimental/mdc-table", "//src/material/button", "//src/material/card", "//src/material/checkbox", @@ -72,6 +71,7 @@ ng_module( "//src/material/sidenav", "//src/material/slide-toggle", "//src/material/slider", + "//src/material/table", "//src/material/tabs", "@npm//@angular/animations", "@npm//@angular/core", diff --git a/src/e2e-app/mdc-table/mdc-table-e2e-module.ts b/src/e2e-app/mdc-table/mdc-table-e2e-module.ts index b4756eb81e69..5aad97827956 100644 --- a/src/e2e-app/mdc-table/mdc-table-e2e-module.ts +++ b/src/e2e-app/mdc-table/mdc-table-e2e-module.ts @@ -7,7 +7,7 @@ */ import {NgModule} from '@angular/core'; -import {MatTableModule} from '@angular/material-experimental/mdc-table'; +import {MatTableModule} from '@angular/material/table'; import {MdcTableE2e} from './mdc-table-e2e'; @NgModule({ diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss index f76423d0f305..858c8de844eb 100644 --- a/src/material-experimental/_index.scss +++ b/src/material-experimental/_index.scss @@ -20,7 +20,5 @@ @forward './mdc-progress-spinner/progress-spinner-theme' as mdc-progress-spinner-* show mdc-progress-spinner-color, mdc-progress-spinner-typography, mdc-progress-spinner-density, mdc-progress-spinner-theme; -@forward './mdc-table/table-theme' as mdc-table-* show mdc-table-color, mdc-table-typography, - mdc-table-density, mdc-table-theme; // Additional public APIs for individual components diff --git a/src/material-experimental/column-resize/BUILD.bazel b/src/material-experimental/column-resize/BUILD.bazel index 9ba3b4bed00d..b30b09cd6b97 100644 --- a/src/material-experimental/column-resize/BUILD.bazel +++ b/src/material-experimental/column-resize/BUILD.bazel @@ -12,7 +12,7 @@ ng_module( "//src/cdk-experimental/column-resize", "//src/cdk/overlay", "//src/cdk/table", - "//src/material/table", + "//src/material/legacy-table", "@npm//@angular/core", ], ) @@ -36,7 +36,7 @@ ng_test_library( "//src/cdk/keycodes", "//src/cdk/overlay", "//src/cdk/testing/private", - "//src/material/table", + "//src/material/legacy-table", "@npm//rxjs", ], ) diff --git a/src/material-experimental/column-resize/column-resize.spec.ts b/src/material-experimental/column-resize/column-resize.spec.ts index 62fc437b5fd9..07a7cbdddc2b 100644 --- a/src/material-experimental/column-resize/column-resize.spec.ts +++ b/src/material-experimental/column-resize/column-resize.spec.ts @@ -4,7 +4,7 @@ import {BidiModule} from '@angular/cdk/bidi'; import {DataSource} from '@angular/cdk/collections'; import {dispatchKeyboardEvent} from '../../cdk/testing/private'; import {ESCAPE} from '@angular/cdk/keycodes'; -import {MatTableModule} from '@angular/material/table'; +import {MatLegacyTableModule} from '@angular/material/legacy-table'; import {BehaviorSubject} from 'rxjs'; import {ColumnSize} from '@angular/cdk-experimental/column-resize'; @@ -372,7 +372,7 @@ describe('Material Popover Edit', () => { jasmine.addMatchers(approximateMatcher); TestBed.configureTestingModule({ - imports: [BidiModule, MatTableModule, resizeModule], + imports: [BidiModule, MatLegacyTableModule, resizeModule], declarations: [componentClass], }).compileComponents(); fixture = TestBed.createComponent(componentClass); diff --git a/src/material-experimental/config.bzl b/src/material-experimental/config.bzl index 75c2339c7b90..f6891c8dd04a 100644 --- a/src/material-experimental/config.bzl +++ b/src/material-experimental/config.bzl @@ -3,8 +3,6 @@ entryPoints = [ "mdc-core", "mdc-progress-spinner", "mdc-progress-spinner/testing", - "mdc-table", - "mdc-table/testing", "menubar", "popover-edit", "selection", diff --git a/src/material-experimental/mdc-core/color/_all-color.import.scss b/src/material-experimental/mdc-core/color/_all-color.import.scss index 31b669819ef7..0db4560ec442 100644 --- a/src/material-experimental/mdc-core/color/_all-color.import.scss +++ b/src/material-experimental/mdc-core/color/_all-color.import.scss @@ -1,12 +1,5 @@ @forward '../../../material/core/theming/theming.import'; @forward '../../../material/core/core.import'; -@forward '../../mdc-table/table-theme' hide color, density, theme, typography; -@forward '../../mdc-table/table-theme' as mat-mdc-table-* hide -$mat-mdc-table-mdc-data-table-divider-color, $mat-mdc-table-mdc-data-table-header-row-text-color, -$mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-table-row-text-color, -$mat-mdc-table-mdc-data-table-selected-row-fill-color, -$mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color, -$mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color; @forward '../core-theme.import'; @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*; @forward '../theming/all-theme'; diff --git a/src/material-experimental/mdc-core/density/_all-density.import.scss b/src/material-experimental/mdc-core/density/_all-density.import.scss index 2a42fbb1645c..8c7cca594a0e 100644 --- a/src/material-experimental/mdc-core/density/_all-density.import.scss +++ b/src/material-experimental/mdc-core/density/_all-density.import.scss @@ -1,12 +1,5 @@ @forward '../../../material/core/theming/theming.import'; @forward '../../../material/core/core.import'; -@forward '../../mdc-table/table-theme' hide color, density, theme, typography; -@forward '../../mdc-table/table-theme' as mat-mdc-table-* hide -$mat-mdc-table-mdc-data-table-divider-color, $mat-mdc-table-mdc-data-table-header-row-text-color, -$mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-table-row-text-color, -$mat-mdc-table-mdc-data-table-selected-row-fill-color, -$mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color, -$mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color; @forward '../core-theme.import'; @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*; @forward '../theming/all-theme'; diff --git a/src/material-experimental/mdc-core/theming/BUILD.bazel b/src/material-experimental/mdc-core/theming/BUILD.bazel index e5f0ae25e227..639e386c17d8 100644 --- a/src/material-experimental/mdc-core/theming/BUILD.bazel +++ b/src/material-experimental/mdc-core/theming/BUILD.bazel @@ -22,7 +22,6 @@ sass_library( "//src/material:sass_lib", "//src/material-experimental/mdc-core:mdc_core_scss_lib", "//src/material-experimental/mdc-progress-spinner:mdc_progress_spinner_scss_lib", - "//src/material-experimental/mdc-table:mdc_table_scss_lib", "//src/material/autocomplete:autocomplete_scss_lib", "//src/material/button:button_scss_lib", "//src/material/card:card_scss_lib", @@ -35,6 +34,7 @@ sass_library( "//src/material/slide-toggle:slide_toggle_scss_lib", "//src/material/slider:slider_scss_lib", "//src/material/snack-bar:snack_bar_scss_lib", + "//src/material/table:table_scss_lib", "//src/material/tabs:tabs_scss_lib", "//src/material/tooltip:tooltip_scss_lib", ], diff --git a/src/material-experimental/mdc-core/theming/_all-theme.import.scss b/src/material-experimental/mdc-core/theming/_all-theme.import.scss index fa019d6affc6..be09f88b47fd 100644 --- a/src/material-experimental/mdc-core/theming/_all-theme.import.scss +++ b/src/material-experimental/mdc-core/theming/_all-theme.import.scss @@ -1,18 +1,10 @@ @forward '../../../material/core/theming/theming.import'; @forward '../../../material/core/core.import'; -@forward '../../mdc-table/table-theme' hide color, density, theme, typography; -@forward '../../mdc-table/table-theme' as mat-mdc-table-* hide -$mat-mdc-table-mdc-data-table-divider-color, $mat-mdc-table-mdc-data-table-header-row-text-color, -$mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-table-row-text-color, -$mat-mdc-table-mdc-data-table-selected-row-fill-color, -$mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color, -$mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color; @forward '../core-theme.import'; @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*; @forward 'all-theme' hide all-mdc-component-themes;; @import '../core-theme'; -@import '../../mdc-table/table-theme'; @import '../../mdc-progress-spinner/progress-spinner-theme'; @import '../../../material/core/core'; @import '../../../material/core/core-theme'; diff --git a/src/material-experimental/mdc-core/theming/_all-theme.scss b/src/material-experimental/mdc-core/theming/_all-theme.scss index a7b7faa85d6b..1069b0279d9e 100644 --- a/src/material-experimental/mdc-core/theming/_all-theme.scss +++ b/src/material-experimental/mdc-core/theming/_all-theme.scss @@ -1,7 +1,6 @@ @use '@angular/material' as mat; @use '../core-theme'; -@use '../../mdc-table/table-theme'; @use '../../mdc-progress-spinner/progress-spinner-theme'; @mixin all-mdc-component-themes($theme-or-color-config) { @@ -26,7 +25,7 @@ @include mat.slide-toggle-theme($theme-or-color-config); @include mat.slider-theme($theme-or-color-config); @include mat.snack-bar-theme($theme-or-color-config); - @include table-theme.theme($theme-or-color-config); + @include mat.table-theme($theme-or-color-config); @include mat.form-field-theme($theme-or-color-config); @include mat.input-theme($theme-or-color-config); @include mat.tabs-theme($theme-or-color-config); diff --git a/src/material-experimental/mdc-core/typography/_all-typography.import.scss b/src/material-experimental/mdc-core/typography/_all-typography.import.scss index 6e525608d35e..1d32bf6bbdfe 100644 --- a/src/material-experimental/mdc-core/typography/_all-typography.import.scss +++ b/src/material-experimental/mdc-core/typography/_all-typography.import.scss @@ -1,12 +1,5 @@ @forward '../../../material/core/theming/theming.import'; @forward '../../../material/core/core.import'; -@forward '../../mdc-table/table-theme' hide color, density, theme, typography; -@forward '../../mdc-table/table-theme' as mat-mdc-table-* hide -$mat-mdc-table-mdc-data-table-divider-color, $mat-mdc-table-mdc-data-table-header-row-text-color, -$mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-table-row-text-color, -$mat-mdc-table-mdc-data-table-selected-row-fill-color, -$mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color, -$mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color; @forward '../core-theme.import'; @forward '../../mdc-progress-spinner/progress-spinner-theme' as mat-mdc-progress-spinner-*; @forward '../theming/all-theme'; diff --git a/src/material-experimental/mdc-table/_table-theme.import.scss b/src/material-experimental/mdc-table/_table-theme.import.scss deleted file mode 100644 index 62be723a0811..000000000000 --- a/src/material-experimental/mdc-table/_table-theme.import.scss +++ /dev/null @@ -1,8 +0,0 @@ -@forward 'table-theme' hide color, density, theme, typography; -@forward 'table-theme' as mat-mdc-table-* hide $mat-mdc-table-mdc-data-table-divider-color, -$mat-mdc-table-mdc-data-table-header-row-text-color, -$mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-table-row-text-color, -$mat-mdc-table-mdc-data-table-selected-row-fill-color, -$mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color, -$mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color; - diff --git a/src/material-experimental/mdc-table/_table-theme.scss b/src/material-experimental/mdc-table/_table-theme.scss deleted file mode 100644 index 4d3b5a0328fc..000000000000 --- a/src/material-experimental/mdc-table/_table-theme.scss +++ /dev/null @@ -1,77 +0,0 @@ -@use 'sass:map'; -@use '@angular/material' as mat; -@use '@material/theme/theme-color' as mdc-theme-color; -@use '@material/data-table/data-table' as mdc-data-table; -@use '@material/data-table' as mdc-data-table-theme; - - -@mixin color($config-or-theme) { - $config: mat.get-color-config($config-or-theme); - // Save original values of MDC global variables. We need to save these so we can restore the - // variables to their original values and prevent unintended side effects from using this mixin. - $orig-selected-row-fill-color: mdc-data-table-theme.$selected-row-fill-color; - $orig-divider-color: mdc-data-table-theme.$divider-color; - $orig-row-hover-fill-color: mdc-data-table-theme.$row-hover-fill-color; - $orig-header-row-text-color: mdc-data-table-theme.$header-row-text-color; - $orig-row-text-color: mdc-data-table-theme.$row-text-color; - $orig-stroke-color: mdc-data-table-theme.$stroke-color; - - @include mat.private-using-mdc-theme($config) { - mdc-data-table-theme.$selected-row-fill-color: rgba(mdc-theme-color.prop-value(primary), 0.04); - mdc-data-table-theme.$divider-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12); - mdc-data-table-theme.$row-hover-fill-color: rgba(mdc-theme-color.prop-value(on-surface), 0.04); - mdc-data-table-theme.$header-row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87); - mdc-data-table-theme.$row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87); - mdc-data-table-theme.$stroke-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12); - - @include mdc-data-table.table-styles($query: mat.$private-mdc-theme-styles-query); - } - - // Restore original values of MDC global variables. - mdc-data-table-theme.$selected-row-fill-color: $orig-selected-row-fill-color; - mdc-data-table-theme.$divider-color: $orig-divider-color; - mdc-data-table-theme.$row-hover-fill-color: $orig-row-hover-fill-color; - mdc-data-table-theme.$header-row-text-color: $orig-header-row-text-color; - mdc-data-table-theme.$row-text-color: $orig-row-text-color; - mdc-data-table-theme.$stroke-color: $orig-stroke-color; - - .mat-mdc-table { - $background: map.get($config, background); - background: mat.get-color-from-palette($background, 'card'); - } -} - -@mixin typography($config-or-theme) { - $config: mat.private-typography-to-2018-config( - mat.get-typography-config($config-or-theme)); - @include mat.private-using-mdc-typography($config) { - @include mdc-data-table.table-styles($query: mat.$private-mdc-typography-styles-query); - } -} - -@mixin density($config-or-theme) { - $density-scale: mat.get-density-config($config-or-theme); - .mat-mdc-table { - @include mdc-data-table-theme.density($density-scale, - $query: mat.$private-mdc-base-styles-query); - } -} - -@mixin theme($theme-or-color-config) { - $theme: mat.private-legacy-get-theme($theme-or-color-config); - @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-table') { - $color: mat.get-color-config($theme); - $density: mat.get-density-config($theme); - $typography: mat.get-typography-config($theme); - - @if $color != null { - @include color($color); - } - @if $density != null { - @include density($density); - } - @if $typography != null { - @include typography($typography); - } - } -} diff --git a/src/material-experimental/mdc-table/table.scss b/src/material-experimental/mdc-table/table.scss deleted file mode 100644 index 0c390e612509..000000000000 --- a/src/material-experimental/mdc-table/table.scss +++ /dev/null @@ -1,67 +0,0 @@ -@use '@angular/material' as mat; -@use '@material/data-table/data-table' as mdc-data-table; - -@include mat.private-disable-mdc-fallback-declarations { - @include mdc-data-table.table-styles( - $query: mat.$private-mdc-base-styles-without-animation-query); - @include mat.private-table-flex-styles(); -} - -.mat-mdc-table-sticky { - // Note that the table can either set this class or an inline style to make something sticky. - // We set the style as `!important` so that we get an identical specificity in both cases - // and to avoid cases where user styles have a higher specificity. - position: sticky !important; -} - -.mat-mdc-table { - // MDC Table applies `table-layout: fixed`, but this is a backwards incompatible - // change since the table did not previously apply it. - // TODO: Add a mixin to MDC to set the layout instead of including this override, - // see this issue: https://github.com/material-components/material-components-web/issues/6412 - table-layout: auto; - - // The MDC table does not allow text to wrap within the cell. This allows for text to - // wrap when the cell reaches its maximum width. - white-space: normal; -} - -// MDC table rows are styled with a top border, whereas our legacy flex table styles rows with -// a bottom border. Remove the bottom border style from the rows and let MDC display its top -// border. -mat-row.mat-mdc-row, mat-header-row.mat-mdc-header-row, mat-footer-row.mat-mdc-footer-row { - border-bottom: none; -} - -// Cells need to inherit their background in order to overlap each other when sticky. -// The background needs to be inherited from the table, tbody/tfoot, row, and cell. -.mat-mdc-table tbody, .mat-mdc-table tfoot, .mat-mdc-table thead, -.mat-mdc-cell, .mat-mdc-footer-cell, -.mat-mdc-header-row, .mat-mdc-row, .mat-mdc-footer-row, -.mat-mdc-table .mat-mdc-header-cell { - background: inherit; -} - -// Disable hover styling while MDC uses an opacity for its color. -// When the hover style is used with sticky cells, the opacity shows the cells overlapping. -.mat-mdc-table .mat-mdc-row:hover, -.mat-mdc-table .mat-mdc-footer-row:hover { - background-color: inherit; -} - -// Flex rows should not set a definite height, but instead stretch to the height of their -// children. Otherwise, the cells grow larger than the row and the layout breaks. -.mat-mdc-table mat-header-row.mat-mdc-header-row, -.mat-mdc-table mat-row.mat-mdc-row, -.mat-mdc-table mat-footer-row.mat-mdc-footer-cell { - height: unset; -} - -// Flex cells should stretch to the height of their parent. This was okay for the legacy -// table since the cells were centered and the borders displayed on the rows, but the MDC -// version displays borders on the cells and do not correctly line up with the row bottom. -mat-header-cell.mat-mdc-header-cell, -mat-cell.mat-mdc-cell, -mat-footer-cell.mat-mdc-footer-cell { - align-self: stretch; -} diff --git a/src/material-experimental/mdc-table/testing/cell-harness.ts b/src/material-experimental/mdc-table/testing/cell-harness.ts deleted file mode 100644 index 7c1cdcb80aed..000000000000 --- a/src/material-experimental/mdc-table/testing/cell-harness.ts +++ /dev/null @@ -1,71 +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 {ComponentHarnessConstructor, HarnessPredicate} from '@angular/cdk/testing'; -import { - MatCellHarness as BaseMatCellHarness, - MatHeaderCellHarness as BaseMatHeaderCellHarness, - MatFooterCellHarness as BaseMatFooterCellHarness, - CellHarnessFilters, -} from '@angular/material/table/testing'; - -/** Harness for interacting with an MDC-based Angular Material table cell. */ -export class MatCellHarness extends BaseMatCellHarness { - /** The selector for the host element of a `MatCellHarness` instance. */ - static override hostSelector = '.mat-mdc-cell'; - - /** - * Gets a `HarnessPredicate` that can be used to search for a table cell with specific attributes. - * @param options Options for narrowing the search - * @return a `HarnessPredicate` configured with the given options. - */ - static override with( - this: ComponentHarnessConstructor, - options: CellHarnessFilters = {}, - ): HarnessPredicate { - return BaseMatCellHarness._getCellPredicate(this, options); - } -} - -/** Harness for interacting with an MDC-based Angular Material table header cell. */ -export class MatHeaderCellHarness extends BaseMatHeaderCellHarness { - /** The selector for the host element of a `MatHeaderCellHarness` instance. */ - static override hostSelector = '.mat-mdc-header-cell'; - - /** - * Gets a `HarnessPredicate` that can be used to search for a table header cell with specific - * attributes. - * @param options Options for narrowing the search - * @return a `HarnessPredicate` configured with the given options. - */ - static override with( - this: ComponentHarnessConstructor, - options: CellHarnessFilters = {}, - ): HarnessPredicate { - return BaseMatHeaderCellHarness._getCellPredicate(this, options); - } -} - -/** Harness for interacting with an MDC-based Angular Material table footer cell. */ -export class MatFooterCellHarness extends BaseMatFooterCellHarness { - /** The selector for the host element of a `MatFooterCellHarness` instance. */ - static override hostSelector = '.mat-mdc-footer-cell'; - - /** - * Gets a `HarnessPredicate` that can be used to search for a table footer cell with specific - * attributes. - * @param options Options for narrowing the search - * @return a `HarnessPredicate` configured with the given options. - */ - static override with( - this: ComponentHarnessConstructor, - options: CellHarnessFilters = {}, - ): HarnessPredicate { - return BaseMatFooterCellHarness._getCellPredicate(this, options); - } -} diff --git a/src/material-experimental/mdc-table/testing/public-api.ts b/src/material-experimental/mdc-table/testing/public-api.ts deleted file mode 100644 index 535656975286..000000000000 --- a/src/material-experimental/mdc-table/testing/public-api.ts +++ /dev/null @@ -1,18 +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 - */ - -export { - CellHarnessFilters, - RowHarnessFilters, - TableHarnessFilters, - MatRowHarnessColumnsText, - MatTableHarnessColumnsText, -} from '@angular/material/table/testing'; -export * from './table-harness'; -export * from './row-harness'; -export * from './cell-harness'; diff --git a/src/material-experimental/mdc-table/testing/row-harness.ts b/src/material-experimental/mdc-table/testing/row-harness.ts deleted file mode 100644 index ff4b86cabf89..000000000000 --- a/src/material-experimental/mdc-table/testing/row-harness.ts +++ /dev/null @@ -1,76 +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 {ComponentHarnessConstructor, HarnessPredicate} from '@angular/cdk/testing'; -import {_MatRowHarnessBase, RowHarnessFilters} from '@angular/material/table/testing'; -import {MatCellHarness, MatHeaderCellHarness, MatFooterCellHarness} from './cell-harness'; - -/** Harness for interacting with an MDC-based Angular Material table row. */ -export class MatRowHarness extends _MatRowHarnessBase { - /** The selector for the host element of a `MatRowHarness` instance. */ - static hostSelector = '.mat-mdc-row'; - protected _cellHarness = MatCellHarness; - - /** - * Gets a `HarnessPredicate` that can be used to search for a table row with specific attributes. - * @param options Options for narrowing the search - * @return a `HarnessPredicate` configured with the given options. - */ - static with( - this: ComponentHarnessConstructor, - options: RowHarnessFilters = {}, - ): HarnessPredicate { - return new HarnessPredicate(this, options); - } -} - -/** Harness for interacting with an MDC-based Angular Material table header row. */ -export class MatHeaderRowHarness extends _MatRowHarnessBase< - typeof MatHeaderCellHarness, - MatHeaderCellHarness -> { - /** The selector for the host element of a `MatHeaderRowHarness` instance. */ - static hostSelector = '.mat-mdc-header-row'; - protected _cellHarness = MatHeaderCellHarness; - - /** - * Gets a `HarnessPredicate` that can be used to search for a table header row with specific - * attributes. - * @param options Options for narrowing the search - * @return a `HarnessPredicate` configured with the given options. - */ - static with( - this: ComponentHarnessConstructor, - options: RowHarnessFilters = {}, - ): HarnessPredicate { - return new HarnessPredicate(this, options); - } -} - -/** Harness for interacting with an MDC-based Angular Material table footer row. */ -export class MatFooterRowHarness extends _MatRowHarnessBase< - typeof MatFooterCellHarness, - MatFooterCellHarness -> { - /** The selector for the host element of a `MatFooterRowHarness` instance. */ - static hostSelector = '.mat-mdc-footer-row'; - protected _cellHarness = MatFooterCellHarness; - - /** - * Gets a `HarnessPredicate` that can be used to search for a table footer row cell with specific - * attributes. - * @param options Options for narrowing the search - * @return a `HarnessPredicate` configured with the given options. - */ - static with( - this: ComponentHarnessConstructor, - options: RowHarnessFilters = {}, - ): HarnessPredicate { - return new HarnessPredicate(this, options); - } -} diff --git a/src/material-experimental/mdc-table/testing/table-harness.spec.ts b/src/material-experimental/mdc-table/testing/table-harness.spec.ts deleted file mode 100644 index 95c8efc41555..000000000000 --- a/src/material-experimental/mdc-table/testing/table-harness.spec.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {MatTableModule} from '@angular/material-experimental/mdc-table'; -import {runHarnessTests} from '@angular/material/table/testing/shared.spec'; -import {MatTableHarness} from './table-harness'; - -describe('MDC-based MatTableHarness', () => { - runHarnessTests(MatTableModule, MatTableHarness as any); -}); diff --git a/src/material-experimental/mdc-table/testing/table-harness.ts b/src/material-experimental/mdc-table/testing/table-harness.ts deleted file mode 100644 index c8a52312f64e..000000000000 --- a/src/material-experimental/mdc-table/testing/table-harness.ts +++ /dev/null @@ -1,39 +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 {ComponentHarnessConstructor, HarnessPredicate} from '@angular/cdk/testing'; -import {TableHarnessFilters, _MatTableHarnessBase} from '@angular/material/table/testing'; -import {MatRowHarness, MatHeaderRowHarness, MatFooterRowHarness} from './row-harness'; - -/** Harness for interacting with an MDC-based mat-table in tests. */ -export class MatTableHarness extends _MatTableHarnessBase< - typeof MatHeaderRowHarness, - MatHeaderRowHarness, - typeof MatRowHarness, - MatRowHarness, - typeof MatFooterRowHarness, - MatFooterRowHarness -> { - /** The selector for the host element of a `MatTableHarness` instance. */ - static hostSelector = '.mat-mdc-table'; - protected _headerRowHarness = MatHeaderRowHarness; - protected _rowHarness = MatRowHarness; - protected _footerRowHarness = MatFooterRowHarness; - - /** - * Gets a `HarnessPredicate` that can be used to search for a table with specific attributes. - * @param options Options for narrowing the search - * @return a `HarnessPredicate` configured with the given options. - */ - static with( - this: ComponentHarnessConstructor, - options: TableHarnessFilters = {}, - ): HarnessPredicate { - return new HarnessPredicate(this, options); - } -} diff --git a/src/material-experimental/popover-edit/BUILD.bazel b/src/material-experimental/popover-edit/BUILD.bazel index c9e1a637f656..c02fa765c7d5 100644 --- a/src/material-experimental/popover-edit/BUILD.bazel +++ b/src/material-experimental/popover-edit/BUILD.bazel @@ -44,7 +44,7 @@ ng_test_library( "//src/cdk/keycodes", "//src/cdk/overlay", "//src/cdk/testing/private", - "//src/material/table", + "//src/material/legacy-table", "@npm//@angular/common", "@npm//@angular/forms", "@npm//rxjs", diff --git a/src/material-experimental/popover-edit/popover-edit.spec.ts b/src/material-experimental/popover-edit/popover-edit.spec.ts index 85d8f5a082e1..41c04dd24d12 100644 --- a/src/material-experimental/popover-edit/popover-edit.spec.ts +++ b/src/material-experimental/popover-edit/popover-edit.spec.ts @@ -1,6 +1,6 @@ import {DataSource} from '@angular/cdk/collections'; import {LEFT_ARROW, UP_ARROW, RIGHT_ARROW, DOWN_ARROW, TAB} from '@angular/cdk/keycodes'; -import {MatTableModule} from '@angular/material/table'; +import {MatLegacyTableModule} from '@angular/material/legacy-table'; import {dispatchKeyboardEvent} from '../../cdk/testing/private'; import {CommonModule} from '@angular/common'; import {Component, Directive, ElementRef, ViewChild} from '@angular/core'; @@ -302,7 +302,7 @@ describe('Material Popover Edit', () => { beforeEach(fakeAsync(() => { TestBed.configureTestingModule({ - imports: [MatTableModule, MatPopoverEditModule, CommonModule, FormsModule], + imports: [MatLegacyTableModule, MatPopoverEditModule, CommonModule, FormsModule], declarations: [componentClass], }).compileComponents(); fixture = TestBed.createComponent(componentClass); diff --git a/src/material-experimental/selection/BUILD.bazel b/src/material-experimental/selection/BUILD.bazel index e66b20c0fe6b..56c1176c449d 100644 --- a/src/material-experimental/selection/BUILD.bazel +++ b/src/material-experimental/selection/BUILD.bazel @@ -12,7 +12,7 @@ ng_module( deps = [ "//src/cdk-experimental/selection", "//src/material/checkbox", - "//src/material/table", + "//src/material/legacy-table", "@npm//@angular/core", ], ) diff --git a/src/material-experimental/selection/selection-column.ts b/src/material-experimental/selection/selection-column.ts index 75eff1c886ef..e18aa667d174 100644 --- a/src/material-experimental/selection/selection-column.ts +++ b/src/material-experimental/selection/selection-column.ts @@ -6,7 +6,12 @@ * found in the LICENSE file at https://angular.io/license */ -import {MatCellDef, MatColumnDef, MatHeaderCellDef, MatTable} from '@angular/material/table'; +import { + MatLegacyCellDef, + MatLegacyColumnDef, + MatLegacyHeaderCellDef, + MatLegacyTable, +} from '@angular/material/legacy-table'; import { Component, Input, @@ -62,12 +67,13 @@ export class MatSelectionColumn implements OnInit, OnDestroy { } private _name: string; - @ViewChild(MatColumnDef, {static: true}) private readonly _columnDef: MatColumnDef; - @ViewChild(MatCellDef, {static: true}) private readonly _cell: MatCellDef; - @ViewChild(MatHeaderCellDef, {static: true}) private readonly _headerCell: MatHeaderCellDef; + @ViewChild(MatLegacyColumnDef, {static: true}) private readonly _columnDef: MatLegacyColumnDef; + @ViewChild(MatLegacyCellDef, {static: true}) private readonly _cell: MatLegacyCellDef; + @ViewChild(MatLegacyHeaderCellDef, {static: true}) + private readonly _headerCell: MatLegacyHeaderCellDef; constructor( - @Optional() @Inject(MatTable) private _table: MatTable, + @Optional() @Inject(MatLegacyTable) private _table: MatLegacyTable, @Optional() @Inject(MatSelection) readonly selection: MatSelection, ) {} diff --git a/src/material-experimental/selection/selection-module.ts b/src/material-experimental/selection/selection-module.ts index fcc913af037a..18d26f4ef833 100644 --- a/src/material-experimental/selection/selection-module.ts +++ b/src/material-experimental/selection/selection-module.ts @@ -10,7 +10,7 @@ // behaviors once we move it out of experimental. import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MatTableModule} from '@angular/material/table'; +import {MatLegacyTableModule} from '@angular/material/legacy-table'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatSelectAll} from './select-all'; import {MatSelection} from './selection'; @@ -19,7 +19,7 @@ import {MatSelectionColumn} from './selection-column'; import {MatRowSelection} from './row-selection'; @NgModule({ - imports: [CommonModule, MatTableModule, MatCheckboxModule], + imports: [CommonModule, MatLegacyTableModule, MatCheckboxModule], exports: [MatSelectAll, MatSelection, MatSelectionToggle, MatSelectionColumn, MatRowSelection], declarations: [ MatSelectAll, diff --git a/src/material/_index.scss b/src/material/_index.scss index 84aed02155e1..3a78e51e150c 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -165,7 +165,10 @@ @forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography; @forward './stepper/stepper-theme' as stepper-* show stepper-theme, stepper-color, stepper-typography; -@forward './table/table-theme' as table-* show table-theme, table-color, table-typography; +@forward './table/table-theme' as table-* show table-theme, table-color, table-typography, + table-density; +@forward './legacy-table/table-theme' as legacy-table-* show legacy-table-theme, legacy-table-color, + legacy-table-typography; @forward './tabs/tabs-theme' as tabs-* show tabs-theme, tabs-color, tabs-typography, tabs-density; @forward './legacy-tabs/tabs-theme' as legacy-tabs-* show legacy-tabs-theme, legacy-tabs-color, legacy-tabs-typography; diff --git a/src/material/_theming.scss b/src/material/_theming.scss index d4cdb1a3b39a..c82a997c145c 100644 --- a/src/material/_theming.scss +++ b/src/material/_theming.scss @@ -36,7 +36,7 @@ @forward './legacy-snack-bar/snack-bar-legacy-index'; @forward './sort/sort-legacy-index'; @forward './stepper/stepper-legacy-index'; -@forward './table/table-legacy-index'; +@forward './legacy-table/table-legacy-index'; @forward './legacy-tabs/tabs-legacy-index'; @forward './toolbar/toolbar-legacy-index'; @forward './legacy-tooltip/tooltip-legacy-index'; diff --git a/src/material/config.bzl b/src/material/config.bzl index 992a92795538..ca7a00542eca 100644 --- a/src/material/config.bzl +++ b/src/material/config.bzl @@ -96,6 +96,8 @@ entryPoints = [ "sort/testing", "stepper", "stepper/testing", + "legacy-table", + "legacy-table/testing", "table", "table/testing", "tabs", diff --git a/src/material/core/density/private/_all-density.scss b/src/material/core/density/private/_all-density.scss index 6f38b0d70e62..6a3236e54937 100644 --- a/src/material/core/density/private/_all-density.scss +++ b/src/material/core/density/private/_all-density.scss @@ -27,6 +27,7 @@ @use '../../../list/list-theme'; @use '../../../tabs/tabs-theme'; @use '../../../snack-bar/snack-bar-theme'; +@use '../../../table/table-theme'; @mixin private-all-unmigrated-component-densities($config) { @include expansion-theme.density($config); @@ -75,6 +76,7 @@ @include button-theme.density($config); @include icon-button-theme.density($config); @include fab-theme.density($config); + @include table-theme.density($config); @include private-all-unmigrated-component-densities($config); } diff --git a/src/material/core/theming/_all-theme.scss b/src/material/core/theming/_all-theme.scss index cb71f96aac7f..0b966dadde0e 100644 --- a/src/material/core/theming/_all-theme.scss +++ b/src/material/core/theming/_all-theme.scss @@ -44,7 +44,6 @@ @include badge-theme.theme($theme-or-color-config); @include bottom-sheet-theme.theme($theme-or-color-config); @include button-toggle-theme.theme($theme-or-color-config); - @include table-theme.theme($theme-or-color-config); @include datepicker-theme.theme($theme-or-color-config); @include divider-theme.theme($theme-or-color-config); @include expansion-theme.theme($theme-or-color-config); @@ -86,6 +85,7 @@ @include icon-button-theme.theme($theme-or-color-config); @include fab-theme.theme($theme-or-color-config); @include snack-bar-theme.theme($theme-or-color-config); + @include table-theme.theme($theme-or-color-config); @include private-all-unmigrated-component-themes($theme-or-color-config); } } diff --git a/src/material/core/theming/tests/test-css-variables-theme.scss b/src/material/core/theming/tests/test-css-variables-theme.scss index 820c00edc017..d8a1747eb074 100644 --- a/src/material/core/theming/tests/test-css-variables-theme.scss +++ b/src/material/core/theming/tests/test-css-variables-theme.scss @@ -6,7 +6,6 @@ @use '../../../badge/badge-theme'; @use '../../../bottom-sheet/bottom-sheet-theme'; @use '../../../button-toggle/button-toggle-theme'; -@use '../../../table/table-theme'; @use '../../../datepicker/datepicker-theme'; @use '../../../divider/divider-theme'; @use '../../../expansion/expansion-theme'; @@ -50,7 +49,6 @@ @include badge-theme.theme($css-var-theme); @include bottom-sheet-theme.theme($css-var-theme); @include button-toggle-theme.theme($css-var-theme); - @include table-theme.theme($css-var-theme); @include datepicker-theme.theme($css-var-theme); @include divider-theme.theme($css-var-theme); @include expansion-theme.theme($css-var-theme); diff --git a/src/material/core/typography/_all-typography.scss b/src/material/core/typography/_all-typography.scss index a7d11fa6dac2..4ea5ecf58ff7 100644 --- a/src/material/core/typography/_all-typography.scss +++ b/src/material/core/typography/_all-typography.scss @@ -45,7 +45,6 @@ @include bottom-sheet-theme.typography($config); @include button-toggle-theme.typography($config); @include divider-theme.typography($config); - @include table-theme.typography($config); @include datepicker-theme.typography($config); @include expansion-theme.typography($config); @include grid-list-theme.typography($config); @@ -98,6 +97,7 @@ @include icon-button-theme.typography($config); @include fab-theme.typography($config); @include snack-bar-theme.typography($config); + @include table-theme.typography($config); } // @deprecated Use `all-component-typographies`. diff --git a/src/material/legacy-core/theming/_all-theme.scss b/src/material/legacy-core/theming/_all-theme.scss index 1439b181be7e..ab3c68bb140f 100644 --- a/src/material/legacy-core/theming/_all-theme.scss +++ b/src/material/legacy-core/theming/_all-theme.scss @@ -20,6 +20,7 @@ @use '../../legacy-paginator/paginator-theme'; @use '../../legacy-tabs/tabs-theme'; @use '../../legacy-snack-bar/snack-bar-theme'; +@use '../../legacy-table/table-theme'; // Create a theme. @mixin all-legacy-component-themes($theme-or-color-config) { @@ -45,6 +46,7 @@ @include paginator-theme.theme($theme-or-color-config); @include tabs-theme.theme($theme-or-color-config); @include snack-bar-theme.theme($theme-or-color-config); + @include table-theme.theme($theme-or-color-config); @include all-theme.private-all-unmigrated-component-themes($theme-or-color-config); } } diff --git a/src/material/legacy-core/typography/_all-typography.scss b/src/material/legacy-core/typography/_all-typography.scss index 6508083cf0d3..8d17ab917416 100644 --- a/src/material/legacy-core/typography/_all-typography.scss +++ b/src/material/legacy-core/typography/_all-typography.scss @@ -22,6 +22,7 @@ @use '../../legacy-paginator/paginator-theme'; @use '../../legacy-tabs/tabs-theme'; @use '../../legacy-snack-bar/snack-bar-theme'; +@use '../../legacy-table/table-theme'; // Includes all of the typographic styles. @mixin all-legacy-component-typographies($config-or-theme: null) { @@ -61,6 +62,7 @@ @include list-theme.typography($config); @include paginator-theme.typography($config); @include snack-bar-theme.typography($config); + @include table-theme.typography($config); } // @deprecated Use `all-legacy-component-typographies`. diff --git a/src/material-experimental/mdc-table/BUILD.bazel b/src/material/legacy-table/BUILD.bazel similarity index 50% rename from src/material-experimental/mdc-table/BUILD.bazel rename to src/material/legacy-table/BUILD.bazel index ec1cbb428e63..538473923bfb 100644 --- a/src/material-experimental/mdc-table/BUILD.bazel +++ b/src/material/legacy-table/BUILD.bazel @@ -1,7 +1,6 @@ -load("//src/e2e-app:test_suite.bzl", "e2e_test_suite") load( "//tools:defaults.bzl", - "ng_e2e_test_library", + "markdown_to_html", "ng_module", "ng_test_library", "ng_web_test_suite", @@ -12,56 +11,49 @@ load( package(default_visibility = ["//visibility:public"]) ng_module( - name = "mdc-table", + name = "legacy-table", srcs = glob( ["**/*.ts"], exclude = ["**/*.spec.ts"], ), - assets = [":table_scss"] + glob(["**/*.html"]), + assets = [":table.css"], deps = [ + "@npm//@angular/core", + "@npm//rxjs", + "//src/cdk/coercion", "//src/cdk/table", "//src/material/core", - "//src/material/paginator", - "//src/material/sort", "//src/material/table", - "@npm//@angular/core", - ], + "//src/material/legacy-paginator", + "//src/material/sort", + ] + glob(["**/*.html"]), ) sass_library( - name = "mdc_table_scss_lib", + name = "legacy_table_scss_lib", srcs = glob(["**/_*.scss"]), - deps = [ - "//:mdc_sass_lib", - "//src/material:sass_lib", - "//src/material/core:core_scss_lib", - ], + deps = ["//src/material/core:core_scss_lib"], ) sass_binary( name = "table_scss", src = "table.scss", deps = [ - "//:mdc_sass_lib", - "//src/material:sass_lib", "//src/material/core:core_scss_lib", + "//src/material/table:table_flex_scss_lib", ], ) -########### -# Testing -########### - ng_test_library( - name = "table_tests_lib", + name = "unit_test_sources", srcs = glob( ["**/*.spec.ts"], exclude = ["**/*.e2e.spec.ts"], ), deps = [ - ":mdc-table", - "//src/cdk/table", - "//src/material/paginator", + ":legacy-table", + "//src/cdk/collections", + "//src/material/legacy-paginator", "//src/material/sort", "@npm//@angular/platform-browser", "@npm//rxjs", @@ -70,23 +62,15 @@ ng_test_library( ng_web_test_suite( name = "unit_tests", - deps = [ - ":table_tests_lib", - ], + deps = [":unit_test_sources"], ) -ng_e2e_test_library( - name = "e2e_test_sources", - srcs = glob(["**/*.e2e.spec.ts"]), - deps = [ - "//src/cdk/testing/private/e2e", - ], +markdown_to_html( + name = "overview", + srcs = [":table.md"], ) -e2e_test_suite( - name = "e2e_tests", - deps = [ - ":e2e_test_sources", - "//src/cdk/testing/private/e2e", - ], +filegroup( + name = "source-files", + srcs = glob(["**/*.ts"]), ) diff --git a/src/material/legacy-table/_table-legacy-index.scss b/src/material/legacy-table/_table-legacy-index.scss new file mode 100644 index 000000000000..c4012ec58ecb --- /dev/null +++ b/src/material/legacy-table/_table-legacy-index.scss @@ -0,0 +1,3 @@ +@forward 'table-theme' hide color, theme, typography; +@forward 'table-theme' as mat-legacy-table-* hide mat-legacy-table-density; +@forward '../table/table-flex-styles' as mat-*; diff --git a/src/material/legacy-table/_table-theme.import.scss b/src/material/legacy-table/_table-theme.import.scss new file mode 100644 index 000000000000..381eef8242a9 --- /dev/null +++ b/src/material/legacy-table/_table-theme.import.scss @@ -0,0 +1,8 @@ +@forward '../core/theming/theming.import'; +@forward '../core/typography/typography-utils.import'; +@forward 'table-theme' hide color, theme, typography; +@forward 'table-theme' as mat-legacy-table-* hide mat-legacy-table-density; + +@import '../core/theming/palette'; +@import '../core/theming/theming'; +@import '../core/typography/typography-utils'; diff --git a/src/material/legacy-table/_table-theme.scss b/src/material/legacy-table/_table-theme.scss new file mode 100644 index 000000000000..2c22bbd08d0b --- /dev/null +++ b/src/material/legacy-table/_table-theme.scss @@ -0,0 +1,72 @@ +@use 'sass:map'; +@use '../core/theming/theming'; +@use '../core/typography/typography'; +@use '../core/typography/typography-utils'; + +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + $background: map.get($config, background); + $foreground: map.get($config, foreground); + + .mat-table { + background: theming.get-color-from-palette($background, 'card'); + } + + .mat-table thead, .mat-table tbody, .mat-table tfoot, + mat-header-row, mat-row, mat-footer-row, + [mat-header-row], [mat-row], [mat-footer-row], + .mat-table-sticky { + background: inherit; + } + + mat-row, mat-header-row, mat-footer-row, + th.mat-header-cell, td.mat-cell, td.mat-footer-cell { + border-bottom-color: theming.get-color-from-palette($foreground, divider); + } + + .mat-header-cell { + color: theming.get-color-from-palette($foreground, secondary-text); + } + + .mat-cell, .mat-footer-cell { + color: theming.get-color-from-palette($foreground, text); + } +} + +@mixin typography($config-or-theme) { + $config: typography.private-typography-to-2014-config( + theming.get-typography-config($config-or-theme)); + .mat-table { + font-family: typography-utils.font-family($config); + } + + .mat-header-cell { + font-size: typography-utils.font-size($config, caption); + font-weight: typography-utils.font-weight($config, body-2); + } + + .mat-cell, .mat-footer-cell { + font-size: typography-utils.font-size($config, body-1); + } +} + +@mixin _density($config-or-theme) {} + +@mixin theme($theme-or-color-config) { + $theme: theming.private-legacy-get-theme($theme-or-color-config); + @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-table') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); + + @if $color != null { + @include color($color); + } + @if $density != null { + @include _density($density); + } + @if $typography != null { + @include typography($typography); + } + } +} diff --git a/src/material-experimental/mdc-table/cell.ts b/src/material/legacy-table/cell.ts similarity index 71% rename from src/material-experimental/mdc-table/cell.ts rename to src/material/legacy-table/cell.ts index 0cca4fbf6ffa..19bd41b897f6 100644 --- a/src/material-experimental/mdc-table/cell.ts +++ b/src/material/legacy-table/cell.ts @@ -23,9 +23,9 @@ import { */ @Directive({ selector: '[matCellDef]', - providers: [{provide: CdkCellDef, useExisting: MatCellDef}], + providers: [{provide: CdkCellDef, useExisting: MatLegacyCellDef}], }) -export class MatCellDef extends CdkCellDef {} +export class MatLegacyCellDef extends CdkCellDef {} /** * Header cell definition for the mat-table. @@ -33,9 +33,9 @@ export class MatCellDef extends CdkCellDef {} */ @Directive({ selector: '[matHeaderCellDef]', - providers: [{provide: CdkHeaderCellDef, useExisting: MatHeaderCellDef}], + providers: [{provide: CdkHeaderCellDef, useExisting: MatLegacyHeaderCellDef}], }) -export class MatHeaderCellDef extends CdkHeaderCellDef {} +export class MatLegacyHeaderCellDef extends CdkHeaderCellDef {} /** * Footer cell definition for the mat-table. @@ -43,9 +43,9 @@ export class MatHeaderCellDef extends CdkHeaderCellDef {} */ @Directive({ selector: '[matFooterCellDef]', - providers: [{provide: CdkFooterCellDef, useExisting: MatFooterCellDef}], + providers: [{provide: CdkFooterCellDef, useExisting: MatLegacyFooterCellDef}], }) -export class MatFooterCellDef extends CdkFooterCellDef {} +export class MatLegacyFooterCellDef extends CdkFooterCellDef {} /** * Column definition for the mat-table. @@ -55,11 +55,11 @@ export class MatFooterCellDef extends CdkFooterCellDef {} selector: '[matColumnDef]', inputs: ['sticky'], providers: [ - {provide: CdkColumnDef, useExisting: MatColumnDef}, - {provide: 'MAT_SORT_HEADER_COLUMN_DEF', useExisting: MatColumnDef}, + {provide: CdkColumnDef, useExisting: MatLegacyColumnDef}, + {provide: 'MAT_SORT_HEADER_COLUMN_DEF', useExisting: MatLegacyColumnDef}, ], }) -export class MatColumnDef extends CdkColumnDef { +export class MatLegacyColumnDef extends CdkColumnDef { /** Unique name for this column. */ @Input('matColumnDef') override get name(): string { @@ -85,26 +85,28 @@ export class MatColumnDef extends CdkColumnDef { @Directive({ selector: 'mat-header-cell, th[mat-header-cell]', host: { - 'class': 'mat-mdc-header-cell mdc-data-table__header-cell', + 'class': 'mat-header-cell', 'role': 'columnheader', }, }) -export class MatHeaderCell extends CdkHeaderCell {} +export class MatLegacyHeaderCell extends CdkHeaderCell {} /** Footer cell template container that adds the right classes and role. */ @Directive({ selector: 'mat-footer-cell, td[mat-footer-cell]', host: { - 'class': 'mat-mdc-footer-cell mdc-data-table__cell', + 'class': 'mat-footer-cell', + 'role': 'gridcell', }, }) -export class MatFooterCell extends CdkFooterCell {} +export class MatLegacyFooterCell extends CdkFooterCell {} /** Cell template container that adds the right classes and role. */ @Directive({ selector: 'mat-cell, td[mat-cell]', host: { - 'class': 'mat-mdc-cell mdc-data-table__cell', + 'class': 'mat-cell', + 'role': 'gridcell', }, }) -export class MatCell extends CdkCell {} +export class MatLegacyCell extends CdkCell {} diff --git a/src/material-experimental/mdc-table/index.ts b/src/material/legacy-table/index.ts similarity index 100% rename from src/material-experimental/mdc-table/index.ts rename to src/material/legacy-table/index.ts diff --git a/src/material-experimental/mdc-table/public-api.ts b/src/material/legacy-table/public-api.ts similarity index 62% rename from src/material-experimental/mdc-table/public-api.ts rename to src/material/legacy-table/public-api.ts index ff7ba47c4cbc..1ba30f8e7ef0 100644 --- a/src/material-experimental/mdc-table/public-api.ts +++ b/src/material/legacy-table/public-api.ts @@ -6,11 +6,14 @@ * found in the LICENSE file at https://angular.io/license */ -export * from './table'; -export * from './module'; +export * from './table-module'; export * from './cell'; +export * from './table'; export * from './row'; export * from './table-data-source'; export * from './text-column'; - -export {MatTableDataSourcePageEvent, MatTableDataSourcePaginator} from '@angular/material/table'; +export { + MatTableDataSourcePageEvent as MatLegacyTableDataSourcePageEvent, + MatTableDataSourcePaginator as MatLegacyTableDataSourcePaginator, + _MatTableDataSource as _MatLegacyTableDataSource, +} from '@angular/material/table'; diff --git a/src/material-experimental/mdc-table/row.ts b/src/material/legacy-table/row.ts similarity index 72% rename from src/material-experimental/mdc-table/row.ts rename to src/material/legacy-table/row.ts index 9b8e43163bc4..15606e9d107c 100644 --- a/src/material-experimental/mdc-table/row.ts +++ b/src/material/legacy-table/row.ts @@ -24,10 +24,10 @@ import {ChangeDetectionStrategy, Component, Directive, ViewEncapsulation} from ' */ @Directive({ selector: '[matHeaderRowDef]', - providers: [{provide: CdkHeaderRowDef, useExisting: MatHeaderRowDef}], + providers: [{provide: CdkHeaderRowDef, useExisting: MatLegacyHeaderRowDef}], inputs: ['columns: matHeaderRowDef', 'sticky: matHeaderRowDefSticky'], }) -export class MatHeaderRowDef extends CdkHeaderRowDef {} +export class MatLegacyHeaderRowDef extends CdkHeaderRowDef {} /** * Footer row definition for the mat-table. @@ -35,10 +35,10 @@ export class MatHeaderRowDef extends CdkHeaderRowDef {} */ @Directive({ selector: '[matFooterRowDef]', - providers: [{provide: CdkFooterRowDef, useExisting: MatFooterRowDef}], + providers: [{provide: CdkFooterRowDef, useExisting: MatLegacyFooterRowDef}], inputs: ['columns: matFooterRowDef', 'sticky: matFooterRowDefSticky'], }) -export class MatFooterRowDef extends CdkFooterRowDef {} +export class MatLegacyFooterRowDef extends CdkFooterRowDef {} /** * Data row definition for the mat-table. @@ -47,17 +47,17 @@ export class MatFooterRowDef extends CdkFooterRowDef {} */ @Directive({ selector: '[matRowDef]', - providers: [{provide: CdkRowDef, useExisting: MatRowDef}], + providers: [{provide: CdkRowDef, useExisting: MatLegacyRowDef}], inputs: ['columns: matRowDefColumns', 'when: matRowDefWhen'], }) -export class MatRowDef extends CdkRowDef {} +export class MatLegacyRowDef extends CdkRowDef {} -/** Footer template container that contains the cell outlet. Adds the right class and role. */ +/** Header template container that contains the cell outlet. Adds the right class and role. */ @Component({ selector: 'mat-header-row, tr[mat-header-row]', template: CDK_ROW_TEMPLATE, host: { - 'class': 'mat-mdc-header-row mdc-data-table__header-row', + 'class': 'mat-header-row', 'role': 'row', }, // See note on CdkTable for explanation on why this uses the default change detection strategy. @@ -65,16 +65,16 @@ export class MatRowDef extends CdkRowDef {} changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, exportAs: 'matHeaderRow', - providers: [{provide: CdkHeaderRow, useExisting: MatHeaderRow}], + providers: [{provide: CdkHeaderRow, useExisting: MatLegacyHeaderRow}], }) -export class MatHeaderRow extends CdkHeaderRow {} +export class MatLegacyHeaderRow extends CdkHeaderRow {} /** Footer template container that contains the cell outlet. Adds the right class and role. */ @Component({ selector: 'mat-footer-row, tr[mat-footer-row]', template: CDK_ROW_TEMPLATE, host: { - 'class': 'mat-mdc-footer-row mdc-data-table__row', + 'class': 'mat-footer-row', 'role': 'row', }, // See note on CdkTable for explanation on why this uses the default change detection strategy. @@ -82,16 +82,16 @@ export class MatHeaderRow extends CdkHeaderRow {} changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, exportAs: 'matFooterRow', - providers: [{provide: CdkFooterRow, useExisting: MatFooterRow}], + providers: [{provide: CdkFooterRow, useExisting: MatLegacyFooterRow}], }) -export class MatFooterRow extends CdkFooterRow {} +export class MatLegacyFooterRow extends CdkFooterRow {} /** Data row template container that contains the cell outlet. Adds the right class and role. */ @Component({ selector: 'mat-row, tr[mat-row]', template: CDK_ROW_TEMPLATE, host: { - 'class': 'mat-mdc-row mdc-data-table__row', + 'class': 'mat-row', 'role': 'row', }, // See note on CdkTable for explanation on why this uses the default change detection strategy. @@ -99,15 +99,15 @@ export class MatFooterRow extends CdkFooterRow {} changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, exportAs: 'matRow', - providers: [{provide: CdkRow, useExisting: MatRow}], + providers: [{provide: CdkRow, useExisting: MatLegacyRow}], }) -export class MatRow extends CdkRow {} +export class MatLegacyRow extends CdkRow {} /** Row that can be used to display a message when no data is shown in the table. */ @Directive({ selector: 'ng-template[matNoDataRow]', - providers: [{provide: CdkNoDataRow, useExisting: MatNoDataRow}], + providers: [{provide: CdkNoDataRow, useExisting: MatLegacyNoDataRow}], }) -export class MatNoDataRow extends CdkNoDataRow { - override _contentClassName = 'mat-mdc-no-data-row'; +export class MatLegacyNoDataRow extends CdkNoDataRow { + override _contentClassName = 'mat-no-data-row'; } diff --git a/src/material/table/table-data-source.spec.ts b/src/material/legacy-table/table-data-source.spec.ts similarity index 94% rename from src/material/table/table-data-source.spec.ts rename to src/material/legacy-table/table-data-source.spec.ts index 1f03e4768ca6..3ebe1af4cb46 100644 --- a/src/material/table/table-data-source.spec.ts +++ b/src/material/legacy-table/table-data-source.spec.ts @@ -1,4 +1,4 @@ -import {MatTableDataSource} from './table-data-source'; +import {MatLegacyTableDataSource} from './table-data-source'; import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing'; import {MatSort, MatSortModule} from '@angular/material/sort'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; @@ -13,14 +13,14 @@ describe('MatTableDataSource', () => { })); describe('sort', () => { - let dataSource: MatTableDataSource; + let dataSource: MatLegacyTableDataSource; let fixture: ComponentFixture; let sort: MatSort; beforeEach(() => { fixture = TestBed.createComponent(MatSortApp); fixture.detectChanges(); - dataSource = new MatTableDataSource(); + dataSource = new MatLegacyTableDataSource(); sort = fixture.componentInstance.sort; dataSource.sort = sort; }); diff --git a/src/material-experimental/mdc-table/table-data-source.ts b/src/material/legacy-table/table-data-source.ts similarity index 74% rename from src/material-experimental/mdc-table/table-data-source.ts rename to src/material/legacy-table/table-data-source.ts index 9611ff27890c..580fb55b7b20 100644 --- a/src/material-experimental/mdc-table/table-data-source.ts +++ b/src/material/legacy-table/table-data-source.ts @@ -6,11 +6,12 @@ * found in the LICENSE file at https://angular.io/license */ -import {_MatTableDataSource, MatTableDataSourcePaginator} from '@angular/material/table'; +import {MatLegacyPaginator} from '@angular/material/legacy-paginator'; +import {_MatTableDataSource} from '@angular/material/table'; /** * Data source that accepts a client-side data array and includes native support of filtering, - * sorting (using MatSort), and pagination (using MatPaginator). + * sorting (using MatSort), and pagination (using paginator). * * Allows for sort customization by overriding sortingDataAccessor, which defines how data * properties are accessed. Also allows for filter customization by overriding filterTermAccessor, @@ -21,7 +22,4 @@ import {_MatTableDataSource, MatTableDataSourcePaginator} from '@angular/materia * interactions. If your app needs to support more advanced use cases, consider implementing your * own `DataSource`. */ -export class MatTableDataSource< - T, - P extends MatTableDataSourcePaginator = MatTableDataSourcePaginator, -> extends _MatTableDataSource {} +export class MatLegacyTableDataSource extends _MatTableDataSource {} diff --git a/src/material/legacy-table/table-module.ts b/src/material/legacy-table/table-module.ts new file mode 100644 index 000000000000..14d6e35ff793 --- /dev/null +++ b/src/material/legacy-table/table-module.ts @@ -0,0 +1,66 @@ +/** + * @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 {NgModule} from '@angular/core'; +import {MatLegacyRecycleRows, MatLegacyTable} from './table'; +import {CdkTableModule} from '@angular/cdk/table'; +import { + MatLegacyCell, + MatLegacyCellDef, + MatLegacyColumnDef, + MatLegacyFooterCell, + MatLegacyFooterCellDef, + MatLegacyHeaderCell, + MatLegacyHeaderCellDef, +} from './cell'; +import { + MatLegacyFooterRow, + MatLegacyFooterRowDef, + MatLegacyHeaderRow, + MatLegacyHeaderRowDef, + MatLegacyRow, + MatLegacyRowDef, + MatLegacyNoDataRow, +} from './row'; +import {MatLegacyTextColumn} from './text-column'; +import {MatCommonModule} from '@angular/material/core'; + +const EXPORTED_DECLARATIONS = [ + // Table + MatLegacyTable, + MatLegacyRecycleRows, + + // Template defs + MatLegacyHeaderCellDef, + MatLegacyHeaderRowDef, + MatLegacyColumnDef, + MatLegacyCellDef, + MatLegacyRowDef, + MatLegacyFooterCellDef, + MatLegacyFooterRowDef, + + // Cell directives + MatLegacyHeaderCell, + MatLegacyCell, + MatLegacyFooterCell, + + // Row directives + MatLegacyHeaderRow, + MatLegacyRow, + MatLegacyFooterRow, + MatLegacyNoDataRow, + + MatLegacyTextColumn, +]; + +@NgModule({ + imports: [CdkTableModule, MatCommonModule], + exports: [MatCommonModule, EXPORTED_DECLARATIONS], + declarations: EXPORTED_DECLARATIONS, +}) +export class MatLegacyTableModule {} diff --git a/src/material/legacy-table/table.md b/src/material/legacy-table/table.md new file mode 100644 index 000000000000..eb231f84f436 --- /dev/null +++ b/src/material/legacy-table/table.md @@ -0,0 +1,434 @@ +The `mat-table` provides a Material Design styled data-table that can be used to display rows of +data. + +This table builds on the foundation of the CDK data-table and uses a similar interface for its +data input and template, except that its element and attribute selectors will be prefixed +with `mat-` instead of `cdk-`. For more information on the interface and a detailed look at how +the table is implemented, see the +[guide covering the CDK data-table](https://material.angular.io/guide/cdk-table). + +### Getting Started + + + +#### 1. Write your mat-table and provide data + +Begin by adding the `` component to your template and passing in data. + +The simplest way to provide data to the table is by passing a data array to the table's `dataSource` +input. The table will take the array and render a row for each object in the data array. + +```html +
+ ... +
+``` + +Since the table optimizes for performance, it will not automatically check for changes to the data +array. Instead, when objects are added, removed, or moved on the data array, you can trigger an +update to the table's rendered rows by calling its `renderRows()` method. + +While an array is the _simplest_ way to bind data into the data source, it is also +the most limited. For more complex applications, using a `DataSource` instance +is recommended. See the section "Advanced data sources" below for more information. + +#### 2. Define the column templates + +Next, write your table's column templates. + +Each column definition should be given a unique name and contain the content for its header and row +cells. + +Here's a simple column definition with the name `'score'`. The header cell contains the text +"Score" and each row cell will render the `score` property of each row's data. + +```html + + Score + {{user.score}} + +``` + +Note that the cell templates are not restricted to only showing simple string values, but are +flexible and allow you to provide any template. + +If your column is only responsible for rendering a single string value for the header and cells, +you can instead define your column using the `mat-text-column`. The following column definition is +equivalent to the one above. + +```html + +``` + +Check out the API docs and examples of the `mat-text-column` to see how you can customize the header +text, text alignment, and cell data accessor. Note that this is not compatible with the flex-layout +table. Also, a data accessor should be provided if your data may have its properties minified +since the string name will no longer match after minification. + +#### 3. Define the row templates + +Finally, once you have defined your columns, you need to tell the table which columns will be +rendered in the header and data rows. + +To start, create a variable in your component that contains the list of the columns you want to +render. + +```ts +columnsToDisplay = ['userName', 'age']; +``` + +Then add `mat-header-row` and `mat-row` to the content of your `mat-table` and provide your +column list as inputs. + +```html + + +``` + +Note that this list of columns provided to the rows can be in any order, not necessarily the order in +which you wrote the column definitions. Also, you do not necessarily have to include every column +that was defined in your template. + +This means that by changing your column list provided to the rows, you can easily re-order and +include/exclude columns dynamically. + +### Advanced data sources + +The simplest way to provide data to your table is by passing a data array. More complex use-cases +may benefit from a more flexible approach involving an Observable stream or by encapsulating your +data source logic into a `DataSource` class. + +#### Observable stream of data arrays + +An alternative approach to providing data to the table is by passing an Observable stream that emits +the data array to be rendered each time it is changed. The table will listen to this stream and +automatically trigger an update to the rows each time a new data array is emitted. + +#### DataSource + +For most real-world applications, providing the table a `DataSource` instance will be the best way to +manage data. The `DataSource` is meant to serve as a place to encapsulate any sorting, filtering, +pagination, and data retrieval logic specific to the application. + +A `DataSource` is simply a class that has at a minimum the following methods: `connect` and +`disconnect`. The `connect` method will be called by the table to provide an `Observable` that emits +the data array that should be rendered. The table will call `disconnect` when the table is destroyed, +which may be the right time to clean up any subscriptions that may have been registered in the +`connect` method. + +Although Angular Material provides a ready-made table `DataSource` class, `MatTableDataSource`, you may +want to create your own custom `DataSource` class for more complex use cases. This can be done by +extending the abstract `DataSource` class with a custom `DataSource` class that then implements the +`connect` and `disconnect` methods. For use cases where the custom `DataSource` must also inherit +functionality by extending a different base class, the `DataSource` base class can be +implemented instead (`MyCustomDataSource extends SomeOtherBaseClass implements DataSource`) to +respect Typescript's restriction to only implement one base class. + +### Styling Columns + +Each table cell has an automatically generated class based on which column it appears in. The format for this +generated class is `mat-column-NAME`. For example, cells in a column named "symbol" can be targeted with the +selector `.mat-column-symbol`. + + + +### Row Templates + +Event handlers and property binding on the row templates will be applied to each row rendered by the table. For example, +adding a `(click)` handler to the row template will cause each individual row to call the handler when clicked. + + + +### Features + +The `MatTable` is focused on a single responsibility: efficiently render rows of data in a +performant and accessible way. + +You'll notice that the table itself doesn't come out of the box with a lot of features, but expects +that the table will be included in a composition of components that fills out its features. + +For example, you can add sorting and pagination to the table by using MatSort and MatPaginator and +mutating the data provided to the table according to their outputs. + +To simplify the use case of having a table that can sort, paginate, and filter an array of data, +the Angular Material library comes with a `MatTableDataSource` that has already implemented +the logic of determining what rows should be rendered according to the current table state. To add +these feature to the table, check out their respective sections below. + +#### Pagination + +To paginate the table's data, add a `` after the table. + +If you are using the `MatTableDataSource` for your table's data source, simply provide the +`MatPaginator` to your data source. It will automatically listen for page changes made by the user +and send the right paged data to the table. + +Otherwise if you are implementing the logic to paginate your data, you will want to listen to the +paginator's `(page)` output and pass the right slice of data to your table. + +For more information on using and configuring the ``, check out the +[mat-paginator docs](https://material.angular.io/components/legacy-paginator/overview). + +The `MatPaginator` is one provided solution to paginating your table's data, but it is not the only +option. In fact, the table can work with any custom pagination UI or strategy since the `MatTable` +and its interface is not tied to any one specific implementation. + + + +#### Sorting + +To add sorting behavior to the table, add the `matSort` directive to the table and add +`mat-sort-header` to each column header cell that should trigger sorting. Note that you have to import `MatSortModule` in order to initialize the `matSort` directive (see [API docs](https://material.angular.io/components/sort/api)). + +```html + + + Name + {{element.position}} + +``` + +If you are using the `MatTableDataSource` for your table's data source, provide the `MatSort` +directive to the data source and it will automatically listen for sorting changes and change the +order of data rendered by the table. + +By default, the `MatTableDataSource` sorts with the assumption that the sorted column's name +matches the data property name that the column displays. For example, the following column +definition is named `position`, which matches the name of the property displayed in the row cell. + +Note that if the data properties do not match the column names, or if a more complex data property +accessor is required, then a custom `sortingDataAccessor` function can be set to override the +default data accessor on the `MatTableDataSource`. + +If you are not using the `MatTableDataSource`, but instead implementing custom logic to sort your +data, listen to the sort's `(matSortChange)` event and re-order your data according to the sort state. +If you are providing a data array directly to the table, don't forget to call `renderRows()` on the +table, since it will not automatically check the array for changes. + + + +For more information on using and configuring the sorting behavior, check out the +[matSort docs](https://material.angular.io/components/sort/overview). + +The `MatSort` is one provided solution to sorting your table's data, but it is not the only option. +In fact, the table can work with any custom sorting UI or strategy since the `MatTable` and +its interface is not tied to any one specific implementation. + +#### Filtering + +Angular Material does not provide a specific component to be used for filtering the `MatTable` +since there is no single common approach to adding a filter UI to table data. + +A general strategy is to add an input where users can type in a filter string and listen to this +input to change what data is offered from the data source to the table. + +If you are using the `MatTableDataSource`, simply provide the filter string to the +`MatTableDataSource`. The data source will reduce each row data to a serialized form and will filter +out the row if it does not contain the filter string. By default, the row data reducing function +will concatenate all the object values and convert them to lowercase. + +For example, the data object `{id: 123, name: 'Mr. Smith', favoriteColor: 'blue'}` will be reduced +to `123mr. smithblue`. If your filter string was `blue` then it would be considered a match because +it is contained in the reduced string, and the row would be displayed in the table. + +To override the default filtering behavior, a custom `filterPredicate` function can be set which +takes a data object and filter string and returns true if the data object is considered a match. + +If you want to show a message when not data matches the filter, you can use the `*matNoDataRow` +directive. + + + +#### Selection + +Right now there is no formal support for adding a selection UI to the table, but Angular Material +does offer the right components and pieces to set this up. The following steps are one solution but +it is not the only way to incorporate row selection in your table. + +##### 1. Add a selection model + +Get started by setting up a `SelectionModel` from `@angular/cdk/collections` that will maintain the +selection state. + +```js +const initialSelection = []; +const allowMultiSelect = true; +this.selection = new SelectionModel(allowMultiSelect, initialSelection); +``` + +##### 2. Define a selection column + +Add a column definition for displaying the row checkboxes, including a main toggle checkbox for +the header. The column name should be added to the list of displayed columns provided to the +header and data row. + +```html + + + + + + + + + + +``` + +##### 3. Add event handling logic + +Implement the behavior in your component's logic to handle the header's main toggle and checking +if all rows are selected. + +```js +/** 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. */ +toggleAllRows() { + this.isAllSelected() ? + this.selection.clear() : + this.dataSource.data.forEach(row => this.selection.select(row)); +} +``` + +##### 4. Include overflow styling + +Finally, adjust the styling for the select column so that its overflow is not hidden. This allows +the ripple effect to extend beyond the cell. + +```css +.mat-column-select { + overflow: initial; +} +``` + + + +#### Footer row + +A footer row can be added to the table by adding a footer row definition to the table and adding +footer cell templates to column definitions. The footer row will be rendered after the rendered +data rows. + +```html + + Cost + {{data.cost}} + {{totalCost}} + + +... + + + + +``` + + + +#### Sticky Rows and Columns + +By using `position: sticky` styling, the table's rows and columns can be fixed so that they do not +leave the viewport even when scrolled. The table provides inputs that will automatically apply the +correct CSS styling so that the rows and columns become sticky. + +In order to fix the header row to the top of the scrolling viewport containing the table, you can +add a `sticky` input to the `matHeaderRowDef`. + + + +Similarly, this can also be applied to the table's footer row. Note that if you are using the native +`` and using Safari, then the footer will only stick if `sticky` is applied to all the +rendered footer rows. + + + +It is also possible to fix cell columns to the start or end of the horizontally scrolling viewport. +To do this, add the `sticky` or `stickyEnd` directive to the `ng-container` column definition. + + + +Note that on Safari mobile when using the flex-based table, a cell stuck in more than one direction +will struggle to stay in the correct position as you scroll. For example, if a header row is stuck +to the top and the first column is stuck, then the top-left-most cell will appear jittery as you +scroll. + +Also, sticky positioning in Edge will appear shaky for special cases. For example, if the scrolling +container has a complex box shadow and has sibling elements, the stuck cells will appear jittery. +There is currently an [open issue with Edge](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17514118/) +to resolve this. + + +#### Multiple row templates + +When using the `multiTemplateDataRows` directive to support multiple rows for each data object, the context of `*matRowDef` is the same except that the `index` value is replaced by `dataIndex` and `renderIndex`. + +### Accessibility + +By default, `MatTable` applies `role="table"`, assuming the table's contains primarily static +content. You can change the role by explicitly setting `role="grid"` or `role="treegrid"` on the +table element. While changing the role will update child element roles, such as changing +`role="cell"` to `role="gridcell"`, this does _not_ apply additional keyboard input handling or +focus management to the table. + +Always provide an accessible label for your tables via `aria-label` or `aria-labelledby` on the +table element. + +### Tables with `display: flex` + +The `MatTable` does not require that you use a native HTML table. Instead, you can use an +alternative approach that uses `display: flex` for the table's styles. + +This alternative approach replaces the native table element tags with the `MatTable` directive +selectors. For example, `
` becomes ``; `` becomes +``. The following shows a previous example using this alternative template: + +```html + + + + User name + {{row.username}} + + + + + Age + {{row.age}} + + + + + Title + {{row.title}} + + + + + + +``` + +Note that this approach means you cannot include certain native-table features such colspan/rowspan +or have columns that resize themselves based on their content. + +### Tables with `MatRipple` + +By default, `MatTable` does not set up Material Design ripples for rows. A ripple effect can be +added to table rows by using the `MatRipple` directive from `@angular/material/core`. Due to +limitations in browsers, ripples cannot be applied native `th` or `tr` elements. The recommended +approach for setting up ripples is using the non-native `display: flex` variant of `MatTable`. + + + +More details about ripples on native table rows and their limitations can be found [in this issue](https://github.com/angular/components/issues/11883#issuecomment-634942981). + diff --git a/src/material/legacy-table/table.scss b/src/material/legacy-table/table.scss new file mode 100644 index 000000000000..44d76c411273 --- /dev/null +++ b/src/material/legacy-table/table.scss @@ -0,0 +1,61 @@ +@use '../table/table-flex-styles'; + +@include table-flex-styles.private-table-flex-styles(); + +// Native HTML table structure +table.mat-table { + border-spacing: 0; +} + +tr.mat-header-row { + height: table-flex-styles.$header-row-height; +} + +tr.mat-row, tr.mat-footer-row { + height: table-flex-styles.$row-height; +} + +th.mat-header-cell { + text-align: left; + + [dir='rtl'] & { + text-align: right; + } +} + +th.mat-header-cell, td.mat-cell, td.mat-footer-cell { + padding: 0; + border-bottom-width: 1px; + border-bottom-style: solid; + + // Note: we use `first-of-type`/`last-of-type` here in order to prevent extra + // elements like ripples or badges from throwing off the layout (see #11165). + &:first-of-type { + padding-left: table-flex-styles.$row-horizontal-padding; + + [dir='rtl'] &:not(:only-of-type) { + padding-left: 0; + padding-right: table-flex-styles.$row-horizontal-padding; + } + } + + &:last-of-type { + padding-right: table-flex-styles.$row-horizontal-padding; + + [dir='rtl'] &:not(:only-of-type) { + padding-right: 0; + padding-left: table-flex-styles.$row-horizontal-padding; + } + } +} + +.mat-table-sticky { + // Note that the table can either set this class or an inline style to make something sticky. + // We set the style as `!important` so that we get an identical specificity in both cases + // and to avoid cases where user styles have a higher specificity. + position: sticky !important; +} + +.mat-table-fixed-layout { + table-layout: fixed; +} diff --git a/src/material-experimental/mdc-table/table.spec.ts b/src/material/legacy-table/table.spec.ts similarity index 74% rename from src/material-experimental/mdc-table/table.spec.ts rename to src/material/legacy-table/table.spec.ts index ce1615ecebda..27e97b84dec0 100644 --- a/src/material-experimental/mdc-table/table.spec.ts +++ b/src/material/legacy-table/table.spec.ts @@ -1,4 +1,5 @@ -import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; +import {DataSource} from '@angular/cdk/collections'; +import {Component, OnInit, ViewChild, AfterViewInit} from '@angular/core'; import { waitForAsync, ComponentFixture, @@ -7,17 +8,23 @@ import { TestBed, tick, } from '@angular/core/testing'; -import {MatTable, MatTableDataSource, MatTableModule} from './index'; -import {DataSource} from '@angular/cdk/table'; -import {BehaviorSubject, Observable} from 'rxjs'; -import {MatSort, MatSortHeader, MatSortModule} from '@angular/material/sort'; -import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {BehaviorSubject, Observable} from 'rxjs'; +import {MatLegacyPaginator, MatLegacyPaginatorModule} from '../legacy-paginator/index'; +import {MatSort, MatSortHeader, MatSortModule} from '../sort/index'; +import {MatLegacyTableModule} from './index'; +import {MatLegacyTable} from './table'; +import {MatLegacyTableDataSource} from './table-data-source'; -describe('MDC-based MatTable', () => { +describe('MatTable', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [MatTableModule, MatPaginatorModule, MatSortModule, NoopAnimationsModule], + imports: [ + MatLegacyTableModule, + MatLegacyPaginatorModule, + MatSortModule, + NoopAnimationsModule, + ], declarations: [ MatTableApp, MatTableWithWhenRowApp, @@ -27,18 +34,17 @@ describe('MDC-based MatTable', () => { MatTableWithPaginatorApp, StickyTableApp, TableWithNgContainerRow, - NestedTableApp, - MatFlexTableApp, + NestedHtmlTableApp, ], }).compileComponents(); })); describe('with basic data source', () => { it('should be able to create a table with the right content and without when row', () => { - let fixture = TestBed.createComponent(MatTableApp); + const fixture = TestBed.createComponent(MatTableApp); fixture.detectChanges(); - const tableElement = fixture.nativeElement.querySelector('table')!; + const tableElement = fixture.nativeElement.querySelector('.mat-table')!; const data = fixture.componentInstance.dataSource!.data; expectTableToMatchContent(tableElement, [ ['Column A', 'Column B', 'Column C'], @@ -51,10 +57,10 @@ describe('MDC-based MatTable', () => { }); it('should create a table with special when row', () => { - let fixture = TestBed.createComponent(MatTableWithWhenRowApp); + const fixture = TestBed.createComponent(MatTableWithWhenRowApp); fixture.detectChanges(); - const tableElement = fixture.nativeElement.querySelector('table'); + const tableElement = fixture.nativeElement.querySelector('.mat-table'); expectTableToMatchContent(tableElement, [ ['Column A'], ['a_1'], @@ -66,11 +72,11 @@ describe('MDC-based MatTable', () => { }); it('should create a table with multiTemplateDataRows true', () => { - let fixture = TestBed.createComponent(MatTableWithWhenRowApp); + const fixture = TestBed.createComponent(MatTableWithWhenRowApp); fixture.componentInstance.multiTemplateDataRows = true; fixture.detectChanges(); - const tableElement = fixture.nativeElement.querySelector('table'); + const tableElement = fixture.nativeElement.querySelector('.mat-table'); expectTableToMatchContent(tableElement, [ ['Column A'], ['a_1'], @@ -82,81 +88,26 @@ describe('MDC-based MatTable', () => { ]); }); - it('should be able to render a table correctly with native elements', () => { - let fixture = TestBed.createComponent(NativeHtmlTableApp); - fixture.detectChanges(); - - const tableElement = fixture.nativeElement.querySelector('table'); - const data = fixture.componentInstance.dataSource!.data; - expectTableToMatchContent(tableElement, [ - ['Column A', 'Column B', 'Column C'], - [data[0].a, data[0].b, data[0].c], - [data[1].a, data[1].b, data[1].c], - [data[2].a, data[2].b, data[2].c], - [data[3].a, data[3].b, data[3].c], - ]); - }); - - it('should be able to nest tables', () => { - const fixture = TestBed.createComponent(NestedTableApp); - fixture.detectChanges(); - const outerTable = fixture.nativeElement.querySelector('table'); - const innerTable = outerTable.querySelector('table'); - const outerRows = Array.from(outerTable.querySelector('tbody').rows); - const innerRows = Array.from(innerTable.querySelector('tbody').rows); - - expect(outerTable).toBeTruthy(); - expect(outerRows.map(row => row.cells.length)).toEqual([3, 3, 3, 3]); - - expect(innerTable).toBeTruthy(); - expect(innerRows.map(row => row.cells.length)).toEqual([3, 3, 3, 3]); - }); - - it('should be able to show a message when no data is being displayed in a native table', () => { - const fixture = TestBed.createComponent(NativeHtmlTableApp); - fixture.detectChanges(); - - // Assert that the data is inside the tbody specifically. - const tbody = fixture.nativeElement.querySelector('tbody')!; - const dataSource = fixture.componentInstance.dataSource!; - const initialData = dataSource.data; - - expect(tbody.querySelector('.mat-mdc-no-data-row')).toBeFalsy(); - - dataSource.data = []; - fixture.detectChanges(); - - const noDataRow: HTMLElement = tbody.querySelector('.mat-mdc-no-data-row'); - expect(noDataRow).toBeTruthy(); - expect(noDataRow.getAttribute('role')).toBe('row'); - - dataSource.data = initialData; - fixture.detectChanges(); - - expect(tbody.querySelector('.mat-mdc-no-data-row')).toBeFalsy(); - }); - it('should be able to show a message when no data is being displayed', () => { const fixture = TestBed.createComponent(MatTableApp); fixture.detectChanges(); - // Assert that the data is inside the tbody specifically. - const tbody = fixture.nativeElement.querySelector('tbody')!; + const table = fixture.nativeElement.querySelector('.mat-table')!; const initialData = fixture.componentInstance.dataSource!.data; - expect(tbody.querySelector('.mat-mdc-no-data-row')).toBeFalsy(); + expect(table.querySelector('.mat-no-data-row')).toBeFalsy(); fixture.componentInstance.dataSource!.data = []; fixture.detectChanges(); - const noDataRow: HTMLElement = tbody.querySelector('.mat-mdc-no-data-row'); + const noDataRow: HTMLElement = table.querySelector('.mat-no-data-row'); expect(noDataRow).toBeTruthy(); expect(noDataRow.getAttribute('role')).toBe('row'); fixture.componentInstance.dataSource!.data = initialData; fixture.detectChanges(); - expect(tbody.querySelector('.mat-mdc-no-data-row')).toBeFalsy(); + expect(table.querySelector('.mat-no-data-row')).toBeFalsy(); }); it('should show the no data row if there is no data on init', () => { @@ -164,24 +115,70 @@ describe('MDC-based MatTable', () => { fixture.componentInstance.dataSource!.data = []; fixture.detectChanges(); - const tbody = fixture.nativeElement.querySelector('tbody')!; - expect(tbody.querySelector('.mat-mdc-no-data-row')).toBeTruthy(); + const table = fixture.nativeElement.querySelector('.mat-table')!; + expect(table.querySelector('.mat-no-data-row')).toBeTruthy(); }); + }); - it('should set the content styling class on the tbody', () => { - let fixture = TestBed.createComponent(NativeHtmlTableApp); - fixture.detectChanges(); + it('should be able to render a table correctly with native elements', () => { + const fixture = TestBed.createComponent(NativeHtmlTableApp); + fixture.detectChanges(); - const tbodyElement = fixture.nativeElement.querySelector('tbody'); - expect(tbodyElement.classList).toContain('mdc-data-table__content'); - }); + const tableElement = fixture.nativeElement.querySelector('table'); + const data = fixture.componentInstance.dataSource!.data; + expectTableToMatchContent(tableElement, [ + ['Column A', 'Column B', 'Column C'], + [data[0].a, data[0].b, data[0].c], + [data[1].a, data[1].b, data[1].c], + [data[2].a, data[2].b, data[2].c], + [data[3].a, data[3].b, data[3].c], + ]); + }); + + it('should be able to nest tables', () => { + const fixture = TestBed.createComponent(NestedHtmlTableApp); + fixture.detectChanges(); + const outerTable = fixture.nativeElement.querySelector('table'); + const innerTable = outerTable.querySelector('table'); + const outerRows = Array.from(outerTable.querySelector('tbody').rows); + const innerRows = Array.from(innerTable.querySelector('tbody').rows); + + expect(outerTable).toBeTruthy(); + expect(outerRows.map(row => row.cells.length)).toEqual([3, 3, 3, 3]); + + expect(innerTable).toBeTruthy(); + expect(innerRows.map(row => row.cells.length)).toEqual([3, 3, 3, 3]); + }); + + it('should be able to show a message when no data is being displayed in a native table', () => { + const fixture = TestBed.createComponent(NativeHtmlTableApp); + fixture.detectChanges(); + + // Assert that the data is inside the tbody specifically. + const tbody = fixture.nativeElement.querySelector('tbody')!; + const dataSource = fixture.componentInstance.dataSource!; + const initialData = dataSource.data; + + expect(tbody.querySelector('.mat-no-data-row')).toBeFalsy(); + + dataSource.data = []; + fixture.detectChanges(); + + const noDataRow: HTMLElement = tbody.querySelector('.mat-no-data-row'); + expect(noDataRow).toBeTruthy(); + expect(noDataRow.getAttribute('role')).toBe('row'); + + dataSource.data = initialData; + fixture.detectChanges(); + + expect(tbody.querySelector('.mat-no-data-row')).toBeFalsy(); }); it('should render with MatTableDataSource and sort', () => { - let fixture = TestBed.createComponent(MatTableWithSortApp); + const fixture = TestBed.createComponent(MatTableWithSortApp); fixture.detectChanges(); - const tableElement = fixture.nativeElement.querySelector('table')!; + const tableElement = fixture.nativeElement.querySelector('.mat-table')!; const data = fixture.componentInstance.dataSource!.data; expectTableToMatchContent(tableElement, [ ['Column A', 'Column B', 'Column C'], @@ -192,10 +189,10 @@ describe('MDC-based MatTable', () => { }); it('should render with MatTableDataSource and pagination', () => { - let fixture = TestBed.createComponent(MatTableWithPaginatorApp); + const fixture = TestBed.createComponent(MatTableWithPaginatorApp); fixture.detectChanges(); - const tableElement = fixture.nativeElement.querySelector('table')!; + const tableElement = fixture.nativeElement.querySelector('.mat-table')!; const data = fixture.componentInstance.dataSource!.data; expectTableToMatchContent(tableElement, [ ['Column A', 'Column B', 'Column C'], @@ -206,12 +203,12 @@ describe('MDC-based MatTable', () => { }); it('should apply custom sticky CSS class to sticky cells', fakeAsync(() => { - let fixture = TestBed.createComponent(StickyTableApp); + const fixture = TestBed.createComponent(StickyTableApp); fixture.detectChanges(); flushMicrotasks(); - const stuckCellElement = fixture.nativeElement.querySelector('table th')!; - expect(stuckCellElement.classList).toContain('mat-mdc-table-sticky'); + const stuckCellElement = fixture.nativeElement.querySelector('.mat-table th')!; + expect(stuckCellElement.classList).toContain('mat-table-sticky'); })); // Note: needs to be fakeAsync so it catches the error. @@ -224,24 +221,17 @@ describe('MDC-based MatTable', () => { }).not.toThrow(); })); - it('should be able to render a flexbox-based table', () => { - expect(() => { - const fixture = TestBed.createComponent(MatFlexTableApp); - fixture.detectChanges(); - }).not.toThrow(); - }); - describe('with MatTableDataSource and sort/pagination/filter', () => { let tableElement: HTMLElement; let fixture: ComponentFixture; - let dataSource: MatTableDataSource; + let dataSource: MatLegacyTableDataSource; let component: ArrayDataSourceMatTableApp; beforeEach(fakeAsync(() => { fixture = TestBed.createComponent(ArrayDataSourceMatTableApp); fixture.detectChanges(); - tableElement = fixture.nativeElement.querySelector('table'); + tableElement = fixture.nativeElement.querySelector('.mat-table'); component = fixture.componentInstance; dataSource = fixture.componentInstance.dataSource; })); @@ -675,37 +665,35 @@ class FakeDataSource extends DataSource { @Component({ template: ` -
+ - - - + Column A + {{row.a}} + Footer A - - - + Column B + {{row.b}} + Footer B - - - + Column C + {{row.c}} + Footer C - + fourth_row - - - - - - - -
Column A {{row.a}} Footer A Column B {{row.b}} Footer B Column C {{row.c}} Footer C fourth_row
No data
+ + + +
No data
+ + `, }) class MatTableApp { @@ -713,7 +701,7 @@ class MatTableApp { columnsToRender = ['column_a', 'column_b', 'column_c']; isFourthRow = (i: number, _rowData: TestData) => i == 3; - @ViewChild(MatTable) table: MatTable; + @ViewChild(MatLegacyTable) table: MatLegacyTable; } @Component({ @@ -746,37 +734,34 @@ class NativeHtmlTableApp { dataSource: FakeDataSource | null = new FakeDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; - @ViewChild(MatTable) table: MatTable; + @ViewChild(MatLegacyTable) table: MatLegacyTable; } @Component({ template: ` - + - +
Column A Column A {{row.a}} Column B Column B - - - @@ -786,7 +771,7 @@ class NativeHtmlTableApp { - + @@ -795,7 +780,7 @@ class NativeHtmlTableApp {
Column A {{row.a}} Footer A Column B {{row.b}} Footer B Column C {{row.c}} Footer C
Column C Column C {{row.c}}
`, }) -class NestedTableApp { +class NestedHtmlTableApp { dataSource: FakeDataSource | null = new FakeDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; } @@ -817,27 +802,27 @@ class StickyTableApp { dataSource = new FakeDataSource(); columnsToRender = ['column_a']; - @ViewChild(MatTable) table: MatTable; + @ViewChild(MatLegacyTable) table: MatLegacyTable; } @Component({ template: ` - + - - - + Column A + {{row.a}} + Footer A - + fourth_row - - - - -
Column A {{row.a}} Footer A fourth_row
+ + + + + `, }) class MatTableWithWhenRowApp { @@ -845,45 +830,45 @@ class MatTableWithWhenRowApp { dataSource: FakeDataSource | null = new FakeDataSource(); isFourthRow = (i: number, _rowData: TestData) => i == 3; - @ViewChild(MatTable) table: MatTable; + @ViewChild(MatLegacyTable) table: MatLegacyTable; } @Component({ template: ` - + - - - + Column A + {{row.a}} + Footer A - - - + Column B + {{row.b}} + Footer B - - - + Column C + {{row.c}} + Footer C - - - -
Column A {{row.a}} Footer A Column B {{row.b}} Footer B Column C {{row.c}} Footer C
+ + + + `, }) class ArrayDataSourceMatTableApp implements AfterViewInit { underlyingDataSource = new FakeDataSource(); - dataSource = new MatTableDataSource(); + dataSource = new MatLegacyTableDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; - @ViewChild(MatTable) table: MatTable; - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatLegacyTable) table: MatLegacyTable; + @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; @ViewChild(MatSort) sort: MatSort; @ViewChild(MatSortHeader) sortHeader: MatSortHeader; @@ -908,33 +893,33 @@ class ArrayDataSourceMatTableApp implements AfterViewInit { @Component({ template: ` - + - - + Column A + {{row.a}} - - + Column B + {{row.b}} - - + Column C + {{row.c}} - - -
Column A {{row.a}} Column B {{row.b}} Column C {{row.c}}
+ + + `, }) class MatTableWithSortApp implements OnInit { underlyingDataSource = new FakeDataSource(); - dataSource = new MatTableDataSource(); + dataSource = new MatLegacyTableDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; - @ViewChild(MatTable) table: MatTable; + @ViewChild(MatLegacyTable) table: MatLegacyTable; @ViewChild(MatSort) sort: MatSort; constructor() { @@ -957,36 +942,36 @@ class MatTableWithSortApp implements OnInit { @Component({ template: ` - + - - + Column A + {{row.a}} - - + Column B + {{row.b}} - - + Column C + {{row.c}} - - -
Column A {{row.a}} Column B {{row.b}} Column C {{row.c}}
+ + + `, }) class MatTableWithPaginatorApp implements OnInit { underlyingDataSource = new FakeDataSource(); - dataSource = new MatTableDataSource(); + dataSource = new MatLegacyTableDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; - @ViewChild(MatTable) table: MatTable; - @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatLegacyTable) table: MatLegacyTable; + @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; constructor() { this.underlyingDataSource.data = []; @@ -1008,17 +993,17 @@ class MatTableWithPaginatorApp implements OnInit { @Component({ template: ` - + - - + Column A + {{row.a}} - + - + -
Column A{{row.a}}
+ `, }) class TableWithNgContainerRow { @@ -1026,58 +1011,20 @@ class TableWithNgContainerRow { columnsToRender = ['column_a']; } -@Component({ - template: ` - - - Column A - {{row.a}} - Footer A - - - - Column B - {{row.b}} - Footer B - - - - Column C - {{row.c}} - Footer C - - - - fourth_row - - - - -
No data
- - - `, -}) -class MatFlexTableApp { - dataSource: FakeDataSource | null = new FakeDataSource(); - columnsToRender = ['column_a', 'column_b', 'column_c']; - @ViewChild(MatTable) table: MatTable; -} - function getElements(element: Element, query: string): Element[] { return [].slice.call(element.querySelectorAll(query)); } function getHeaderRows(tableElement: Element): Element[] { - return [].slice.call(tableElement.querySelectorAll('.mat-mdc-header-row'))!; + return [].slice.call(tableElement.querySelectorAll('.mat-header-row'))!; } function getFooterRows(tableElement: Element): Element[] { - return [].slice.call(tableElement.querySelectorAll('.mat-mdc-footer-row'))!; + return [].slice.call(tableElement.querySelectorAll('.mat-footer-row'))!; } function getRows(tableElement: Element): Element[] { - return getElements(tableElement, '.mat-mdc-row'); + return getElements(tableElement, '.mat-row'); } function getCells(row: Element): Element[] { @@ -1085,15 +1032,30 @@ function getCells(row: Element): Element[] { return []; } - return getElements(row, 'td'); + let cells = getElements(row, 'mat-cell'); + if (!cells.length) { + cells = getElements(row, 'td'); + } + + return cells; } function getHeaderCells(headerRow: Element): Element[] { - return getElements(headerRow, 'th'); + let cells = getElements(headerRow, 'mat-header-cell'); + if (!cells.length) { + cells = getElements(headerRow, 'th'); + } + + return cells; } function getFooterCells(footerRow: Element): Element[] { - return getElements(footerRow, 'td'); + let cells = getElements(footerRow, 'mat-footer-cell'); + if (!cells.length) { + cells = getElements(footerRow, 'td'); + } + + return cells; } function getActualTableContent(tableElement: Element): string[][] { diff --git a/src/material-experimental/mdc-table/table.ts b/src/material/legacy-table/table.ts similarity index 65% rename from src/material-experimental/mdc-table/table.ts rename to src/material/legacy-table/table.ts index 5930ade745b4..8fdac1adc36d 100644 --- a/src/material-experimental/mdc-table/table.ts +++ b/src/material/legacy-table/table.ts @@ -6,21 +6,15 @@ * found in the LICENSE file at https://angular.io/license */ -import { - ChangeDetectionStrategy, - Component, - Directive, - OnInit, - ViewEncapsulation, -} from '@angular/core'; import { CDK_TABLE_TEMPLATE, CdkTable, + CDK_TABLE, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER, - CDK_TABLE, STICKY_POSITIONING_LISTENER, } from '@angular/cdk/table'; +import {ChangeDetectionStrategy, Component, Directive, ViewEncapsulation} from '@angular/core'; import { _DisposeViewRepeaterStrategy, _RecycleViewRepeaterStrategy, @@ -35,24 +29,27 @@ import { selector: 'mat-table[recycleRows], table[mat-table][recycleRows]', providers: [{provide: _VIEW_REPEATER_STRATEGY, useClass: _RecycleViewRepeaterStrategy}], }) -export class MatRecycleRows {} +export class MatLegacyRecycleRows {} +/** + * Wrapper for the CdkTable with Material design styles. + */ @Component({ selector: 'mat-table, table[mat-table]', exportAs: 'matTable', template: CDK_TABLE_TEMPLATE, styleUrls: ['table.css'], host: { - 'class': 'mat-mdc-table mdc-data-table__table', - '[class.mdc-table-fixed-layout]': 'fixedLayout', + 'class': 'mat-table', + '[class.mat-table-fixed-layout]': 'fixedLayout', }, providers: [ - {provide: CdkTable, useExisting: MatTable}, - {provide: CDK_TABLE, useExisting: MatTable}, - {provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler}, // TODO(michaeljamesparsons) Abstract the view repeater strategy to a directive API so this code // is only included in the build if used. {provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy}, + {provide: CdkTable, useExisting: MatLegacyTable}, + {provide: CDK_TABLE, useExisting: MatLegacyTable}, + {provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler}, // Prevent nested tables from seeing this table's StickyPositioningListener. {provide: STICKY_POSITIONING_LISTENER, useValue: null}, ], @@ -61,22 +58,10 @@ export class MatRecycleRows {} // tslint:disable-next-line:validate-decorators changeDetection: ChangeDetectionStrategy.Default, }) -export class MatTable extends CdkTable implements OnInit { +export class MatLegacyTable extends CdkTable { /** Overrides the sticky CSS class set by the `CdkTable`. */ - protected override stickyCssClass = 'mat-mdc-table-sticky'; + protected override stickyCssClass = 'mat-table-sticky'; /** Overrides the need to add position: sticky on every sticky cell element in `CdkTable`. */ protected override needsPositionStickyOnElement = false; - - override ngOnInit() { - super.ngOnInit(); - - // After ngOnInit, the `CdkTable` has created and inserted the table sections (thead, tbody, - // tfoot). MDC requires the `mdc-data-table__content` class to be added to the body. Note that - // this only applies to native tables, because we don't wrap the content of flexbox-based ones. - if (this._isNativeHtmlTable) { - const tbody = this._elementRef.nativeElement.querySelector('tbody'); - tbody.classList.add('mdc-data-table__content'); - } - } } diff --git a/src/material-experimental/mdc-table/testing/BUILD.bazel b/src/material/legacy-table/testing/BUILD.bazel similarity index 60% rename from src/material-experimental/mdc-table/testing/BUILD.bazel rename to src/material/legacy-table/testing/BUILD.bazel index a715db5663e0..2d78fe518c1f 100644 --- a/src/material-experimental/mdc-table/testing/BUILD.bazel +++ b/src/material/legacy-table/testing/BUILD.bazel @@ -19,13 +19,27 @@ filegroup( srcs = glob(["**/*.ts"]), ) +ng_test_library( + name = "harness_tests_lib", + srcs = ["shared.spec.ts"], + deps = [ + ":testing", + "//src/cdk/testing", + "//src/cdk/testing/testbed", + "//src/material/legacy-table", + ], +) + ng_test_library( name = "unit_tests_lib", - srcs = glob(["**/*.spec.ts"]), + srcs = glob( + ["**/*.spec.ts"], + exclude = ["shared.spec.ts"], + ), deps = [ + ":harness_tests_lib", ":testing", - "//src/material-experimental/mdc-table", - "//src/material/table/testing:harness_tests_lib", + "//src/material/legacy-table", ], ) diff --git a/src/material/legacy-table/testing/cell-harness.ts b/src/material/legacy-table/testing/cell-harness.ts new file mode 100644 index 000000000000..f56ed9da7a57 --- /dev/null +++ b/src/material/legacy-table/testing/cell-harness.ts @@ -0,0 +1,57 @@ +/** + * @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 {HarnessPredicate} from '@angular/cdk/testing'; +import {_MatCellHarnessBase, CellHarnessFilters} from '@angular/material/table/testing'; + +/** Harness for interacting with a standard Angular Material table cell. */ +export class MatLegacyCellHarness extends _MatCellHarnessBase { + /** The selector for the host element of a `MatCellHarness` instance. */ + static hostSelector = '.mat-cell'; + + /** + * Gets a `HarnessPredicate` that can be used to search for a table cell with specific attributes. + * @param options Options for narrowing the search + * @return a `HarnessPredicate` configured with the given options. + */ + static with(options: CellHarnessFilters = {}): HarnessPredicate { + return _MatCellHarnessBase._getCellPredicate(MatLegacyCellHarness, options); + } +} + +/** Harness for interacting with a standard Angular Material table header cell. */ +export class MatLegacyHeaderCellHarness extends _MatCellHarnessBase { + /** The selector for the host element of a `MatHeaderCellHarness` instance. */ + static hostSelector = '.mat-header-cell'; + + /** + * Gets a `HarnessPredicate` that can be used to search for + * a table header cell with specific attributes. + * @param options Options for narrowing the search + * @return a `HarnessPredicate` configured with the given options. + */ + static with(options: CellHarnessFilters = {}): HarnessPredicate { + return _MatCellHarnessBase._getCellPredicate(MatLegacyHeaderCellHarness, options); + } +} + +/** Harness for interacting with a standard Angular Material table footer cell. */ +export class MatLegacyFooterCellHarness extends _MatCellHarnessBase { + /** The selector for the host element of a `MatFooterCellHarness` instance. */ + static hostSelector = '.mat-footer-cell'; + + /** + * Gets a `HarnessPredicate` that can be used to search for + * a table footer cell with specific attributes. + * @param options Options for narrowing the search + * @return a `HarnessPredicate` configured with the given options. + */ + static with(options: CellHarnessFilters = {}): HarnessPredicate { + return _MatCellHarnessBase._getCellPredicate(MatLegacyFooterCellHarness, options); + } +} diff --git a/src/material-experimental/mdc-table/testing/index.ts b/src/material/legacy-table/testing/index.ts similarity index 100% rename from src/material-experimental/mdc-table/testing/index.ts rename to src/material/legacy-table/testing/index.ts diff --git a/src/material/legacy-table/testing/public-api.ts b/src/material/legacy-table/testing/public-api.ts new file mode 100644 index 000000000000..58b66b78b22a --- /dev/null +++ b/src/material/legacy-table/testing/public-api.ts @@ -0,0 +1,21 @@ +/** + * @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 + */ + +export * from './table-harness'; +export * from './row-harness'; +export * from './cell-harness'; +export { + CellHarnessFilters as LegacyCellHarnessFilters, + RowHarnessFilters as LegacyRowHarnessFilters, + TableHarnessFilters as LegacyTableHarnessFilters, + MatRowHarnessColumnsText as MatLegacyRowHarnessColumnsText, + MatTableHarnessColumnsText as MatLegacyTableHarnessColumnsText, + _MatCellHarnessBase as _MatLegacyCellHarnessBase, + _MatRowHarnessBase as _MatLegacyRowHarnessBase, + _MatTableHarnessBase as _MatLegacyTableHarnessBase, +} from '@angular/material/table/testing'; diff --git a/src/material/legacy-table/testing/row-harness.ts b/src/material/legacy-table/testing/row-harness.ts new file mode 100644 index 000000000000..49de636c1000 --- /dev/null +++ b/src/material/legacy-table/testing/row-harness.ts @@ -0,0 +1,74 @@ +/** + * @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 {HarnessPredicate} from '@angular/cdk/testing'; +import { + MatLegacyCellHarness, + MatLegacyFooterCellHarness, + MatLegacyHeaderCellHarness, +} from './cell-harness'; +import {_MatRowHarnessBase, RowHarnessFilters} from '@angular/material/table/testing'; + +/** Harness for interacting with a standard Angular Material table row. */ +export class MatLegacyRowHarness extends _MatRowHarnessBase< + typeof MatLegacyCellHarness, + MatLegacyCellHarness +> { + /** The selector for the host element of a `MatRowHarness` instance. */ + static hostSelector = '.mat-row'; + protected _cellHarness = MatLegacyCellHarness; + + /** + * Gets a `HarnessPredicate` that can be used to search for a table row with specific attributes. + * @param options Options for narrowing the search + * @return a `HarnessPredicate` configured with the given options. + */ + static with(options: RowHarnessFilters = {}): HarnessPredicate { + return new HarnessPredicate(MatLegacyRowHarness, options); + } +} + +/** Harness for interacting with a standard Angular Material table header row. */ +export class MatLegacyHeaderRowHarness extends _MatRowHarnessBase< + typeof MatLegacyHeaderCellHarness, + MatLegacyHeaderCellHarness +> { + /** The selector for the host element of a `MatHeaderRowHarness` instance. */ + static hostSelector = '.mat-header-row'; + protected _cellHarness = MatLegacyHeaderCellHarness; + + /** + * Gets a `HarnessPredicate` that can be used to search for + * a table header row with specific attributes. + * @param options Options for narrowing the search + * @return a `HarnessPredicate` configured with the given options. + */ + static with(options: RowHarnessFilters = {}): HarnessPredicate { + return new HarnessPredicate(MatLegacyHeaderRowHarness, options); + } +} + +/** Harness for interacting with a standard Angular Material table footer row. */ +export class MatLegacyFooterRowHarness extends _MatRowHarnessBase< + typeof MatLegacyFooterCellHarness, + MatLegacyFooterCellHarness +> { + /** The selector for the host element of a `MatFooterRowHarness` instance. */ + static hostSelector = '.mat-footer-row'; + protected _cellHarness = MatLegacyFooterCellHarness; + + /** + * Gets a `HarnessPredicate` that can be used to search for + * a table footer row cell with specific attributes. + * @param options Options for narrowing the search + * @return a `HarnessPredicate` configured with the given options. + */ + static with(options: RowHarnessFilters = {}): HarnessPredicate { + return new HarnessPredicate(MatLegacyFooterRowHarness, options); + } +} diff --git a/src/material/table/testing/shared.spec.ts b/src/material/legacy-table/testing/shared.spec.ts similarity index 97% rename from src/material/table/testing/shared.spec.ts rename to src/material/legacy-table/testing/shared.spec.ts index b02a1c1cff5d..588d4855ffdf 100644 --- a/src/material/table/testing/shared.spec.ts +++ b/src/material/legacy-table/testing/shared.spec.ts @@ -2,13 +2,13 @@ import {HarnessLoader, parallel} from '@angular/cdk/testing'; import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; import {Component} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {MatTableModule} from '@angular/material/table'; -import {MatTableHarness} from './table-harness'; +import {MatLegacyTableModule} from '@angular/material/legacy-table'; +import {MatLegacyTableHarness} from './table-harness'; /** Shared tests to run on both the original and MDC-based table. */ export function runHarnessTests( - tableModule: typeof MatTableModule, - tableHarness: typeof MatTableHarness, + tableModule: typeof MatLegacyTableModule, + tableHarness: typeof MatLegacyTableHarness, ) { let fixture: ComponentFixture; let loader: HarnessLoader; diff --git a/src/material/legacy-table/testing/table-harness.spec.ts b/src/material/legacy-table/testing/table-harness.spec.ts new file mode 100644 index 000000000000..aae5d251d6a0 --- /dev/null +++ b/src/material/legacy-table/testing/table-harness.spec.ts @@ -0,0 +1,7 @@ +import {MatLegacyTableModule} from '@angular/material/legacy-table'; +import {runHarnessTests} from '@angular/material/legacy-table/testing/shared.spec'; +import {MatLegacyTableHarness} from './table-harness'; + +describe('Non-MDC-based MatTableHarness', () => { + runHarnessTests(MatLegacyTableModule, MatLegacyTableHarness); +}); diff --git a/src/material/legacy-table/testing/table-harness.ts b/src/material/legacy-table/testing/table-harness.ts new file mode 100644 index 000000000000..c6616ffcf212 --- /dev/null +++ b/src/material/legacy-table/testing/table-harness.ts @@ -0,0 +1,40 @@ +/** + * @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 {HarnessPredicate} from '@angular/cdk/testing'; +import { + MatLegacyFooterRowHarness, + MatLegacyHeaderRowHarness, + MatLegacyRowHarness, +} from './row-harness'; +import {_MatTableHarnessBase, TableHarnessFilters} from '@angular/material/table/testing'; + +/** Harness for interacting with a standard mat-table in tests. */ +export class MatLegacyTableHarness extends _MatTableHarnessBase< + typeof MatLegacyHeaderRowHarness, + MatLegacyHeaderRowHarness, + typeof MatLegacyRowHarness, + MatLegacyRowHarness, + typeof MatLegacyFooterRowHarness, + MatLegacyFooterRowHarness +> { + /** The selector for the host element of a `MatTableHarness` instance. */ + static hostSelector = '.mat-table'; + protected _headerRowHarness = MatLegacyHeaderRowHarness; + protected _rowHarness = MatLegacyRowHarness; + protected _footerRowHarness = MatLegacyFooterRowHarness; + + /** + * Gets a `HarnessPredicate` that can be used to search for a table with specific attributes. + * @param options Options for narrowing the search + * @return a `HarnessPredicate` configured with the given options. + */ + static with(options: TableHarnessFilters = {}): HarnessPredicate { + return new HarnessPredicate(MatLegacyTableHarness, options); + } +} diff --git a/src/material/table/text-column.spec.ts b/src/material/legacy-table/text-column.spec.ts similarity index 94% rename from src/material/table/text-column.spec.ts rename to src/material/legacy-table/text-column.spec.ts index 5bbb1f484ae0..de9f54823f62 100644 --- a/src/material/table/text-column.spec.ts +++ b/src/material/legacy-table/text-column.spec.ts @@ -1,6 +1,6 @@ import {Component} from '@angular/core'; import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing'; -import {MatTableModule} from './table-module'; +import {MatLegacyTableModule} from './table-module'; import {expectTableToMatchContent} from './table.spec'; describe('MatTextColumn', () => { @@ -9,7 +9,7 @@ describe('MatTextColumn', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [MatTableModule], + imports: [MatLegacyTableModule], declarations: [BasicTextColumnApp], }).compileComponents(); })); diff --git a/src/material-experimental/mdc-table/text-column.ts b/src/material/legacy-table/text-column.ts similarity index 96% rename from src/material-experimental/mdc-table/text-column.ts rename to src/material/legacy-table/text-column.ts index 31616aaca24e..b2a5bab6b9b0 100644 --- a/src/material-experimental/mdc-table/text-column.ts +++ b/src/material/legacy-table/text-column.ts @@ -39,4 +39,4 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co // tslint:disable-next-line:validate-decorators changeDetection: ChangeDetectionStrategy.Default, }) -export class MatTextColumn extends CdkTextColumn {} +export class MatLegacyTextColumn extends CdkTextColumn {} diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.spec.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.spec.ts index 6c6b9f4f1b4e..cab0a955b92a 100644 --- a/src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.spec.ts +++ b/src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.spec.ts @@ -23,13 +23,13 @@ describe('table styles', () => { ` @use '@angular/material' as mat; $theme: (); - @include mat.table-theme($theme); + @include mat.legacy-table-theme($theme); `, ` @use '@angular/material' as mat; $theme: (); - @include mat.mdc-table-theme($theme); - @include mat.mdc-table-typography($theme); + @include mat.table-theme($theme); + @include mat.table-typography($theme); `, ); }); @@ -39,13 +39,13 @@ describe('table styles', () => { ` @use '@angular/material' as arbitrary; $theme: (); - @include arbitrary.table-theme($theme); + @include arbitrary.legacy-table-theme($theme); `, ` @use '@angular/material' as arbitrary; $theme: (); - @include arbitrary.mdc-table-theme($theme); - @include arbitrary.mdc-table-typography($theme); + @include arbitrary.table-theme($theme); + @include arbitrary.table-typography($theme); `, ); }); @@ -56,17 +56,17 @@ describe('table styles', () => { @use '@angular/material' as mat; $light-theme: (); $dark-theme: (); - @include mat.table-theme($light-theme); - @include mat.table-theme($dark-theme); + @include mat.legacy-table-theme($light-theme); + @include mat.legacy-table-theme($dark-theme); `, ` @use '@angular/material' as mat; $light-theme: (); $dark-theme: (); - @include mat.mdc-table-theme($light-theme); - @include mat.mdc-table-typography($light-theme); - @include mat.mdc-table-theme($dark-theme); - @include mat.mdc-table-typography($dark-theme); + @include mat.table-theme($light-theme); + @include mat.table-typography($light-theme); + @include mat.table-theme($dark-theme); + @include mat.table-typography($dark-theme); `, ); }); @@ -78,7 +78,7 @@ describe('table styles', () => { $theme: (); - @include mat.table-theme($theme); + @include mat.legacy-table-theme($theme); `, @@ -87,8 +87,8 @@ describe('table styles', () => { $theme: (); - @include mat.mdc-table-theme($theme); - @include mat.mdc-table-typography($theme); + @include mat.table-theme($theme); + @include mat.table-typography($theme); `, diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.ts index 15304e3c4224..e9fd05f6d358 100644 --- a/src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.ts +++ b/src/material/schematics/ng-generate/mdc-migration/rules/components/table/table-styles.ts @@ -17,8 +17,8 @@ export class TableStylesMigrator extends StyleMigrator { mixinChanges = [ { - old: 'table-theme', - new: ['mdc-table-theme', 'mdc-table-typography'], + old: 'legacy-table-theme', + new: ['table-theme', 'table-typography'], }, ]; diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/import-replacements.ts b/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/import-replacements.ts index 4f8292707893..913585394de6 100644 --- a/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/import-replacements.ts +++ b/src/material/schematics/ng-generate/mdc-migration/rules/ts-migration/import-replacements.ts @@ -84,8 +84,8 @@ export const IMPORT_REPLACEMENTS: {[component: string]: {old: string; new: strin new: '@angular/material/snack-bar', }, 'table': { - old: '@angular/material/table', - new: '@angular/material-experimental/mdc-table', + old: '@angular/material/legacy-table', + new: '@angular/material/table', }, 'tabs': { old: '@angular/material/legacy-tabs', diff --git a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index 7df477cfd877..a2218c589246 100644 --- a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -2,7 +2,7 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { MatPaginatorModule } from '@angular/material/legacy-paginator'; import { MatSortModule } from '@angular/material/sort'; -import { MatTableModule } from '@angular/material/table'; +import { MatTableModule } from '@angular/material/legacy-table'; import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component'; diff --git a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template index d26c772dbd75..a54f2bd23040 100644 --- a/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template +++ b/src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template @@ -1,7 +1,7 @@ import { AfterViewInit, Component, ViewChild<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core'; import { MatPaginator } from '@angular/material/legacy-paginator'; import { MatSort } from '@angular/material/sort'; -import { MatTable } from '@angular/material/table'; +import { MatTable } from '@angular/material/legacy-table'; import { <%= classify(name) %>DataSource, <%= classify(name) %>Item } from './<%= dasherize(name) %>-datasource'; @Component({ diff --git a/src/material/schematics/ng-generate/table/index.spec.ts b/src/material/schematics/ng-generate/table/index.spec.ts index 0a96de2334a7..25a9619ccc32 100644 --- a/src/material/schematics/ng-generate/table/index.spec.ts +++ b/src/material/schematics/ng-generate/table/index.spec.ts @@ -55,7 +55,9 @@ describe('material-table-schematic', () => { expect(moduleContent).toContain('MatPaginatorModule'); expect(moduleContent).toContain('MatSortModule'); - expect(moduleContent).toContain(`import { MatTableModule } from '@angular/material/table';`); + expect(moduleContent).toContain( + `import { MatTableModule } from '@angular/material/legacy-table';`, + ); expect(moduleContent).toContain(`import { MatSortModule } from '@angular/material/sort';`); expect(moduleContent).toContain( `import { MatPaginatorModule } from '@angular/material/legacy-paginator';`, diff --git a/src/material/schematics/ng-generate/table/index.ts b/src/material/schematics/ng-generate/table/index.ts index a6fef947bd70..0282f75da1f0 100644 --- a/src/material/schematics/ng-generate/table/index.ts +++ b/src/material/schematics/ng-generate/table/index.ts @@ -39,7 +39,7 @@ export default function (options: Schema): Rule { function addTableModulesToModule(options: Schema) { return async (host: Tree) => { const modulePath = (await findModuleFromOptions(host, options))!; - addModuleImportToModule(host, modulePath, 'MatTableModule', '@angular/material/table'); + addModuleImportToModule(host, modulePath, 'MatTableModule', '@angular/material/legacy-table'); addModuleImportToModule( host, modulePath, diff --git a/src/material/schematics/ng-update/test-cases/v12/misc/theming-api-v12.spec.ts b/src/material/schematics/ng-update/test-cases/v12/misc/theming-api-v12.spec.ts index 33bc8656bf5c..41e86f7bb06e 100644 --- a/src/material/schematics/ng-update/test-cases/v12/misc/theming-api-v12.spec.ts +++ b/src/material/schematics/ng-update/test-cases/v12/misc/theming-api-v12.spec.ts @@ -378,7 +378,7 @@ describe('v12 theming API migration', () => { `));`, `@include mat-button-theme($candy-app-theme);`, - `@include mat-table-theme($candy-app-theme);`, + `@include mat.table-theme($candy-app-theme);`, `@include mat-expansion-panel-theme($candy-app-theme);`, `@include mat-datepicker-theme($candy-app-theme);`, `@include mat-option-theme($candy-app-theme);`, @@ -431,7 +431,7 @@ describe('v12 theming API migration', () => { `));`, `@include mat-button-theme($candy-app-theme);`, - `@include mat-table-theme($candy-app-theme);`, + `@include mat.table-theme($candy-app-theme);`, `@include mat-datepicker-theme($candy-app-theme);`, `@include mat-option-theme($candy-app-theme);`, ]); @@ -942,7 +942,7 @@ describe('v12 theming API migration', () => { `));`, `@include mat-button-theme($candy-app-theme);`, - `@include mat-table-theme($candy-app-theme);`, + `@include mat.table-theme($candy-app-theme);`, `@include mat-datepicker-theme($candy-app-theme);`, `@include mat-option-theme($candy-app-theme);`, ]); diff --git a/src/material/sort/BUILD.bazel b/src/material/sort/BUILD.bazel index 1986448be175..2c2a228ebbee 100644 --- a/src/material/sort/BUILD.bazel +++ b/src/material/sort/BUILD.bazel @@ -55,7 +55,7 @@ ng_test_library( "//src/cdk/collections", "//src/cdk/table", "//src/cdk/testing/private", - "//src/material/table", + "//src/material/legacy-table", "@npm//@angular/platform-browser", "@npm//rxjs", ], diff --git a/src/material/sort/sort.spec.ts b/src/material/sort/sort.spec.ts index 6d06905ba81b..349b1ed86465 100644 --- a/src/material/sort/sort.spec.ts +++ b/src/material/sort/sort.spec.ts @@ -12,7 +12,7 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {By} from '@angular/platform-browser'; import {Observable} from 'rxjs'; import {map} from 'rxjs/operators'; -import {MatTableModule} from '../table/index'; +import {MatLegacyTableModule} from '../legacy-table/index'; import { MAT_SORT_DEFAULT_OPTIONS, MatSort, @@ -35,7 +35,7 @@ describe('MatSort', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [MatSortModule, MatTableModule, CdkTableModule, NoopAnimationsModule], + imports: [MatSortModule, MatLegacyTableModule, CdkTableModule, NoopAnimationsModule], declarations: [ SimpleMatSortApp, CdkTableMatSortApp, @@ -507,7 +507,7 @@ describe('MatSort', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [MatSortModule, MatTableModule, CdkTableModule, NoopAnimationsModule], + imports: [MatSortModule, MatLegacyTableModule, CdkTableModule, NoopAnimationsModule], declarations: [MatSortWithoutExplicitInputs], providers: [ { @@ -541,7 +541,7 @@ describe('MatSort', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [MatSortModule, MatTableModule, CdkTableModule, NoopAnimationsModule], + imports: [MatSortModule, MatLegacyTableModule, CdkTableModule, NoopAnimationsModule], declarations: [MatSortWithoutInputs], providers: [ { diff --git a/src/material/table/BUILD.bazel b/src/material/table/BUILD.bazel index 430a9fc45a5f..9bfa1b8d0ed6 100644 --- a/src/material/table/BUILD.bazel +++ b/src/material/table/BUILD.bazel @@ -1,6 +1,8 @@ +load("//src/e2e-app:test_suite.bzl", "e2e_test_suite") load( "//tools:defaults.bzl", "markdown_to_html", + "ng_e2e_test_library", "ng_module", "ng_test_library", "ng_web_test_suite", @@ -16,31 +18,23 @@ ng_module( ["**/*.ts"], exclude = ["**/*.spec.ts"], ), - assets = [":table.css"], + assets = [":table_scss"] + glob(["**/*.html"]), deps = [ - "@npm//@angular/core", - "@npm//rxjs", - "//src/cdk/coercion", "//src/cdk/table", "//src/material/core", - "//src/material/legacy-paginator", + "//src/material/paginator", "//src/material/sort", - ] + glob(["**/*.html"]), + "@npm//@angular/core", + ], ) sass_library( name = "table_scss_lib", srcs = glob(["**/_*.scss"]), - deps = ["//src/material/core:core_scss_lib"], -) - -sass_library( - name = "table_flex_scss_lib", - srcs = [ - "_table-flex-styles.import.scss", - "_table-flex-styles.scss", + deps = [ + "//:mdc_sass_lib", + "//src/material/core:core_scss_lib", ], - deps = ["//src/material/core:core_scss_lib"], ) sass_binary( @@ -48,20 +42,34 @@ sass_binary( src = "table.scss", deps = [ ":table_flex_scss_lib", + "//:mdc_sass_lib", "//src/material/core:core_scss_lib", ], ) +sass_library( + name = "table_flex_scss_lib", + srcs = [ + "_table-flex-styles.import.scss", + "_table-flex-styles.scss", + ], + deps = ["//src/material/core:core_scss_lib"], +) + +########### +# Testing +########### + ng_test_library( - name = "unit_test_sources", + name = "table_tests_lib", srcs = glob( ["**/*.spec.ts"], exclude = ["**/*.e2e.spec.ts"], ), deps = [ ":table", - "//src/cdk/collections", - "//src/material/legacy-paginator", + "//src/cdk/table", + "//src/material/paginator", "//src/material/sort", "@npm//@angular/platform-browser", "@npm//rxjs", @@ -70,7 +78,25 @@ ng_test_library( ng_web_test_suite( name = "unit_tests", - deps = [":unit_test_sources"], + deps = [ + ":table_tests_lib", + ], +) + +ng_e2e_test_library( + name = "e2e_test_sources", + srcs = glob(["**/*.e2e.spec.ts"]), + deps = [ + "//src/cdk/testing/private/e2e", + ], +) + +e2e_test_suite( + name = "e2e_tests", + deps = [ + ":e2e_test_sources", + "//src/cdk/testing/private/e2e", + ], ) markdown_to_html( diff --git a/src/material-experimental/mdc-table/README.md b/src/material/table/README.md similarity index 69% rename from src/material-experimental/mdc-table/README.md rename to src/material/table/README.md index 84e4aa42f7e9..5aa1a203a51a 100644 --- a/src/material-experimental/mdc-table/README.md +++ b/src/material/table/README.md @@ -1,13 +1,13 @@ -This is a prototype of an alternate version of `MatTable` built on top of -[MDC Web](https://github.com/material-components/material-components-web). This component is experimental and should not be used in production. +This is a table component built on top of +[MDC Web](https://github.com/material-components/material-components-web). ## How to use Assuming your application is already up and running using Angular Material, you can add this component by following these steps: -1. Install `@angular/material-experimental` and MDC Web: +1. Install `@angular/material` and MDC Web: ```bash - npm i material-components-web @angular/material-experimental + npm i material-components-web @angular/material ``` 2. In your `angular.json`, make sure `node_modules/` is listed as a Sass include path. This is @@ -26,10 +26,10 @@ Assuming your application is already up and running using Angular Material, you ... ``` -3. Import the experimental `MatTableModule` and add it to the module that declares your component: +3. Import the `MatTableModule` and add it to the module that declares your component: ```ts - import {MatTableModule} from '@angular/material-experimental/mdc-table'; + import {MatTableModule} from '@angular/material/table'; @NgModule({ declarations: [MyComponent], @@ -64,7 +64,6 @@ Assuming your application is already up and running using Angular Material, you ```scss @use '@angular/material' as mat; - @use '@angular/material-experimental' as mat-experimental; $candy-app-primary: mat.define-palette(mat.$indigo-palette); $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); @@ -76,10 +75,10 @@ Assuming your application is already up and running using Angular Material, you )); - @include mat-experimental.mdc-table-theme($candy-app-theme); + @include mat.table-theme($candy-app-theme); ``` ## API differences -The API of the table matches the one from `@angular/material/table`. Simply replace imports to -`@angular/material/table` with imports to `@angular/material-experimental/mdc-table`. +The API of the table matches the one from `@angular/material/legacy-table`. Simply replace imports to +`@angular/material/legacy-table` with imports to `@angular/material/table`. diff --git a/src/material/table/_table-legacy-index.scss b/src/material/table/_table-legacy-index.scss deleted file mode 100644 index 9347678e9e20..000000000000 --- a/src/material/table/_table-legacy-index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@forward 'table-theme' hide color, theme, typography; -@forward 'table-theme' as mat-table-* hide mat-table-density; -@forward 'table-flex-styles' as mat-*; diff --git a/src/material/table/_table-theme.import.scss b/src/material/table/_table-theme.import.scss index 8a64a0ef6a7d..62be723a0811 100644 --- a/src/material/table/_table-theme.import.scss +++ b/src/material/table/_table-theme.import.scss @@ -1,8 +1,8 @@ -@forward '../core/theming/theming.import'; -@forward '../core/typography/typography-utils.import'; -@forward 'table-theme' hide color, theme, typography; -@forward 'table-theme' as mat-table-* hide mat-table-density; +@forward 'table-theme' hide color, density, theme, typography; +@forward 'table-theme' as mat-mdc-table-* hide $mat-mdc-table-mdc-data-table-divider-color, +$mat-mdc-table-mdc-data-table-header-row-text-color, +$mat-mdc-table-mdc-data-table-row-hover-fill-color, $mat-mdc-table-mdc-data-table-row-text-color, +$mat-mdc-table-mdc-data-table-selected-row-fill-color, +$mat-mdc-table-mdc-data-table-sort-icon-active-color, $mat-mdc-table-mdc-data-table-sort-icon-color, +$mat-mdc-table-mdc-data-table-stroke-color, $mat-mdc-table-mdc-data-table-table-divider-color; -@import '../core/theming/palette'; -@import '../core/theming/theming'; -@import '../core/typography/typography-utils'; diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss index ade8f26d397f..c0bbb235ef50 100644 --- a/src/material/table/_table-theme.scss +++ b/src/material/table/_table-theme.scss @@ -1,57 +1,63 @@ @use 'sass:map'; +@use '@material/theme/theme-color' as mdc-theme-color; +@use '@material/data-table/data-table' as mdc-data-table; +@use '@material/data-table' as mdc-data-table-theme; @use '../core/theming/theming'; +@use '../core/mdc-helpers/mdc-helpers'; @use '../core/typography/typography'; -@use '../core/typography/typography-utils'; @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); - $background: map.get($config, background); - $foreground: map.get($config, foreground); + // Save original values of MDC global variables. We need to save these so we can restore the + // variables to their original values and prevent unintended side effects from using this mixin. + $orig-selected-row-fill-color: mdc-data-table-theme.$selected-row-fill-color; + $orig-divider-color: mdc-data-table-theme.$divider-color; + $orig-row-hover-fill-color: mdc-data-table-theme.$row-hover-fill-color; + $orig-header-row-text-color: mdc-data-table-theme.$header-row-text-color; + $orig-row-text-color: mdc-data-table-theme.$row-text-color; + $orig-stroke-color: mdc-data-table-theme.$stroke-color; - .mat-table { - background: theming.get-color-from-palette($background, 'card'); - } + @include mdc-helpers.using-mdc-theme($config) { + mdc-data-table-theme.$selected-row-fill-color: rgba(mdc-theme-color.prop-value(primary), 0.04); + mdc-data-table-theme.$divider-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12); + mdc-data-table-theme.$row-hover-fill-color: rgba(mdc-theme-color.prop-value(on-surface), 0.04); + mdc-data-table-theme.$header-row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87); + mdc-data-table-theme.$row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87); + mdc-data-table-theme.$stroke-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12); - .mat-table thead, .mat-table tbody, .mat-table tfoot, - mat-header-row, mat-row, mat-footer-row, - [mat-header-row], [mat-row], [mat-footer-row], - .mat-table-sticky { - background: inherit; + @include mdc-data-table.table-styles($query: mdc-helpers.$mdc-theme-styles-query); } - mat-row, mat-header-row, mat-footer-row, - th.mat-header-cell, td.mat-cell, td.mat-footer-cell { - border-bottom-color: theming.get-color-from-palette($foreground, divider); - } - - .mat-header-cell { - color: theming.get-color-from-palette($foreground, secondary-text); - } + // Restore original values of MDC global variables. + mdc-data-table-theme.$selected-row-fill-color: $orig-selected-row-fill-color; + mdc-data-table-theme.$divider-color: $orig-divider-color; + mdc-data-table-theme.$row-hover-fill-color: $orig-row-hover-fill-color; + mdc-data-table-theme.$header-row-text-color: $orig-header-row-text-color; + mdc-data-table-theme.$row-text-color: $orig-row-text-color; + mdc-data-table-theme.$stroke-color: $orig-stroke-color; - .mat-cell, .mat-footer-cell { - color: theming.get-color-from-palette($foreground, text); + .mat-mdc-table { + $background: map.get($config, background); + background: theming.get-color-from-palette($background, 'card'); } } @mixin typography($config-or-theme) { - $config: typography.private-typography-to-2014-config( + $config: typography.private-typography-to-2018-config( theming.get-typography-config($config-or-theme)); - .mat-table { - font-family: typography-utils.font-family($config); - } - - .mat-header-cell { - font-size: typography-utils.font-size($config, caption); - font-weight: typography-utils.font-weight($config, body-2); + @include mdc-helpers.using-mdc-typography($config) { + @include mdc-data-table.table-styles($query: mdc-helpers.$mdc-typography-styles-query); } +} - .mat-cell, .mat-footer-cell { - font-size: typography-utils.font-size($config, body-1); +@mixin density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); + .mat-mdc-table { + @include mdc-data-table-theme.density($density-scale, + $query: mdc-helpers.$mdc-base-styles-query); } } -@mixin _density($config-or-theme) {} - @mixin theme($theme-or-color-config) { $theme: theming.private-legacy-get-theme($theme-or-color-config); @include theming.private-check-duplicate-theme-styles($theme, 'mat-table') { @@ -63,7 +69,7 @@ @include color($color); } @if $density != null { - @include _density($density); + @include density($density); } @if $typography != null { @include typography($typography); diff --git a/src/material/table/cell.ts b/src/material/table/cell.ts index dc2b1cd0ec07..0cca4fbf6ffa 100644 --- a/src/material/table/cell.ts +++ b/src/material/table/cell.ts @@ -85,7 +85,7 @@ export class MatColumnDef extends CdkColumnDef { @Directive({ selector: 'mat-header-cell, th[mat-header-cell]', host: { - 'class': 'mat-header-cell', + 'class': 'mat-mdc-header-cell mdc-data-table__header-cell', 'role': 'columnheader', }, }) @@ -95,8 +95,7 @@ export class MatHeaderCell extends CdkHeaderCell {} @Directive({ selector: 'mat-footer-cell, td[mat-footer-cell]', host: { - 'class': 'mat-footer-cell', - 'role': 'gridcell', + 'class': 'mat-mdc-footer-cell mdc-data-table__cell', }, }) export class MatFooterCell extends CdkFooterCell {} @@ -105,8 +104,7 @@ export class MatFooterCell extends CdkFooterCell {} @Directive({ selector: 'mat-cell, td[mat-cell]', host: { - 'class': 'mat-cell', - 'role': 'gridcell', + 'class': 'mat-mdc-cell mdc-data-table__cell', }, }) export class MatCell extends CdkCell {} diff --git a/src/material-experimental/mdc-table/module.ts b/src/material/table/module.ts similarity index 100% rename from src/material-experimental/mdc-table/module.ts rename to src/material/table/module.ts diff --git a/src/material/table/public-api.ts b/src/material/table/public-api.ts index 298b9f9ce01c..ab20d5d1ea7f 100644 --- a/src/material/table/public-api.ts +++ b/src/material/table/public-api.ts @@ -6,9 +6,9 @@ * found in the LICENSE file at https://angular.io/license */ -export * from './table-module'; -export * from './cell'; export * from './table'; +export * from './module'; +export * from './cell'; export * from './row'; export * from './table-data-source'; export * from './text-column'; diff --git a/src/material/table/row.ts b/src/material/table/row.ts index 79490b1e7e1b..9b8e43163bc4 100644 --- a/src/material/table/row.ts +++ b/src/material/table/row.ts @@ -52,12 +52,12 @@ export class MatFooterRowDef extends CdkFooterRowDef {} }) export class MatRowDef extends CdkRowDef {} -/** Header template container that contains the cell outlet. Adds the right class and role. */ +/** Footer template container that contains the cell outlet. Adds the right class and role. */ @Component({ selector: 'mat-header-row, tr[mat-header-row]', template: CDK_ROW_TEMPLATE, host: { - 'class': 'mat-header-row', + 'class': 'mat-mdc-header-row mdc-data-table__header-row', 'role': 'row', }, // See note on CdkTable for explanation on why this uses the default change detection strategy. @@ -74,7 +74,7 @@ export class MatHeaderRow extends CdkHeaderRow {} selector: 'mat-footer-row, tr[mat-footer-row]', template: CDK_ROW_TEMPLATE, host: { - 'class': 'mat-footer-row', + 'class': 'mat-mdc-footer-row mdc-data-table__row', 'role': 'row', }, // See note on CdkTable for explanation on why this uses the default change detection strategy. @@ -91,7 +91,7 @@ export class MatFooterRow extends CdkFooterRow {} selector: 'mat-row, tr[mat-row]', template: CDK_ROW_TEMPLATE, host: { - 'class': 'mat-row', + 'class': 'mat-mdc-row mdc-data-table__row', 'role': 'row', }, // See note on CdkTable for explanation on why this uses the default change detection strategy. @@ -109,5 +109,5 @@ export class MatRow extends CdkRow {} providers: [{provide: CdkNoDataRow, useExisting: MatNoDataRow}], }) export class MatNoDataRow extends CdkNoDataRow { - override _contentClassName = 'mat-no-data-row'; + override _contentClassName = 'mat-mdc-no-data-row'; } diff --git a/src/material/table/table-data-source.ts b/src/material/table/table-data-source.ts index 5995b88f963a..b7fe7bff4b7e 100644 --- a/src/material/table/table-data-source.ts +++ b/src/material/table/table-data-source.ts @@ -6,10 +6,6 @@ * found in the LICENSE file at https://angular.io/license */ -import {_isNumberValue} from '@angular/cdk/coercion'; -import {DataSource} from '@angular/cdk/table'; -import {MatLegacyPaginator} from '@angular/material/legacy-paginator'; -import {MatSort, Sort} from '@angular/material/sort'; import { BehaviorSubject, combineLatest, @@ -19,14 +15,11 @@ import { Subject, Subscription, } from 'rxjs'; +import {DataSource} from '@angular/cdk/collections'; +import {MatSort, Sort} from '@angular/material/sort'; +import {_isNumberValue} from '@angular/cdk/coercion'; import {map} from 'rxjs/operators'; -/** - * Corresponds to `Number.MAX_SAFE_INTEGER`. Moved out into a variable here due to - * flaky browser support and the value not being defined in Closure's typings. - */ -const MAX_SAFE_INTEGER = 9007199254740991; - /** * Interface that matches the required API parts for the MatPaginator's PageEvent. * Decoupled so that users can depend on either the legacy or MDC-based paginator. @@ -49,6 +42,12 @@ export interface MatTableDataSourcePaginator { length: number; } +/** + * Corresponds to `Number.MAX_SAFE_INTEGER`. Moved out into a variable here due to + * flaky browser support and the value not being defined in Closure's typings. + */ +const MAX_SAFE_INTEGER = 9007199254740991; + /** Shared base class with MDC-based implementation. */ export class _MatTableDataSource< T, @@ -84,6 +83,7 @@ export class _MatTableDataSource< get data() { return this._data.value; } + set data(data: T[]) { data = Array.isArray(data) ? data : []; this._data.next(data); @@ -101,6 +101,7 @@ export class _MatTableDataSource< get filter(): string { return this._filter.value; } + set filter(filter: string) { this._filter.next(filter); // Normally the `filteredData` is updated by the re-render @@ -117,10 +118,12 @@ export class _MatTableDataSource< get sort(): MatSort | null { return this._sort; } + set sort(sort: MatSort | null) { this._sort = sort; this._updateChangeSubscription(); } + private _sort: MatSort | null; /** @@ -136,10 +139,12 @@ export class _MatTableDataSource< get paginator(): P | null { return this._paginator; } + set paginator(paginator: P | null) { this._paginator = paginator; this._updateChangeSubscription(); } + private _paginator: P | null; /** @@ -404,7 +409,7 @@ export class _MatTableDataSource< /** * Data source that accepts a client-side data array and includes native support of filtering, - * sorting (using MatSort), and pagination (using paginator). + * sorting (using MatSort), and pagination (using MatPaginator). * * Allows for sort customization by overriding sortingDataAccessor, which defines how data * properties are accessed. Also allows for filter customization by overriding filterTermAccessor, @@ -415,4 +420,7 @@ export class _MatTableDataSource< * interactions. If your app needs to support more advanced use cases, consider implementing your * own `DataSource`. */ -export class MatTableDataSource extends _MatTableDataSource {} +export class MatTableDataSource< + T, + P extends MatTableDataSourcePaginator = MatTableDataSourcePaginator, +> extends _MatTableDataSource {} diff --git a/src/material/table/table-module.ts b/src/material/table/table-module.ts deleted file mode 100644 index 986b52ad9019..000000000000 --- a/src/material/table/table-module.ts +++ /dev/null @@ -1,66 +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 {NgModule} from '@angular/core'; -import {MatRecycleRows, MatTable} from './table'; -import {CdkTableModule} from '@angular/cdk/table'; -import { - MatCell, - MatCellDef, - MatColumnDef, - MatFooterCell, - MatFooterCellDef, - MatHeaderCell, - MatHeaderCellDef, -} from './cell'; -import { - MatFooterRow, - MatFooterRowDef, - MatHeaderRow, - MatHeaderRowDef, - MatRow, - MatRowDef, - MatNoDataRow, -} from './row'; -import {MatTextColumn} from './text-column'; -import {MatCommonModule} from '@angular/material/core'; - -const EXPORTED_DECLARATIONS = [ - // Table - MatTable, - MatRecycleRows, - - // Template defs - MatHeaderCellDef, - MatHeaderRowDef, - MatColumnDef, - MatCellDef, - MatRowDef, - MatFooterCellDef, - MatFooterRowDef, - - // Cell directives - MatHeaderCell, - MatCell, - MatFooterCell, - - // Row directives - MatHeaderRow, - MatRow, - MatFooterRow, - MatNoDataRow, - - MatTextColumn, -]; - -@NgModule({ - imports: [CdkTableModule, MatCommonModule], - exports: [MatCommonModule, EXPORTED_DECLARATIONS], - declarations: EXPORTED_DECLARATIONS, -}) -export class MatTableModule {} diff --git a/src/material-experimental/mdc-table/table.e2e.spec.ts b/src/material/table/table.e2e.spec.ts similarity index 100% rename from src/material-experimental/mdc-table/table.e2e.spec.ts rename to src/material/table/table.e2e.spec.ts diff --git a/src/material/table/table.scss b/src/material/table/table.scss index fbd82dedd2fd..c7e5c7d56c15 100644 --- a/src/material/table/table.scss +++ b/src/material/table/table.scss @@ -1,61 +1,68 @@ +@use '@material/data-table/data-table' as mdc-data-table; +@use '../core/mdc-helpers/mdc-helpers'; @use './table-flex-styles'; -@include table-flex-styles.private-table-flex-styles(); - -// Native HTML table structure -table.mat-table { - border-spacing: 0; -} - -tr.mat-header-row { - height: table-flex-styles.$header-row-height; +@include mdc-helpers.disable-mdc-fallback-declarations { + @include mdc-data-table.table-styles( + $query: mdc-helpers.$mdc-base-styles-without-animation-query); + @include table-flex-styles.private-table-flex-styles(); } -tr.mat-row, tr.mat-footer-row { - height: table-flex-styles.$row-height; +.mat-mdc-table-sticky { + // Note that the table can either set this class or an inline style to make something sticky. + // We set the style as `!important` so that we get an identical specificity in both cases + // and to avoid cases where user styles have a higher specificity. + position: sticky !important; } -th.mat-header-cell { - text-align: left; +.mat-mdc-table { + // MDC Table applies `table-layout: fixed`, but this is a backwards incompatible + // change since the table did not previously apply it. + // TODO: Add a mixin to MDC to set the layout instead of including this override, + // see this issue: https://github.com/material-components/material-components-web/issues/6412 + table-layout: auto; - [dir='rtl'] & { - text-align: right; - } + // The MDC table does not allow text to wrap within the cell. This allows for text to + // wrap when the cell reaches its maximum width. + white-space: normal; } -th.mat-header-cell, td.mat-cell, td.mat-footer-cell { - padding: 0; - border-bottom-width: 1px; - border-bottom-style: solid; - - // Note: we use `first-of-type`/`last-of-type` here in order to prevent extra - // elements like ripples or badges from throwing off the layout (see #11165). - &:first-of-type { - padding-left: table-flex-styles.$row-horizontal-padding; - - [dir='rtl'] &:not(:only-of-type) { - padding-left: 0; - padding-right: table-flex-styles.$row-horizontal-padding; - } - } +// MDC table rows are styled with a top border, whereas our legacy flex table styles rows with +// a bottom border. Remove the bottom border style from the rows and let MDC display its top +// border. +mat-row.mat-mdc-row, mat-header-row.mat-mdc-header-row, mat-footer-row.mat-mdc-footer-row { + border-bottom: none; +} - &:last-of-type { - padding-right: table-flex-styles.$row-horizontal-padding; +// Cells need to inherit their background in order to overlap each other when sticky. +// The background needs to be inherited from the table, tbody/tfoot, row, and cell. +.mat-mdc-table tbody, .mat-mdc-table tfoot, .mat-mdc-table thead, +.mat-mdc-cell, .mat-mdc-footer-cell, +.mat-mdc-header-row, .mat-mdc-row, .mat-mdc-footer-row, +.mat-mdc-table .mat-mdc-header-cell { + background: inherit; +} - [dir='rtl'] &:not(:only-of-type) { - padding-right: 0; - padding-left: table-flex-styles.$row-horizontal-padding; - } - } +// Disable hover styling while MDC uses an opacity for its color. +// When the hover style is used with sticky cells, the opacity shows the cells overlapping. +.mat-mdc-table .mat-mdc-row:hover, +.mat-mdc-table .mat-mdc-footer-row:hover { + background-color: inherit; } -.mat-table-sticky { - // Note that the table can either set this class or an inline style to make something sticky. - // We set the style as `!important` so that we get an identical specificity in both cases - // and to avoid cases where user styles have a higher specificity. - position: sticky !important; +// Flex rows should not set a definite height, but instead stretch to the height of their +// children. Otherwise, the cells grow larger than the row and the layout breaks. +.mat-mdc-table mat-header-row.mat-mdc-header-row, +.mat-mdc-table mat-row.mat-mdc-row, +.mat-mdc-table mat-footer-row.mat-mdc-footer-cell { + height: unset; } -.mat-table-fixed-layout { - table-layout: fixed; +// Flex cells should stretch to the height of their parent. This was okay for the legacy +// table since the cells were centered and the borders displayed on the rows, but the MDC +// version displays borders on the cells and do not correctly line up with the row bottom. +mat-header-cell.mat-mdc-header-cell, +mat-cell.mat-mdc-cell, +mat-footer-cell.mat-mdc-footer-cell { + align-self: stretch; } diff --git a/src/material/table/table.spec.ts b/src/material/table/table.spec.ts index c4981892e3de..ce1615ecebda 100644 --- a/src/material/table/table.spec.ts +++ b/src/material/table/table.spec.ts @@ -1,5 +1,4 @@ -import {DataSource} from '@angular/cdk/collections'; -import {Component, OnInit, ViewChild, AfterViewInit} from '@angular/core'; +import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core'; import { waitForAsync, ComponentFixture, @@ -8,18 +7,17 @@ import { TestBed, tick, } from '@angular/core/testing'; -import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {MatTable, MatTableDataSource, MatTableModule} from './index'; +import {DataSource} from '@angular/cdk/table'; import {BehaviorSubject, Observable} from 'rxjs'; -import {MatLegacyPaginator, MatLegacyPaginatorModule} from '../legacy-paginator/index'; -import {MatSort, MatSortHeader, MatSortModule} from '../sort/index'; -import {MatTableModule} from './index'; -import {MatTable} from './table'; -import {MatTableDataSource} from './table-data-source'; +import {MatSort, MatSortHeader, MatSortModule} from '@angular/material/sort'; +import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator'; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -describe('MatTable', () => { +describe('MDC-based MatTable', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [MatTableModule, MatLegacyPaginatorModule, MatSortModule, NoopAnimationsModule], + imports: [MatTableModule, MatPaginatorModule, MatSortModule, NoopAnimationsModule], declarations: [ MatTableApp, MatTableWithWhenRowApp, @@ -29,17 +27,18 @@ describe('MatTable', () => { MatTableWithPaginatorApp, StickyTableApp, TableWithNgContainerRow, - NestedHtmlTableApp, + NestedTableApp, + MatFlexTableApp, ], }).compileComponents(); })); describe('with basic data source', () => { it('should be able to create a table with the right content and without when row', () => { - const fixture = TestBed.createComponent(MatTableApp); + let fixture = TestBed.createComponent(MatTableApp); fixture.detectChanges(); - const tableElement = fixture.nativeElement.querySelector('.mat-table')!; + const tableElement = fixture.nativeElement.querySelector('table')!; const data = fixture.componentInstance.dataSource!.data; expectTableToMatchContent(tableElement, [ ['Column A', 'Column B', 'Column C'], @@ -52,10 +51,10 @@ describe('MatTable', () => { }); it('should create a table with special when row', () => { - const fixture = TestBed.createComponent(MatTableWithWhenRowApp); + let fixture = TestBed.createComponent(MatTableWithWhenRowApp); fixture.detectChanges(); - const tableElement = fixture.nativeElement.querySelector('.mat-table'); + const tableElement = fixture.nativeElement.querySelector('table'); expectTableToMatchContent(tableElement, [ ['Column A'], ['a_1'], @@ -67,11 +66,11 @@ describe('MatTable', () => { }); it('should create a table with multiTemplateDataRows true', () => { - const fixture = TestBed.createComponent(MatTableWithWhenRowApp); + let fixture = TestBed.createComponent(MatTableWithWhenRowApp); fixture.componentInstance.multiTemplateDataRows = true; fixture.detectChanges(); - const tableElement = fixture.nativeElement.querySelector('.mat-table'); + const tableElement = fixture.nativeElement.querySelector('table'); expectTableToMatchContent(tableElement, [ ['Column A'], ['a_1'], @@ -83,26 +82,81 @@ describe('MatTable', () => { ]); }); + it('should be able to render a table correctly with native elements', () => { + let fixture = TestBed.createComponent(NativeHtmlTableApp); + fixture.detectChanges(); + + const tableElement = fixture.nativeElement.querySelector('table'); + const data = fixture.componentInstance.dataSource!.data; + expectTableToMatchContent(tableElement, [ + ['Column A', 'Column B', 'Column C'], + [data[0].a, data[0].b, data[0].c], + [data[1].a, data[1].b, data[1].c], + [data[2].a, data[2].b, data[2].c], + [data[3].a, data[3].b, data[3].c], + ]); + }); + + it('should be able to nest tables', () => { + const fixture = TestBed.createComponent(NestedTableApp); + fixture.detectChanges(); + const outerTable = fixture.nativeElement.querySelector('table'); + const innerTable = outerTable.querySelector('table'); + const outerRows = Array.from(outerTable.querySelector('tbody').rows); + const innerRows = Array.from(innerTable.querySelector('tbody').rows); + + expect(outerTable).toBeTruthy(); + expect(outerRows.map(row => row.cells.length)).toEqual([3, 3, 3, 3]); + + expect(innerTable).toBeTruthy(); + expect(innerRows.map(row => row.cells.length)).toEqual([3, 3, 3, 3]); + }); + + it('should be able to show a message when no data is being displayed in a native table', () => { + const fixture = TestBed.createComponent(NativeHtmlTableApp); + fixture.detectChanges(); + + // Assert that the data is inside the tbody specifically. + const tbody = fixture.nativeElement.querySelector('tbody')!; + const dataSource = fixture.componentInstance.dataSource!; + const initialData = dataSource.data; + + expect(tbody.querySelector('.mat-mdc-no-data-row')).toBeFalsy(); + + dataSource.data = []; + fixture.detectChanges(); + + const noDataRow: HTMLElement = tbody.querySelector('.mat-mdc-no-data-row'); + expect(noDataRow).toBeTruthy(); + expect(noDataRow.getAttribute('role')).toBe('row'); + + dataSource.data = initialData; + fixture.detectChanges(); + + expect(tbody.querySelector('.mat-mdc-no-data-row')).toBeFalsy(); + }); + it('should be able to show a message when no data is being displayed', () => { const fixture = TestBed.createComponent(MatTableApp); fixture.detectChanges(); - const table = fixture.nativeElement.querySelector('.mat-table')!; + // Assert that the data is inside the tbody specifically. + const tbody = fixture.nativeElement.querySelector('tbody')!; const initialData = fixture.componentInstance.dataSource!.data; - expect(table.querySelector('.mat-no-data-row')).toBeFalsy(); + expect(tbody.querySelector('.mat-mdc-no-data-row')).toBeFalsy(); fixture.componentInstance.dataSource!.data = []; fixture.detectChanges(); - const noDataRow: HTMLElement = table.querySelector('.mat-no-data-row'); + const noDataRow: HTMLElement = tbody.querySelector('.mat-mdc-no-data-row'); expect(noDataRow).toBeTruthy(); expect(noDataRow.getAttribute('role')).toBe('row'); fixture.componentInstance.dataSource!.data = initialData; fixture.detectChanges(); - expect(table.querySelector('.mat-no-data-row')).toBeFalsy(); + expect(tbody.querySelector('.mat-mdc-no-data-row')).toBeFalsy(); }); it('should show the no data row if there is no data on init', () => { @@ -110,70 +164,24 @@ describe('MatTable', () => { fixture.componentInstance.dataSource!.data = []; fixture.detectChanges(); - const table = fixture.nativeElement.querySelector('.mat-table')!; - expect(table.querySelector('.mat-no-data-row')).toBeTruthy(); + const tbody = fixture.nativeElement.querySelector('tbody')!; + expect(tbody.querySelector('.mat-mdc-no-data-row')).toBeTruthy(); }); - }); - - it('should be able to render a table correctly with native elements', () => { - const fixture = TestBed.createComponent(NativeHtmlTableApp); - fixture.detectChanges(); - - const tableElement = fixture.nativeElement.querySelector('table'); - const data = fixture.componentInstance.dataSource!.data; - expectTableToMatchContent(tableElement, [ - ['Column A', 'Column B', 'Column C'], - [data[0].a, data[0].b, data[0].c], - [data[1].a, data[1].b, data[1].c], - [data[2].a, data[2].b, data[2].c], - [data[3].a, data[3].b, data[3].c], - ]); - }); - - it('should be able to nest tables', () => { - const fixture = TestBed.createComponent(NestedHtmlTableApp); - fixture.detectChanges(); - const outerTable = fixture.nativeElement.querySelector('table'); - const innerTable = outerTable.querySelector('table'); - const outerRows = Array.from(outerTable.querySelector('tbody').rows); - const innerRows = Array.from(innerTable.querySelector('tbody').rows); - - expect(outerTable).toBeTruthy(); - expect(outerRows.map(row => row.cells.length)).toEqual([3, 3, 3, 3]); - - expect(innerTable).toBeTruthy(); - expect(innerRows.map(row => row.cells.length)).toEqual([3, 3, 3, 3]); - }); - - it('should be able to show a message when no data is being displayed in a native table', () => { - const fixture = TestBed.createComponent(NativeHtmlTableApp); - fixture.detectChanges(); - - // Assert that the data is inside the tbody specifically. - const tbody = fixture.nativeElement.querySelector('tbody')!; - const dataSource = fixture.componentInstance.dataSource!; - const initialData = dataSource.data; - - expect(tbody.querySelector('.mat-no-data-row')).toBeFalsy(); - dataSource.data = []; - fixture.detectChanges(); - - const noDataRow: HTMLElement = tbody.querySelector('.mat-no-data-row'); - expect(noDataRow).toBeTruthy(); - expect(noDataRow.getAttribute('role')).toBe('row'); - - dataSource.data = initialData; - fixture.detectChanges(); + it('should set the content styling class on the tbody', () => { + let fixture = TestBed.createComponent(NativeHtmlTableApp); + fixture.detectChanges(); - expect(tbody.querySelector('.mat-no-data-row')).toBeFalsy(); + const tbodyElement = fixture.nativeElement.querySelector('tbody'); + expect(tbodyElement.classList).toContain('mdc-data-table__content'); + }); }); it('should render with MatTableDataSource and sort', () => { - const fixture = TestBed.createComponent(MatTableWithSortApp); + let fixture = TestBed.createComponent(MatTableWithSortApp); fixture.detectChanges(); - const tableElement = fixture.nativeElement.querySelector('.mat-table')!; + const tableElement = fixture.nativeElement.querySelector('table')!; const data = fixture.componentInstance.dataSource!.data; expectTableToMatchContent(tableElement, [ ['Column A', 'Column B', 'Column C'], @@ -184,10 +192,10 @@ describe('MatTable', () => { }); it('should render with MatTableDataSource and pagination', () => { - const fixture = TestBed.createComponent(MatTableWithPaginatorApp); + let fixture = TestBed.createComponent(MatTableWithPaginatorApp); fixture.detectChanges(); - const tableElement = fixture.nativeElement.querySelector('.mat-table')!; + const tableElement = fixture.nativeElement.querySelector('table')!; const data = fixture.componentInstance.dataSource!.data; expectTableToMatchContent(tableElement, [ ['Column A', 'Column B', 'Column C'], @@ -198,12 +206,12 @@ describe('MatTable', () => { }); it('should apply custom sticky CSS class to sticky cells', fakeAsync(() => { - const fixture = TestBed.createComponent(StickyTableApp); + let fixture = TestBed.createComponent(StickyTableApp); fixture.detectChanges(); flushMicrotasks(); - const stuckCellElement = fixture.nativeElement.querySelector('.mat-table th')!; - expect(stuckCellElement.classList).toContain('mat-table-sticky'); + const stuckCellElement = fixture.nativeElement.querySelector('table th')!; + expect(stuckCellElement.classList).toContain('mat-mdc-table-sticky'); })); // Note: needs to be fakeAsync so it catches the error. @@ -216,6 +224,13 @@ describe('MatTable', () => { }).not.toThrow(); })); + it('should be able to render a flexbox-based table', () => { + expect(() => { + const fixture = TestBed.createComponent(MatFlexTableApp); + fixture.detectChanges(); + }).not.toThrow(); + }); + describe('with MatTableDataSource and sort/pagination/filter', () => { let tableElement: HTMLElement; let fixture: ComponentFixture; @@ -226,7 +241,7 @@ describe('MatTable', () => { fixture = TestBed.createComponent(ArrayDataSourceMatTableApp); fixture.detectChanges(); - tableElement = fixture.nativeElement.querySelector('.mat-table'); + tableElement = fixture.nativeElement.querySelector('table'); component = fixture.componentInstance; dataSource = fixture.componentInstance.dataSource; })); @@ -660,35 +675,37 @@ class FakeDataSource extends DataSource { @Component({ template: ` - + - Column A - {{row.a}} - Footer A + + + - Column B - {{row.b}} - Footer B + + + - Column C - {{row.c}} - Footer C + + + - fourth_row + - - - -
No data
- - + + + + + + + +
Column A {{row.a}} Footer A Column B {{row.b}} Footer B Column C {{row.c}} Footer C fourth_row
No data
`, }) class MatTableApp { @@ -736,27 +753,30 @@ class NativeHtmlTableApp { template: ` - + - +
Column AColumn A {{row.a}} Column BColumn B + + + @@ -766,7 +786,7 @@ class NativeHtmlTableApp { - + @@ -775,7 +795,7 @@ class NativeHtmlTableApp {
Column A {{row.a}} Footer A Column B {{row.b}} Footer B Column C {{row.c}} Footer C
Column CColumn C {{row.c}}
`, }) -class NestedHtmlTableApp { +class NestedTableApp { dataSource: FakeDataSource | null = new FakeDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; } @@ -802,22 +822,22 @@ class StickyTableApp { @Component({ template: ` - + - Column A - {{row.a}} - Footer A + + + - fourth_row + - - - - - + + + + +
Column A {{row.a}} Footer A fourth_row
`, }) class MatTableWithWhenRowApp { @@ -830,29 +850,29 @@ class MatTableWithWhenRowApp { @Component({ template: ` - + - Column A - {{row.a}} - Footer A + + + - Column B - {{row.b}} - Footer B + + + - Column C - {{row.c}} - Footer C + + + - - - - + + + +
Column A {{row.a}} Footer A Column B {{row.b}} Footer B Column C {{row.c}} Footer C
`, @@ -863,7 +883,7 @@ class ArrayDataSourceMatTableApp implements AfterViewInit { columnsToRender = ['column_a', 'column_b', 'column_c']; @ViewChild(MatTable) table: MatTable; - @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; + @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; @ViewChild(MatSortHeader) sortHeader: MatSortHeader; @@ -888,25 +908,25 @@ class ArrayDataSourceMatTableApp implements AfterViewInit { @Component({ template: ` - + - Column A - {{row.a}} + + - Column B - {{row.b}} + + - Column C - {{row.c}} + + - - - + + +
Column A {{row.a}} Column B {{row.b}} Column C {{row.c}}
`, }) class MatTableWithSortApp implements OnInit { @@ -937,25 +957,25 @@ class MatTableWithSortApp implements OnInit { @Component({ template: ` - + - Column A - {{row.a}} + + - Column B - {{row.b}} + + - Column C - {{row.c}} + + - - - + + +
Column A {{row.a}} Column B {{row.b}} Column C {{row.c}}
`, @@ -966,7 +986,7 @@ class MatTableWithPaginatorApp implements OnInit { columnsToRender = ['column_a', 'column_b', 'column_c']; @ViewChild(MatTable) table: MatTable; - @ViewChild(MatLegacyPaginator) paginator: MatLegacyPaginator; + @ViewChild(MatPaginator) paginator: MatPaginator; constructor() { this.underlyingDataSource.data = []; @@ -988,17 +1008,17 @@ class MatTableWithPaginatorApp implements OnInit { @Component({ template: ` - + - Column A - {{row.a}} + + - + - + - +
Column A{{row.a}}
`, }) class TableWithNgContainerRow { @@ -1006,20 +1026,58 @@ class TableWithNgContainerRow { columnsToRender = ['column_a']; } +@Component({ + template: ` + + + Column A + {{row.a}} + Footer A + + + + Column B + {{row.b}} + Footer B + + + + Column C + {{row.c}} + Footer C + + + + fourth_row + + + + +
No data
+ + + `, +}) +class MatFlexTableApp { + dataSource: FakeDataSource | null = new FakeDataSource(); + columnsToRender = ['column_a', 'column_b', 'column_c']; + @ViewChild(MatTable) table: MatTable; +} + function getElements(element: Element, query: string): Element[] { return [].slice.call(element.querySelectorAll(query)); } function getHeaderRows(tableElement: Element): Element[] { - return [].slice.call(tableElement.querySelectorAll('.mat-header-row'))!; + return [].slice.call(tableElement.querySelectorAll('.mat-mdc-header-row'))!; } function getFooterRows(tableElement: Element): Element[] { - return [].slice.call(tableElement.querySelectorAll('.mat-footer-row'))!; + return [].slice.call(tableElement.querySelectorAll('.mat-mdc-footer-row'))!; } function getRows(tableElement: Element): Element[] { - return getElements(tableElement, '.mat-row'); + return getElements(tableElement, '.mat-mdc-row'); } function getCells(row: Element): Element[] { @@ -1027,30 +1085,15 @@ function getCells(row: Element): Element[] { return []; } - let cells = getElements(row, 'mat-cell'); - if (!cells.length) { - cells = getElements(row, 'td'); - } - - return cells; + return getElements(row, 'td'); } function getHeaderCells(headerRow: Element): Element[] { - let cells = getElements(headerRow, 'mat-header-cell'); - if (!cells.length) { - cells = getElements(headerRow, 'th'); - } - - return cells; + return getElements(headerRow, 'th'); } function getFooterCells(footerRow: Element): Element[] { - let cells = getElements(footerRow, 'mat-footer-cell'); - if (!cells.length) { - cells = getElements(footerRow, 'td'); - } - - return cells; + return getElements(footerRow, 'td'); } function getActualTableContent(tableElement: Element): string[][] { diff --git a/src/material/table/table.ts b/src/material/table/table.ts index 88eba0786409..5930ade745b4 100644 --- a/src/material/table/table.ts +++ b/src/material/table/table.ts @@ -6,15 +6,21 @@ * found in the LICENSE file at https://angular.io/license */ +import { + ChangeDetectionStrategy, + Component, + Directive, + OnInit, + ViewEncapsulation, +} from '@angular/core'; import { CDK_TABLE_TEMPLATE, CdkTable, - CDK_TABLE, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER, + CDK_TABLE, STICKY_POSITIONING_LISTENER, } from '@angular/cdk/table'; -import {ChangeDetectionStrategy, Component, Directive, ViewEncapsulation} from '@angular/core'; import { _DisposeViewRepeaterStrategy, _RecycleViewRepeaterStrategy, @@ -31,25 +37,22 @@ import { }) export class MatRecycleRows {} -/** - * Wrapper for the CdkTable with Material design styles. - */ @Component({ selector: 'mat-table, table[mat-table]', exportAs: 'matTable', template: CDK_TABLE_TEMPLATE, styleUrls: ['table.css'], host: { - 'class': 'mat-table', - '[class.mat-table-fixed-layout]': 'fixedLayout', + 'class': 'mat-mdc-table mdc-data-table__table', + '[class.mdc-table-fixed-layout]': 'fixedLayout', }, providers: [ - // TODO(michaeljamesparsons) Abstract the view repeater strategy to a directive API so this code - // is only included in the build if used. - {provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy}, {provide: CdkTable, useExisting: MatTable}, {provide: CDK_TABLE, useExisting: MatTable}, {provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler}, + // TODO(michaeljamesparsons) Abstract the view repeater strategy to a directive API so this code + // is only included in the build if used. + {provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy}, // Prevent nested tables from seeing this table's StickyPositioningListener. {provide: STICKY_POSITIONING_LISTENER, useValue: null}, ], @@ -58,10 +61,22 @@ export class MatRecycleRows {} // tslint:disable-next-line:validate-decorators changeDetection: ChangeDetectionStrategy.Default, }) -export class MatTable extends CdkTable { +export class MatTable extends CdkTable implements OnInit { /** Overrides the sticky CSS class set by the `CdkTable`. */ - protected override stickyCssClass = 'mat-table-sticky'; + protected override stickyCssClass = 'mat-mdc-table-sticky'; /** Overrides the need to add position: sticky on every sticky cell element in `CdkTable`. */ protected override needsPositionStickyOnElement = false; + + override ngOnInit() { + super.ngOnInit(); + + // After ngOnInit, the `CdkTable` has created and inserted the table sections (thead, tbody, + // tfoot). MDC requires the `mdc-data-table__content` class to be added to the body. Note that + // this only applies to native tables, because we don't wrap the content of flexbox-based ones. + if (this._isNativeHtmlTable) { + const tbody = this._elementRef.nativeElement.querySelector('tbody'); + tbody.classList.add('mdc-data-table__content'); + } + } } diff --git a/src/material/table/testing/BUILD.bazel b/src/material/table/testing/BUILD.bazel index 53fdbd216d49..dee76f678f44 100644 --- a/src/material/table/testing/BUILD.bazel +++ b/src/material/table/testing/BUILD.bazel @@ -18,26 +18,12 @@ filegroup( srcs = glob(["**/*.ts"]), ) -ng_test_library( - name = "harness_tests_lib", - srcs = ["shared.spec.ts"], - deps = [ - ":testing", - "//src/cdk/testing", - "//src/cdk/testing/testbed", - "//src/material/table", - ], -) - ng_test_library( name = "unit_tests_lib", - srcs = glob( - ["**/*.spec.ts"], - exclude = ["shared.spec.ts"], - ), + srcs = glob(["**/*.spec.ts"]), deps = [ - ":harness_tests_lib", ":testing", + "//src/material/legacy-table/testing:harness_tests_lib", "//src/material/table", ], ) diff --git a/src/material/table/testing/cell-harness.ts b/src/material/table/testing/cell-harness.ts index 3eeffe4fea5e..a8d6faac8a7a 100644 --- a/src/material/table/testing/cell-harness.ts +++ b/src/material/table/testing/cell-harness.ts @@ -7,26 +7,13 @@ */ import { - HarnessPredicate, ComponentHarnessConstructor, ContentContainerComponentHarness, + HarnessPredicate, } from '@angular/cdk/testing'; import {CellHarnessFilters} from './table-harness-filters'; -/** Harness for interacting with a standard Angular Material table cell. */ -export class MatCellHarness extends ContentContainerComponentHarness { - /** The selector for the host element of a `MatCellHarness` instance. */ - static hostSelector = '.mat-cell'; - - /** - * Gets a `HarnessPredicate` that can be used to search for a table cell with specific attributes. - * @param options Options for narrowing the search - * @return a `HarnessPredicate` configured with the given options. - */ - static with(options: CellHarnessFilters = {}): HarnessPredicate { - return MatCellHarness._getCellPredicate(MatCellHarness, options); - } - +export abstract class _MatCellHarnessBase extends ContentContainerComponentHarness { /** Gets the cell's text. */ async getText(): Promise { return (await this.host()).text(); @@ -66,34 +53,49 @@ export class MatCellHarness extends ContentContainerComponentHarness { } } -/** Harness for interacting with a standard Angular Material table header cell. */ -export class MatHeaderCellHarness extends MatCellHarness { +/** Harness for interacting with an MDC-based Angular Material table cell. */ +export class MatCellHarness extends _MatCellHarnessBase { + /** The selector for the host element of a `MatCellHarness` instance. */ + static hostSelector = '.mat-mdc-cell'; + + /** + * Gets a `HarnessPredicate` that can be used to search for a table cell with specific attributes. + * @param options Options for narrowing the search + * @return a `HarnessPredicate` configured with the given options. + */ + static with(options: CellHarnessFilters = {}): HarnessPredicate { + return _MatCellHarnessBase._getCellPredicate(MatCellHarness, options); + } +} + +/** Harness for interacting with an MDC-based Angular Material table header cell. */ +export class MatHeaderCellHarness extends _MatCellHarnessBase { /** The selector for the host element of a `MatHeaderCellHarness` instance. */ - static override hostSelector = '.mat-header-cell'; + static hostSelector = '.mat-mdc-header-cell'; /** - * Gets a `HarnessPredicate` that can be used to search for - * a table header cell with specific attributes. + * Gets a `HarnessPredicate` that can be used to search for a table header cell with specific + * attributes. * @param options Options for narrowing the search * @return a `HarnessPredicate` configured with the given options. */ - static override with(options: CellHarnessFilters = {}): HarnessPredicate { - return MatHeaderCellHarness._getCellPredicate(MatHeaderCellHarness, options); + static with(options: CellHarnessFilters = {}): HarnessPredicate { + return _MatCellHarnessBase._getCellPredicate(MatHeaderCellHarness, options); } } -/** Harness for interacting with a standard Angular Material table footer cell. */ -export class MatFooterCellHarness extends MatCellHarness { +/** Harness for interacting with an MDC-based Angular Material table footer cell. */ +export class MatFooterCellHarness extends _MatCellHarnessBase { /** The selector for the host element of a `MatFooterCellHarness` instance. */ - static override hostSelector = '.mat-footer-cell'; + static hostSelector = '.mat-mdc-footer-cell'; /** - * Gets a `HarnessPredicate` that can be used to search for - * a table footer cell with specific attributes. + * Gets a `HarnessPredicate` that can be used to search for a table footer cell with specific + * attributes. * @param options Options for narrowing the search * @return a `HarnessPredicate` configured with the given options. */ - static override with(options: CellHarnessFilters = {}): HarnessPredicate { - return MatFooterCellHarness._getCellPredicate(MatFooterCellHarness, options); + static with(options: CellHarnessFilters = {}): HarnessPredicate { + return _MatCellHarnessBase._getCellPredicate(MatFooterCellHarness, options); } } diff --git a/src/material/table/testing/row-harness.ts b/src/material/table/testing/row-harness.ts index c1e5d80224bf..32163237e9e1 100644 --- a/src/material/table/testing/row-harness.ts +++ b/src/material/table/testing/row-harness.ts @@ -12,8 +12,13 @@ import { HarnessPredicate, parallel, } from '@angular/cdk/testing'; -import {RowHarnessFilters, CellHarnessFilters} from './table-harness-filters'; -import {MatCellHarness, MatHeaderCellHarness, MatFooterCellHarness} from './cell-harness'; +import { + _MatCellHarnessBase, + MatCellHarness, + MatFooterCellHarness, + MatHeaderCellHarness, +} from './cell-harness'; +import {CellHarnessFilters, RowHarnessFilters} from './table-harness-filters'; /** Text extracted from a table row organized by columns. */ export interface MatRowHarnessColumnsText { @@ -24,7 +29,7 @@ export abstract class _MatRowHarnessBase< CellType extends ComponentHarnessConstructor & { with: (options?: CellHarnessFilters) => HarnessPredicate; }, - Cell extends ComponentHarness & {getText(): Promise; getColumnName(): Promise}, + Cell extends _MatCellHarnessBase, > extends ComponentHarness { protected abstract _cellHarness: CellType; @@ -53,10 +58,10 @@ export abstract class _MatRowHarnessBase< } } -/** Harness for interacting with a standard Angular Material table row. */ +/** Harness for interacting with an MDC-based Angular Material table row. */ export class MatRowHarness extends _MatRowHarnessBase { /** The selector for the host element of a `MatRowHarness` instance. */ - static hostSelector = '.mat-row'; + static hostSelector = '.mat-mdc-row'; protected _cellHarness = MatCellHarness; /** @@ -64,47 +69,56 @@ export class MatRowHarness extends _MatRowHarnessBase { - return new HarnessPredicate(MatRowHarness, options); + static with( + this: ComponentHarnessConstructor, + options: RowHarnessFilters = {}, + ): HarnessPredicate { + return new HarnessPredicate(this, options); } } -/** Harness for interacting with a standard Angular Material table header row. */ +/** Harness for interacting with an MDC-based Angular Material table header row. */ export class MatHeaderRowHarness extends _MatRowHarnessBase< typeof MatHeaderCellHarness, MatHeaderCellHarness > { /** The selector for the host element of a `MatHeaderRowHarness` instance. */ - static hostSelector = '.mat-header-row'; + static hostSelector = '.mat-mdc-header-row'; protected _cellHarness = MatHeaderCellHarness; /** - * Gets a `HarnessPredicate` that can be used to search for - * a table header row with specific attributes. + * Gets a `HarnessPredicate` that can be used to search for a table header row with specific + * attributes. * @param options Options for narrowing the search * @return a `HarnessPredicate` configured with the given options. */ - static with(options: RowHarnessFilters = {}): HarnessPredicate { - return new HarnessPredicate(MatHeaderRowHarness, options); + static with( + this: ComponentHarnessConstructor, + options: RowHarnessFilters = {}, + ): HarnessPredicate { + return new HarnessPredicate(this, options); } } -/** Harness for interacting with a standard Angular Material table footer row. */ +/** Harness for interacting with an MDC-based Angular Material table footer row. */ export class MatFooterRowHarness extends _MatRowHarnessBase< typeof MatFooterCellHarness, MatFooterCellHarness > { /** The selector for the host element of a `MatFooterRowHarness` instance. */ - static hostSelector = '.mat-footer-row'; + static hostSelector = '.mat-mdc-footer-row'; protected _cellHarness = MatFooterCellHarness; /** - * Gets a `HarnessPredicate` that can be used to search for - * a table footer row cell with specific attributes. + * Gets a `HarnessPredicate` that can be used to search for a table footer row cell with specific + * attributes. * @param options Options for narrowing the search * @return a `HarnessPredicate` configured with the given options. */ - static with(options: RowHarnessFilters = {}): HarnessPredicate { - return new HarnessPredicate(MatFooterRowHarness, options); + static with( + this: ComponentHarnessConstructor, + options: RowHarnessFilters = {}, + ): HarnessPredicate { + return new HarnessPredicate(this, options); } } diff --git a/src/material/table/testing/table-harness.spec.ts b/src/material/table/testing/table-harness.spec.ts index 3c48afddbf06..12ba3e807b36 100644 --- a/src/material/table/testing/table-harness.spec.ts +++ b/src/material/table/testing/table-harness.spec.ts @@ -1,7 +1,7 @@ import {MatTableModule} from '@angular/material/table'; -import {runHarnessTests} from '@angular/material/table/testing/shared.spec'; +import {runHarnessTests} from '@angular/material/legacy-table/testing/shared.spec'; import {MatTableHarness} from './table-harness'; -describe('Non-MDC-based MatTableHarness', () => { - runHarnessTests(MatTableModule, MatTableHarness); +describe('MDC-based MatTableHarness', () => { + runHarnessTests(MatTableModule, MatTableHarness as any); }); diff --git a/src/material/table/testing/table-harness.ts b/src/material/table/testing/table-harness.ts index 0bb200be6921..f00566236a13 100644 --- a/src/material/table/testing/table-harness.ts +++ b/src/material/table/testing/table-harness.ts @@ -13,13 +13,13 @@ import { HarnessPredicate, parallel, } from '@angular/cdk/testing'; -import {TableHarnessFilters, RowHarnessFilters} from './table-harness-filters'; import { - MatRowHarness, - MatHeaderRowHarness, MatFooterRowHarness, + MatHeaderRowHarness, + MatRowHarness, MatRowHarnessColumnsText, } from './row-harness'; +import {RowHarnessFilters, TableHarnessFilters} from './table-harness-filters'; /** Text extracted from a table organized by columns. */ export interface MatTableHarnessColumnsText { @@ -109,7 +109,7 @@ export abstract class _MatTableHarnessBase< } } -/** Harness for interacting with a standard mat-table in tests. */ +/** Harness for interacting with an MDC-based mat-table in tests. */ export class MatTableHarness extends _MatTableHarnessBase< typeof MatHeaderRowHarness, MatHeaderRowHarness, @@ -119,7 +119,7 @@ export class MatTableHarness extends _MatTableHarnessBase< MatFooterRowHarness > { /** The selector for the host element of a `MatTableHarness` instance. */ - static hostSelector = '.mat-table'; + static hostSelector = '.mat-mdc-table'; protected _headerRowHarness = MatHeaderRowHarness; protected _rowHarness = MatRowHarness; protected _footerRowHarness = MatFooterRowHarness; @@ -129,8 +129,11 @@ export class MatTableHarness extends _MatTableHarnessBase< * @param options Options for narrowing the search * @return a `HarnessPredicate` configured with the given options. */ - static with(options: TableHarnessFilters = {}): HarnessPredicate { - return new HarnessPredicate(MatTableHarness, options); + static with( + this: ComponentHarnessConstructor, + options: TableHarnessFilters = {}, + ): HarnessPredicate { + return new HarnessPredicate(this, options); } } diff --git a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts index 104e556e9463..242a9ac68a28 100644 --- a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts +++ b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts @@ -13,7 +13,7 @@ import {MatRadioModule} from '@angular/material/radio'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import {MatSliderModule} from '@angular/material/slider'; import {MatTabsModule} from '@angular/material/tabs'; -import {MatTableModule} from '@angular/material-experimental/mdc-table'; +import {MatTableModule} from '@angular/material/table'; import {MatDialog, MatDialogModule} from '@angular/material/dialog'; import {MatIconModule} from '@angular/material/icon'; import {MatSnackBarModule, MatSnackBar} from '@angular/material/snack-bar'; diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index 5d4dfda53646..7c9c0d9dd7dc 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/src/universal-app/kitchen-sink/kitchen-sink.ts @@ -10,7 +10,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatLegacyChipsModule} from '@angular/material/legacy-chips'; -import {MatTableModule} from '@angular/material/table'; +import {MatLegacyTableModule} from '@angular/material/legacy-table'; import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatLegacyDialogModule, MatLegacyDialog} from '@angular/material/legacy-dialog'; import {MatExpansionModule} from '@angular/material/expansion'; @@ -131,7 +131,7 @@ export class KitchenSink { MatLegacyTooltipModule, MatExpansionModule, MatSortModule, - MatTableModule, + MatLegacyTableModule, MatStepperModule, ScrollingModule, diff --git a/tools/public_api_guard/material/legacy-table-testing.md b/tools/public_api_guard/material/legacy-table-testing.md new file mode 100644 index 000000000000..b3dd908e4024 --- /dev/null +++ b/tools/public_api_guard/material/legacy-table-testing.md @@ -0,0 +1,89 @@ +## API Report File for "components-srcs" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import { HarnessPredicate } from '@angular/cdk/testing'; +import { CellHarnessFilters as LegacyCellHarnessFilters } from '@angular/material/table/testing'; +import { RowHarnessFilters as LegacyRowHarnessFilters } from '@angular/material/table/testing'; +import { TableHarnessFilters as LegacyTableHarnessFilters } from '@angular/material/table/testing'; +import { _MatCellHarnessBase as _MatLegacyCellHarnessBase } from '@angular/material/table/testing'; +import { _MatRowHarnessBase as _MatLegacyRowHarnessBase } from '@angular/material/table/testing'; +import { MatRowHarnessColumnsText as MatLegacyRowHarnessColumnsText } from '@angular/material/table/testing'; +import { _MatTableHarnessBase as _MatLegacyTableHarnessBase } from '@angular/material/table/testing'; +import { MatTableHarnessColumnsText as MatLegacyTableHarnessColumnsText } from '@angular/material/table/testing'; + +export { LegacyCellHarnessFilters } + +export { LegacyRowHarnessFilters } + +export { LegacyTableHarnessFilters } + +// @public +export class MatLegacyCellHarness extends _MatLegacyCellHarnessBase { + static hostSelector: string; + static with(options?: LegacyCellHarnessFilters): HarnessPredicate; +} + +export { _MatLegacyCellHarnessBase } + +// @public +export class MatLegacyFooterCellHarness extends _MatLegacyCellHarnessBase { + static hostSelector: string; + static with(options?: LegacyCellHarnessFilters): HarnessPredicate; +} + +// @public +export class MatLegacyFooterRowHarness extends _MatLegacyRowHarnessBase { + // (undocumented) + protected _cellHarness: typeof MatLegacyFooterCellHarness; + static hostSelector: string; + static with(options?: LegacyRowHarnessFilters): HarnessPredicate; +} + +// @public +export class MatLegacyHeaderCellHarness extends _MatLegacyCellHarnessBase { + static hostSelector: string; + static with(options?: LegacyCellHarnessFilters): HarnessPredicate; +} + +// @public +export class MatLegacyHeaderRowHarness extends _MatLegacyRowHarnessBase { + // (undocumented) + protected _cellHarness: typeof MatLegacyHeaderCellHarness; + static hostSelector: string; + static with(options?: LegacyRowHarnessFilters): HarnessPredicate; +} + +// @public +export class MatLegacyRowHarness extends _MatLegacyRowHarnessBase { + // (undocumented) + protected _cellHarness: typeof MatLegacyCellHarness; + static hostSelector: string; + static with(options?: LegacyRowHarnessFilters): HarnessPredicate; +} + +export { _MatLegacyRowHarnessBase } + +export { MatLegacyRowHarnessColumnsText } + +// @public +export class MatLegacyTableHarness extends _MatLegacyTableHarnessBase { + // (undocumented) + protected _footerRowHarness: typeof MatLegacyFooterRowHarness; + // (undocumented) + protected _headerRowHarness: typeof MatLegacyHeaderRowHarness; + static hostSelector: string; + // (undocumented) + protected _rowHarness: typeof MatLegacyRowHarness; + static with(options?: LegacyTableHarnessFilters): HarnessPredicate; +} + +export { _MatLegacyTableHarnessBase } + +export { MatLegacyTableHarnessColumnsText } + +// (No @packageDocumentation comment for this package) + +``` diff --git a/tools/public_api_guard/material/legacy-table.md b/tools/public_api_guard/material/legacy-table.md new file mode 100644 index 000000000000..e6fdb2f77c86 --- /dev/null +++ b/tools/public_api_guard/material/legacy-table.md @@ -0,0 +1,196 @@ +## API Report File for "components-srcs" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import { CdkCell } from '@angular/cdk/table'; +import { CdkCellDef } from '@angular/cdk/table'; +import { CdkColumnDef } from '@angular/cdk/table'; +import { CdkFooterCell } from '@angular/cdk/table'; +import { CdkFooterCellDef } from '@angular/cdk/table'; +import { CdkFooterRow } from '@angular/cdk/table'; +import { CdkFooterRowDef } from '@angular/cdk/table'; +import { CdkHeaderCell } from '@angular/cdk/table'; +import { CdkHeaderCellDef } from '@angular/cdk/table'; +import { CdkHeaderRow } from '@angular/cdk/table'; +import { CdkHeaderRowDef } from '@angular/cdk/table'; +import { CdkNoDataRow } from '@angular/cdk/table'; +import { CdkRow } from '@angular/cdk/table'; +import { CdkRowDef } from '@angular/cdk/table'; +import { CdkTable } from '@angular/cdk/table'; +import { CdkTextColumn } from '@angular/cdk/table'; +import * as i0 from '@angular/core'; +import * as i5 from '@angular/cdk/table'; +import * as i6 from '@angular/material/core'; +import { MatLegacyPaginator } from '@angular/material/legacy-paginator'; +import { _MatTableDataSource as _MatLegacyTableDataSource } from '@angular/material/table'; +import { MatTableDataSourcePageEvent as MatLegacyTableDataSourcePageEvent } from '@angular/material/table'; +import { MatTableDataSourcePaginator as MatLegacyTableDataSourcePaginator } from '@angular/material/table'; + +// @public +export class MatLegacyCell extends CdkCell { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyCellDef extends CdkCellDef { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyColumnDef extends CdkColumnDef { + get name(): string; + set name(name: string); + protected _updateColumnCssClassName(): void; + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyFooterCell extends CdkFooterCell { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyFooterCellDef extends CdkFooterCellDef { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyFooterRow extends CdkFooterRow { + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyFooterRowDef extends CdkFooterRowDef { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyHeaderCell extends CdkHeaderCell { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyHeaderCellDef extends CdkHeaderCellDef { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyHeaderRow extends CdkHeaderRow { + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyHeaderRowDef extends CdkHeaderRowDef { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyNoDataRow extends CdkNoDataRow { + // (undocumented) + _contentClassName: string; + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyRecycleRows { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyRow extends CdkRow { + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyRowDef extends CdkRowDef { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration, "[matRowDef]", never, { "columns": "matRowDefColumns"; "when": "matRowDefWhen"; }, {}, never, never, false>; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration, never>; +} + +// @public +export class MatLegacyTable extends CdkTable { + protected needsPositionStickyOnElement: boolean; + protected stickyCssClass: string; + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration, "mat-table, table[mat-table]", ["matTable"], {}, {}, never, ["caption", "colgroup, col"], false>; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration, never>; +} + +// @public +export class MatLegacyTableDataSource extends _MatLegacyTableDataSource { +} + +export { _MatLegacyTableDataSource } + +export { MatLegacyTableDataSourcePageEvent } + +export { MatLegacyTableDataSourcePaginator } + +// @public (undocumented) +export class MatLegacyTableModule { + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; + // (undocumented) + static ɵinj: i0.ɵɵInjectorDeclaration; + // (undocumented) + static ɵmod: i0.ɵɵNgModuleDeclaration; +} + +// @public +export class MatLegacyTextColumn extends CdkTextColumn { + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration, "mat-text-column", never, {}, {}, never, never, false>; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration, never>; +} + +// (No @packageDocumentation comment for this package) + +``` diff --git a/tools/public_api_guard/material/table-testing.md b/tools/public_api_guard/material/table-testing.md index 28d6134d2727..caff04c67739 100644 --- a/tools/public_api_guard/material/table-testing.md +++ b/tools/public_api_guard/material/table-testing.md @@ -17,17 +17,21 @@ export interface CellHarnessFilters extends BaseHarnessFilters { } // @public -export class MatCellHarness extends ContentContainerComponentHarness { +export class MatCellHarness extends _MatCellHarnessBase { + static hostSelector: string; + static with(options?: CellHarnessFilters): HarnessPredicate; +} + +// @public (undocumented) +export abstract class _MatCellHarnessBase extends ContentContainerComponentHarness { // (undocumented) protected static _getCellPredicate(type: ComponentHarnessConstructor, options: CellHarnessFilters): HarnessPredicate; getColumnName(): Promise; getText(): Promise; - static hostSelector: string; - static with(options?: CellHarnessFilters): HarnessPredicate; } // @public -export class MatFooterCellHarness extends MatCellHarness { +export class MatFooterCellHarness extends _MatCellHarnessBase { static hostSelector: string; static with(options?: CellHarnessFilters): HarnessPredicate; } @@ -37,11 +41,11 @@ export class MatFooterRowHarness extends _MatRowHarnessBase; + static with(this: ComponentHarnessConstructor, options?: RowHarnessFilters): HarnessPredicate; } // @public -export class MatHeaderCellHarness extends MatCellHarness { +export class MatHeaderCellHarness extends _MatCellHarnessBase { static hostSelector: string; static with(options?: CellHarnessFilters): HarnessPredicate; } @@ -51,7 +55,7 @@ export class MatHeaderRowHarness extends _MatRowHarnessBase; + static with(this: ComponentHarnessConstructor, options?: RowHarnessFilters): HarnessPredicate; } // @public @@ -59,16 +63,13 @@ export class MatRowHarness extends _MatRowHarnessBase; + static with(this: ComponentHarnessConstructor, options?: RowHarnessFilters): HarnessPredicate; } // @public (undocumented) export abstract class _MatRowHarnessBase & { with: (options?: CellHarnessFilters) => HarnessPredicate; -}, Cell extends ComponentHarness & { - getText(): Promise; - getColumnName(): Promise; -}> extends ComponentHarness { +}, Cell extends _MatCellHarnessBase> extends ComponentHarness { // (undocumented) protected abstract _cellHarness: CellType; getCells(filter?: CellHarnessFilters): Promise; @@ -91,7 +92,7 @@ export class MatTableHarness extends _MatTableHarnessBase; + static with(this: ComponentHarnessConstructor, options?: TableHarnessFilters): HarnessPredicate; } // @public (undocumented) diff --git a/tools/public_api_guard/material/table.md b/tools/public_api_guard/material/table.md index e144a5d57932..862cd8f3b3cc 100644 --- a/tools/public_api_guard/material/table.md +++ b/tools/public_api_guard/material/table.md @@ -21,13 +21,13 @@ import { CdkRow } from '@angular/cdk/table'; import { CdkRowDef } from '@angular/cdk/table'; import { CdkTable } from '@angular/cdk/table'; import { CdkTextColumn } from '@angular/cdk/table'; -import { DataSource } from '@angular/cdk/table'; +import { DataSource } from '@angular/cdk/collections'; import * as i0 from '@angular/core'; -import * as i5 from '@angular/cdk/table'; -import * as i6 from '@angular/material/core'; -import { MatLegacyPaginator } from '@angular/material/legacy-paginator'; +import * as i5 from '@angular/material/core'; +import * as i6 from '@angular/cdk/table'; import { MatSort } from '@angular/material/sort'; import { Observable } from 'rxjs'; +import { OnInit } from '@angular/core'; import { Subject } from 'rxjs'; import { Subscription } from 'rxjs'; @@ -156,9 +156,11 @@ export class MatRowDef extends CdkRowDef { static ɵfac: i0.ɵɵFactoryDeclaration, never>; } -// @public -export class MatTable extends CdkTable { +// @public (undocumented) +export class MatTable extends CdkTable implements OnInit { protected needsPositionStickyOnElement: boolean; + // (undocumented) + ngOnInit(): void; protected stickyCssClass: string; // (undocumented) static ɵcmp: i0.ɵɵComponentDeclaration, "mat-table, table[mat-table]", ["matTable"], {}, {}, never, ["caption", "colgroup, col"], false>; @@ -167,7 +169,7 @@ export class MatTable extends CdkTable { } // @public -export class MatTableDataSource extends _MatTableDataSource { +export class MatTableDataSource extends _MatTableDataSource { } // @public @@ -226,7 +228,7 @@ export class MatTableModule { // (undocumented) static ɵinj: i0.ɵɵInjectorDeclaration; // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public