title: How to set Serial Number in Mat-table angular 5
body: <p>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: </p>
  
  <pre><code>    &lt;mat-table #table2 [dataSource]="dataSource2" matSort&gt;
  
    &lt;ng-container matColumnDef="sn"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; SN. &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let item"&gt;{{ index + 1 }}&lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="description"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Description &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let item"&gt; {{item.description}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="start_time"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Start Time &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let item"&gt; {{item.start_time}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="end_time"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; End Time &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let item"&gt; {{item.end_time}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="total_pins"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Total Pins &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let item"&gt; {{item.total_pins}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="total_cards"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Total Cards &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let item"&gt; {{item.total_cards}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="remarks"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Remarks &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let item"&gt; {{item.remarks}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;mat-header-row *matHeaderRowDef="displayedColumns2"&gt;&lt;/mat-header-row&gt;
    &lt;mat-row *matRowDef="let row; columns: displayedColumns2;"&gt;&lt;/mat-row&gt;
  &lt;/mat-table&gt;
  </code></pre>