Method _setupVirtualScrolling

src/cdk/table/table.ts:1494–1558

(viewport: CdkVirtualScrollViewport)

  }

  private _setupVirtualScrolling(viewport: CdkVirtualScrollViewport) {
    const virtualScrollScheduler =
      typeof requestAnimationFrame !== 'undefined' ? animationFrameScheduler : asapScheduler;

    // Render nothing since the virtual scroll viewport will take over.
    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
      // one for scroll listeners. Without it the two go out of sync and the list starts
      // jumping back to the beginning whenever it needs to re-render.
      .pipe(auditTime(0, virtualScrollScheduler), takeUntil(this._onDestroy))
      .subscribe(this.viewChange);

    viewport.attach({
      dataStream: this._dataStream,
      measureRangeSize: (range, orientation) => this._measureRangeSize(range, orientation),
    });

    // The `StyickyStyler` sticks elements by applying a `top` or `bottom` position offset to
    // them. However, the virtual scroll viewport applies a `translateY` offset to a container
    // div that encapsulates the table. The translation causes the rows to also be offset by the
    // distance from the top of the scroll viewport in addition to their `top` offset. This logic
    // negates the translation to move the rows to their correct positions.
    combineLatest([viewport.renderedContentOffset, this._headerRowStickyUpdates])
      .pipe(takeUntil(this._onDestroy))
      .subscribe(([offsetFromTop, update]) => {
        if (!update.sizes || !update.offsets || !update.elements) {
          return;
        }

        for (let i = 0; i < update.elements.length; i++) {
          const cells = update.elements[i];

          if (cells) {
            const current = update.offsets[i]!;
            const offset =
              offsetFromTop !== 0 ? Math.max(offsetFromTop - current, current) : -current;

            for (const cell of cells) {
              cell.style.top = `${-offset}px`;
            }
          }
        }
      });

    combineLatest([viewport.renderedContentOffset, this._footerRowStickyUpdates])
      .pipe(takeUntil(this._onDestroy))
      .subscribe(([offsetFromTop, update]) => {
        if (!update.sizes || !update.offsets || !update.elements) {
          return;
        }

        for (let i = 0; i < update.elements.length; i++) {
          const cells = update.elements[i];

          if (cells) {