fix(table): Measure column width for sticky columns after new data has rendered.

Author: kseamon

src/cdk/table/table.spec.ts

@@ -353,6 +353,7 @@ describe('CdkTable', () => {
   it('should be able to project a caption', fakeAsync(() => {
     setupTableTestApp(NativeHtmlTableWithCaptionApp);
     fixture.detectChanges();
+    flush();
 
     const caption = tableElement.querySelector('caption');
 
@@ -363,6 +364,7 @@ describe('CdkTable', () => {
   it('should be able to project colgroup and col', fakeAsync(() => {
     setupTableTestApp(NativeHtmlTableWithColgroupAndCol);
     fixture.detectChanges();
+    flush();
 
     const colgroupsAndCols = Array.from(tableElement.querySelectorAll('colgroup, col'));
 

src/cdk/table/table.ts

@@ -40,6 +40,7 @@ import {
   IterableChangeRecord,
   IterableDiffer,
   IterableDiffers,
+  NgZone,
   OnDestroy,
   OnInit,
   Optional,
@@ -525,6 +526,12 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
     @SkipSelf()
     @Inject(STICKY_POSITIONING_LISTENER)
     protected readonly _stickyPositioningListener: StickyPositioningListener,
+    /**
+     * @deprecated `_ngZone` parameter to become required.
+     * @breaking-change 14.0.0
+     */
+    @Optional()
+    protected readonly _ngZone: NgZone,
   ) {
     if (!role) {
       this._elementRef.nativeElement.setAttribute('role', 'table');
@@ -666,7 +673,20 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
     });
 
     this._updateNoDataRow();
-    this.updateStickyColumnStyles();
+
+    // Allow the new row data to render before measuring it.
+    // TODO: Remove indirection once _ngZone is required.
+    const deferredUpdateStickyColumnStyles = () => {
+      setTimeout(() => {
+        this.updateStickyColumnStyles();
+      }, 0);
+    };
+
+    if (this._ngZone) {
+      this._ngZone.runOutsideAngular(deferredUpdateStickyColumnStyles);
+    } else {
+      deferredUpdateStickyColumnStyles();
+    }
 
     this.contentChanged.next();
   }