CODEWITHSUNDEEP
javascripttypescriptangular7primengprimeng-datatable
Nila Vaani
Nila Vaani

Reputation: 213

How to get first td value of tr on click in prime ng table

How to get first td value of tr on click condition.If i click the first td i want to get the value in angular 7.Please do not write any inline code for tr. We need to Use only by coding like find table inside .How we can do it using p-table id="dt" by viedchild or element reference?

Demo: https://stackblitz.com/edit/p-table-primeng-v6-t1k6ng?file=src/app/app.component.html

app.component.ts:

@ViewChild('dt') public dataTable: DataTable;

app.component.html:

<p-table id="dt" [columns]="cols" [value]="cars" [scrollable]="true" [rows]="10"  [virtualRowHeight]="30" [loading]="loading"
    [virtualScroll]="true" (onLazyLoad)="loadCarsLazy($event)" [lazy]="true" [totalRecords]="totalRecords">

    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}} 
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr style="height:30px">
            <td *ngFor="let col of cols">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

Note: please do not write like this inline code: Do it by typescript or javascript.

<ng-container *ngFor="let col of cols; let i = index;">
  <td (click)="handleClick(i)">
     {{rowData[col.field]}} 
  </td>
</ng-container>

Upvotes: 2

Views: 3943

Answers (1)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24404

primeng table has already a selection feature that just need to set the selection mode and property to bind the selected item

<p-table selectionMode="single" [(selection)]="selectedCar">
....
</p-table>


<ng-template pTemplate="header" let-columns>
    <tr>
        <th *ngFor="let col of cols">
            {{col.header}} 
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr style="height:30px" [pSelectableRow]="rowData">
        <td *ngFor="let col of cols">
            {{rowData[col.field]}}
        </td>
    </tr>
</ng-template>

this how you set the selected item on clikc and will be boound to the selected property that has defined by [(selection)]='...' not this [pSelectableRow]="rowData" will set the holde item as selected but you can set the selected item to just the first colume data of the tr like this [pSelectableRow]="rowData['vin']"

demo âš¡

check 👉 this for other selection cases like has a checkbox or button

Upvotes: 1

Related Questions