Is there an index property with CDK data table or Material2 data table?

Question

I am using the Angular2 Material Design data table in my application and it's awesome. I was wondering if there is any way to get the index number or row number? Something like row.index? I noticed in the CDK data table documentation that it mentions that "The directive also exports the same properties as ngFor (index, even, odd, first, last)" but does not have any examples how to get the index.

Any help or guidance is greatly appreciated. Thanks!

Nehal · Accepted Answer · 2017-08-01T20:18:30.453

24

You can get the row index the same way like *ngFor, add let i = index within the <md-row>

<md-row *cdkRowDef="let row; columns: displayedColumns; let i = index; let isOdd = odd; let isEven = even; let isLast = last" 
         [ngClass]="{'highlight': selectedRowIndex == row.id}"
         (click)="highlight(row, i, isOdd, isEven, isLast)">
</md-row>

ts:

highlight(row, index, oddFlag, evenFlag, lastFlag){
    alert("index:" + index + " odd: " + oddFlag + " even: " + evenFlag + " last: " + lastFlag);
    this.selectedRowIndex = row.id;
}

Plunker demo

edited Aug 01 '17 at 20:18

answered Aug 01 '17 at 20:11

Nehal

13,130
4
43
59

I like this answer. It is having lots of information about the rows. – Anup Sharma May 11 '18 at 13:51

score 12 · Answer 2 · answered Aug 01 '17 at 20:22

Thanks @Nehal, that works for that example. I was trying to make unique ID's per entry by using the index so I also found a similar solution where I defined index with cdkCellDef. Below is my solution, where index is i.

<md-cell *cdkCellDef="let row; let i = index;">
  <div id="{{i}}-info">
    index: {{i}}
    info: {{row.info}}
  </div>
</md-cell>

Is there an index property with CDK data table or Material2 data table?

2 Answers2

Linked