I find myself in a rather unique situation and I am looking to see if knockout js can help me solve it.
Here is the setup:
Order = function() {
var self = this;
self.Name = 'default';
}
Customer = function() {
var self = this;
self.Name = 'default';
self.Orders = [];
}
Currently, I have a table like this:
<table>
<thead>
<tr>
<th>Customer Name</th>
</tr>
</thead>
<tbody data-bind="foreach: CustomerArray">
<tr>
<td data-bind="text: Name"></td>
</tr>
</tbody>
</table>
This displays a list of customer names, which is great.
Now, for my next step, I need to format the table in such a way that it lists the Order Name first, followed by the Customer Name at the bottom:
Customer Name (TH LABEL)
Order1
Order2
Order3
Smith, Frank
I thought about nesting my order array within each customer iteration with a tbody, but I don't like this approach because the column widths won't align since they are separate tables.
Is there a better solution out there to tackle this peculiar problem?
Thank you!