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.
– P.S.

2018-05-02 20:42:06 +00:00
Commented May 2, 2018 at 20:42 — P.S.
– P.S., Commented May 2, 2018 at 20:42
@CommercialSuicide No I use mat-rows and mat-cells etc

NanoPish
– NanoPish

2018-05-02 20:47:47 +00:00
Commented May 2, 2018 at 20:47 — NanoPish
– NanoPish, Commented May 2, 2018 at 20:47

ElasticCode · Accepted Answer · 2019-04-05 16:42:07Z

25

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 5, 2019 at 16:42

answered May 2, 2018 at 21:02

ElasticCode

7,9252 gold badges38 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ElasticCode Over a year ago

It's not related to row data its just the current row index in the HTML table

ElasticCode Over a year ago

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 Over a year ago

what do you mean by id of the html row?

NanoPish Over a year ago

the index of the row will remain even if material angular changes the content ? that is why this angular ngfor work ?

ElasticCode Over a year ago

Yes, its related to loop, not the data

Fes9L · Accepted Answer · 2019-08-20 09:37:50Z

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, 2019 at 9:37

Fes9L

4664 silver badges5 bronze badges

Comments

rhavelka · Accepted Answer · 2018-05-02 20:51:23Z

1

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?

answered May 2, 2018 at 20:51

rhavelka

2,4244 gold badges26 silver badges38 bronze badges

Comments

Lenzman · Accepted Answer · 2021-09-19 09:45:51Z

1

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>

answered Sep 19, 2021 at 9:45

Lenzman

1,4052 gold badges20 silver badges33 bronze badges

Collectives™ on Stack Overflow

Angular Material - Getting index of row in data table

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related