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?

Do you use `*ngFor` to create rows dynamically? – P.S. May 02 '18 at 20:42 — P.S., May 02 '18 at 20:42
@CommercialSuicide No I use mat-rows and mat-cells etc – NanoPish May 02 '18 at 20:47 — NanoPish, May 02 '18 at 20:47

ElasticCode · Accepted Answer · 2019-04-05T16:42:07.073

23

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.

edited Apr 05 '19 at 16:42

answered May 02 '18 at 21:02

ElasticCode

7,311
2
34
45

3

It's not related to row data its just the current row index in the HTML table – ElasticCode May 02 '18 at 21:22
Yes, If you need the index to be related to row data you need to add it to your data, so it will not be changed on sorting or filter – ElasticCode May 02 '18 at 21:25
what do you mean by id of the html row? – ElasticCode May 02 '18 at 21:29
the index of the row will remain even if material angular changes the content ? that is why this angular ngfor work ? – NanoPish May 02 '18 at 21:33
Yes, its related to loop, not the data – ElasticCode May 02 '18 at 21:36

score 2 · Answer 2 · answered Aug 20 '19 at 09:37

2

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

answered Aug 20 '19 at 09:37

Fes9L

448
4
5

score 1 · Answer 3 · answered May 02 '18 at 20:51

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?

score 1 · Answer 4 · answered Sep 19 '21 at 09:45

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>

Angular Material - Getting index of row in data table

4 Answers4

Linked