Skip to content

Performance regression in large p-table rendering after upgrading from Angular 20 + PrimeNG 20 to Angular 21 + PrimeNG 21 #19589

@cvleesen

Description

@cvleesen

Describe the bug

After upgrading from Angular 20 + PrimeNG 20 to Angular 21 + PrimeNG 21, we observed a significant rendering performance degradation in large p-table scenarios.

The issue becomes especially visible when rendering large tables containing many interactive PrimeNG components per row.

Compared to the Angular 20 / PrimeNG 20 version, the Angular 21 / PrimeNG 21 version shows:

  • much slower initial rendering
  • noticeable UI freezes
  • delayed interaction responsiveness
  • significantly increased CPU usage
  • temporary browser unresponsiveness during table rendering

The issue appears to scale with:

  • number of rows
  • number of PrimeNG components per row
  • template complexity

The following PrimeNG components are used inside the table:

  • p-checkbox
  • p-button
  • p-tag

To illustrate the issue, I created two minimal reproducible examples using StackBlitz.

Angular 20 + PrimeNG 20 (baseline / expected behavior):
https://stackblitz.com/edit/stackblitz-starters-q7jlmw2z?file=README.md

Angular 21 + PrimeNG 21 (performance regression):
https://stackblitz.com/edit/stackblitz-starters-aqc5hcsw?file=README.md

Both examples use nearly identical structures and rendering logic.

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/stackblitz-starters-aqc5hcsw?file=README.md

Environment

Angular 20 baseline:
{
"@angular/core": "20.x",
"primeng": "20.x"
}

Angular 21 regression:
{
"@angular/core": "21.x",
"primeng": "21.x"
}

Angular version

21.2.13

PrimeNG version

v21

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

  1. Open both StackBlitz projects
  2. Increase the row count
  3. Trigger table rendering / rebuild
  4. Compare rendering responsiveness between Angular 20 and Angular 21 versions

Expected behavior

Rendering performance should remain comparable between Angular 20 + PrimeNG 20 and Angular 21 + PrimeNG 21 for equivalent table structures and component usage.

The Angular 21 version currently shows a substantial regression in large table rendering scenarios.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type: BugIssue contains a bug related to a specific component. Something about the component is not working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions