Angular Material - Getting index of row in data table

Question

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?

Answer 1

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.

Answer 2

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?

Answer 3

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);