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>

Have you viewed [this](https://stackoverflow.com/q/49648270/9766215)? — Prachi, May 24 '18 at 06:04

score 18 · Accepted Answer · answered May 24 '18 at 06:10

18

Just use this code in a row to get index -

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

Here is

forked working example

answered May 24 '18 at 06:10

Pardeep Jain

84,110
37
165
215

2

It works like a charm, but I got the issue with paginator, when I go to the next page it starts again from one. If I am showing 10 item per page then after goes to next page it starts with one instead of eleven. Please help. – Shamsul Nov 21 '18 at 08:37
Assigning index doesn't work for me in case of table with expandable rows. What is alternative for that? – Eranki Oct 06 '20 at 15:54
It is not working when doing the pagination. – Murugan Jan 22 '21 at 07:00

score 14 · Answer 2 · edited Jun 20 '20 at 09:12

14

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 ]

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 03 '19 at 12:37

Mohd Abdul Baquee

439
3
7

This answer is the correct one. Answers that mentions only "{{i+1}}" is partially correct, because that only works on first page, one the second and later pages it always starts from 1, which I guess a bit wrong information. – Tareq Apr 23 '20 at 02:32
This answer only correct for this question – Murugan Jan 22 '21 at 07:01

score 3 · Answer 3 · answered Feb 10 '21 at 12:18

if you are using paginator from angular then

<td mat-cell *matCellDef="let item; let i = index">
    {{ (paginatorRef.pageIndex * paginatorRef.pageSize) + (i + 1) }}
 </td>

<mat-paginator
    #paginatorRef>
</mat-paginator>

if you are not using paginator and the whole table is in one page then

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

Muhammad Ahsan · Answer 4 · 2018-05-24T09:54:10.477

0

You can add an incremental serial number within ngFor loop i.e.

<meta-table *ngFor="let item of items; let i = index;">
  <ng-container matColumnDef="sn">
    <mat-header-cell *matHeaderCellDef mat-sort-header> SN. </mat-header-cell>
    <mat-cell *matCellDef="let item">{{ i + 1 }}</mat-cell>
  </ng-container>
</meta-table>

edited May 24 '18 at 09:54

answered May 24 '18 at 06:30

Muhammad Ahsan

608
15
28

It is not working when doing the pagination. – Murugan Jan 22 '21 at 07:00