Menu
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!
669
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.
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.
- 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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With