Edit row in primeng table by double mouse click

I have primeng table, and it allows to edit rows by clicking on pInitEditableRow button. I want to initiate row editting by double mouse click on that row, any cell of that row. Primeng table doesn't have that functionality out of the box, like with buttons. How to do that? I want to immitate pInitEditableRow button click when I double mouse click on corresponding row.

<p-table [value]="products" dataKey="id" editMode="row" [tableStyle]="{'min-width': '50rem'}">
<ng-template #header>
<tr>
<th style="width:20%">Name</th>
</tr>
</ng-template>
<ng-template #body let-product let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="product">
<td>
<p-cellEditor>
<ng-template #input>
<input
pInputText type="text"
[(ngModel)]="product.name"
required />
</ng-template>
<ng-template #output>
{{product.name}}
</ng-template>
</p-cellEditor>
</td>
<td>
<div class="flex items-center justify-center gap-2">
<button
*ngIf="!editing"
pButton
pRipple
type="button"
pInitEditableRow
icon="pi pi-pencil"
(click)="onRowEditInit(product)"
text
rounded
severity="secondary"
></button>
<button
*ngIf="editing"
pButton
pRipple
type="button"
pSaveEditableRow
icon="pi pi-check"
(click)="onRowEditSave(product)"
text
rounded
severity="secondary"
></button>
<button
*ngIf="editing"
pButton
pRipple
type="button"
pCancelEditableRow
icon="pi pi-times"
(click)="onRowEditCancel(product, ri)"
text
rounded
severity="secondary"
></button>
</div>
</td>
</tr>
</ng-template>
</p-table>

Continue reading...