Search code examples
htmlangularhtml-tableprimengprimeng-datatable

How can I assign id to rows dynamically in table?


I am using p-table -> https://primefaces.org/primeng/showcase/#/table/dynamic I want to assign unique id to each row dynamically.

 <ng-template pTemplate="body" let-rowData let-columns="columns" let i="index">
    <tr id=i>
        <td *ngFor="let col of columns">
            {{rowData[col.field]}}
        </td>
    </tr>
</ng-template>

Above code doesnt assign id to the row.


Solution

  • You can try something like this

      <ng-template pTemplate="body"  let-rowIndex="rowIndex">
            <tr>
             <td>{{rowIndex}}</td>
            </tr>
    </ng-template>
    

    if you want to access it in your component you can use such thing

     <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
            <tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex">
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
    

    btw in order to see more examples, you can navigate to the primeng website: https://primefaces.org/primeng/showcase/#/table