Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using checkbox selection and row selection together in PrimeNg table

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?

like image 532
Happy Coder Avatar asked Feb 17 '26 15:02

Happy Coder


2 Answers

@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.

like image 52
Taxman Avatar answered Feb 20 '26 03:02

Taxman


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:)

like image 29
Arun Avatar answered Feb 20 '26 04:02

Arun



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!