implements AfterContentChecked, CollectionViewer, OnDes
});
}
- /** Adds native table sections (e.g. tbody) and moves the row outlets into them. */
- private _applyNativeTableSections() {
- const documentFragment = this._document.createDocumentFragment();
- const sections = [
- {tag: 'thead', outlets: [this._headerRowOutlet]},
- {tag: 'tbody', outlets: [this._rowOutlet, this._noDataRowOutlet]},
- {tag: 'tfoot', outlets: [this._footerRowOutlet]},
- ];
-
- for (const section of sections) {
- const element = this._document.createElement(section.tag);
- element.setAttribute('role', 'rowgroup');
-
- for (const outlet of section.outlets) {
- element.appendChild(outlet.elementRef.nativeElement);
- }
-
- documentFragment.appendChild(element);
- }
+ private _initTableLayout() {
+ const layoutStrategy = this._layoutStrategy || new _DefaultTableLayoutStrategy(this._document);
+ const layout = this._isNativeHtmlTable
+ ? layoutStrategy.getNativeLayout(this)
+ : layoutStrategy.getFlexLayout(this);
// Use a DocumentFragment so we don't hit the DOM on each iteration.
- this._elementRef.nativeElement.appendChild(documentFragment);
+ this._elementRef.nativeElement.appendChild(layout);
}
/**
diff --git a/src/components-examples/BUILD.bazel b/src/components-examples/BUILD.bazel
index 9ad3bb8ad421..ff8380765d1c 100644
--- a/src/components-examples/BUILD.bazel
+++ b/src/components-examples/BUILD.bazel
@@ -47,6 +47,7 @@ ALL_EXAMPLES = [
"//src/components-examples/material-experimental/popover-edit",
"//src/components-examples/material-experimental/mdc-card",
"//src/components-examples/material-experimental/mdc-form-field",
+ "//src/components-examples/material-experimental/scrollable-table-body",
"//src/components-examples/material-experimental/selection",
"//src/components-examples/cdk/tree",
"//src/components-examples/cdk/text-field",
@@ -61,6 +62,7 @@ ALL_EXAMPLES = [
"//src/components-examples/cdk/overlay",
"//src/components-examples/cdk-experimental/menu",
"//src/components-examples/cdk-experimental/popover-edit",
+ "//src/components-examples/cdk-experimental/scrollable-table-body",
"//src/components-examples/cdk-experimental/selection",
]
diff --git a/src/components-examples/cdk-experimental/scrollable-table-body/BUILD.bazel b/src/components-examples/cdk-experimental/scrollable-table-body/BUILD.bazel
new file mode 100644
index 000000000000..683a3878734f
--- /dev/null
+++ b/src/components-examples/cdk-experimental/scrollable-table-body/BUILD.bazel
@@ -0,0 +1,27 @@
+load("//tools:defaults.bzl", "ng_module")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+ name = "scrollable-table-body",
+ srcs = glob(["**/*.ts"]),
+ assets = glob([
+ "**/*.html",
+ "**/*.css",
+ ]),
+ module_name = "@angular/components-examples/cdk-experimental/scrollable-table-body",
+ deps = [
+ "//src/cdk-experimental/scrollable-table-body",
+ "//src/cdk/table",
+ "//src/material/button",
+ ],
+)
+
+filegroup(
+ name = "source-files",
+ srcs = glob([
+ "**/*.html",
+ "**/*.css",
+ "**/*.ts",
+ ]),
+)
diff --git a/src/components-examples/cdk-experimental/scrollable-table-body/cdk-scrollable-table-body-flex/cdk-scrollable-table-body-flex-example.css b/src/components-examples/cdk-experimental/scrollable-table-body/cdk-scrollable-table-body-flex/cdk-scrollable-table-body-flex-example.css
new file mode 100644
index 000000000000..f0d18e4f1d11
--- /dev/null
+++ b/src/components-examples/cdk-experimental/scrollable-table-body/cdk-scrollable-table-body-flex/cdk-scrollable-table-body-flex-example.css
@@ -0,0 +1,10 @@
+/**
+ * Add basic flex styling so that the cells evenly space themselves in the row.
+ */
+cdk-row, cdk-header-row, cdk-footer-row {
+ display: flex;
+}
+
+cdk-cell, cdk-header-cell, cdk-footer-cell {
+ flex: 1;
+}
diff --git a/src/components-examples/cdk-experimental/scrollable-table-body/cdk-scrollable-table-body-flex/cdk-scrollable-table-body-flex-example.html b/src/components-examples/cdk-experimental/scrollable-table-body/cdk-scrollable-table-body-flex/cdk-scrollable-table-body-flex-example.html
new file mode 100644
index 000000000000..5f166045434e
--- /dev/null
+++ b/src/components-examples/cdk-experimental/scrollable-table-body/cdk-scrollable-table-body-flex/cdk-scrollable-table-body-flex-example.html
@@ -0,0 +1,33 @@
+
+
+
+
+Max Height: {{maxHeight}}
+
+
+
+ No.
+ {{element.position}}
+
+
+
+
+ Name
+ {{element.name}}
+
+
+
+
+ Weight
+ {{element.weight}}
+
+
+
+
+ Symbol
+ {{element.symbol}}
+
+
+
+
+
diff --git a/src/components-examples/cdk-experimental/scrollable-table-body/cdk-scrollable-table-body-flex/cdk-scrollable-table-body-flex-example.ts b/src/components-examples/cdk-experimental/scrollable-table-body/cdk-scrollable-table-body-flex/cdk-scrollable-table-body-flex-example.ts
new file mode 100644
index 000000000000..4d225684be1d
--- /dev/null
+++ b/src/components-examples/cdk-experimental/scrollable-table-body/cdk-scrollable-table-body-flex/cdk-scrollable-table-body-flex-example.ts
@@ -0,0 +1,88 @@
+import {DataSource} from '@angular/cdk/collections';
+import {Component} from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
+
+export interface PeriodicElement {
+ name: string;
+ position: number;
+ symbol: string;
+ weight: number;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+ {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+ {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+ {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+ {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+ {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+ {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+ {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+ {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+ {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+ {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
+
+/**
+ * @title Example of {@link CdkScrollableTableBody} for the CDK flex table.
+ */
+@Component({
+ selector: 'cdk-scrollable-table-body-flex-example',
+ styleUrls: ['cdk-scrollable-table-body-flex-example.css'],
+ templateUrl: 'cdk-scrollable-table-body-flex-example.html',
+})
+export class CdkScrollableTableBodyFlexExample {
+ private readonly _allowedMaxHeights = ['100px', '200px', '400px', '800px'];
+ private _maxHeightIndex = 1;
+ displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+ dataSource = new ExampleDataSource();
+
+ get maxHeight() {
+ return this._allowedMaxHeights[this._maxHeightIndex];
+ }
+
+ addRow() {
+ this.dataSource.addRow();
+ }
+
+ removeRow() {
+ this.dataSource.removeRow();
+ }
+
+ nextMaxHeight() {
+ this._maxHeightIndex = (this._maxHeightIndex + 1) % this._allowedMaxHeights.length;
+ }
+}
+
+/**
+ * Data source to provide what data should be rendered in the table. Note that the data source
+ * can retrieve its data in any way. In this case, the data source is provided a reference
+ * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
+ * the underlying data. Instead, it only needs to take the data and send the table exactly what
+ * should be rendered.
+ */
+export class ExampleDataSource extends DataSource {
+ private _data = [...ELEMENT_DATA];
+ /** Stream of data that is provided to the table. */
+ data = new BehaviorSubject(this._data);
+
+ addRow() {
+ const row = {...ELEMENT_DATA[this._data.length % ELEMENT_DATA.length]};
+ row.position = this._data.length + 1;
+ this._data.push(row);
+ this.data.next(this._data);
+ }
+
+ removeRow() {
+ this._data.pop();
+ this.data.next(this._data);
+ }
+
+ /** Connect function called by the table to retrieve one stream containing the data to render. */
+ connect(): Observable {
+ return this.data;
+ }
+
+ disconnect() {
+ this.data.complete();
+ }
+}
diff --git a/src/components-examples/cdk-experimental/scrollable-table-body/index.ts b/src/components-examples/cdk-experimental/scrollable-table-body/index.ts
new file mode 100644
index 000000000000..48bae9f3ffc0
--- /dev/null
+++ b/src/components-examples/cdk-experimental/scrollable-table-body/index.ts
@@ -0,0 +1,30 @@
+import {NgModule} from '@angular/core';
+import {CdkTableModule} from '@angular/cdk/table';
+import {
+ CdkScrollableTableBodyModule,
+} from '@angular/cdk-experimental/scrollable-table-body/scrollable-table-body-module';
+import {
+ CdkScrollableTableBodyFlexExample,
+} from './cdk-scrollable-table-body-flex/cdk-scrollable-table-body-flex-example';
+import {MatButtonModule} from '@angular/material/button';
+
+export {
+ CdkScrollableTableBodyFlexExample,
+};
+
+const EXAMPLES = [
+ CdkScrollableTableBodyFlexExample,
+];
+
+@NgModule({
+ imports: [
+ CdkScrollableTableBodyModule,
+ CdkTableModule,
+ MatButtonModule,
+ ],
+ declarations: EXAMPLES,
+ exports: EXAMPLES,
+ entryComponents: EXAMPLES,
+})
+export class CdkScrollableTableBodyExamplesModule {
+}
diff --git a/src/components-examples/material-experimental/scrollable-table-body/BUILD.bazel b/src/components-examples/material-experimental/scrollable-table-body/BUILD.bazel
new file mode 100644
index 000000000000..3a341886ece2
--- /dev/null
+++ b/src/components-examples/material-experimental/scrollable-table-body/BUILD.bazel
@@ -0,0 +1,27 @@
+load("//tools:defaults.bzl", "ng_module")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+ name = "scrollable-table-body",
+ srcs = glob(["**/*.ts"]),
+ assets = glob([
+ "**/*.html",
+ "**/*.css",
+ ]),
+ module_name = "@angular/components-examples/material-experimental/scrollable-table-body",
+ deps = [
+ "//src/cdk-experimental/scrollable-table-body",
+ "//src/material/button",
+ "//src/material/table",
+ ],
+)
+
+filegroup(
+ name = "source-files",
+ srcs = glob([
+ "**/*.html",
+ "**/*.css",
+ "**/*.ts",
+ ]),
+)
diff --git a/src/components-examples/material-experimental/scrollable-table-body/index.ts b/src/components-examples/material-experimental/scrollable-table-body/index.ts
new file mode 100644
index 000000000000..f6f517aefa56
--- /dev/null
+++ b/src/components-examples/material-experimental/scrollable-table-body/index.ts
@@ -0,0 +1,30 @@
+import {NgModule} from '@angular/core';
+import {
+ CdkScrollableTableBodyModule,
+} from '@angular/cdk-experimental/scrollable-table-body/scrollable-table-body-module';
+import {
+ MatScrollableTableBodyFlexExample,
+} from './mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example';
+import {MatTableModule} from '@angular/material/table';
+import {MatButtonModule} from '@angular/material/button';
+
+export {
+ MatScrollableTableBodyFlexExample,
+};
+
+const EXAMPLES = [
+ MatScrollableTableBodyFlexExample,
+];
+
+@NgModule({
+ imports: [
+ CdkScrollableTableBodyModule,
+ MatButtonModule,
+ MatTableModule,
+ ],
+ declarations: EXAMPLES,
+ exports: EXAMPLES,
+ entryComponents: EXAMPLES,
+})
+export class MatScrollableTableBodyExamplesModule {
+}
diff --git a/src/components-examples/material-experimental/scrollable-table-body/mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example.html b/src/components-examples/material-experimental/scrollable-table-body/mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example.html
new file mode 100644
index 000000000000..695df5dc9908
--- /dev/null
+++ b/src/components-examples/material-experimental/scrollable-table-body/mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example.html
@@ -0,0 +1,33 @@
+
+
+
+
+Max Height: {{maxHeight}}
+
+
+
+ No.
+ {{element.position}}
+
+
+
+
+ Name
+ {{element.name}}
+
+
+
+
+ Weight
+ {{element.weight}}
+
+
+
+
+ Symbol
+ {{element.symbol}}
+
+
+
+
+
diff --git a/src/components-examples/material-experimental/scrollable-table-body/mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example.ts b/src/components-examples/material-experimental/scrollable-table-body/mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example.ts
new file mode 100644
index 000000000000..7c4301c91d6a
--- /dev/null
+++ b/src/components-examples/material-experimental/scrollable-table-body/mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example.ts
@@ -0,0 +1,87 @@
+import {DataSource} from '@angular/cdk/collections';
+import {Component} from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
+
+export interface PeriodicElement {
+ name: string;
+ position: number;
+ symbol: string;
+ weight: number;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+ {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+ {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+ {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+ {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+ {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+ {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+ {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+ {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+ {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+ {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
+
+/**
+ * @title Example of {@link CdkScrollableTableBody} for the material flex table.
+ */
+@Component({
+ selector: 'mat-scrollable-table-body-flex-example',
+ templateUrl: 'mat-scrollable-table-body-flex-example.html',
+})
+export class MatScrollableTableBodyFlexExample {
+ private readonly _allowedMaxHeights = ['100px', '200px', '400px', '800px'];
+ private _maxHeightIndex = 1;
+ displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+ dataSource = new ExampleDataSource();
+
+ get maxHeight() {
+ return this._allowedMaxHeights[this._maxHeightIndex];
+ }
+
+ addRow() {
+ this.dataSource.addRow();
+ }
+
+ removeRow() {
+ this.dataSource.removeRow();
+ }
+
+ nextMaxHeight() {
+ this._maxHeightIndex = (this._maxHeightIndex + 1) % this._allowedMaxHeights.length;
+ }
+}
+
+/**
+ * Data source to provide what data should be rendered in the table. Note that the data source
+ * can retrieve its data in any way. In this case, the data source is provided a reference
+ * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
+ * the underlying data. Instead, it only needs to take the data and send the table exactly what
+ * should be rendered.
+ */
+export class ExampleDataSource extends DataSource {
+ private _data = [...ELEMENT_DATA];
+ /** Stream of data that is provided to the table. */
+ data = new BehaviorSubject(this._data);
+
+ addRow() {
+ const row = {...ELEMENT_DATA[this._data.length % ELEMENT_DATA.length]};
+ row.position = this._data.length + 1;
+ this._data.push(row);
+ this.data.next(this._data);
+ }
+
+ removeRow() {
+ this._data.pop();
+ this.data.next(this._data);
+ }
+
+ /** Connect function called by the table to retrieve one stream containing the data to render. */
+ connect(): Observable {
+ return this.data;
+ }
+
+ disconnect() {
+ this.data.complete();
+ }
+}
diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
index 0ba4c94d89ab..dcc6cf3e5b01 100644
--- a/src/dev-app/BUILD.bazel
+++ b/src/dev-app/BUILD.bazel
@@ -78,6 +78,7 @@ ng_module(
"//src/dev-app/radio",
"//src/dev-app/ripple",
"//src/dev-app/screen-type",
+ "//src/dev-app/scrollable-table-body",
"//src/dev-app/select",
"//src/dev-app/selection",
"//src/dev-app/sidenav",
diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
index 985c4e00f19b..97a68589e17e 100644
--- a/src/dev-app/dev-app/dev-app-layout.ts
+++ b/src/dev-app/dev-app/dev-app-layout.ts
@@ -66,6 +66,7 @@ export class DevAppLayout {
{name: 'Radio', route: '/radio'},
{name: 'Ripple', route: '/ripple'},
{name: 'Screen Type', route: '/screen-type'},
+ {name: 'Scrollable table body', route: '/scrollable-table-body'},
{name: 'Select', route: '/select'},
{name: 'Selection', route: '/selection'},
{name: 'Sidenav', route: '/sidenav'},
diff --git a/src/dev-app/dev-app/routes.ts b/src/dev-app/dev-app/routes.ts
index 1f001264fe43..6b5e5adbf67f 100644
--- a/src/dev-app/dev-app/routes.ts
+++ b/src/dev-app/dev-app/routes.ts
@@ -130,6 +130,11 @@ export const DEV_APP_ROUTES: Routes = [
},
{path: 'radio', loadChildren: 'radio/radio-demo-module#RadioDemoModule'},
{path: 'ripple', loadChildren: 'ripple/ripple-demo-module#RippleDemoModule'},
+ {
+ path: 'scrollable-table-body',
+ loadChildren:
+ 'scrollable-table-body/scrollable-table-body-demo-module#ScrollableTableBodyDemoModule'
+ },
{path: 'select', loadChildren: 'select/select-demo-module#SelectDemoModule'},
{path: 'sidenav', loadChildren: 'sidenav/sidenav-demo-module#SidenavDemoModule'},
{
diff --git a/src/dev-app/scrollable-table-body/BUILD b/src/dev-app/scrollable-table-body/BUILD
new file mode 100644
index 000000000000..844e2b33ed48
--- /dev/null
+++ b/src/dev-app/scrollable-table-body/BUILD
@@ -0,0 +1,15 @@
+load("//tools:defaults.bzl", "ng_module")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+ name = "scrollable-table-body",
+ srcs = glob(["**/*.ts"]),
+ deps = [
+ "//src/components-examples/cdk-experimental/scrollable-table-body",
+ "//src/components-examples/material-experimental/scrollable-table-body",
+ "//src/dev-app/example",
+ "@npm//@angular/forms",
+ "@npm//@angular/router",
+ ],
+)
diff --git a/src/dev-app/scrollable-table-body/scrollable-table-body-demo-module.ts b/src/dev-app/scrollable-table-body/scrollable-table-body-demo-module.ts
new file mode 100644
index 000000000000..e382db64d8e9
--- /dev/null
+++ b/src/dev-app/scrollable-table-body/scrollable-table-body-demo-module.ts
@@ -0,0 +1,28 @@
+/**
+ * @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 {RouterModule} from '@angular/router';
+import {ScrollableTableBodyDemo} from './scrollable-table-body-demo';
+import {
+ CdkScrollableTableBodyExamplesModule,
+} from '@angular/components-examples/cdk-experimental/scrollable-table-body';
+import {
+ MatScrollableTableBodyExamplesModule,
+} from '@angular/components-examples/material-experimental/scrollable-table-body';
+
+@NgModule({
+ imports: [
+ CdkScrollableTableBodyExamplesModule,
+ MatScrollableTableBodyExamplesModule,
+ RouterModule.forChild([{path: '', component: ScrollableTableBodyDemo}]),
+ ],
+ declarations: [ScrollableTableBodyDemo],
+})
+export class ScrollableTableBodyDemoModule {
+}
diff --git a/src/dev-app/scrollable-table-body/scrollable-table-body-demo.ts b/src/dev-app/scrollable-table-body/scrollable-table-body-demo.ts
new file mode 100644
index 000000000000..6a0e80632473
--- /dev/null
+++ b/src/dev-app/scrollable-table-body/scrollable-table-body-demo.ts
@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+
+@Component({
+ template: `
+ CDK scrollable-table-body with flex table
+
+
+ Material scrollable-table-body with flex table
+
+ `,
+})
+export class ScrollableTableBodyDemo {}
diff --git a/src/material-experimental/config.bzl b/src/material-experimental/config.bzl
index 1006febdc775..f152aac1e727 100644
--- a/src/material-experimental/config.bzl
+++ b/src/material-experimental/config.bzl
@@ -45,6 +45,7 @@ entryPoints = [
"mdc-tabs/testing",
"menubar",
"popover-edit",
+ "scrollable-table-body",
"selection",
]
From 9eee0003eb42067901f4d294137f091005736802 Mon Sep 17 00:00:00 2001
From: Michael-James Parsons
<2666285+MichaelJamesParsons@users.noreply.github.com>
Date: Thu, 22 Oct 2020 13:40:32 -0700
Subject: [PATCH 2/3] cleanup
---
.../BUILD.bazel | 4 ++--
.../{scrollable-table-body => table}/index.ts | 0
.../public-api.ts | 0
.../scrollable-table-body-layout.spec.ts | 0
.../scrollable-table-body-layout.ts | 20 +++++++++--------
.../scrollable-table-body-module.ts | 0
src/cdk/table/table-layout-strategy.ts | 6 ++---
src/cdk/table/table.ts | 4 ++--
.../scrollable-table-body/index.ts | 2 +-
.../scrollable-table-body/index.ts | 2 +-
src/dev-app/scrollable-table-body/BUILD | 4 ++--
src/material-experimental/table/BUILD.bazel | 18 +++++++++++++++
src/material-experimental/table/index.ts | 9 ++++++++
src/material-experimental/table/public-api.ts | 10 +++++++++
.../table/scrollable-table-body-layout.ts | 22 +++++++++++++++++++
.../table/scrollable-table-body-module.ts | 22 +++++++++++++++++++
16 files changed, 103 insertions(+), 20 deletions(-)
rename src/cdk-experimental/{scrollable-table-body => table}/BUILD.bazel (86%)
rename src/cdk-experimental/{scrollable-table-body => table}/index.ts (100%)
rename src/cdk-experimental/{scrollable-table-body => table}/public-api.ts (100%)
rename src/cdk-experimental/{scrollable-table-body => table}/scrollable-table-body-layout.spec.ts (100%)
rename src/cdk-experimental/{scrollable-table-body => table}/scrollable-table-body-layout.ts (85%)
rename src/cdk-experimental/{scrollable-table-body => table}/scrollable-table-body-module.ts (100%)
create mode 100644 src/material-experimental/table/BUILD.bazel
create mode 100644 src/material-experimental/table/index.ts
create mode 100644 src/material-experimental/table/public-api.ts
create mode 100644 src/material-experimental/table/scrollable-table-body-layout.ts
create mode 100644 src/material-experimental/table/scrollable-table-body-module.ts
diff --git a/src/cdk-experimental/scrollable-table-body/BUILD.bazel b/src/cdk-experimental/table/BUILD.bazel
similarity index 86%
rename from src/cdk-experimental/scrollable-table-body/BUILD.bazel
rename to src/cdk-experimental/table/BUILD.bazel
index 8b6ff892095c..2e9be72e8b6c 100644
--- a/src/cdk-experimental/scrollable-table-body/BUILD.bazel
+++ b/src/cdk-experimental/table/BUILD.bazel
@@ -3,12 +3,12 @@ load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite"
package(default_visibility = ["//visibility:public"])
ng_module(
- name = "scrollable-table-body",
+ name = "table",
srcs = glob(
["**/*.ts"],
exclude = ["**/*.spec.ts"],
),
- module_name = "@angular/cdk-experimental/scrollable-table-body",
+ module_name = "@angular/cdk-experimental/table",
deps = [
"//src/cdk/table",
"@npm//@angular/common",
diff --git a/src/cdk-experimental/scrollable-table-body/index.ts b/src/cdk-experimental/table/index.ts
similarity index 100%
rename from src/cdk-experimental/scrollable-table-body/index.ts
rename to src/cdk-experimental/table/index.ts
diff --git a/src/cdk-experimental/scrollable-table-body/public-api.ts b/src/cdk-experimental/table/public-api.ts
similarity index 100%
rename from src/cdk-experimental/scrollable-table-body/public-api.ts
rename to src/cdk-experimental/table/public-api.ts
diff --git a/src/cdk-experimental/scrollable-table-body/scrollable-table-body-layout.spec.ts b/src/cdk-experimental/table/scrollable-table-body-layout.spec.ts
similarity index 100%
rename from src/cdk-experimental/scrollable-table-body/scrollable-table-body-layout.spec.ts
rename to src/cdk-experimental/table/scrollable-table-body-layout.spec.ts
diff --git a/src/cdk-experimental/scrollable-table-body/scrollable-table-body-layout.ts b/src/cdk-experimental/table/scrollable-table-body-layout.ts
similarity index 85%
rename from src/cdk-experimental/scrollable-table-body/scrollable-table-body-layout.ts
rename to src/cdk-experimental/table/scrollable-table-body-layout.ts
index ba6a616e30ad..ae6e1e82a85b 100644
--- a/src/cdk-experimental/scrollable-table-body/scrollable-table-body-layout.ts
+++ b/src/cdk-experimental/table/scrollable-table-body-layout.ts
@@ -12,7 +12,7 @@ import {DOCUMENT} from '@angular/common';
import {
_TABLE_LAYOUT_STRATEGY,
_TableLayoutStrategy,
- _DefaultTableLayoutStrategy,
+ _StandardTableLayoutStrategy,
} from '@angular/cdk/table/table-layout-strategy';
/**
@@ -20,15 +20,17 @@ import {
*/
@Injectable()
class ScrollableTableBodyLayoutStrategy implements _TableLayoutStrategy {
- private defaultLayout: _DefaultTableLayoutStrategy;
+ private readonly _document: Document;
+ private defaultLayout: _StandardTableLayoutStrategy;
private _pendingMaxHeight = 'none';
private _scrollViewport?: HTMLElement;
readonly headerCssClass = 'cdk-table-scrollable-table-header';
readonly bodyCssClass = 'cdk-table-scrollable-table-body';
readonly footerCssClass = 'cdk-table-scrollable-table-footer';
- constructor(@Inject(DOCUMENT) private readonly _document: any) {
- this.defaultLayout = new _DefaultTableLayoutStrategy(this._document);
+ constructor(@Inject(DOCUMENT) document: any) {
+ this._document = document;
+ this.defaultLayout = new _StandardTableLayoutStrategy(this._document);
}
/**
@@ -47,14 +49,14 @@ class ScrollableTableBodyLayoutStrategy implements _TableLayoutStrategy {
getFlexLayout(table: CdkTable): DocumentFragment {
const documentFragment = this._document.createDocumentFragment();
const sections = [
- {selector: this.headerCssClass, outlets: [table._headerRowOutlet]},
- {selector: this.bodyCssClass, outlets: [table._rowOutlet, table._noDataRowOutlet]},
- {selector: this.footerCssClass, outlets: [table._footerRowOutlet]},
+ {cssClass: this.headerCssClass, outlets: [table._headerRowOutlet]},
+ {cssClass: this.bodyCssClass, outlets: [table._rowOutlet, table._noDataRowOutlet]},
+ {cssClass: this.footerCssClass, outlets: [table._footerRowOutlet]},
];
for (const section of sections) {
const element = this._document.createElement('div');
- element.classList.add(section.selector);
+ element.classList.add(section.cssClass);
for (const outlet of section.outlets) {
element.appendChild(outlet.elementRef.nativeElement);
}
@@ -87,7 +89,7 @@ class ScrollableTableBodyLayoutStrategy implements _TableLayoutStrategy {
/** A directive that enables scrollable body content for flex tables. */
@Directive({
- selector: 'cdk-table[scrollableBody], mat-table[scrollableBody]',
+ selector: 'cdk-table[scrollableBody]',
providers: [
{provide: _TABLE_LAYOUT_STRATEGY, useClass: ScrollableTableBodyLayoutStrategy},
]
diff --git a/src/cdk-experimental/scrollable-table-body/scrollable-table-body-module.ts b/src/cdk-experimental/table/scrollable-table-body-module.ts
similarity index 100%
rename from src/cdk-experimental/scrollable-table-body/scrollable-table-body-module.ts
rename to src/cdk-experimental/table/scrollable-table-body-module.ts
diff --git a/src/cdk/table/table-layout-strategy.ts b/src/cdk/table/table-layout-strategy.ts
index 42467294770e..58c86d85307e 100644
--- a/src/cdk/table/table-layout-strategy.ts
+++ b/src/cdk/table/table-layout-strategy.ts
@@ -13,9 +13,9 @@ import {DOCUMENT} from '@angular/common';
/** Interface for a service that constructs the DOM structure for a {@link CdkTable}. */
export interface _TableLayoutStrategy {
/** Constructs the DOM structure for a native table. */
- getNativeLayout(table: CdkTable): DocumentFragment;
+ getNativeLayout(table: CdkTable): DocumentFragment;
/** Constructs the DOM structure for a flex table. */
- getFlexLayout(table: CdkTable): DocumentFragment;
+ getFlexLayout(table: CdkTable): DocumentFragment;
}
/** Injection token for {@link _TableLayoutStrategy}. */
@@ -23,7 +23,7 @@ export const _TABLE_LAYOUT_STRATEGY =
new InjectionToken<_TableLayoutStrategy>('_TableLayoutStrategy');
-export class _DefaultTableLayoutStrategy implements _TableLayoutStrategy {
+export class _StandardTableLayoutStrategy implements _TableLayoutStrategy {
private readonly _document: Document;
constructor(@Inject(DOCUMENT) document: any) {
diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts
index cd5890e58487..a28c9824482b 100644
--- a/src/cdk/table/table.ts
+++ b/src/cdk/table/table.ts
@@ -82,7 +82,7 @@ import {
import {STICKY_POSITIONING_LISTENER, StickyPositioningListener} from './sticky-position-listener';
import {CDK_TABLE} from './tokens';
import {
- _DefaultTableLayoutStrategy,
+ _StandardTableLayoutStrategy,
_TABLE_LAYOUT_STRATEGY,
_TableLayoutStrategy
} from './table-layout-strategy';
@@ -1157,7 +1157,7 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes
}
private _initTableLayout() {
- const layoutStrategy = this._layoutStrategy || new _DefaultTableLayoutStrategy(this._document);
+ const layoutStrategy = this._layoutStrategy || new _StandardTableLayoutStrategy(this._document);
const layout = this._isNativeHtmlTable
? layoutStrategy.getNativeLayout(this)
: layoutStrategy.getFlexLayout(this);
diff --git a/src/components-examples/cdk-experimental/scrollable-table-body/index.ts b/src/components-examples/cdk-experimental/scrollable-table-body/index.ts
index 48bae9f3ffc0..2fdb7cb4d131 100644
--- a/src/components-examples/cdk-experimental/scrollable-table-body/index.ts
+++ b/src/components-examples/cdk-experimental/scrollable-table-body/index.ts
@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
import {CdkTableModule} from '@angular/cdk/table';
import {
CdkScrollableTableBodyModule,
-} from '@angular/cdk-experimental/scrollable-table-body/scrollable-table-body-module';
+} from '@angular/cdk-experimental/table/scrollable-table-body-module';
import {
CdkScrollableTableBodyFlexExample,
} from './cdk-scrollable-table-body-flex/cdk-scrollable-table-body-flex-example';
diff --git a/src/components-examples/material-experimental/scrollable-table-body/index.ts b/src/components-examples/material-experimental/scrollable-table-body/index.ts
index f6f517aefa56..6fb6a3aeeaa0 100644
--- a/src/components-examples/material-experimental/scrollable-table-body/index.ts
+++ b/src/components-examples/material-experimental/scrollable-table-body/index.ts
@@ -1,7 +1,7 @@
import {NgModule} from '@angular/core';
import {
CdkScrollableTableBodyModule,
-} from '@angular/cdk-experimental/scrollable-table-body/scrollable-table-body-module';
+} from '@angular/cdk-experimental/table/scrollable-table-body-module';
import {
MatScrollableTableBodyFlexExample,
} from './mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example';
diff --git a/src/dev-app/scrollable-table-body/BUILD b/src/dev-app/scrollable-table-body/BUILD
index 844e2b33ed48..a642fb394612 100644
--- a/src/dev-app/scrollable-table-body/BUILD
+++ b/src/dev-app/scrollable-table-body/BUILD
@@ -6,8 +6,8 @@ ng_module(
name = "scrollable-table-body",
srcs = glob(["**/*.ts"]),
deps = [
- "//src/components-examples/cdk-experimental/scrollable-table-body",
- "//src/components-examples/material-experimental/scrollable-table-body",
+ "//src/components-examples/cdk-experimental/table",
+ "//src/components-examples/material-experimental/table",
"//src/dev-app/example",
"@npm//@angular/forms",
"@npm//@angular/router",
diff --git a/src/material-experimental/table/BUILD.bazel b/src/material-experimental/table/BUILD.bazel
new file mode 100644
index 000000000000..ff2dffd8a5d8
--- /dev/null
+++ b/src/material-experimental/table/BUILD.bazel
@@ -0,0 +1,18 @@
+load("//tools:defaults.bzl", "ng_module")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+ name = "table",
+ srcs = glob(
+ ["**/*.ts"],
+ exclude = ["**/*.spec.ts"],
+ ),
+ module_name = "@angular/material-experimental/table",
+ deps = [
+ "//src/mat/table",
+ "@npm//@angular/common",
+ "@npm//@angular/core",
+ "@npm//rxjs",
+ ],
+)
diff --git a/src/material-experimental/table/index.ts b/src/material-experimental/table/index.ts
new file mode 100644
index 000000000000..676ca90f1ffa
--- /dev/null
+++ b/src/material-experimental/table/index.ts
@@ -0,0 +1,9 @@
+/**
+ * @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 './public-api';
diff --git a/src/material-experimental/table/public-api.ts b/src/material-experimental/table/public-api.ts
new file mode 100644
index 000000000000..0f0b4879b5b4
--- /dev/null
+++ b/src/material-experimental/table/public-api.ts
@@ -0,0 +1,10 @@
+/**
+ * @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 './scrollable-table-body-layout';
+export * from './scrollable-table-body-module';
diff --git a/src/material-experimental/table/scrollable-table-body-layout.ts b/src/material-experimental/table/scrollable-table-body-layout.ts
new file mode 100644
index 000000000000..20c45c082a6c
--- /dev/null
+++ b/src/material-experimental/table/scrollable-table-body-layout.ts
@@ -0,0 +1,22 @@
+/**
+ * @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 {Directive} from '@angular/core';
+import {
+ _TABLE_LAYOUT_STRATEGY,
+} from '@angular/cdk/table/table-layout-strategy';
+
+/** A directive that enables scrollable body content for flex tables. */
+@Directive({
+ selector: 'mat-table[scrollableBody]',
+ providers: [
+ {provide: _TABLE_LAYOUT_STRATEGY, useClass: ScrollableTableBodyLayoutStrategy},
+ ]
+})
+export class MatScrollableTableBody {
+}
diff --git a/src/material-experimental/table/scrollable-table-body-module.ts b/src/material-experimental/table/scrollable-table-body-module.ts
new file mode 100644
index 000000000000..5ae89ecaef40
--- /dev/null
+++ b/src/material-experimental/table/scrollable-table-body-module.ts
@@ -0,0 +1,22 @@
+/**
+ * @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 {MatScrollableTableBody} from './scrollable-table-body-layout';
+
+export {MatScrollableTableBody};
+
+const EXPORTED_DECLARATIONS = [
+ MatScrollableTableBody,
+];
+
+@NgModule({
+ exports: EXPORTED_DECLARATIONS,
+ declarations: EXPORTED_DECLARATIONS,
+})
+export class MatScrollableTableBodyModule { }
From e430a4cebc0cf8fae09fd44acbee302a1aced3cd Mon Sep 17 00:00:00 2001
From: Michael-James Parsons
<2666285+MichaelJamesParsons@users.noreply.github.com>
Date: Thu, 11 Feb 2021 14:24:19 -0800
Subject: [PATCH 3/3] cleanup
---
src/cdk-experimental/config.bzl | 2 +-
src/cdk-experimental/table/BUILD.bazel | 2 +-
.../table/scrollable-table-body-layout.ts | 14 +++++++-------
src/cdk/table/table-layout-strategy.ts | 10 +++++-----
src/cdk/table/table.ts | 2 +-
.../scrollable-table-body/BUILD.bazel | 2 +-
.../scrollable-table-body/BUILD.bazel | 3 ++-
.../scrollable-table-body/index.ts | 2 ++
.../mat-scrollable-table-body-flex-example.html | 2 +-
src/dev-app/scrollable-table-body/BUILD | 3 +--
.../scrollable-table-body-demo-module.ts | 6 +++---
.../scrollable-table-body-demo.ts | 2 +-
src/material-experimental/config.bzl | 2 +-
src/material-experimental/table/BUILD.bazel | 3 ++-
.../table/scrollable-table-body-layout.ts | 1 +
15 files changed, 30 insertions(+), 26 deletions(-)
diff --git a/src/cdk-experimental/config.bzl b/src/cdk-experimental/config.bzl
index 605c11af0e4f..2570c021489f 100644
--- a/src/cdk-experimental/config.bzl
+++ b/src/cdk-experimental/config.bzl
@@ -6,7 +6,7 @@ CDK_EXPERIMENTAL_ENTRYPOINTS = [
"menu",
"listbox",
"popover-edit",
- "scrollable-table-body",
+ "table",
"scrolling",
"selection",
"table-scroll-container",
diff --git a/src/cdk-experimental/table/BUILD.bazel b/src/cdk-experimental/table/BUILD.bazel
index 2e9be72e8b6c..1d6183c15362 100644
--- a/src/cdk-experimental/table/BUILD.bazel
+++ b/src/cdk-experimental/table/BUILD.bazel
@@ -24,7 +24,7 @@ ng_test_library(
exclude = ["**/*.e2e.spec.ts"],
),
deps = [
- ":scrollable-table-body",
+ ":table",
"//src/cdk/table",
],
)
diff --git a/src/cdk-experimental/table/scrollable-table-body-layout.ts b/src/cdk-experimental/table/scrollable-table-body-layout.ts
index ae6e1e82a85b..38e8892a4a72 100644
--- a/src/cdk-experimental/table/scrollable-table-body-layout.ts
+++ b/src/cdk-experimental/table/scrollable-table-body-layout.ts
@@ -19,9 +19,9 @@ import {
* A {@link _TableLayoutStrategy} that enables scrollable body content for flex tables.
*/
@Injectable()
-class ScrollableTableBodyLayoutStrategy implements _TableLayoutStrategy {
+export class ScrollableTableBodyLayoutStrategy implements _TableLayoutStrategy {
private readonly _document: Document;
- private defaultLayout: _StandardTableLayoutStrategy;
+ private defaultLayout: _StandardTableLayoutStrategy;
private _pendingMaxHeight = 'none';
private _scrollViewport?: HTMLElement;
readonly headerCssClass = 'cdk-table-scrollable-table-header';
@@ -37,7 +37,7 @@ class ScrollableTableBodyLayoutStrategy implements _TableLayoutStrategy {
* Returns the DOM structure for a native table. Scrollable body content is not supported for
* native tables. Return `null` to use the default {@link CdkTable} native table layout.
*/
- getNativeLayout(table: CdkTable): DocumentFragment {
+ getNativeLayout(table: CdkTable): DocumentFragment {
return this.defaultLayout.getNativeLayout(table);
}
@@ -46,7 +46,7 @@ class ScrollableTableBodyLayoutStrategy implements _TableLayoutStrategy {
* (header, body, footer) is wrapped in a separate container. The specified max height is applied
* to the body row outlet to make its content scrollable.
*/
- getFlexLayout(table: CdkTable): DocumentFragment {
+ getFlexLayout(table: CdkTable): DocumentFragment {
const documentFragment = this._document.createDocumentFragment();
const sections = [
{cssClass: this.headerCssClass, outlets: [table._headerRowOutlet]},
@@ -64,7 +64,7 @@ class ScrollableTableBodyLayoutStrategy implements _TableLayoutStrategy {
documentFragment.appendChild(element);
}
- this._scrollViewport = documentFragment.querySelector(`.${this.bodyCssClass}`);
+ this._scrollViewport = documentFragment.querySelector(`.${this.bodyCssClass}`) as HTMLElement;
this._scrollViewport!.style.overflow = 'auto';
this._applyMaxHeight(this._scrollViewport!, this._pendingMaxHeight);
@@ -94,7 +94,7 @@ class ScrollableTableBodyLayoutStrategy implements _TableLayoutStrategy {
{provide: _TABLE_LAYOUT_STRATEGY, useClass: ScrollableTableBodyLayoutStrategy},
]
})
-export class CdkScrollableTableBody {
+export class CdkScrollableTableBody {
/**
* Show a scroll bar if the table's body exceeds this height. The height may be specified with
* any valid CSS unit of measurement.
@@ -110,6 +110,6 @@ export class CdkScrollableTableBody {
private _maxHeight = '';
constructor(@Inject(_TABLE_LAYOUT_STRATEGY)
- private readonly _layoutStrategy: ScrollableTableBodyLayoutStrategy) {
+ private readonly _layoutStrategy: ScrollableTableBodyLayoutStrategy) {
}
}
diff --git a/src/cdk/table/table-layout-strategy.ts b/src/cdk/table/table-layout-strategy.ts
index 58c86d85307e..e37d90d386ac 100644
--- a/src/cdk/table/table-layout-strategy.ts
+++ b/src/cdk/table/table-layout-strategy.ts
@@ -11,19 +11,19 @@ import {CdkTable} from '@angular/cdk/table/table';
import {DOCUMENT} from '@angular/common';
/** Interface for a service that constructs the DOM structure for a {@link CdkTable}. */
-export interface _TableLayoutStrategy {
+export interface _TableLayoutStrategy {
/** Constructs the DOM structure for a native table. */
- getNativeLayout(table: CdkTable): DocumentFragment;
+ getNativeLayout(table: CdkTable): DocumentFragment;
/** Constructs the DOM structure for a flex table. */
- getFlexLayout(table: CdkTable): DocumentFragment;
+ getFlexLayout(table: CdkTable): DocumentFragment;
}
/** Injection token for {@link _TableLayoutStrategy}. */
export const _TABLE_LAYOUT_STRATEGY =
- new InjectionToken<_TableLayoutStrategy>('_TableLayoutStrategy');
+ new InjectionToken<_TableLayoutStrategy>('_TableLayoutStrategy');
-export class _StandardTableLayoutStrategy implements _TableLayoutStrategy {
+export class _StandardTableLayoutStrategy implements _TableLayoutStrategy {
private readonly _document: Document;
constructor(@Inject(DOCUMENT) document: any) {
diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts
index a28c9824482b..1ae1ded3930e 100644
--- a/src/cdk/table/table.ts
+++ b/src/cdk/table/table.ts
@@ -507,7 +507,7 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes
// tslint:disable-next-line: lightweight-tokens
@Optional() private readonly _viewportRuler?: ViewportRuler,
@Optional() @Inject(_TABLE_LAYOUT_STRATEGY)
- @Optional() private readonly _layoutStrategy?: _TableLayoutStrategy|null) {
+ @Optional() private readonly _layoutStrategy?: _TableLayoutStrategy|null) {
if (!role) {
this._elementRef.nativeElement.setAttribute('role', 'grid');
}
diff --git a/src/components-examples/cdk-experimental/scrollable-table-body/BUILD.bazel b/src/components-examples/cdk-experimental/scrollable-table-body/BUILD.bazel
index 683a3878734f..18422a173169 100644
--- a/src/components-examples/cdk-experimental/scrollable-table-body/BUILD.bazel
+++ b/src/components-examples/cdk-experimental/scrollable-table-body/BUILD.bazel
@@ -11,7 +11,7 @@ ng_module(
]),
module_name = "@angular/components-examples/cdk-experimental/scrollable-table-body",
deps = [
- "//src/cdk-experimental/scrollable-table-body",
+ "//src/cdk-experimental/table",
"//src/cdk/table",
"//src/material/button",
],
diff --git a/src/components-examples/material-experimental/scrollable-table-body/BUILD.bazel b/src/components-examples/material-experimental/scrollable-table-body/BUILD.bazel
index 3a341886ece2..3ffa897f3254 100644
--- a/src/components-examples/material-experimental/scrollable-table-body/BUILD.bazel
+++ b/src/components-examples/material-experimental/scrollable-table-body/BUILD.bazel
@@ -11,7 +11,8 @@ ng_module(
]),
module_name = "@angular/components-examples/material-experimental/scrollable-table-body",
deps = [
- "//src/cdk-experimental/scrollable-table-body",
+ "//src/cdk-experimental/table",
+ "//src/material-experimental/table",
"//src/material/button",
"//src/material/table",
],
diff --git a/src/components-examples/material-experimental/scrollable-table-body/index.ts b/src/components-examples/material-experimental/scrollable-table-body/index.ts
index 6fb6a3aeeaa0..d02746454046 100644
--- a/src/components-examples/material-experimental/scrollable-table-body/index.ts
+++ b/src/components-examples/material-experimental/scrollable-table-body/index.ts
@@ -7,6 +7,7 @@ import {
} from './mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example';
import {MatTableModule} from '@angular/material/table';
import {MatButtonModule} from '@angular/material/button';
+import {MatScrollableTableBodyModule} from '@angular/material-experimental/table';
export {
MatScrollableTableBodyFlexExample,
@@ -19,6 +20,7 @@ const EXAMPLES = [
@NgModule({
imports: [
CdkScrollableTableBodyModule,
+ MatScrollableTableBodyModule,
MatButtonModule,
MatTableModule,
],
diff --git a/src/components-examples/material-experimental/scrollable-table-body/mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example.html b/src/components-examples/material-experimental/scrollable-table-body/mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example.html
index 695df5dc9908..9aa81028b3ea 100644
--- a/src/components-examples/material-experimental/scrollable-table-body/mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example.html
+++ b/src/components-examples/material-experimental/scrollable-table-body/mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example.html
@@ -3,7 +3,7 @@
Max Height: {{maxHeight}}
-
+
No.
diff --git a/src/dev-app/scrollable-table-body/BUILD b/src/dev-app/scrollable-table-body/BUILD
index a642fb394612..9aef1e71faac 100644
--- a/src/dev-app/scrollable-table-body/BUILD
+++ b/src/dev-app/scrollable-table-body/BUILD
@@ -6,8 +6,7 @@ ng_module(
name = "scrollable-table-body",
srcs = glob(["**/*.ts"]),
deps = [
- "//src/components-examples/cdk-experimental/table",
- "//src/components-examples/material-experimental/table",
+ "//src/components-examples/material-experimental/scrollable-table-body",
"//src/dev-app/example",
"@npm//@angular/forms",
"@npm//@angular/router",
diff --git a/src/dev-app/scrollable-table-body/scrollable-table-body-demo-module.ts b/src/dev-app/scrollable-table-body/scrollable-table-body-demo-module.ts
index e382db64d8e9..60f7c25b2216 100644
--- a/src/dev-app/scrollable-table-body/scrollable-table-body-demo-module.ts
+++ b/src/dev-app/scrollable-table-body/scrollable-table-body-demo-module.ts
@@ -9,16 +9,16 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {ScrollableTableBodyDemo} from './scrollable-table-body-demo';
-import {
+/*import {
CdkScrollableTableBodyExamplesModule,
-} from '@angular/components-examples/cdk-experimental/scrollable-table-body';
+} from '@angular/components-examples/cdk-experimental/scrollable-table-body';*/
import {
MatScrollableTableBodyExamplesModule,
} from '@angular/components-examples/material-experimental/scrollable-table-body';
@NgModule({
imports: [
- CdkScrollableTableBodyExamplesModule,
+ // CdkScrollableTableBodyExamplesModule,
MatScrollableTableBodyExamplesModule,
RouterModule.forChild([{path: '', component: ScrollableTableBodyDemo}]),
],
diff --git a/src/dev-app/scrollable-table-body/scrollable-table-body-demo.ts b/src/dev-app/scrollable-table-body/scrollable-table-body-demo.ts
index 6a0e80632473..5f6852d0852f 100644
--- a/src/dev-app/scrollable-table-body/scrollable-table-body-demo.ts
+++ b/src/dev-app/scrollable-table-body/scrollable-table-body-demo.ts
@@ -11,7 +11,7 @@ import {Component} from '@angular/core';
@Component({
template: `
CDK scrollable-table-body with flex table
-
+
Material scrollable-table-body with flex table
diff --git a/src/material-experimental/config.bzl b/src/material-experimental/config.bzl
index f152aac1e727..eca0e2a4d8e6 100644
--- a/src/material-experimental/config.bzl
+++ b/src/material-experimental/config.bzl
@@ -45,7 +45,7 @@ entryPoints = [
"mdc-tabs/testing",
"menubar",
"popover-edit",
- "scrollable-table-body",
+ "table",
"selection",
]
diff --git a/src/material-experimental/table/BUILD.bazel b/src/material-experimental/table/BUILD.bazel
index ff2dffd8a5d8..78b6c67faffc 100644
--- a/src/material-experimental/table/BUILD.bazel
+++ b/src/material-experimental/table/BUILD.bazel
@@ -10,7 +10,8 @@ ng_module(
),
module_name = "@angular/material-experimental/table",
deps = [
- "//src/mat/table",
+ "//src/material/table",
+ "//src/cdk-experimental/table",
"@npm//@angular/common",
"@npm//@angular/core",
"@npm//rxjs",
diff --git a/src/material-experimental/table/scrollable-table-body-layout.ts b/src/material-experimental/table/scrollable-table-body-layout.ts
index 20c45c082a6c..b7c395d94124 100644
--- a/src/material-experimental/table/scrollable-table-body-layout.ts
+++ b/src/material-experimental/table/scrollable-table-body-layout.ts
@@ -10,6 +10,7 @@ import {Directive} from '@angular/core';
import {
_TABLE_LAYOUT_STRATEGY,
} from '@angular/cdk/table/table-layout-strategy';
+import {ScrollableTableBodyLayoutStrategy} from '@angular/cdk-experimental/table';
/** A directive that enables scrollable body content for flex tables. */
@Directive({