get index of row in angular material table v5

Question

I'm trying to get the index of row in table, in html, which has been implemented using angular material v5.2. Is there any method available to get the index?

The code for reference:

<div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

  <mat-table #table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
     <button (click)="doSomething()"> Do something</button>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

The method doSomething is what needs index.

Any help would be greatly appreciated.

Rich · Accepted Answer · 2020-06-22 04:49:07Z

174

Using indexOf is an enormous waste of resources. The right way is initializing a variable with index's value, like this:

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let element; let i = index">{{i + 1}}</td>
</ng-container>

https://material.angular.io/components/table/examples

UPDATE:

If you are using pagination the index can be calculated this way:

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let i = index">
  {{this.paginator.pageIndex == 0 ? i + 1 : 1 + i + this.paginator.pageIndex * this.paginator.pageSize}}
  </td>
</ng-container>

edited Jun 22, 2020 at 4:49

Rich

4,3786 gold badges45 silver badges78 bronze badges

answered May 24, 2018 at 21:45

zgluis

3,3772 gold badges20 silver badges23 bronze badges

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

6 Comments

dnc253 Over a year ago

This is the right way to do it. If you're not using the anything from your dataSource in this column (e.g. element), you don't need to declare it. You can just do <td mat-cell *matCellDef="let i = index">{{i}}</td>

Akitha_MJ Over a year ago

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

icguy Over a year ago

One thing that baffles me is why on earth is half the answer in French?

ONE_FE Over a year ago

@zgluis If we are using mat-paginator along with mat-table, how to accomplish the same ?

Kasun Over a year ago

this.paginator.pageIndex == 0 ? i + 1 : 1 + i + this.paginator.pageIndex * this.paginator.pageSize can be shortened to simply this.paginator.pageIndex * this.paginator.pageSize + i + 1

|

Shem Muthanga · Accepted Answer · 2020-09-15 12:53:08Z

47

Anyone using Angular6+ should use let i = dataIndex instead of let i = index as explained in this Github issue.

Here's the HTML snippet

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let element; let i = dataIndex">{{i + 1}}</td>
</ng-container>

answered Sep 15, 2020 at 12:53

Shem Muthanga

4916 silver badges6 bronze badges

4 Comments

Igor Kurkov Over a year ago

dataIndex - this is the right answer!! Thank you! So many answers but only this one is valid.

Rapido Over a year ago

This should definitely be the answer of the question.

ymoreau Over a year ago

This did not work for me with Angular 17, I had to stick to index otherwise I got no value.

bhantol Jul 7 at 16:31

dataIndex if you usemultiTemplateDataRows otherwise index v19

captain hak · Accepted Answer · 2019-04-04 09:29:24Z

33

You can use the filteredData property of your dataSource, like this:

<ng-container matColumnDef="weight">
  <th mat-header-cell *matHeaderCellDef> Header</th>
  <td mat-cell *matCellDef="let element"> {{dataSource.filteredData.indexOf(element)}} </td>
</ng-container>

Demo

With the @user3891850 solution(let i = index;), in case of pagination, the index will be the index in this page and not in the global object so you must be careful in case of pagination. example

edited Apr 4, 2019 at 9:29

captain hak

9128 silver badges22 bronze badges

answered May 11, 2018 at 12:43

bugs

15.4k6 gold badges53 silver badges55 bronze badges

4 Comments

Akitha_MJ Over a year ago

This works {{dataSource.filteredData.indexOf(element)}}

Diana Ysabel Over a year ago

That's great, I used {{dataSource.filteredData.indexOf(element)+1}} to avoid the value 0. Thank u!!

Shree Krishna Over a year ago

Yeah, I'm surprised why all of them are ok with using index. Don't they use pagination... This is what we really need for paginated mat table..

coderman Over a year ago

Do you know how many times the render get executed and every time you want to lookup for the index? This leads to low performance on big tables.

mariogarcia · Accepted Answer · 2019-05-10 19:12:56Z

11

In case you run into this issue and you are using a paginator the index you get here:

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

will be the current index displayed on the table. For instance, if you are on page 2 and your page size is 5, then the first index of the table will be 0 and not 5 (or the 6th item). So what you can do to get the true index is something like this:

index =
      this.paginator.pageIndex > 0
        ? index + this.paginator.pageIndex * this.paginator.pageSize
        : index;

If the paginator is on page one, index doesn't change. Otherwise multiply the pageIndex by the pageSize and add it to the index.

answered May 10, 2019 at 19:12

mariogarcia

1712 silver badges5 bronze badges

Comments

cozmik05 · Accepted Answer · 2019-08-24 19:37:14Z

9

I know this post is old but the above solution didn't work for me. instead if let i = index; try let i = dataIndex for latest version of mat-table check this solution. Don't know if it's just for expandable table though

answered Aug 24, 2019 at 19:37

cozmik05

5175 silver badges13 bronze badges

1 Comment

Iago Coutinho Campos Over a year ago

Worked on Angular 12

HIếu Nguyễn · Accepted Answer · 2021-12-25 01:40:55Z

9

I found 2 cases when using Angular Material Table

Using *matCellDef="let row = index" if the table has one-row template
Using *matCellDef="let row = dataIndex" if the table has multiple row templates

answered Dec 25, 2021 at 1:40

HIếu Nguyễn

911 silver badge3 bronze badges

Comments

Pintoo Rana · Accepted Answer · 2019-11-12 13:29:38Z

8

increase position number in mat-table....

<ng-container matColumnDef="index">
  <th mat-header-cell *matHeaderCellDef> Sr.No </th>
  <td mat-cell *matCellDef="let i=index"> {{i+1}} </td>
</ng-container>

answered Nov 12, 2019 at 13:29

Pintoo Rana

811 silver badge1 bronze badge

Comments

Shibhe Tepa · Accepted Answer · 2019-09-18 09:03:23Z

1

Include 'let i = index' in *matRowDef

answered Sep 18, 2019 at 9:03

Shibhe Tepa

1004 bronze badges

Comments

Vaibhav Vishal · Accepted Answer · 2019-08-20 09:07:41Z

0

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

edited Aug 20, 2019 at 9:07

Vaibhav Vishal

7,2487 gold badges32 silver badges51 bronze badges

answered Aug 20, 2019 at 8:59

Fes9L

4664 silver badges5 bronze badges

Comments

HARIHARAN S · Accepted Answer · 2022-07-11 06:52:48Z

0

  rindex:any;
  Cindex:any;

  show(){
    console.log("Column",this.Cindex,""+"Cell",this.rindex)

  }
  logIndex(j:any):void{
 this.Cindex=j

  }
  logIndex1(i:any):void{
    this.rindex=i

  }

  <ng-container *ngFor="let col of displayedColumns; index as i;" matColumnDef={{col}}>
                      <th mat-header-cell *matHeaderCellDef="">{{displayedColumnsNames[i]}}</th>
                      <td mat-cell *matCellDef="let element  ; "(click)="logIndex1(i) "> {{element[col]}} </td>
                  </ng-container>

                  <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky :true   " ></tr>
                  <tr  mat-row *matRowDef="let row; columns: displayedColumns;  let j=index; "(click)="[logIndex(j),show()] " ></tr>

answered Jul 11, 2022 at 6:52

HARIHARAN S

112 bronze badges

1 Comment

ahuemmer Over a year ago

Please do not post code-only answers but explain your answer a little in textual form: Why and how does it work, what makes it different to the other answers given?

Collectives™ on Stack Overflow

get index of row in angular material table v5

10 Answers 10

6 Comments

4 Comments

4 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

6 Comments

4 Comments

4 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related