bug(cdk/table): CdkTable does not handle column updates correctly when using recycleRows

[mitchellwills]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When using CdkTable with the table recycleRows directive it doesn't look like the table doesn't re-render cached rows not currently in the DOM. This leads to a situation where if those cached rows are later re-used the cells in the row don't match the columns.

It seems like this may be just a matter of clearing the row cache in _forceRenderDataRows. This assumes the row elements can't be re-used at all, but that seems to be the current behavior of _forceRenderDataRows to re-render everything. It looks like this could be achieved by calling detach on the _RecycleViewRepeaterStrategy instance in _forceRenderDataRows, but it's unclear the semantics of that method since it's not documented in _ViewRepeater. CdkVirtualForOf only calls it in ngOnDestroy and CdkTable never calls it (probably a separate bug where these row views get leaked when the table gets destroyed).

Reproduction

StackBlitz link: https://stackblitz.com/edit/mssn6jgh?file=src%2Fexample%2Fcdk-table-recycle-rows-example.ts
Steps to reproduce:

1. Click Set Short List to reduce the number of rows to 15 (caching the 10 removed rows).
2. Then click Toggle Columns. This forces a full re-render through _forceRenderDataRows (which doesn't populate the cache when removing).

Expected Behavior

All 15 rows re-render correctly

Actual Behavior

When the 15 rows are re-rendered 5 have the old list of 3 columns since they were inserted from the cache and the remaining 10 are new rows and render correctly.

Environment

• Angular: 20.2.4
• CDK/Material: 20.2.4
• Browser(s): 141.0.7390.126
• Operating System (e.g. Windows, macOS, Ubuntu): ChromeOS