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

Question

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 ?

score 8 · Accepted Answer · answered Nov 04 '19 at 14:18

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

That looks like something I needed. Hope it should work. – Saurabh Tiwari Nov 04 '19 at 16:59 — Saurabh Tiwari, Nov 04 '19 at 16:59

score 3 · Answer 2 · answered Mar 09 '20 at 13:53

3

My solution - simply call toggleRow on dlbclick event:

<p-table #table [value]="value">
   ...
   <ng-template pTemplate="body" let-item let-expanded="expanded">
      <tr (dblclick)="table.toggleRow(item, $event)">
   ...

answered Mar 09 '20 at 13:53

Michal

614
8
20

1

tried this way. But not working for me :( I have used primeng table +reactiveForm+ row Expand. When i click single row, all row getting expand.. Any suggestions will be helpful forme – Priya R Mar 16 '23 at 06:34

score 0 · Answer 3 · answered Jul 19 '22 at 15:43

Remove the pRowToggler directive from the first column and add it to the row .This will let you expand the row wherever you click on the row

    <tr [pEditableRow]="data" [pRowToggler]="config">
    <td style="width: 100%;" pTooltip="Expand Row" tooltipPosition="top">
    <a style="padding: 7px;border-radius: 3px;color: black;height: 70px;cursor: pointer;" href="#"`enter code here`>
    <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
    </a>
    </td>
    ...
    </tr>

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

3 Answers3