Row index is not available in Angular CDK table

Question

I have a simple table like this

<table cdk-table [dataSource]="doors" [multiTemplateDataRows]="true" class="table table-hover">
  <ng-container cdkColumnDef="width">
    <th cdk-header-cell *cdkHeaderCellDef>Width</th>
    <td cdk-cell *cdkCellDef="let row; let idx = index;">
      Index: [{{idx}}]
      <span *ngIf="idx === undefined">undefined</span>
      <span *ngIf="idx === null">null</span>
    </td>
  </ng-container>

  <tr cdk-header-row *cdkHeaderRowDef="['width']"></tr>
  <tr cdk-row *cdkRowDef="let row; let i = index; columns: ['width']"></tr>
</table>

I need to access row index but it is undefined. What am I doing wrong?

Stackblitz: https://stackblitz.com/edit/angular-3cknv1

No, row is the item from data source. I need an index of this item in data source. — Vladimir Prudnikov, Feb 26 '19 at 14:03

score 2 · Accepted Answer · answered Feb 26 '19 at 14:11

You should use let idx = dataIndex;

Since you are using [multiTemplateDataRows]=true.

From the source:

/**
 * Context provided to the row cells when `multiTemplateDataRows` is true. This context is the same
 * as CdkCellOutletRowContext except that the single `index` value is replaced by `dataIndex` and
 * `renderIndex`.
 */

Look here for more info

score 1 · Answer 2 · answered Feb 26 '19 at 14:29

1

Its the same question as this SO question

you should use dataIndex like this:

<tr cdk-row *cdkRowDef="let row; let i = dataIndex;; columns: ['width']"></tr>

answered Feb 26 '19 at 14:29

GaryB

374
1
9

Thanks a lot, however, I've chosen @Korfoo 's answer because it is more informative. – Vladimir Prudnikov Feb 26 '19 at 17:04

Row index is not available in Angular CDK table

2 Answers2