@angular/cdk 10.1.1 → 10.2.0

package/fesm2015/table.js

@@ -1,12 +1,13 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { isDataSource } from '@angular/cdk/collections';
+import { isDataSource, _VIEW_REPEATER_STRATEGY, _DisposeViewRepeaterStrategy } from '@angular/cdk/collections';
 export { DataSource } from '@angular/cdk/collections';
 import { Platform } from '@angular/cdk/platform';
 import { DOCUMENT } from '@angular/common';
-import { InjectionToken, Directive, TemplateRef, Inject, Optional, Input, ContentChild, ElementRef, IterableDiffers, ViewContainerRef, Component, ChangeDetectionStrategy, ViewEncapsulation, EmbeddedViewRef, isDevMode, ChangeDetectorRef, Attribute, ViewChild, ContentChildren, NgModule } from '@angular/core';
-import { Subject, BehaviorSubject, isObservable, of } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { InjectionToken, Directive, TemplateRef, Inject, Optional, Input, ContentChild, ElementRef, Injectable, NgZone, IterableDiffers, ViewContainerRef, Component, ChangeDetectionStrategy, ViewEncapsulation, EmbeddedViewRef, ChangeDetectorRef, Attribute, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { Subject, from, BehaviorSubject, isObservable, of } from 'rxjs';
+import { takeUntil, take } from 'rxjs/operators';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 
 /**
  * @license
@@ -132,17 +133,8 @@ class CdkColumnDef extends _CdkColumnDefBase {
         this._stickyEnd = false;
     }
     /** Unique name for this column. */
-    get name() {
-        return this._name;
-    }
-    set name(name) {
-        // If the directive is set without a name (updated programatically), then this setter will
-        // trigger with an empty string and should not overwrite the programatically set value.
-        if (name) {
-            this._name = name;
-            this.cssClassFriendlyName = name.replace(/[^a-z0-9_-]/ig, '-');
-        }
-    }
+    get name() { return this._name; }
+    set name(name) { this._setNameInput(name); }
     /**
      * Whether this column should be sticky positioned on the end of the row. Should make sure
      * that it mimics the `CanStick` mixin such that `_hasStickyChanged` is set to true if the value
@@ -156,6 +148,31 @@ class CdkColumnDef extends _CdkColumnDefBase {
         this._stickyEnd = coerceBooleanProperty(v);
         this._hasStickyChanged = prevValue !== this._stickyEnd;
     }
+    /**
+     * Overridable method that sets the css classes that will be added to every cell in this
+     * column.
+     * In the future, columnCssClassName will change from type string[] to string and this
+     * will set a single string value.
+     * @docs-private
+     */
+    _updateColumnCssClassName() {
+        this._columnCssClassName = [`cdk-column-${this.cssClassFriendlyName}`];
+    }
+    /**
+     * This has been extracted to a util because of TS 4 and VE.
+     * View Engine doesn't support property rename inheritance.
+     * TS 4.0 doesn't allow properties to override accessors or vice-versa.
+     * @docs-private
+     */
+    _setNameInput(value) {
+        // If the directive is set without a name (updated programatically), then this setter will
+        // trigger with an empty string and should not overwrite the programatically set value.
+        if (value) {
+            this._name = value;
+            this.cssClassFriendlyName = value.replace(/[^a-z0-9_-]/ig, '-');
+            this._updateColumnCssClassName();
+        }
+    }
 }
 CdkColumnDef.decorators = [
     { type: Directive, args: [{
@@ -177,8 +194,12 @@ CdkColumnDef.propDecorators = {
 /** Base class for the cells. Adds a CSS classname that identifies the column it renders in. */
 class BaseCdkCell {
     constructor(columnDef, elementRef) {
-        const columnClassName = `cdk-column-${columnDef.cssClassFriendlyName}`;
-        elementRef.nativeElement.classList.add(columnClassName);
+        // If IE 11 is dropped before we switch to setting a single class name, change to multi param
+        // with destructuring.
+        const classList = elementRef.nativeElement.classList;
+        for (const className of columnDef._columnCssClassName) {
+            classList.add(className);
+        }
     }
 }
 /** Header cell template container that adds the right classes and role. */
@@ -239,6 +260,90 @@ CdkCell.ctorParameters = () => [
     { type: ElementRef }
 ];
 
+/**
+ * @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
+ */
+/**
+ * @docs-private
+ */
+class _Schedule {
+    constructor() {
+        this.tasks = [];
+        this.endTasks = [];
+    }
+}
+/**
+ * Allows grouping up CSSDom mutations after the current execution context.
+ * This can significantly improve performance when separate consecutive functions are
+ * reading from the CSSDom and then mutating it.
+ *
+ * @docs-private
+ */
+class _CoalescedStyleScheduler {
+    constructor(_ngZone) {
+        this._ngZone = _ngZone;
+        this._currentSchedule = null;
+        this._destroyed = new Subject();
+    }
+    /**
+     * Schedules the specified task to run at the end of the current VM turn.
+     */
+    schedule(task) {
+        this._createScheduleIfNeeded();
+        this._currentSchedule.tasks.push(task);
+    }
+    /**
+     * Schedules the specified task to run after other scheduled tasks at the end of the current
+     * VM turn.
+     */
+    scheduleEnd(task) {
+        this._createScheduleIfNeeded();
+        this._currentSchedule.endTasks.push(task);
+    }
+    /** Prevent any further tasks from running. */
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    _createScheduleIfNeeded() {
+        if (this._currentSchedule) {
+            return;
+        }
+        this._currentSchedule = new _Schedule();
+        this._getScheduleObservable().pipe(takeUntil(this._destroyed)).subscribe(() => {
+            while (this._currentSchedule.tasks.length || this._currentSchedule.endTasks.length) {
+                const schedule = this._currentSchedule;
+                // Capture new tasks scheduled by the current set of tasks.
+                this._currentSchedule = new _Schedule();
+                for (const task of schedule.tasks) {
+                    task();
+                }
+                for (const task of schedule.endTasks) {
+                    task();
+                }
+            }
+            this._currentSchedule = null;
+        });
+    }
+    _getScheduleObservable() {
+        // Use onStable when in the context of an ongoing change detection cycle so that we
+        // do not accidentally trigger additional cycles.
+        return this._ngZone.isStable ?
+            from(Promise.resolve(undefined)) :
+            this._ngZone.onStable.pipe(take(1));
+    }
+}
+_CoalescedStyleScheduler.decorators = [
+    { type: Injectable }
+];
+_CoalescedStyleScheduler.ctorParameters = () => [
+    { type: NgZone }
+];
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -505,12 +610,17 @@ class StickyStyler {
      * @param direction The directionality context of the table (ltr/rtl); affects column positioning
      *     by reversing left/right positions.
      * @param _isBrowser Whether the table is currently being rendered on the server or the client.
+     * @param _needsPositionStickyOnElement Whether we need to specify position: sticky on cells
+     *     using inline styles. If false, it is assumed that position: sticky is included in
+     *     the component stylesheet for _stickCellCss.
      */
-    constructor(_isNativeHtmlTable, _stickCellCss, direction, _isBrowser = true) {
+    constructor(_isNativeHtmlTable, _stickCellCss, direction, _coalescedStyleScheduler, _isBrowser = true, _needsPositionStickyOnElement = true) {
         this._isNativeHtmlTable = _isNativeHtmlTable;
         this._stickCellCss = _stickCellCss;
         this.direction = direction;
+        this._coalescedStyleScheduler = _coalescedStyleScheduler;
         this._isBrowser = _isBrowser;
+        this._needsPositionStickyOnElement = _needsPositionStickyOnElement;
     }
     /**
      * Clears the sticky positioning styles from the row and its cells by resetting the `position`
@@ -519,18 +629,24 @@ class StickyStyler {
      * @param stickyDirections The directions that should no longer be set as sticky on the rows.
      */
     clearStickyPositioning(rows, stickyDirections) {
+        const elementsToClear = [];
         for (const row of rows) {
             // If the row isn't an element (e.g. if it's an `ng-container`),
             // it won't have inline styles or `children` so we skip it.
             if (row.nodeType !== row.ELEMENT_NODE) {
                 continue;
             }
-            this._removeStickyStyle(row, stickyDirections);
+            elementsToClear.push(row);
             for (let i = 0; i < row.children.length; i++) {
-                const cell = row.children[i];
-                this._removeStickyStyle(cell, stickyDirections);
+                elementsToClear.push(row.children[i]);
             }
         }
+        // Coalesce with sticky row/column updates (and potentially other changes like column resize).
+        this._coalescedStyleScheduler.schedule(() => {
+            for (const element of elementsToClear) {
+                this._removeStickyStyle(element, stickyDirections);
+            }
+        });
     }
     /**
      * Applies sticky left and right positions to the cells of each row according to the sticky
@@ -542,8 +658,8 @@ class StickyStyler {
      *     in this index position should be stuck to the end of the row.
      */
     updateStickyColumns(rows, stickyStartStates, stickyEndStates) {
-        const hasStickyColumns = stickyStartStates.some(state => state) || stickyEndStates.some(state => state);
-        if (!rows.length || !hasStickyColumns || !this._isBrowser) {
+        if (!rows.length || !this._isBrowser || !(stickyStartStates.some(state => state) ||
+            stickyEndStates.some(state => state))) {
             return;
         }
         const firstRow = rows[0];
@@ -551,18 +667,23 @@ class StickyStyler {
         const cellWidths = this._getCellWidths(firstRow);
         const startPositions = this._getStickyStartColumnPositions(cellWidths, stickyStartStates);
         const endPositions = this._getStickyEndColumnPositions(cellWidths, stickyEndStates);
-        const isRtl = this.direction === 'rtl';
-        for (const row of rows) {
-            for (let i = 0; i < numCells; i++) {
-                const cell = row.children[i];
-                if (stickyStartStates[i]) {
-                    this._addStickyStyle(cell, isRtl ? 'right' : 'left', startPositions[i]);
-                }
-                if (stickyEndStates[i]) {
-                    this._addStickyStyle(cell, isRtl ? 'left' : 'right', endPositions[i]);
+        // Coalesce with sticky row updates (and potentially other changes like column resize).
+        this._coalescedStyleScheduler.schedule(() => {
+            const isRtl = this.direction === 'rtl';
+            const start = isRtl ? 'right' : 'left';
+            const end = isRtl ? 'left' : 'right';
+            for (const row of rows) {
+                for (let i = 0; i < numCells; i++) {
+                    const cell = row.children[i];
+                    if (stickyStartStates[i]) {
+                        this._addStickyStyle(cell, start, startPositions[i]);
+                    }
+                    if (stickyEndStates[i]) {
+                        this._addStickyStyle(cell, end, endPositions[i]);
+                    }
                 }
             }
-        }
+        });
     }
     /**
      * Applies sticky positioning to the row's cells if using the native table layout, and to the
@@ -585,29 +706,34 @@ class StickyStyler {
         // sticky states need to be reversed as well.
         const rows = position === 'bottom' ? rowsToStick.slice().reverse() : rowsToStick;
         const states = position === 'bottom' ? stickyStates.slice().reverse() : stickyStates;
-        let stickyHeight = 0;
-        for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+        // Measure row heights all at once before adding sticky styles to reduce layout thrashing.
+        const stickyHeights = [];
+        const elementsToStick = [];
+        for (let rowIndex = 0, stickyHeight = 0; rowIndex < rows.length; rowIndex++) {
+            stickyHeights[rowIndex] = stickyHeight;
             if (!states[rowIndex]) {
                 continue;
             }
             const row = rows[rowIndex];
-            if (this._isNativeHtmlTable) {
-                for (let j = 0; j < row.children.length; j++) {
-                    const cell = row.children[j];
-                    this._addStickyStyle(cell, position, stickyHeight);
-                }
+            elementsToStick[rowIndex] = this._isNativeHtmlTable ?
+                Array.from(row.children) : [row];
+            if (rowIndex !== rows.length - 1) {
+                stickyHeight += row.getBoundingClientRect().height;
             }
-            else {
-                // Flex does not respect the stick positioning on the cells, needs to be applied to the row.
-                // If this is applied on a native table, Safari causes the header to fly in wrong direction.
-                this._addStickyStyle(row, position, stickyHeight);
-            }
-            if (rowIndex === rows.length - 1) {
-                // prevent unnecessary reflow from getBoundingClientRect()
-                return;
-            }
-            stickyHeight += row.getBoundingClientRect().height;
         }
+        // Coalesce with other sticky row updates (top/bottom), sticky columns updates
+        // (and potentially other changes like column resize).
+        this._coalescedStyleScheduler.schedule(() => {
+            for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+                if (!states[rowIndex]) {
+                    continue;
+                }
+                const height = stickyHeights[rowIndex];
+                for (const element of elementsToStick[rowIndex]) {
+                    this._addStickyStyle(element, position, height);
+                }
+            }
+        });
     }
     /**
      * When using the native table in Safari, sticky footer cells do not stick. The only way to stick
@@ -620,12 +746,15 @@ class StickyStyler {
             return;
         }
         const tfoot = tableElement.querySelector('tfoot');
-        if (stickyStates.some(state => !state)) {
-            this._removeStickyStyle(tfoot, ['bottom']);
-        }
-        else {
-            this._addStickyStyle(tfoot, 'bottom', 0);
-        }
+        // Coalesce with other sticky updates (and potentially other changes like column resize).
+        this._coalescedStyleScheduler.schedule(() => {
+            if (stickyStates.some(state => !state)) {
+                this._removeStickyStyle(tfoot, ['bottom']);
+            }
+            else {
+                this._addStickyStyle(tfoot, 'bottom', 0);
+            }
+        });
     }
     /**
      * Removes the sticky style on the element by removing the sticky cell CSS class, re-evaluating
@@ -636,12 +765,20 @@ class StickyStyler {
         for (const dir of stickyDirections) {
             element.style[dir] = '';
         }
-        element.style.zIndex = this._getCalculatedZIndex(element);
         // If the element no longer has any more sticky directions, remove sticky positioning and
         // the sticky CSS class.
-        const hasDirection = STICKY_DIRECTIONS.some(dir => !!element.style[dir]);
-        if (!hasDirection) {
-            element.style.position = '';
+        // Short-circuit checking element.style[dir] for stickyDirections as they
+        // were already removed above.
+        const hasDirection = STICKY_DIRECTIONS.some(dir => stickyDirections.indexOf(dir) === -1 && element.style[dir]);
+        if (hasDirection) {
+            element.style.zIndex = this._getCalculatedZIndex(element);
+        }
+        else {
+            // When not hasDirection, _getCalculatedZIndex will always return ''.
+            element.style.zIndex = '';
+            if (this._needsPositionStickyOnElement) {
+                element.style.position = '';
+            }
             element.classList.remove(this._stickCellCss);
         }
     }
@@ -653,8 +790,10 @@ class StickyStyler {
     _addStickyStyle(element, dir, dirValue) {
         element.classList.add(this._stickCellCss);
         element.style[dir] = `${dirValue}px`;
-        element.style.cssText += 'position: -webkit-sticky; position: sticky; ';
         element.style.zIndex = this._getCalculatedZIndex(element);
+        if (this._needsPositionStickyOnElement) {
+            element.style.cssText += 'position: -webkit-sticky; position: sticky; ';
+        }
     }
     /**
      * Calculate what the z-index should be for the element, depending on what directions (top,
@@ -901,12 +1040,17 @@ class RowViewRef extends EmbeddedViewRef {
  * connect function that will return an Observable stream that emits the data array to render.
  */
 class CdkTable {
-    constructor(_differs, _changeDetectorRef, _elementRef, role, _dir, _document, _platform) {
+    constructor(_differs, _changeDetectorRef, _coalescedStyleScheduler, _elementRef, role, _dir, _document, _platform, 
+    // Optional for backwards compatibility, but a view repeater strategy will always
+    // be provided.
+    _viewRepeater) {
         this._differs = _differs;
         this._changeDetectorRef = _changeDetectorRef;
+        this._coalescedStyleScheduler = _coalescedStyleScheduler;
         this._elementRef = _elementRef;
         this._dir = _dir;
         this._platform = _platform;
+        this._viewRepeater = _viewRepeater;
         /** Subject that emits when the component has been destroyed. */
         this._onDestroy = new Subject();
         /**
@@ -968,6 +1112,12 @@ class CdkTable {
          * table subclasses.
          */
         this.stickyCssClass = 'cdk-table-sticky';
+        /**
+         * Whether to manually add positon: sticky to all sticky cell elements. Not needed if
+         * the position is set in a selector associated with the value of stickyCssClass. May be
+         * overridden by table subclasses
+         */
+        this.needsPositionStickyOnElement = true;
         /** Whether the no data row is currently showing anything. */
         this._isShowingNoDataRow = false;
         this._multiTemplateDataRows = false;
@@ -996,8 +1146,7 @@ class CdkTable {
         return this._trackByFn;
     }
     set trackBy(fn) {
-        if (isDevMode() && fn != null && typeof fn !== 'function' && console &&
-            console.warn) {
+        if ((typeof ngDevMode === 'undefined' || ngDevMode) && fn != null && typeof fn !== 'function') {
             console.warn(`trackBy must be a function, but received ${JSON.stringify(fn)}.`);
         }
         this._trackByFn = fn;
@@ -1045,6 +1194,7 @@ class CdkTable {
         // this setter will be invoked before the row outlet has been defined hence the null check.
         if (this._rowOutlet && this._rowOutlet.viewContainer.length) {
             this._forceRenderDataRows();
+            this.updateStickyColumnStyles();
         }
     }
     ngOnInit() {
@@ -1064,11 +1214,13 @@ class CdkTable {
         this._cacheRowDefs();
         this._cacheColumnDefs();
         // Make sure that the user has at least added header, footer, or data row def.
-        if (!this._headerRowDefs.length && !this._footerRowDefs.length && !this._rowDefs.length) {
+        if (!this._headerRowDefs.length && !this._footerRowDefs.length && !this._rowDefs.length &&
+            (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw getTableMissingRowDefsError();
         }
         // Render updates if the list of columns have been changed for the header, row, or footer defs.
-        this._renderUpdatedColumns();
+        const columnsChanged = this._renderUpdatedColumns();
+        const stickyColumnStyleUpdateNeeded = columnsChanged || this._headerRowDefChanged || this._footerRowDefChanged;
         // If the header row definition has been changed, trigger a render to the header row.
         if (this._headerRowDefChanged) {
             this._forceRenderHeaderRows();
@@ -1084,6 +1236,11 @@ class CdkTable {
         if (this.dataSource && this._rowDefs.length > 0 && !this._renderChangeSubscription) {
             this._observeRenderChanges();
         }
+        else if (stickyColumnStyleUpdateNeeded) {
+            // In the above case, _observeRenderChanges will result in updateStickyColumnStyles being
+            // called when it row data arrives. Otherwise, we need to call it proactively.
+            this.updateStickyColumnStyles();
+        }
         this._checkStickyStates();
     }
     ngOnDestroy() {
@@ -1116,16 +1273,9 @@ class CdkTable {
             return;
         }
         const viewContainer = this._rowOutlet.viewContainer;
-        changes.forEachOperation((record, prevIndex, currentIndex) => {
-            if (record.previousIndex == null) {
-                this._insertRow(record.item, currentIndex);
-            }
-            else if (currentIndex == null) {
-                viewContainer.remove(prevIndex);
-            }
-            else {
-                const view = viewContainer.get(prevIndex);
-                viewContainer.move(view, currentIndex);
+        this._viewRepeater.applyChanges(changes, viewContainer, (record, adjustedPreviousIndex, currentIndex) => this._getEmbeddedViewArgs(record.item, currentIndex), (record) => record.item.data, (change) => {
+            if (change.operation === 1 /* INSERTED */ && change.context) {
+                this._renderCellTemplateForItem(change.record.item.rowDef, change.context);
             }
         });
         // Update the meta context of a row's context data (index, count, first, last, ...)
@@ -1315,7 +1465,8 @@ class CdkTable {
         this._columnDefsByName.clear();
         const columnDefs = mergeArrayAndSet(this._getOwnDefs(this._contentColumnDefs), this._customColumnDefs);
         columnDefs.forEach(columnDef => {
-            if (this._columnDefsByName.has(columnDef.name)) {
+            if (this._columnDefsByName.has(columnDef.name) &&
+                (typeof ngDevMode === 'undefined' || ngDevMode)) {
                 throw getTableDuplicateColumnNameError(columnDef.name);
             }
             this._columnDefsByName.set(columnDef.name, columnDef);
@@ -1328,7 +1479,8 @@ class CdkTable {
         this._rowDefs = mergeArrayAndSet(this._getOwnDefs(this._contentRowDefs), this._customRowDefs);
         // After all row definitions are determined, find the row definition to be considered default.
         const defaultRowDefs = this._rowDefs.filter(def => !def.when);
-        if (!this.multiTemplateDataRows && defaultRowDefs.length > 1) {
+        if (!this.multiTemplateDataRows && defaultRowDefs.length > 1 &&
+            (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw getTableMultipleDefaultRowDefsError();
         }
         this._defaultRowDef = defaultRowDefs[0];
@@ -1341,16 +1493,20 @@ class CdkTable {
     _renderUpdatedColumns() {
         const columnsDiffReducer = (acc, def) => acc || !!def.getColumnsDiff();
         // Force re-render data rows if the list of column definitions have changed.
-        if (this._rowDefs.reduce(columnsDiffReducer, false)) {
+        const dataColumnsChanged = this._rowDefs.reduce(columnsDiffReducer, false);
+        if (dataColumnsChanged) {
             this._forceRenderDataRows();
         }
-        // Force re-render header/footer rows if the list of column definitions have changed..
-        if (this._headerRowDefs.reduce(columnsDiffReducer, false)) {
+        // Force re-render header/footer rows if the list of column definitions have changed.
+        const headerColumnsChanged = this._headerRowDefs.reduce(columnsDiffReducer, false);
+        if (headerColumnsChanged) {
             this._forceRenderHeaderRows();
         }
-        if (this._footerRowDefs.reduce(columnsDiffReducer, false)) {
+        const footerColumnsChanged = this._footerRowDefs.reduce(columnsDiffReducer, false);
+        if (footerColumnsChanged) {
             this._forceRenderFooterRows();
         }
+        return dataColumnsChanged || headerColumnsChanged || footerColumnsChanged;
     }
     /**
      * Switch to the provided data source by resetting the data and unsubscribing from the current
@@ -1391,10 +1547,11 @@ class CdkTable {
         else if (Array.isArray(this.dataSource)) {
             dataStream = of(this.dataSource);
         }
-        if (dataStream === undefined) {
+        if (dataStream === undefined && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw getTableUnknownDataSourceError();
         }
-        this._renderChangeSubscription = dataStream.pipe(takeUntil(this._onDestroy)).subscribe(data => {
+        this._renderChangeSubscription = dataStream.pipe(takeUntil(this._onDestroy))
+            .subscribe(data => {
             this._data = data || [];
             this.renderRows();
         });
@@ -1410,7 +1567,6 @@ class CdkTable {
         }
         this._headerRowDefs.forEach((def, i) => this._renderRow(this._headerRowOutlet, def, i));
         this.updateStickyHeaderRowStyles();
-        this.updateStickyColumnStyles();
     }
     /**
      * Clears any existing content in the footer row outlet and creates a new embedded view
@@ -1423,13 +1579,12 @@ class CdkTable {
         }
         this._footerRowDefs.forEach((def, i) => this._renderRow(this._footerRowOutlet, def, i));
         this.updateStickyFooterRowStyles();
-        this.updateStickyColumnStyles();
     }
     /** Adds the sticky column styles for the rows according to the columns' stick states. */
     _addStickyColumnStyles(rows, rowDef) {
         const columnDefs = Array.from(rowDef.columns || []).map(columnName => {
             const columnDef = this._columnDefsByName.get(columnName);
-            if (!columnDef) {
+            if (!columnDef && (typeof ngDevMode === 'undefined' || ngDevMode)) {
                 throw getTableUnknownColumnError(columnName);
             }
             return columnDef;
@@ -1467,19 +1622,19 @@ class CdkTable {
                 rowDefs.push(rowDef);
             }
         }
-        if (!rowDefs.length) {
+        if (!rowDefs.length && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw getTableMissingMatchingRowDefError(data);
         }
         return rowDefs;
     }
-    /**
-     * Create the embedded view for the data row template and place it in the correct index location
-     * within the data row view container.
-     */
-    _insertRow(renderRow, renderIndex) {
+    _getEmbeddedViewArgs(renderRow, index) {
         const rowDef = renderRow.rowDef;
         const context = { $implicit: renderRow.data };
-        this._renderRow(this._rowOutlet, rowDef, renderIndex, context);
+        return {
+            templateRef: rowDef.template,
+            context,
+            index,
+        };
     }
     /**
      * Creates a new row template in the outlet and fills it with the set of cell templates.
@@ -1488,7 +1643,11 @@ class CdkTable {
      */
     _renderRow(outlet, rowDef, index, context = {}) {
         // TODO(andrewseguin): enforce that one outlet was instantiated from createEmbeddedView
-        outlet.viewContainer.createEmbeddedView(rowDef.template, context, index);
+        const view = outlet.viewContainer.createEmbeddedView(rowDef.template, context, index);
+        this._renderCellTemplateForItem(rowDef, context);
+        return view;
+    }
+    _renderCellTemplateForItem(rowDef, context) {
         for (let cellTemplate of this._getCellTemplates(rowDef)) {
             if (CdkCellOutlet.mostRecentCellOutlet) {
                 CdkCellOutlet.mostRecentCellOutlet._viewContainer.createEmbeddedView(cellTemplate, context);
@@ -1526,7 +1685,7 @@ class CdkTable {
         }
         return Array.from(rowDef.columns, columnId => {
             const column = this._columnDefsByName.get(columnId);
-            if (!column) {
+            if (!column && (typeof ngDevMode === 'undefined' || ngDevMode)) {
                 throw getTableUnknownColumnError(columnId);
             }
             return rowDef.extractCellTemplate(column);
@@ -1560,7 +1719,6 @@ class CdkTable {
         this._dataDiffer.diff([]);
         this._rowOutlet.viewContainer.clear();
         this.renderRows();
-        this.updateStickyColumnStyles();
     }
     /**
      * Checks if there has been a change in sticky states since last check and applies the correct
@@ -1591,7 +1749,7 @@ class CdkTable {
      */
     _setupStickyStyler() {
         const direction = this._dir ? this._dir.value : 'ltr';
-        this._stickyStyler = new StickyStyler(this._isNativeHtmlTable, this.stickyCssClass, direction, this._platform.isBrowser);
+        this._stickyStyler = new StickyStyler(this._isNativeHtmlTable, this.stickyCssClass, direction, this._coalescedStyleScheduler, this._platform.isBrowser, this.needsPositionStickyOnElement);
         (this._dir ? this._dir.change : of())
             .pipe(takeUntil(this._onDestroy))
             .subscribe(value => {
@@ -1629,17 +1787,23 @@ CdkTable.decorators = [
                 // declared elsewhere, they are checked when their declaration points are checked.
                 // tslint:disable-next-line:validate-decorators
                 changeDetection: ChangeDetectionStrategy.Default,
-                providers: [{ provide: CDK_TABLE, useExisting: CdkTable }]
+                providers: [
+                    { provide: CDK_TABLE, useExisting: CdkTable },
+                    { provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy },
+                    _CoalescedStyleScheduler,
+                ]
             },] }
 ];
 CdkTable.ctorParameters = () => [
     { type: IterableDiffers },
     { type: ChangeDetectorRef },
+    { type: _CoalescedStyleScheduler },
     { type: ElementRef },
     { type: String, decorators: [{ type: Attribute, args: ['role',] }] },
     { type: Directionality, decorators: [{ type: Optional }] },
     { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
-    { type: Platform }
+    { type: Platform },
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [_VIEW_REPEATER_STRATEGY,] }] }
 ];
 CdkTable.propDecorators = {
     trackBy: [{ type: Input }],
@@ -1681,7 +1845,11 @@ function mergeArrayAndSet(array, set) {
  * input.
  */
 class CdkTextColumn {
-    constructor(_table, _options) {
+    constructor(
+    // `CdkTextColumn` is always requiring a table, but we just assert it manually
+    // for better error reporting.
+    // tslint:disable-next-line: lightweight-tokens
+    _table, _options) {
         this._table = _table;
         this._options = _options;
         /** Alignment of the cell values. */
@@ -1715,7 +1883,7 @@ class CdkTextColumn {
             this.columnDef.headerCell = this.headerCell;
             this._table.addColumnDef(this.columnDef);
         }
-        else {
+        else if (typeof ngDevMode === 'undefined' || ngDevMode) {
             throw getTableTextColumnMissingParentTableError();
         }
     }
@@ -1730,7 +1898,7 @@ class CdkTextColumn {
      */
     _createDefaultHeaderText() {
         const name = this.name;
-        if (isDevMode() && !name) {
+        if (!name && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw getTableTextColumnMissingNameError();
         }
         if (this._options && this._options.defaultHeaderTextTransform) {
@@ -1817,7 +1985,8 @@ class CdkTableModule {
 CdkTableModule.decorators = [
     { type: NgModule, args: [{
                 exports: EXPORTED_DECLARATIONS,
-                declarations: EXPORTED_DECLARATIONS
+                declarations: EXPORTED_DECLARATIONS,
+                imports: [ScrollingModule]
             },] }
 ];
 
@@ -1833,5 +2002,5 @@ CdkTableModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { BaseCdkCell, BaseRowDef, CDK_ROW_TEMPLATE, CDK_TABLE, CDK_TABLE_TEMPLATE, CdkCell, CdkCellDef, CdkCellOutlet, CdkColumnDef, CdkFooterCell, CdkFooterCellDef, CdkFooterRow, CdkFooterRowDef, CdkHeaderCell, CdkHeaderCellDef, CdkHeaderRow, CdkHeaderRowDef, CdkNoDataRow, CdkRow, CdkRowDef, CdkTable, CdkTableModule, CdkTextColumn, DataRowOutlet, FooterRowOutlet, HeaderRowOutlet, NoDataRowOutlet, STICKY_DIRECTIONS, StickyStyler, TEXT_COLUMN_OPTIONS, mixinHasStickyInput };
+export { BaseCdkCell, BaseRowDef, CDK_ROW_TEMPLATE, CDK_TABLE, CDK_TABLE_TEMPLATE, CdkCell, CdkCellDef, CdkCellOutlet, CdkColumnDef, CdkFooterCell, CdkFooterCellDef, CdkFooterRow, CdkFooterRowDef, CdkHeaderCell, CdkHeaderCellDef, CdkHeaderRow, CdkHeaderRowDef, CdkNoDataRow, CdkRow, CdkRowDef, CdkTable, CdkTableModule, CdkTextColumn, DataRowOutlet, FooterRowOutlet, HeaderRowOutlet, NoDataRowOutlet, STICKY_DIRECTIONS, StickyStyler, TEXT_COLUMN_OPTIONS, _CoalescedStyleScheduler, _Schedule, mixinHasStickyInput };
 //# sourceMappingURL=table.js.map