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

Author: kseamon

src/cdk/table/table.ts

@@ -40,6 +40,7 @@ import {
   IterableChangeRecord,
   IterableDiffer,
   IterableDiffers,
+  NgZone,
   OnDestroy,
   OnInit,
   Optional,
@@ -60,7 +61,7 @@ import {
   Subject,
   Subscription,
 } from 'rxjs';
-import {takeUntil} from 'rxjs/operators';
+import {take, takeUntil} from 'rxjs/operators';
 import {CdkColumnDef} from './cell';
 import {_CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER} from './coalesced-style-scheduler';
 import {
@@ -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,16 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
     });
 
     this._updateNoDataRow();
-    this.updateStickyColumnStyles();
+
+    // Allow the new row data to render before measuring it.
+    // @breaking-change 14.0.0 Remove fallback once _ngZone is required.
+    if (this._ngZone) {
+      this._ngZone.onStable.pipe(take(1)).subscribe(() => {
+        this.updateStickyColumnStyles();
+      });
+    } else {
+      this.updateStickyColumnStyles();
+    }
 
     this.contentChanged.next();
   }

src/material/table/table.spec.ts

@@ -300,6 +300,7 @@ describe('MatTable', () => {
       // Change filter to a_1, should match one row
       dataSource.filter = 'a_1';
       fixture.detectChanges();
+
       expect(dataSource.filteredData.length).toBe(1);
       expect(dataSource.filteredData[0]).toBe(dataSource.data[0]);
       expectTableToMatchContent(tableElement, [
@@ -378,6 +379,7 @@ describe('MatTable', () => {
       // column plus the first character of the second column.
       dataSource.filter = '1b';
       fixture.detectChanges();
+
       expect(dataSource.filteredData.length).toBe(0);
       expectTableToMatchContent(tableElement, [
         ['Column A', 'Column B', 'Column C'],
@@ -523,6 +525,7 @@ describe('MatTable', () => {
       }
       fixture.detectChanges();
       flushMicrotasks(); // Resolve promise that updates paginator's length
+
       expectTableToMatchContent(tableElement, [
         ['Column A', 'Column B', 'Column C'],
         ['a_1', 'b_1', 'c_1'],
@@ -536,6 +539,7 @@ describe('MatTable', () => {
       // Navigate to the next page
       component.paginator.nextPage();
       fixture.detectChanges();
+
       expectTableToMatchContent(tableElement, [
         ['Column A', 'Column B', 'Column C'],
         ['a_6', 'b_6', 'c_6'],

tools/public_api_guard/cdk/table.md

@@ -297,7 +297,8 @@ export class CdkRowDef<T> extends BaseRowDef {
 // @public
 export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
     constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef, role: string, _dir: Directionality, _document: any, _platform: Platform, _viewRepeater: _ViewRepeater<T, RenderRow<T>, RowContext<T>>, _coalescedStyleScheduler: _CoalescedStyleScheduler, _viewportRuler: ViewportRuler,
-    _stickyPositioningListener: StickyPositioningListener);
+    _stickyPositioningListener: StickyPositioningListener,
+    _ngZone: NgZone);
     addColumnDef(columnDef: CdkColumnDef): void;
     addFooterRowDef(footerRowDef: CdkFooterRowDef): void;
     addHeaderRowDef(headerRowDef: CdkHeaderRowDef): void;
@@ -344,6 +345,8 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;
+    // @deprecated (undocumented)
+    protected readonly _ngZone: NgZone;
     _noDataRow: CdkNoDataRow;
     // (undocumented)
     _noDataRowOutlet: NoDataRowOutlet;
@@ -372,7 +375,7 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<CdkTable<any>, "cdk-table, table[cdk-table]", ["cdkTable"], { "trackBy": "trackBy"; "dataSource": "dataSource"; "multiTemplateDataRows": "multiTemplateDataRows"; "fixedLayout": "fixedLayout"; }, { "contentChanged": "contentChanged"; }, ["_noDataRow", "_contentColumnDefs", "_contentRowDefs", "_contentHeaderRowDefs", "_contentFooterRowDefs"], ["caption", "colgroup, col"]>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<CdkTable<any>, [null, null, null, { attribute: "role"; }, { optional: true; }, null, null, null, null, null, { optional: true; skipSelf: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkTable<any>, [null, null, null, { attribute: "role"; }, { optional: true; }, null, null, null, null, null, { optional: true; skipSelf: true; }, { optional: true; }]>;
 }
 
 // @public (undocumented)