I'm new with programming and I would appreciate if anyone can point me in the right direction or provide suggestions with this issue I'm having. I currently have a Data Table and my foreach rows are correctly displaying. I do however, would like to display a separate row for adding new lines.

Image shown below:

enter image description here

Would it be possible to add an independent row inside in the data table? The problem is whenever I add content, it shows only as text and messes up the layout. I'm just trying to add a button with a very short label in.

Here's what I have:


<lightning-card title="Mass Edit on Products">
    <div class="slds-p-around_medium slds-scrollable" style="height:300px;">
            <table class="slds-table slds-table_cell-buffer slds-table_bordered" >
                    <tr class="">
                        <th class="slds-size_1-of-8" scope="col">
                            <div class="slds-truncate" title="Product Name">PRODUCT</div>

                        <!-- ... MORE CODES HERE ... -->

                        <th class="slds-size_1-of-8" scope="col">
                            <div class="slds-truncate" title="Amount">AMOUNT</div>
                        <th class="slds-size_1-of-8" scope="col">
                            <div class="slds-truncate" title="Action"></div>
                <template for:each = {myList} for:item = "item" for:index="indexVar">
                    <tr key={item.key} class="slds-hint-parent">
                        <td class="slds-size_3-of-10" data-label="Product">
                            <div  title="">
                                <template if:false={isEdited} if:true={item.Product__c}> 
                                    <lightning-formatted-url value={item.ProductUrl} label={item.ProductName} target="_self"></lightning-formatted-url>
                                <template if:true={isEdited}>

                        <!-- ... MORE CODES HERE ... -->

                        <td class="slds-size_1-of-10" data-label="Remove">
                            <a name={indexVar} data-id={item.Id} onclick={remove}>
                                    <lightning-icon icon-name="utility:delete" alternative-text="delete"  size="small"></lightning-icon>



I'm trying to insert the following:

     <lightning-button-icon label="Add Product" slot="actions" onclick={add}></lightning-button-icon>

Any suggestion would be very helpful. Thanks!

  • You can have an empty row with the same structure in a template, parallel to the template containing your for each loop. And either on the button click or on changing of the data you can save it on backend and again make that spare row empty.
    – Navii
    May 20, 2020 at 10:55

1 Answer 1


You need to simply add the surrounding HTML:

    <lightning-button-icon label="Add Product" slot="actions" onclick={add}> 

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .