0

I followed the Checkbox selection + Row Editing example, but when I click on a checkbox of a row, it make checkboxes of all rows checked.

Basically, all checkboxes act like the checkbox in the header row.

Here is the code :

<p-table 
    #dt1  
    [value]="tabTypeClient"
    styleClass="p-datatable-striped"
    [paginator]="true"
    [rows]="10"
    [showCurrentPageReport]="true"
    [tableStyle]="{ 'min-width': '50rem' }"
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
    [rowsPerPageOptions]="[10, 25, 50]"
    [globalFilterFields]="['_id', 'label']"
    [(selection)]="tabTypeClientSelected"
    dataKey="id" 
    editMode="row" 
>
<ng-template pTemplate="caption">
</ng-template>
    <ng-template pTemplate="header">
        <tr>
            <th style="width: 5%;">
              <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th>
            <th pSortableColumn="_id" style="width:25%">ID<p-sortIcon field="_id"></p-sortIcon></th>
            <th pSortableColumn="label" style="width:25%">Label<p-sortIcon field="label"></p-sortIcon></th>
            <th style="width:20%"></th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-typeclient let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="typeclient">
            <td>
              <p-tableCheckbox [value]="typeclient"></p-tableCheckbox>
            </td>
            <td>{{ typeclient._id }}</td>
            <td>
              <p-cellEditor>
                <ng-template pTemplate="input">
                    <input pInputText type="text" [(ngModel)]="typeclient.label" required>
                </ng-template>
                <ng-template pTemplate="output">
                    {{typeclient.label}}
                </ng-template>
              </p-cellEditor>
            </td>
            <td>
              <div class="flex align-items-center justify-content-center gap-2">
                  <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit(typeclient)" class="p-button-rounded p-button-text"></button>
                  <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check" (click)="onRowEditSave(typeclient)" class="p-button-rounded p-button-text p-button-success mr-2"></button>
                  <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times" (click)="onRowEditCancel(typeclient, ri)" class="p-button-rounded p-button-text p-button-danger"></button>
              </div>
          </td>
        </tr>
    </ng-template>

</p-table>

Any idea ? Thanks

Jean François Manatane
  • 897
  • 1
  • 11
  • 21
  • did you try to pass a unique value to the ` ` value props here ? maybe all the row reference are pointing to a single typeclient here. – Sefat Anam Apr 16 '23 at 16:34
  • What's in the properties `tabTypeClient` and `tabTypeClientSelected` that the table first populates? If they are not static, make them static to simplify the diagnosis. Best is to create a small app with the issue reproduced, in Stackblitz. – Benny Halperin Apr 16 '23 at 16:34

1 Answers1

0

OK, I found it.

It was because I forgot to add dataKey="_id" in p-table

Jean François Manatane
  • 897
  • 1
  • 11
  • 21