Skip to content

bug(table): CDK table with server-side paginated data and non-zero range renders no rows #32764

@shortsn

Description

@shortsn

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs triageThis issue needs to be triaged by the team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions