title: Angular. Not able to show and display row number in the first column for dynamic table using Material
body: <p>I have been trying to add a row number or record number to my material table. The first column should show 1,2,3,4,5, etc. Problem is I am using dynamic table (generate using ngFor) because I would not know the type of records that is going to be returned. My table is sortable and will have filtering function. This constraint meant that I cannot tie the row number to individual record.</p>
  <p>The best I have managed to do is a hack. Overwrite the contents of the first column with row number but this solution is not ideal. There should be a solution somewhere but I cannot find one.</p>
  <p>Would appreciate if someone can help.</p>
  <pre><code>&lt;div id=&quot;table-wrapper&quot; &gt;
  &lt;mat-table #myResultTable  [dataSource]=&quot;resultTable&quot; matSort class=&quot;mat-elevation-z8&quot; 
      cdkDropListGroup &gt;
  
      &lt;ng-container  *ngFor=&quot;let columnHeader of columnsInTable; let colIndex = index&quot; 
          [matColumnDef]=&quot;columnHeader.field&quot; &gt;
  
          &lt;mat-header-cell *matHeaderCellDef  mat-sort-header&gt;
  
                  {{columnHeader.field}}
  
          &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=&quot;let rec; let num=index” &gt;
  
              &lt;div style=&quot;word-break: break-word;&quot; &gt; 
                  {{rec[colIndex]}}
              &lt;/div&gt;
      
          &lt;/mat-cell&gt;
  
      &lt;/ng-container&gt;
  
      &lt;mat-header-row class=&quot;colheader&quot; *matHeaderRowDef=&quot;displayedColumns; &quot; &gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot; &gt; &lt;/mat-row&gt;
  
  &lt;/mat-table&gt;
  </code></pre>