perf(table): Reduce calls to updateStickyColumnStyles (#19739)

* perf(table): Reduce the number of times sticky column positioning is computed.

* Applied suggested readability improvements.

(cherry picked from commit f484e96)

Author: kseamon

src/cdk/table/table.ts

@@ -465,7 +465,9 @@ export class CdkTable<T> 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) {
@@ -483,6 +485,10 @@ export class CdkTable<T> 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();
@@ -790,22 +796,27 @@ export class CdkTable<T> 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;
   }
 
   /**
@@ -875,7 +886,6 @@ export class CdkTable<T> 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
@@ -889,7 +899,6 @@ export class CdkTable<T> 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. */
@@ -1049,7 +1058,6 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
     this._dataDiffer.diff([]);
     this._rowOutlet.viewContainer.clear();
     this.renderRows();
-    this.updateStickyColumnStyles();
   }
 
   /**