I am using PrimeNg table component and needs to implement row selection. I have the following code:
<p-table
[value]="data"
[columns]="columns"
[(selection)]="selectedItems"
selectionMode="multiple">
<ng-template pTemplate="header">
<tr>
<th>
<p-tableHeaderCheckbox style="margin-left: 5px;"></p-tableHeaderCheckbox>
</th>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row>
<tr [pSelectableRow]="row">
<td>
<p-tableCheckbox [value]="row"></p-tableCheckbox>
</td>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</ng-template>
</p-table>
Basically, I am using the Checkbox selection and multiple selection without metakey as given in the documentation here. Now when I click on the row, it is selecting and the checkbox is also checked. But when I click on the checkbox, it is not getting selected. If I click on the Select All, then also it is selecting all the rows. When I checked using Developer Tools, it is not making the aria-checked to true even though the click is detected.
Any workaround for fixing this issue?
@Arun's answer is correct. I'm just adding some formatting if someone also stumbles on this problem and is short of time ;) :
<ng-template pTemplate="body" let-data>
<tr [pSelectableRow]="data">
<td>
<p-tableCheckbox [pSelectableRow]="data" [value]="data"></p-tableCheckbox>
</td>
</tr>
</ng-template>
It also works well without providing [index] to the tableCheckbox.
Yes R.Richards is right adding dataKey should resolve the problem. But still without dataKey just add this <p-tableCheckbox [value]="row" [pSelectableRow]="row"></p-tableCheckbox>with your row checkbox. This should work as I remember I had done something like this earlier with my code:)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With