Get index with PrimNG TurboTable and Angular 6

Question

I cant figure out how to get an index with Angular 6 and PrimeNG turbo table.

this is my best guess on how it should work.

<p-table [value]="timecards">
  <ng-template pTemplate="body" let-timecard let-i="index">
    <tr><td>{{ i }}</td><td>{{ timecard.value }}</td></tr>
  </ng-template>
</p-table>

But I have also tried this

<p-table>
  <ng-template pTemplate="body" ngFor let-timecard let-i="index" [ngForOf]="timecards>
    <tr><td>{{ i }}</td><td>{{ timecard.value }}</td></tr>
  </ng-template>
</p-table>

And this

<p-table [value]="timecards">
  <ng-template pTemplate="body" ngFor let-timecard let-i="index" [ngForOf]="timecards>
    <tr><td>{{ i }}</td><td>{{ timecard.value }}</td></tr>
  </ng-template>
</p-table>

And several other combinations. I can't get any of them to work.

Jaehne

Answer 1

The property you are looking for is let-rowIndex as described by the PrimeNG TurboTable documentation:

<p-table [value]="timecards">
  <ng-template pTemplate="body" let-timecard let-rowIndex="rowIndex">
    <tr><td>{{ rowIndex }}</td><td>{{ timecard.value }}</td></tr>
  </ng-template>
</p-table>

Woodenhead

Answer 2

 <p-table [value]="editAttachementFileLink" [tableStyle]="{ 'min-width': '100rem' }">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th>{{'FILE_NAME' | translate}}</th>
                                                <th>{{'REMOVE' | translate}}</th>
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-files let-rowIndex="rowIndex">
                                            <tr>
                                                <td *ngIf="files.isLink"><a [href]="files.linkDetails" target="_blank"
                                                        (click)="privateFiles(files.linkDetails)">{{files.fileName}}</a>
                                                </td>
                                                <td *ngIf="!files.isLink"><a
                                                        (click)="privateFiles(files.fileDetails)">{{files.fileName}}</a>
                                                </td>

                                                <td class="remove-column">
                                                    <span (click)="removeAttachment(rowIndex)"
                                                        style="cursor: pointer; font-size: 14px;"><i
                                                            class="pi pi-times-circle"></i></span>
                                                </td>
                                            </tr>
                                            <!-- <ng-template pTemplate="body" *ngIf="!fileNames|| (fileNames?.length==0)">
                                                <tr  colspan="3">{{'NO_RECORDS_FOUND' | translate}}</tr>
                                            </ng-template> -->

                                        </ng-template>
                                    </p-table>

Mischievous

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Malachite