0

I was wondering if there is a way to add a row on a click of a button inside a LWC Template. I am able to make it work with a simple table but when I try to loop through an array and create a row of header and add Input text under, when clicking on the Add Row button it does nothing. Can someone help? Here is the code:

<template>
    <lightning-card title="Invoicing Schedule" icon-name="standard:case">
        <div slot="footer">
            <lightning-button  label="Add" variant="brand"  onclick={addRow}>
            </lightning-button>&nbsp;
            <lightning-button  label="Save" variant="brand" onclick={saveMultiplePSs}>
            </lightning-button>
        </div>  
        <table class="slds-table slds-table_bordered slds-table_cell-buffer">
            <thead>
                <template if:true={opportunity.data}>
                    <tr class="slds-text-title_caps">
                        <th scope="col">
                            <div class="slds-truncate">#</div>
                        </th>
                        <template for:each={createHeader} for:item="field">
                            <th key={keyIndex2} scope="col">    
                                <div class="slds-truncate">
                                    <lightning-layout-item key={field} size="1">
                                        {field}
                                    </lightning-layout-item>
                                </div>
                            </th>
                        </template>
                        <th scope="col">
                            <div class="slds-truncate">
                                Action
                            </div>
                        </th>
                    </tr>
                </template>
            </thead>
            <tbody>
                <template if:true={opportunity.data} for:index="index">
                    <tr key={keyIndex}>
                        <td>
                            {index}
                        </td>
                        <template for:each={createHeader} for:item="field">
                            <td key={keyIndex}>    
                                <lightning-layout-item key={field} size="1">
                                    <lightning-input access-key={index} id={index} type="text" name="input"></lightning-input>
                                </lightning-layout-item>
                            </td>
                        </template>
                        <td>
                            <lightning-icon icon-name="action:delete"  access-key={index} id={index} alternative-text="Click to Call" size="small" title="large size" onclick={removeRow}>
                            </lightning-icon>
                        </td>
                    </tr>
                </template>
            </tbody> 
        </table>
    </lightning-card>
</template>

The js function addRow:

addRow() {
        this.keyIndex+1;   
        this.headerArray.splice(0, this.headerArray.length);
        console.log('Enter ',this.headerArray);
    }

Take note I am new to coding... Thanks to all!

0

1 Answer 1

1

You need to @track the variable for the changes to appear, or copy the array.

@track headerArray;

Or:

this.headerArray = [...this.headerArray, { ...rowTemplate } ];

Where rowTemplate is an object that contains whatever properties you need for the row.

1
  • Thanks, I do have @track headerArray = []; in my .js file, can you elaborate on your second example? I should build my row directly in the .js file and call it from the markup?
    – Eric
    Feb 24, 2021 at 13:11

You must log in to answer this question.

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