how to define index in angular material table how to define index in angular material table angular angular

how to define index in angular material table


Can you add index to let element; let i = index;" as you'd do with *ngFor?

<mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></mat-row>

Or like so:

<ng-container matColumnDef="index">  <mat-header-cell *matHeaderCellDef> Index </mat-header-cell>  <mat-cell *matCellDef="let element; let i = index;">{{i}}</mat-cell></ng-container>

Working Example: https://stackblitz.com/edit/angular-acdxje?file=app/table-basic-example.html


For anyone who has set the multiTemplateDataRows property of mat-table to true, you can't use index. Instead you have use either dataIndex or renderIndex.

<mat-cell *matCellDef="let row; let i = dataIndex;">{{i}}</mat-cell>

See https://github.com/angular/material2/issues/12793


For those who are facing problem with keeping the right index when using pagination which table has more than 1 page. It can be especially important when you have editable element, thus you're using a routerLink to add/edit/delete selected elements.

<ng-container matColumnDef="title"> <mat-header-cell *matHeaderCellDef mat-sort-header>Title</mat-header-cell> <mat-cell *matCellDef="let book; let i = index;" fxLayoutAlign.lt-md="center center">  <button mat-button [routerLink]="[i + (paginator.pageIndex * paginator.pageSize)]" routerLinkActive="active"</button> </mat-cell></ng-container>

As well as

<mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

In essence, i + (paginator.pageIndex * paginator.pageSize) is the solution, but it counts from 0. If you'd like to index from 1, simply make it (i+1) + (paginator.pageIndex * paginator.pageSize). Worth to note is that you really need the #paginator and [pageSize]="VALUE".