angularprimengprimeng-datatable

Expanding the prime-ng's p-table row on click of the row

The link here https://www.primefaces.org/primeng/#/table/rowexpansion shows an example of p-table where the rows can be expanded by clicking on the first column which uses the directive pRowToggler.

I am trying to achieve this toggling on the click of the row anywhere on the row.

I have tried looking for such an example but couldn't find one. I have also tried to use the [pRowToggler] on the ng-template for the row but that didn't work either.

Can someone direct me how to achieve this behaviour ?

Solution

  • make table row selectable and wrap the row data into the link 

    <ng-template  pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
            <td *ngFor="let col of columns" class="ui-resizable-column">
        <a href="#" [pRowToggler]="rowData">
            {{rowData[col.field]}}           
            </a>
            </td>
        </tr>
    </ng-template>

    there is a sample project, it's not perfect there is some cosmetic work need to be done, but it shows the idea

    https://stackblitz.com/edit/angular-primeng-width-7wnyzv?file=src/app/app.component.ts