Angular Material Table: How to create Index

Question

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.

nick · Accepted Answer · 2018-09-20 22:10:57Z

2

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.

answered Sep 20, 2018 at 22:10

nick

2,03821 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Learning Over a year ago

index is being generated by the mat-cell element and whenever you are rearranging/sorting the table. it regenerates them. As explained by Nick, add index/position in the JSON to keep it consistent with your data.

DanielSon Over a year ago

What I want is a bit different. Loads all elements automatically sorted by a column (already done), based on this order each row is designated an index with 1 at the top, then if the rows are reordered the index remains with the original row. By hardcoding position for each row, the index order at the beginning will not be ascending from 1 downwards after the sort by column.

nick Over a year ago

If I'm understanding correctly, you can sort your array on the property (column) you want to use for the initial sort order and assign the position (index) at that point. Then pass the array to the mat-table's dataSource. Does that make sense?

ngdevc · Accepted Answer · 2022-10-06 03:10:04Z

0

<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>

answered Oct 6, 2022 at 3:10

ngdevc

475 bronze badges

Collectives™ on Stack Overflow

Angular Material Table: How to create Index

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related