I have a custom component which by the means of a button add a row to my table. Now my needs are to add a component to each entry (tr) of the table.
This is my controller:
var tBody = document.getElementById("tableQuoteLinesBody");
var row = document.createElement("tr");
var detail = document.createElement("td");
detail.appendChild(document.createTextNode("RFQ detail"));
var product = document.createElement("td");
product.appendChild(document.createTextNode("Product"));
var scale = document.createElement("td");
scale.appendChild(document.createTextNode("Scale"));
var dDelete = document.createElement("td");
dDelete.appendChild(document.createTextNode("delete"));
row.appendChild(detail);
row.appendChild(product);
row.appendChild(scale);
row.appendChild(dDelete);
$A.createComponent(
"c:strike_lookup",
{
"label":"Account",
"object":"Account",
"searchField":"Name",
"placeholder":"Select an option",
"iconName":"standard:account",
"subtitleField":"Industry",
"order":"Name",
"limit":"5",
"loadingMessage":"Loading...",
"errorMessage":"Invalid input"
},
function(bn)
{
var bdy = cmp.get("v.body");
bdy.push(bn);
cmp.set("v.body",bdy);
}
);
While this is my component:
<table id="tableQuoteLines">
<thead>
<tr>
<th>
RFQ Detail name
</th>
<th>
Product
</th>
<th>
Scale
</th>
<th>
Delete
</th>
</tr>
</thead>
<tbody id="tableQuoteLinesBody">
{!v.body}
</tbody>
</table>
<lightning:button variant="brand" label="Add Product" title="Add Product" onclick="{! c.addProduct }" />
now obviously the v.body should be placed inside the tr, namely I would need 3 facet for each rows.
I have no idea how to programmatically add and remove facets or if this is the best way of doing this operation.
Any suggestion?