Adding custom components to dynamically created table row tr

Question

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?

Answer 1

This is not the "Lightning" way. The only time you should be using document methods at all is when you're doing fancy stuff in a renderer. The standard method is to use automatic rendering. That's really simple:

<tbody id="tableQuoteLinesBody">
  <aura:iteration items="{!v.quotelines}" var="line">
    <tr>
      <td>{!line.rfqDetail}</td>
      <td>{!line.product}</td>
      <td>{!line.scale}</td>
      <td>{!line.deleteItem}</td>
    </tr>
  </aura:iteration>
</tbody>

To add a new row, it's now incredibly simple:

addProduct: function(component, event, helper) {
  var lines = component.get("v.quotelines");
  lines.push({ rfqDetail: "", product: "", scale: "", deleteItem: "" });
  component.set("v.quotelines", lines);
}

Obviously, this is simplified to get you started, but this is the standard Lightning design pattern. Note that you don't do any rendering of your own, you simply set the data attributes, and Lightning does all the heavy lifting for you.