p-table: p-tableHeaderCheckbox not working when selection is containing id's instead of the full entity

[Tpower36]

Describe the bug

When using id's in the table selection, the p-tableHeaderCheckbox does not work properly because it adds the full entities in the selection.

Environment

NA

Reproducer

https://stackblitz.com/edit/gmz5zhcn?file=src%2Fapp%2Ftable-checkbox-selection-demo.html

Angular version

18.0.1

PrimeNG version

18.0.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.20.3

Browser(s)

No response

Steps to reproduce the behavior

Click on the checkbox in the header -> Rows are not all selected.

Expected behavior

Rows are all selected when clicking on the header checkbox

[github-actions]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨

[qwadrox]

- <p-tableCheckbox [value]="product.id" />
+ <p-tableCheckbox [value]="product" />

p-tableCheckbox's current implementation expects the row data, not the identifier. You have to pass the rowData to make it work.

What is your use case? why is it not good to pass the full object?

[Tpower36]

- <p-tableCheckbox [value]="product.id" />
+ <p-tableCheckbox [value]="product" />

p-tableCheckbox's current implementation expects the row data, not the identifier. You have to pass the rowData to make it work.

What is your use case? why is it not good to pass the full object?

We have the usecase that we need to init the table with elements already selected in it. But the parent components that pass the selected elements only know the id's.

As a workaround we deal with two arrays one with id's and one with row data, and always sync them when selection changes or on initialization.

The p-tableCheckbox work fine with the identifier, it's only the p-tableHeaderCheckbox that doesn't seem to work.

[qwadrox]

@Tpower36 Hi!

"We have the usecase that we need to init the table with elements already selected in it"
Once you have the product id array, from the parent you can just do something like:

ngOnInit() {
    const productIdSelectedFromParent = ['1000', '1003'];
    this.productService.getProductsMini().then((data: Product[]) => {
      this.products = data;
      this.selectedProducts = data.filter((product) =>
        productIdSelectedFromParent.includes(product.id)
      );
    });
  }

https://stackblitz.com/edit/d4neckx3?file=src%2Fapp%2Ftable-checkbox-selection-demo.ts

[Tpower36]

@Tpower36 Hi!

"We have the usecase that we need to init the table with elements already selected in it" Once you have the product id array, from the parent you can just do something like:

ngOnInit() {
    const productIdSelectedFromParent = ['1000', '1003'];
    this.productService.getProductsMini().then((data: Product[]) => {
      this.products = data;
      this.selectedProducts = data.filter((product) =>
        productIdSelectedFromParent.includes(product.id)
      );
    });
  }

https://stackblitz.com/edit/d4neckx3?file=src%2Fapp%2Ftable-checkbox-selection-demo.ts

Yes that's about what I do to init the table. But then the parent component needs to be updated at each selection change, and sometimes even needs to modify the selection so we still need the list of id's.