cleanup

Author: MichaelJamesParsons

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",

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",
     ],
 )

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<T> implements _TableLayoutStrategy<T> {
   private readonly _document: Document;
-  private defaultLayout: _StandardTableLayoutStrategy;
+  private defaultLayout: _StandardTableLayoutStrategy<T>;
   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<unknown>): DocumentFragment {
+  getNativeLayout(table: CdkTable<T>): 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<unknown>): DocumentFragment {
+  getFlexLayout(table: CdkTable<T>): 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<T> {
   /**
    * 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<T>) {
   }
 }

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<T> {
   /** Constructs the DOM structure for a native table. */
-  getNativeLayout(table: CdkTable<unknown>): DocumentFragment;
+  getNativeLayout(table: CdkTable<T>): DocumentFragment;
   /** Constructs the DOM structure for a flex table. */
-  getFlexLayout(table: CdkTable<unknown>): DocumentFragment;
+  getFlexLayout(table: CdkTable<T>): DocumentFragment;
 }
 
 /** Injection token for {@link _TableLayoutStrategy}. */
 export const _TABLE_LAYOUT_STRATEGY =
-    new InjectionToken<_TableLayoutStrategy>('_TableLayoutStrategy');
+    new InjectionToken<_TableLayoutStrategy<unknown>>('_TableLayoutStrategy');
 
 
-export class _StandardTableLayoutStrategy implements _TableLayoutStrategy {
+export class _StandardTableLayoutStrategy<T> implements _TableLayoutStrategy<T> {
   private readonly _document: Document;
 
   constructor(@Inject(DOCUMENT) document: any) {

src/cdk/table/table.ts

@@ -507,7 +507,7 @@ export class CdkTable<T> 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<T>|null) {
     if (!role) {
       this._elementRef.nativeElement.setAttribute('role', 'grid');
     }

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",
     ],

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",
     ],

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,
   ],

src/components-examples/material-experimental/scrollable-table-body/mat-scrollable-table-body-flex/mat-scrollable-table-body-flex-example.html

@@ -3,7 +3,7 @@
 <button mat-raised-button (click)="nextMaxHeight()">Change max height</button>
 
 <p>Max Height: {{maxHeight}}</p>
-<mat-table [dataSource]="dataSource" class="mat-elevation-z8" [scrollableBody]="maxHeight">
+<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
     <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>

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",