-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Description
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
21.0.6
Description
The CDK Table does not render any rows if the data array contains only a slice (for example, via server-side pagination) and the renderedRange.start is greater than 0.
Previously, when the data array contained a paged slice (e.g., items 20–29) and renderedRange = {start: 20, end: 30}, the table rendered the correct rows. Now, with the new logic
const end = Math.min(this._data.length, this._renderedRange.end);
for (let i = this._renderedRange.start; i < end; i++) { ... }the loop does not execute if renderedRange.start is greater than the data array’s length, resulting in no rows being rendered at all.
This is a breaking change for all use-cases where the data array only includes a “window” (slice) of the data and the renderedRange refers to the global data set.
Unfortunately, the new behavior prevents me from using any cdk version >=21.1. Since i currently do not see any meaningful way to restore the original behavior through adjustments on my end.
References
working: https://github.com/angular/components/blob/v21.0.6/src/cdk/table/table.ts#L975
breaking: https://github.com/angular/components/blob/v21.1.0/src/cdk/table/table.ts#L1069
commit (that probably introduced the breaking change): eccaecd
Reproduction
Stackblitz: https://stackblitz.com/edit/stackblitz-starters-mf9j87ax?file=src%2Fmain.ts
- no virtual scrolling
- provide the table’s data (dataSource) as paginated slices, e.g., only 10 records for the current page (for page 3: items 21–30)
- the data array must only contain the current pages entries
Expected Behavior
Rows from the provided data slice should be rendered even if renderedRange.start > 0 (i.e., data array represents only a page, but not starting at index 0).
Actual Behavior
No rows are rendered if renderedRange.start > 0 and the data array is a paginated slice.
Environment
- Angular: ^21.1.3
- CDK/Material: ^21.1.3
- Browser(s): brave / chrome / edge
- Operating System (e.g. Windows, macOS, Ubuntu): windows