title: Mat-Table with paginator not passing correct index for edit/delete
body: <p>I am using a mat-table to display some information. I have a column for edit using mat-icon that has a click listener on it. The function that I am firing from that icon takes an index number to then pull from the array that I am populating my dataTableSource with. However the index number being passed is off because of the use of the material paginator. It is passing the index of the rows being shown on the current page length and not the index of the item in the overall array of data supplied to the dataTableSource.</p>
  
  <p><strong>component.html:</strong></p>
  
  <pre><code>&lt;mat-table #table [dataSource]="productData"&gt;
  
  **Other Columns**
  
    &lt;ng-container matColumnDef="editItem"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Edit Item &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let productInfo"&gt; &lt;mat-icon matTooltip="Edit 
      List" class="pointer"&gt;edit&lt;/mat-icon&gt; &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
  &lt;/mat-table&gt;
  </code></pre>
  
  <p><strong>component.ts:</strong></p>
  
  <pre><code>editProductList(index) {
  this.productListService.changeProductId(this.productList.data[index].id);
  this.router.navigate(['ProductList/Edit']);
  }
  </code></pre>
  
  <p>Do I have to sacrifice the mat-paginator to be able to get the functionality I am looking for? If not, how can I capture the correct index of the items in the mat-table?</p>
  
  <p>Help and tips are much appreciated. </p>