CODEWITHSUNDEEP
angularangular-material
DanielSon
DanielSon

Reputation: 1545

Angular Material Table: How to create Index

Currently I have an index column using this code:

<ng-container matColumnDef="id">
  <mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell>
  <mat-cell *matCellDef="let row; let i = index;">{{i}}</mat-cell>
</ng-container>

The problem with this code is that the numbers don't move when I sort by other columns. ie. It starts with all rows having descending indices but then if I sort by another row the index column stays the same while all other columns adjust.

Upvotes: 0

Views: 2109

Answers (2)

Tortu
Tortu

Reputation: 49

<ng-container matColumnDef="Index">
   <th mat-header-cell *matHeaderCellDef> # </th>
   <td mat-cell *matCellDef="let element; index as i;">
      {{_paginator.pageSize * _paginator.pageIndex + i + 1}}    
   </td>
</ng-container>

Upvotes: 0

nick
nick

Reputation: 1998

You should add a property (ex: position) to your objects in the array the table represents. That will also allow you to add pagination and correctly display values in that column with incrementing numbers.

See this example from the Material Docs.

Upvotes: 2

Related Questions