Nested Rows in Html Custom Tables - html

Question

As per my client requirement we are working on some custom table and I got stuck at nested rows.
when I click that plus symbol the rows of that particular row should be binded to the next row...
My data is in this format:
tabledata = [
{
reference: "191782-01", name: "American Electric LLC", assigned: "Rusty", Ship: "PKUP", Open: "15", total: "30", percentage: "50", staged: "1/4", datetime: "07/25/18 7:51 AM",
child: [{
reference: "191782-01", name: "American Electric LLC", assigned: "Rusty", Ship: "PKUP", Open: "15", total: "30", percentage: "50", staged: "1/4", datetime: "07/25/18 7:51 AM"
},
{
reference: "191782-01", name: "American Electric LLC", assigned: "Rusty", Ship: "PKUP", Open: "15", total: "30", percentage: "50", staged: "1/4", datetime: "07/25/18 7:51 AM"
}]
},
{ reference: "191780-02", name: "Good Business Company", assigned: "", Ship: "WISE", Open: "8", total: "8", percentage: "0", staged: "1/2", datetime: "07/25/18 8:12 AM", child: [] },
{ reference: "191782-02", name: "Cecchin Plumbing", assigned: "", Ship: "PKUP", Open: "23", total: "36", percentage: "36", staged: "1/3", datetime: "07/25/18 8:01 AM", child: [] },
{ reference: "191780-01", name: "Company Name 1", assigned: "MULTI", Ship: "PKUP", Open: "1", total: "1", percentage: "0", staged: "2/4", datetime: "07/25/18 8:05 AM", child: [] },
{ reference: "191702-02", name: "Leep's Supply", assigned: "MULTI", Ship: "WISE", Open: "3", total: "6", percentage: "50", staged: "2/4", datetime: "07/25/18 8:46 AM", child: [] }
]
I need child object to be visible when I click plus icon
My Angular Code:
<tbody>
<tr *ngFor="let data of tabledata">
<td class="text-left">{{data.reference}}<span *ngIf="data.reference.includes('191782')"
class="badge badge-warning win-badge win-badge-warning win-badge-large ml-3"
style="border-radius: 1.4rem">Urgent</span></td>
<td>{{data.name}}</td>
<td><span [ngClass]="{'badge badge-secondary win-badge win-badge-secondary': data.assigned=='MULTI', 'bgtrans': data.assigned!='MULTI'}">{{data.assigned}}</span></td>
<td>{{data.Ship}}</td>
<td><span [ngClass]="{'alert alert-error mobile-error alert-dismissible': data.Open>10, 'bgtrans': data.Open<10}">{{data.Open}}</span></td>
<td>{{data.total}}</td>
<td>{{data.percentage}}</td>
<td>{{data.staged}}</td>
<td>{{data.datetime}}</td>
<td><a href="javascript:void(0)"
*ngIf="data.child.length>0"><i class="fa fa-plus-square-o"></i></a> </td>
</tr>
</tbody>

Answer 1

You can map the array first, in order to transform it into a flat array, and then bind to the resulting array:
// pass a function to map
let arrays = tabledata.map(x => new Array(x).concat(x.child));
let flatTableData = [].concat.apply([], arrays);
To identify the child rows, just look for the ones that haven't the child property