diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts index 1dabd49ad286..9a9e4490362f 100644 --- a/src/cdk/table/table.ts +++ b/src/cdk/table/table.ts @@ -376,6 +376,7 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes // 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(); } } _multiTemplateDataRows: boolean = false; @@ -459,7 +460,9 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes } // 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) { @@ -477,6 +480,10 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes // connection has already been made. 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(); @@ -783,22 +790,27 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes * whether the sticky states have changed for the header or footer. If there is a diff, then * re-render that section. */ - private _renderUpdatedColumns() { + private _renderUpdatedColumns(): boolean { const columnsDiffReducer = (acc: boolean, def: BaseRowDef) => 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; } /** @@ -868,7 +880,6 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes 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 @@ -882,7 +893,6 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes 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. */ @@ -1042,7 +1052,6 @@ export class CdkTable implements AfterContentChecked, CollectionViewer, OnDes this._dataDiffer.diff([]); this._rowOutlet.viewContainer.clear(); this.renderRows(); - this.updateStickyColumnStyles(); } /**