CODEWITHSUNDEEP
angularangular-materialangular5angular-material2
NanoPish
NanoPish

Reputation: 1521

Angular Material - Getting index of row in data table

I am using the MatTable component from Angular Material to make a dynamic data table.

I need to get the current position of a row. I can easily get the row on which the user clicked but I am unable to know its current position in the list (which depends on sort/filtering/pagination).

Any idea?

Upvotes: 8

Views: 22942

Answers (4)

Lenzman
Lenzman

Reputation: 1400

For Angular 10+

Try using index as i

Example:

 <ng-container matColumnDef="columnName">
     <th mat-header-cell *matHeaderCellDef>
     </th>
     <td mat-cell *matCellDef="let row; index as i">
        <button (click)="selectedItem(i)"> Button </button>
     </td
 </ng-container>

Upvotes: 1

Fes9L
Fes9L

Reputation: 466

I searched a lot, but for my case "indexOf" scenario doesn't work properly then I found this answer, and it does exactly what I need.

let i = index;
i + (paginator.pageIndex * paginator.pageSize);

Upvotes: 2

ElasticCode
ElasticCode

Reputation: 7875

in your mat-cell you can get index like *ngFor as below

<mat-cell *matCellDef="let element;let i = index;">
        {{ i }}
</mat-cell>

Update from Angular 5 use also index as i

<ng-container matColumnDef="rowIndex">
  <th mat-header-cell *matHeaderCellDef> Index </th>
  <td mat-cell *matCellDef="let element;index as i;"> {{ i }} </td>
</ng-container>
  • index: number: The index of the current item in the iterable.
  • first: boolean: True when the item is the first item in the iterable.
  • last: boolean: True when the item is the last item in the iterable.
  • even: boolean: True when the item has an even index in the iterable.
  • odd: boolean: True when the item has an odd index in the iterable.

Upvotes: 25

rhavelka
rhavelka

Reputation: 2396

Are you using angularjs or angular2? your title says angularjs but your tags and post say otherwise.

angular2

<div *ngFor="item of items; i = index">
  <span click(item, i)>
</div>

angularjs

<div ng-repeat="item of items">
  <span click(item, $index)>
</div>

edit: I saw your comments, does this answer help you out? Is there an index property with CDK data table or Material2 data table?

Upvotes: 1

Related Questions