fix-32253

src/cdk/collections/recycle-view-repeater-strategy.ts

@@ -106,10 +106,12 @@ export class _RecycleViewRepeaterStrategy<T, R, C extends _ViewRepeaterItemConte
   }
 
   detach() {
-    for (const view of this._viewCache) {
-      view.destroy();
-    }
-    this._viewCache = [];
+    this.clearCache();
+  }
+
+  /** Clears any currently cached views without destroying the repeater. */
+  clearCache() {
+    this._destroyCachedViews();
   }
 
   /**
@@ -188,4 +190,12 @@ export class _RecycleViewRepeaterStrategy<T, R, C extends _ViewRepeaterItemConte
     }
     return cachedView || null;
   }
+
+  /** Destroys all cached views. */
+  private _destroyCachedViews() {
+    for (const view of this._viewCache) {
+      view.destroy();
+    }
+    this._viewCache = [];
+  }
 }

src/cdk/table/table.spec.ts

@@ -1,5 +1,10 @@
 import {BidiModule, Direction} from '../bidi';
-import {CollectionViewer, DataSource} from '../collections';
+import {
+  CollectionViewer,
+  DataSource,
+  _RecycleViewRepeaterStrategy,
+  _ViewRepeaterItemContext,
+} from '../collections';
 import {
   AfterContentInit,
   AfterViewInit,
@@ -25,7 +30,7 @@ import {
   StickyPositioningListener,
   StickyUpdate,
 } from './index';
-import {CdkCellOutlet, CdkHeaderRowDef, CdkNoDataRow, CdkRowDef} from './row';
+import {BaseRowDef, CdkCellOutlet, CdkHeaderRowDef, CdkNoDataRow, CdkRowDef} from './row';
 import {CdkTable} from './table';
 import {
   getTableDuplicateColumnNameError,
@@ -375,6 +380,80 @@ describe('CdkTable', () => {
     expect(() => table.renderRows()).not.toThrow();
   });
 
+  describe('with recycled rows', () => {
+    beforeEach(() => {
+      setupTableTestApp(CdkTableRecycleRowsApp);
+      component = fixture.componentInstance as CdkTableRecycleRowsApp;
+      tableElement = fixture.nativeElement.querySelector('.cdk-table');
+    });
+
+    it('should re-render cached rows when columns change', () => {
+      component.addExtraRows(3);
+      fixture.detectChanges();
+
+      component.setShortList();
+      fixture.detectChanges();
+
+      const newColumns = ['column_a'];
+      const tableInstance = component.table as CdkTable<TestData>;
+      const forceColumns = (defs: BaseRowDef[]) => {
+        defs.forEach(def => {
+          def.columns = newColumns;
+          (def as any)._columnsDiffer?.diff(newColumns);
+        });
+      };
+
+      forceColumns(tableInstance['_rowDefs']);
+      forceColumns(tableInstance['_headerRowDefs']);
+
+      tableInstance['_forceRenderDataRows']();
+      tableInstance['_forceRenderHeaderRows']();
+      fixture.detectChanges();
+
+      const rows = getRows(tableElement);
+      expect(rows.length).toBe(component.dataSource.data.length);
+      rows.forEach(row => {
+        expect(getCells(row).length).toBe(newColumns.length);
+      });
+    });
+  });
+
+  describe('view repeater cleanup', () => {
+    beforeEach(() => {
+      setupTableTestApp(CdkTableRecycleRowsSpyApp);
+      component = fixture.componentInstance as CdkTableRecycleRowsSpyApp;
+    });
+
+    it('should clear the recycled row cache when forcing a re-render', () => {
+      const repeater = component.table['_viewRepeater'] as _RecycleViewRepeaterStrategy<
+        unknown,
+        unknown,
+        _ViewRepeaterItemContext<unknown>
+      >;
+      spyOn(repeater, 'clearCache');
+
+      component.table['_forceRenderDataRows']();
+
+      expect(repeater.clearCache).toHaveBeenCalledTimes(1);
+    });
+
+    it('should detach the view repeater when the table is destroyed', () => {
+      const destroyFixture = TestBed.createComponent(CdkTableRecycleRowsSpyApp);
+      destroyFixture.detectChanges();
+      const table = destroyFixture.componentInstance.table;
+      const repeater = table['_viewRepeater'] as _RecycleViewRepeaterStrategy<
+        unknown,
+        unknown,
+        _ViewRepeaterItemContext<unknown>
+      >;
+      spyOn(repeater, 'detach');
+
+      destroyFixture.destroy();
+
+      expect(repeater.detach).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe('with different data inputs other than data source', () => {
     let baseData: TestData[] = [
       {a: 'a_1', b: 'b_1', c: 'c_1'},
@@ -3176,6 +3255,68 @@ class WrapNativeHtmlTableAppOnPush {
   dataSource = new FakeDataSource();
 }
 
+@Component({
+  template: `
+    <table cdk-table recycleRows [dataSource]="dataSource">
+      <ng-container cdkColumnDef="column_a">
+        <th cdk-header-cell *cdkHeaderCellDef> Column A</th>
+        <td cdk-cell *cdkCellDef="let row"> {{row.a}}</td>
+      </ng-container>
+
+      <tr cdk-header-row *cdkHeaderRowDef="['column_a']"></tr>
+      <tr cdk-row *cdkRowDef="let row; columns: ['column_a']"></tr>
+    </table>
+  `,
+  imports: [CdkTableModule],
+})
+class CdkTableRecycleRowsSpyApp {
+  dataSource = new FakeDataSource();
+
+  @ViewChild(CdkTable) table: CdkTable<TestData>;
+}
+
+@Component({
+  template: `
+    <table cdk-table recycleRows [dataSource]="dataSource">
+      <ng-container cdkColumnDef="column_a">
+        <th cdk-header-cell *cdkHeaderCellDef> Column A</th>
+        <td cdk-cell *cdkCellDef="let row"> {{row.a}}</td>
+      </ng-container>
+
+      <ng-container cdkColumnDef="column_b">
+        <th cdk-header-cell *cdkHeaderCellDef> Column B</th>
+        <td cdk-cell *cdkCellDef="let row"> {{row.b}}</td>
+      </ng-container>
+
+      <ng-container cdkColumnDef="column_c">
+        <th cdk-header-cell *cdkHeaderCellDef> Column C</th>
+        <td cdk-cell *cdkCellDef="let row"> {{row.c}}</td>
+      </ng-container>
+
+      <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
+      <tr cdk-row *cdkRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  `,
+  imports: [CdkTableModule],
+})
+class CdkTableRecycleRowsApp {
+  private _longColumnSet: string[] = ['column_a', 'column_b', 'column_c'];
+  private _shortListLength = 3;
+  dataSource = new FakeDataSource();
+  displayedColumns = this._longColumnSet;
+  @ViewChild(CdkTable) table: CdkTable<TestData>;
+
+  addExtraRows(count: number) {
+    for (let i = 0; i < count; i++) {
+      this.dataSource.addData();
+    }
+  }
+
+  setShortList() {
+    this.dataSource.data = this.dataSource.data.slice(0, this._shortListLength);
+  }
+}
+
 function getElements(element: Element, query: string): HTMLElement[] {
   return [].slice.call(element.querySelectorAll(query));
 }

src/cdk/table/table.ts

@@ -640,6 +640,7 @@ export class CdkTable<T>
 
   ngOnDestroy() {
     this._stickyStyler?.destroy();
+    this._viewRepeater.detach();
 
     [
       this._rowOutlet?.viewContainer,
@@ -1330,11 +1331,19 @@ export class CdkTable<T>
    * `multiTemplateDataRows` or adding/removing row definitions.
    */
   private _forceRenderDataRows() {
+    this._clearReusableRowCache();
     this._dataDiffer.diff([]);
     this._rowOutlet.viewContainer.clear();
     this.renderRows();
   }
 
+  /** Clears any cached data rows that were being reused. */
+  private _clearReusableRowCache() {
+    if (this._viewRepeater instanceof _RecycleViewRepeaterStrategy) {
+      this._viewRepeater.clearCache();
+    }
+  }
+
   /**
    * Checks if there has been a change in sticky states since last check and applies the correct
    * sticky styles. Since checking resets the "dirty" state, this should only be performed once