How to set Serial Number in Mat-table angular 5

Question

I have used a mat-table in my angular app and have populated it successfully, but the original id's of the data are not serial wise and datas are filtered and only some data are to be displayed. Is there a way to add an auto incrementing serial no. My Html for the code:

    <mat-table #table2 [dataSource]="dataSource2" matSort>

  <ng-container matColumnDef="sn">
    <mat-header-cell *matHeaderCellDef mat-sort-header> SN. </mat-header-cell>
    <mat-cell *matCellDef="let item">{{ index + 1 }}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="description">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Description </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.description}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="start_time">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Start Time </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.start_time}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="end_time">
    <mat-header-cell *matHeaderCellDef mat-sort-header> End Time </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.end_time}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="total_pins">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Total Pins </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.total_pins}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="total_cards">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Total Cards </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.total_cards}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="remarks">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Remarks </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.remarks}} </mat-cell>
  </ng-container>

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

Answer 1

To get auto increment index value to the next pages.

([Page Index] * [Page Size] + [row Index + 1])

Table's td cell loop source code

<ng-container matColumnDef="id">
 <th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
 <td mat-cell *matCellDef="let item; let i = index">
    {{ (paginatorRef.pageIndex * paginatorRef.pageSize) + (i + 1) }}
 </td>
</ng-container>

mat-paginator source code

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

[ Note: Add local reference as #paginatorRef into your mat-paginator code ]