I've been attempting to implement the Ngx-datatable detail row feature following the documentation, but I've had no success so far.
Here's the plunker I created: https://embed.plnkr.co/yQv0Gvy8E8k1bqRr5Pxx/, where I basically replicated the row detail demo from Swimlanes online documentation '
I am trying to utilize the rowHeight binding as outlined in the manual:
<ngx-datatable-row-detail [rowHeight]="getHeight" #myDetailRow (toggle)="onDetailToggle($event)">
<ng-template let-row="row" ngx-datatable-row-detail-template>
<div><strong>Address</strong></div>
<div>{{row.address.city}}, {{row.address.state}}</div>
</ng-template>
</ngx-datatable-row-detail>
and TS:
getHeight(row: any, index: number): number {
return row.someHeight;
}
But, I keep encountering the issue of 'row' being undefined. What am I overlooking?
Alternatively, I also tried to access my original rows array from the getHeight function but still couldn't get the rows defined.
console.log(this.rows[index]);
Thank you!
UPDATE - FIX
The fix I implemented was simple:
getHeight(row: any): number {
if(row) {
return row.someHeight;
}
}