angularprimengprimeng-datatable

onRowSelect / onRowClick not getting triggered at all. - Primeng table - Angular


I actually require to traverse to another component with the data selected on click of row. I have been using p-table to perform the same. I have totally no idea why. onRowClick / onRowSelection doesn't get triggered at all.I even added a console.log string to see if method is atleast called but no it isn't. Even [(selection)] doesn't perform well. There's no problem with p-table since pagination and global filters are actually working well and there's no issues in it. But this is something i couldn't figure out why. Primeng version "primeng": "^7.1.3"

<p-table [columns]="cols" [value]="companiesList"  selectionMode="single"
   (onRowClick)="handleSelect($event)" 
  >
      <ng-template pTemplate="header" let-columns>
          <tr>
              <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                  {{col.header}}
                  <p-sortIcon [field]="col.field"></p-sortIcon>
              </th>
          </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-columns="columns">
          <tr>
              <td *ngFor="let col of columns">
                      {{rowData[col.field]}}
              </td>
          </tr>
      </ng-template>
  </p-table>

Solution

  • Possible alternative solution: in the <tr> tag, add (click)="handleSelect(rowData)" and remove the (onRowClick) handler.

    Rationale: