get index of row in angular material table v5
AngularAngular Material-5Angular Problem Overview
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.
Angular Solutions
Solution 1 - Angular
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>
Solution 2 - Angular
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>
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
Solution 3 - Angular
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>
Solution 4 - Angular
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.
Solution 5 - Angular
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>
Solution 6 - Angular
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
Solution 7 - Angular
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
Solution 8 - Angular
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);
Solution 9 - Angular
Include 'let i = index' in *matRowDef