refactor(cdk/table): require virtual scrolling to be enabled explicitly

Currently virtual scrolling can be enabled by wrapping the table in a `cdk-virtual-scroll-viewport`. This is great for DX, but it appears to be breaking internally because apps had their own virtual scrolling implementations.

To avoid conflicts, these changes switch to requiring the user to explicitly enable virtual scrolling through the `virtualScroll` input.

Author: crisbeto

goldens/cdk/scrolling/index.api.md

@@ -26,9 +26,6 @@ export type _Bottom = {
     bottom?: number;
 };
 
-// @public
-export const CDK_VIRTUAL_SCROLL_VIEWPORT: InjectionToken<CdkVirtualScrollViewport>;
-
 // @public
 export class CdkFixedSizeVirtualScroll implements OnChanges {
     get itemSize(): number;

goldens/cdk/table/index.api.md

@@ -372,8 +372,9 @@ export class CdkTable<T> implements AfterContentInit, AfterContentChecked, Colle
     readonly viewChange: BehaviorSubject<ListRange>;
     // (undocumented)
     protected _viewRepeater: _ViewRepeater<T, RenderRow<T>, RowContext<T>>;
+    virtualScroll: CdkVirtualScrollViewport | null;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<CdkTable<any>, "cdk-table, table[cdk-table]", ["cdkTable"], { "trackBy": { "alias": "trackBy"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; "multiTemplateDataRows": { "alias": "multiTemplateDataRows"; "required": false; }; "fixedLayout": { "alias": "fixedLayout"; "required": false; }; "recycleRows": { "alias": "recycleRows"; "required": false; }; }, { "contentChanged": "contentChanged"; }, ["_noDataRow", "_contentColumnDefs", "_contentRowDefs", "_contentHeaderRowDefs", "_contentFooterRowDefs"], ["caption", "colgroup, col", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CdkTable<any>, "cdk-table, table[cdk-table]", ["cdkTable"], { "trackBy": { "alias": "trackBy"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; "multiTemplateDataRows": { "alias": "multiTemplateDataRows"; "required": false; }; "fixedLayout": { "alias": "fixedLayout"; "required": false; }; "recycleRows": { "alias": "recycleRows"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; }, { "contentChanged": "contentChanged"; }, ["_noDataRow", "_contentColumnDefs", "_contentRowDefs", "_contentHeaderRowDefs", "_contentFooterRowDefs"], ["caption", "colgroup, col", "*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkTable<any>, never>;
 }

src/cdk/scrolling/virtual-for-of.ts

@@ -36,7 +36,7 @@ import {NumberInput, coerceNumberProperty} from '../coercion';
 import {Observable, Subject, of as observableOf, isObservable} from 'rxjs';
 import {pairwise, shareReplay, startWith, switchMap, takeUntil} from 'rxjs/operators';
 import {CdkVirtualScrollRepeater} from './virtual-scroll-repeater';
-import {CDK_VIRTUAL_SCROLL_VIEWPORT} from './virtual-scroll-viewport';
+import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';
 
 /** The context for an item rendered by `CdkVirtualForOf` */
 export type CdkVirtualForOfContext<T> = {
@@ -87,7 +87,7 @@ export class CdkVirtualForOf<T>
   private _template = inject<TemplateRef<CdkVirtualForOfContext<T>>>(TemplateRef);
   private _differs = inject(IterableDiffers);
   private _viewRepeater = new _RecycleViewRepeaterStrategy<T, T, CdkVirtualForOfContext<T>>();
-  private _viewport = inject(CDK_VIRTUAL_SCROLL_VIEWPORT, {skipSelf: true});
+  private _viewport = inject(CdkVirtualScrollViewport, {skipSelf: true});
 
   /** Emits when the rendered view of the data changes. */
   readonly viewChange = new Subject<ListRange>();

src/cdk/scrolling/virtual-scroll-viewport.ts

@@ -58,14 +58,6 @@ function rangesEqual(r1: ListRange, r2: ListRange): boolean {
 const SCROLL_SCHEDULER =
   typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;
 
-/**
- * Lightweight token that can be used to inject the `CdkVirtualScrollViewport`
- * without introducing a hard dependency on it.
- */
-export const CDK_VIRTUAL_SCROLL_VIEWPORT = new InjectionToken<CdkVirtualScrollViewport>(
-  'CDK_VIRTUAL_SCROLL_VIEWPORT',
-);
-
 /** A viewport that virtualizes its scrolling with the help of `CdkVirtualForOf`. */
 @Component({
   selector: 'cdk-virtual-scroll-viewport',
@@ -84,7 +76,6 @@ export const CDK_VIRTUAL_SCROLL_VIEWPORT = new InjectionToken<CdkVirtualScrollVi
       useFactory: () =>
         inject(VIRTUAL_SCROLLABLE, {optional: true}) || inject(CdkVirtualScrollViewport),
     },
-    {provide: CDK_VIRTUAL_SCROLL_VIEWPORT, useExisting: CdkVirtualScrollViewport},
   ],
 })
 export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements OnInit, OnDestroy {

src/cdk/table/table.md

@@ -171,7 +171,8 @@ you don't need these features, you can instruct the table to cache and recycle r
 
 If you're showing a large amount of data in your table, you can use virtual scrolling to ensure a
 smooth experience for the user. To enable virtual scrolling, you have to wrap the CDK table in a
-`cdk-virtual-scroll-viewport` element and add some CSS to make it scrollable.
+`cdk-virtual-scroll-viewport` element, pass the viewport to the table and add some CSS to make it
+scrollable.
 
 <!-- example(cdk-table-virtual-scroll) -->
 

src/cdk/table/table.spec.ts

@@ -3292,8 +3292,15 @@ class WrapNativeHtmlTableAppOnPush {
 
 @Component({
   template: `
-    <cdk-virtual-scroll-viewport class="scroll-container" [itemSize]="52">
-      <table cdk-table [dataSource]="dataSource" [fixedLayout]="isFixedLayout()">
+    <cdk-virtual-scroll-viewport
+      class="scroll-container"
+      [itemSize]="52"
+      #viewport>
+      <table
+        cdk-table
+        [virtualScroll]="viewport"
+        [dataSource]="dataSource"
+        [fixedLayout]="isFixedLayout()">
         <ng-container cdkColumnDef="column_a">
           <th cdk-header-cell *cdkHeaderCellDef>Column A</th>
           <td cdk-cell *cdkCellDef="let row"> {{row.a}}</td>
@@ -3328,7 +3335,7 @@ class WrapNativeHtmlTableAppOnPush {
 })
 class TableWithVirtualScroll {
   @ViewChild(CdkTable) table: CdkTable<TestData>;
-  @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;
+  @ViewChild('viewport') viewport: CdkVirtualScrollViewport;
   dataSource = new FakeDataSource();
   columnsToRender = ['column_a', 'column_b', 'column_c'];
   isFixedLayout = signal(true);

src/cdk/table/table.ts

@@ -20,11 +20,7 @@ import {
   ListRange,
 } from '../collections';
 import {Platform} from '../platform';
-import {
-  CDK_VIRTUAL_SCROLL_VIEWPORT,
-  type CdkVirtualScrollViewport,
-  ViewportRuler,
-} from '../scrolling';
+import {type CdkVirtualScrollViewport, ViewportRuler} from '../scrolling';
 
 import {
   AfterContentChecked,
@@ -301,7 +297,6 @@ export class CdkTable<T>
   protected _viewRepeater: _ViewRepeater<T, RenderRow<T>, RowContext<T>>;
   private readonly _viewportRuler = inject(ViewportRuler);
   private _injector = inject(Injector);
-  private _virtualScrollViewport = inject(CDK_VIRTUAL_SCROLL_VIEWPORT, {optional: true});
   private _positionListener =
     inject(STICKY_POSITIONING_LISTENER, {optional: true}) ||
     inject(STICKY_POSITIONING_LISTENER, {optional: true, skipSelf: true});
@@ -565,7 +560,7 @@ export class CdkTable<T>
   get fixedLayout(): boolean {
     // Require a fixed layout when virtual scrolling is enabled, otherwise
     // the element the header can jump around as the user is scrolling.
-    return this._virtualScrollViewport ? true : this._fixedLayout;
+    return this.virtualScroll ? true : this._fixedLayout;
   }
   set fixedLayout(value: boolean) {
     this._fixedLayout = value;
@@ -582,6 +577,9 @@ export class CdkTable<T>
    */
   @Input({transform: booleanAttribute}) recycleRows = false;
 
+  /** Viewport used to enable virtual scrolling on the table. */
+  @Input() virtualScroll: CdkVirtualScrollViewport | null = null;
+
   /**
    * Emits when the table completes rendering a set of data rows based on the latest data from the
    * data source, even if the set of rows is empty.
@@ -595,7 +593,10 @@ export class CdkTable<T>
    *
    * @docs-private
    */
-  readonly viewChange: BehaviorSubject<ListRange>;
+  readonly viewChange: BehaviorSubject<ListRange> = new BehaviorSubject<ListRange>({
+    start: 0,
+    end: Number.MAX_VALUE,
+  });
 
   // Outlets in the table's template where the header, data rows, and footer will be inserted.
   _rowOutlet: DataRowOutlet;
@@ -638,21 +639,13 @@ export class CdkTable<T>
 
     this._isServer = !this._platform.isBrowser;
     this._isNativeHtmlTable = this._elementRef.nativeElement.nodeName === 'TABLE';
-    this.viewChange = new BehaviorSubject<ListRange>({
-      start: 0,
-      end: this._virtualScrollViewport ? 0 : Number.MAX_VALUE,
-    });
 
     // Set up the trackBy function so that it uses the `RenderRow` as its identity by default. If
     // the user has provided a custom trackBy, return the result of that function as evaluated
     // with the values of the `RenderRow`'s data and index.
     this._dataDiffer = this._differs.find([]).create((_i: number, dataRow: RenderRow<T>) => {
       return this.trackBy ? this.trackBy(dataRow.dataIndex, dataRow.data) : dataRow;
     });
-
-    if (this._virtualScrollViewport) {
-      this._setupVirtualScrolling(this._virtualScrollViewport);
-    }
   }
 
   ngOnInit() {
@@ -668,9 +661,14 @@ export class CdkTable<T>
 
   ngAfterContentInit() {
     this._viewRepeater =
-      this.recycleRows || this._virtualScrollViewport
+      this.recycleRows || this.virtualScroll
         ? new _RecycleViewRepeaterStrategy()
         : new _DisposeViewRepeaterStrategy();
+
+    if (this.virtualScroll) {
+      this._setupVirtualScrolling(this.virtualScroll);
+    }
+
     this._hasInitialized = true;
   }
 
@@ -1480,6 +1478,8 @@ export class CdkTable<T>
     const virtualScrollScheduler =
       typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;
 
+    this.viewChange.next({start: 0, end: 0});
+
     // Forward the rendered range computed by the virtual scroll viewport to the table.
     viewport.renderedRangeStream
       // We need the scheduler here, because the virtual scrolling module uses an identical

src/components-examples/cdk/table/cdk-table-virtual-scroll/cdk-table-virtual-scroll-example.html

@@ -1,8 +1,13 @@
 <p>Showing {{dataSource.length}} rows</p>
 
-<!-- Enable virtual scrolling -->
-<cdk-virtual-scroll-viewport class="example-container" [itemSize]="48" [maxBufferPx]="1200" [minBufferPx]="400">
-  <table cdk-table [dataSource]="dataSource" [trackBy]="trackBy">
+<cdk-virtual-scroll-viewport
+  class="example-container"
+  [itemSize]="48"
+  [maxBufferPx]="1200"
+  [minBufferPx]="400"
+  #viewport>
+  <!-- Enable virtual scrolling -->
+  <table cdk-table [virtualScroll]="viewport" [dataSource]="dataSource" [trackBy]="trackBy">
     <!-- Position Column -->
     <ng-container cdkColumnDef="position">
       <th cdk-header-cell *cdkHeaderCellDef> No. </th>

src/components-examples/material/table/table-virtual-scroll/table-virtual-scroll-example.html

@@ -1,8 +1,13 @@
 <p>Showing {{dataSource.length}} rows</p>
 
-<!-- Enable virtual scrolling -->
-<cdk-virtual-scroll-viewport class="example-container" [itemSize]="52" [maxBufferPx]="1200" [minBufferPx]="400">
-  <table mat-table [dataSource]="dataSource" [trackBy]="trackBy">
+<cdk-virtual-scroll-viewport
+  class="example-container"
+  [itemSize]="52"
+  [maxBufferPx]="1200"
+  [minBufferPx]="400"
+  #viewport>
+  <!-- Enable virtual scrolling -->
+  <table mat-table [virtualScroll]="viewport" [dataSource]="dataSource" [trackBy]="trackBy">
     <!-- Position Column -->
     <ng-container matColumnDef="position">
       <th mat-header-cell *matHeaderCellDef> No. </th>

src/material/table/table.md

@@ -181,7 +181,7 @@ An alternative approach to showing a large amount of data inside a Material tabl
 virtual scrolling which will only render the the visible rows in the DOM as the user is scrolling.
 
 To enable virtual scrolling you have to wrap the Material table in a `<cdk-virtual-scroll-viewport>`
-element and add CSS to make the viewport scrollable.
+element, pass the viewport to the table and add CSS to make the viewport scrollable.
 
 <!-- example(table-virtual-scroll) -->