Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there an index property with CDK data table or Material2 data table?

I am using the Angular2 Material Design data table in my application and it's awesome. I was wondering if there is any way to get the index number or row number? Something like row.index? I noticed in the CDK data table documentation that it mentions that "The directive also exports the same properties as ngFor (index, even, odd, first, last)" but does not have any examples how to get the index.

Any help or guidance is greatly appreciated. Thanks!

like image 669
Prita Hasjim Avatar asked Aug 01 '17 19:08

Prita Hasjim


People also ask

What is CDK data table?

The CdkTable is an unopinionated, customizable data-table with a fully-templated API, dynamic columns, and an accessible DOM structure. This component acts as the core upon which anyone can build their own tailored data-table experience.

What is DataSource in mat table?

A DataSource is simply a class that has at a minimum the following methods: connect and disconnect . The connect method will be called by the table to provide an Observable that emits the data array that should be rendered.

How is MatCellDef defined?

- matCellDef is the selector of MatCellDef directive and is a Structural Directive, which means there is some syntactic sugar that we can leverage. The above are the things that we can analyze from the consumers' usage of MatTable . Besides these points, there is one more thing that we need to know.

What is multiTemplateDataRows?

multiTemplateDataRows have a different variable to hold the row's index called dataIndex . Access the row's index using let k = dataIndex . <!-- Row content--> <mat-row *matRowDef="let row; columns: displayedColumns; let k = dataIndex;" matRipple (click)="this.expandRow(row, k)"> </mat-row> Relevant github issue.


1 Answers

Thanks @Nehal, that works for that example. I was trying to make unique ID's per entry by using the index so I also found a similar solution where I defined index with cdkCellDef. Below is my solution, where index is i.

<md-cell *cdkCellDef="let row; let i = index;">
  <div id="{{i}}-info">
    index: {{i}}
    info: {{row.info}}
  </div>
</md-cell>
like image 84
Prita Hasjim Avatar answered Oct 30 '22 12:10

Prita Hasjim