Multiple row selection with datakey

Question

I'm working on a project that used PrimeNg as UI library. While working with the table, I found that the datakey property does not select all the related rows. When I console log the selection array, it shows only 1 was selected. But the UI selects all the related rows.

For example, I have a table that contains row with multiple trackingNo. Every row might have the same trackingNo. When I select one of the row, it should select all the related rows with the same trackingNo.

Am I missing something? Or is it a bug ?

    <p-table 
                     [(selection)]="selectedRows"
                     [columns]="cols"
                     [dataKey]="'trackingNo'"
                     [selectionMode]="'multiple'"
                     [lazy]="false"
                     [rows]="20"
                     [value]="values$ | async">

Answer 1

you may need to update the selection array after everytime you have seelct new row to check the trackingNo

this base of cars years example where I select every car base of current selection car year

<p-table [columns]="columns"  [value]="carsData" selectionMode="multiple"
              [(selection)]="selectedCars" (onRowSelect)="onRowSelect($event)">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
        <tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex">
            <td *ngFor="let col of columns" class="ui-resizable-column">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

component

onRowSelect(event) {
    const selectedCar = event.data;
    setTimeout(() => {
      this.selectedCars = cars.filter(car => car.year == selectedCar.year);
    }, 0)
  }

demo 🔥🔥