fix(cdk/table): error if data is accessed too early (#30817)

Fixes that the table was throwing an error if `renderRows` is called before the data has been loaded for the first time.

Fixes #30795.

Author: crisbeto

goldens/cdk/table/index.api.md

@@ -313,7 +313,7 @@ export class CdkTable<T> implements AfterContentInit, AfterContentChecked, Colle
     _contentFooterRowDefs: QueryList<CdkFooterRowDef>;
     _contentHeaderRowDefs: QueryList<CdkHeaderRowDef>;
     _contentRowDefs: QueryList<CdkRowDef<T>>;
-    protected _data: readonly T[];
+    protected _data: readonly T[] | undefined;
     get dataSource(): CdkTableDataSourceInput<T>;
     set dataSource(dataSource: CdkTableDataSourceInput<T>);
     // (undocumented)

src/cdk/table/BUILD.bazel

@@ -43,6 +43,7 @@ ts_project(
     deps = [
         ":table",
         "//:node_modules/@angular/core",
+        "//:node_modules/@angular/platform-browser",
         "//:node_modules/rxjs",
         "//src/cdk/bidi",
         "//src/cdk/collections",

src/cdk/table/table.spec.ts

@@ -14,6 +14,7 @@ import {
   ViewChild,
   inject,
 } from '@angular/core';
+import {By} from '@angular/platform-browser';
 import {ComponentFixture, TestBed, fakeAsync, flush, waitForAsync} from '@angular/core/testing';
 import {BehaviorSubject, Observable, combineLatest, of as observableOf} from 'rxjs';
 import {map} from 'rxjs/operators';
@@ -376,6 +377,15 @@ describe('CdkTable', () => {
     expect(colgroupsAndCols.map(e => e.nodeName.toLowerCase())).toEqual(['colgroup', 'col', 'col']);
   }));
 
+  it('should not throw if `renderRows` is called too early', () => {
+    // Note that we don't call `detectChanges` here, because we're testing specifically
+    // what happens when `renderRows` is called before the first change detection run.
+    const fixture = createComponent(SimpleCdkTableApp);
+    const table = fixture.debugElement.query(By.directive(CdkTable))
+      .componentInstance as CdkTable<unknown>;
+    expect(() => table.renderRows()).not.toThrow();
+  });
+
   describe('with different data inputs other than data source', () => {
     let baseData: TestData[] = [
       {a: 'a_1', b: 'b_1', c: 'c_1'},

src/cdk/table/table.ts

@@ -307,7 +307,7 @@ export class CdkTable<T>
   private _document = inject(DOCUMENT);
 
   /** Latest data provided by the data source. */
-  protected _data: readonly T[];
+  protected _data: readonly T[] | undefined;
 
   /** Subject that emits when the component has been destroyed. */
   private readonly _onDestroy = new Subject<void>();
@@ -621,17 +621,17 @@ export class CdkTable<T>
 
     this._isServer = !this._platform.isBrowser;
     this._isNativeHtmlTable = this._elementRef.nativeElement.nodeName === 'TABLE';
-  }
-
-  ngOnInit() {
-    this._setupStickyStyler();
 
     // Set up the trackBy function so that it uses the `RenderRow` as its identity by default. If
     // the user has provided a custom trackBy, return the result of that function as evaluated
     // with the values of the `RenderRow`'s data and index.
     this._dataDiffer = this._differs.find([]).create((_i: number, dataRow: RenderRow<T>) => {
       return this.trackBy ? this.trackBy(dataRow.dataIndex, dataRow.data) : dataRow;
     });
+  }
+
+  ngOnInit() {
+    this._setupStickyStyler();
 
     this._viewportRuler
       .change()
@@ -981,6 +981,10 @@ export class CdkTable<T>
     const prevCachedRenderRows = this._cachedRenderRowsMap;
     this._cachedRenderRowsMap = new Map();
 
+    if (!this._data) {
+      return renderRows;
+    }
+
     // For each data object, get the list of rows that should be rendered, represented by the
     // respective `RenderRow` object which is the pair of `data` and `CdkRowDef`.
     for (let i = 0; i < this._data.length; i++) {