CODEWITHSUNDEEP
angularprimengprimeng-datatable
Saurabh Tiwari
Saurabh Tiwari

Reputation: 5151

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 ?

Upvotes: 2

Views: 26182

Answers (4)

Ansy
Ansy

Reputation: 47

I solved this just using this approach, it might help someone else

For my case I wanted to fetch data from api then upon fetching data toggleRow

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

in your ts file

   toggleRow = (item: any, event: Event, dt: any) => {
    this.apiUrl.getRecords({ queryId: item.id }).subscribe((response: Item) => {
      if (response.code == 200) {

        dt.toggleRow(event);

        item.records = response?.data;
      } else {
        console.log('No records found');
      }
    }, (error: Error) => {
      console.log('Error');
    });
  };

Upvotes: 0

Goutham Ganesh
Goutham Ganesh

Reputation: 85

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>

Upvotes: 1

Michal
Michal

Reputation: 644

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)">
   ...

Upvotes: 3

Happy Coder
Happy Coder

Reputation: 1423

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

Upvotes: 8

Related Questions