Angular : Inline editing using P-Table not working properly

Question

I am trying to do inline editing in angular using p-table attribute. When I click particular row edit button it is converting entire rows into editable format whereas I just want that particular row to be edited. Below are the code details.

HTML code

 <p-table [value]="userElement" dataKey="id" editMode="row" [tableStyle]="{'min-width': '50rem'}"
    styleClass="p-datatable-responsive-demo">
        <ng-template pTemplate="header">
          <tr class="grid">
            <th  style="width:5%"l10nTranslate>UnderProcess.Actions</th>
            <th  style="width:10%" l10nTranslate><p-sortIcon field="creationDate"></p-sortIcon>UnderProcess.CreateDate</th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-product let-editing="editing" let-ri="rowIndex">
            <tr [pEditableRow]="product">
                <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(product)" class="p-button-rounded p-button-text"></button>
                        <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check" (click)="onRowEditSave(product)" 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(product,ri)" class="p-button-rounded p-button-text p-button-danger"></button>
                    </div>
                </td>
                <td>
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text"  class="col-input-grid-100" [(ngModel)]="product.createddate">
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{product.createddate}}
                        </ng-template>
                    </p-cellEditor>
                </td>
               
            </tr>
        </ng-template>
      </p-table>

Screeshot before edit

Screenshot after clicking on edit button

Note : I am able to get particular row values in ts file. So I think something might be wrong with my html edit mode binding in HTML file.