How to add or remove rows dynamically [Aura]

In this tutorial, I will show you how to add or remove rows dynamically using Lightning Aura Components. In the GIF below you can see the final result.

How to add or remove rows dynamically in Lightning Components

dynamicRecordRowsCreation.cmp

<aura:component implements="flexipage:availableForAllPageTypes" controller="SfWiki_Handler" access="global">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="listOfAccounts" type="List" default="[]"/>

    <div class="slds-card" style="font-family: 'Open Sans', sans-serif">

        <!-- Header -->
        <header class="slds-card__header slds-media slds-media_center">
            <div class="slds-media__figure">
                <lightning:icon iconName="standard:account" size="small"/>
            </div>
            <div class="slds-media__body slds-card__header-title slds-text-title_bold" style="font-size: 14px">
                Account Creation
            </div>
        </header>

        <!-- Table -->
        <table class="slds-table slds-table_bordered slds-no-row-hover slds-table_cell-buffer" role="grid">
            <thead>
            <tr>
                <th scope="col" height="22" style="width: 3rem">Nr.</th>
                <th scope="col" height="22">Name</th>
                <th scope="col" height="22">Website</th>
                <th scope="col" height="22">Phone</th>
                <th scope="col" height="22" style="width: 3rem"></th>
            </tr>
            </thead>
            <tbody>
            <aura:iteration items="{!v.listOfAccounts}" var="rec">
                <tr class="slds-hint-parent">
                    <td style="font-weight: bold">
                        <lightning:formattedNumber value="{!rec.index}"/>.
                    </td>

                    <td>
                        <lightning:input type="text" variant="label-hidden" label="" name="Name" value="{!rec.Name}"/>
                    </td>

                    <td>
                        <lightning:input type="text" variant="label-hidden" label="" name="Website" value="{!rec.Website}"/>
                    </td>

                    <td>
                        <lightning:input type="text" variant="label-hidden" label="" name="Phone" value="{!rec.Phone}"/>
                    </td>

                    <td>
                        <lightning:buttonIcon iconName="utility:delete" alternativeText="Remove" title="Remove" name="{!rec.index}" onclick="{!c.removeRow}"/>
                    </td>
                </tr>
            </aura:iteration>
            </tbody>
        </table>
        <div class="slds-p-left_small slds-p-vertical_small">
            <lightning:button variant="destructive" label="delete all rows" title="delete all rows" iconName="utility:recycle_bin_full" onclick="{!c.removeAllRows}"/>
            <lightning:button variant="neutral" label="add additional row" title="add additional row" iconName="utility:add" onclick="{!c.addNewRow}"/>
        </div>

        <!-- Footer -->
        <footer class="slds-modal__footer" style="padding: 0.50rem 1rem;">
            <lightning:button variant="brand" label="Create Accounts" title="Create Accounts" iconName="utility:save" onclick="{!c.createAccounts}"/>
        </footer>
    </div>

</aura:component>

dynamicRecordRowsCreationController.js

({
    doInit: function(component, event, helper) {
        let listOfAccounts = [];
        helper.createRow(component, listOfAccounts);
    },

    /**
     * Adds a new row
     */
    addNewRow: function(component, event, helper) {
        let listOfAccounts = component.get("v.listOfAccounts");
        helper.createRow(component, listOfAccounts);
    },

    /**
     * Removes the selected row
     */
    removeRow: function(component, event, helper) {
        let toBeDeletedRowIndex = event.getSource().get("v.name");
        let listOfAccounts = component.get("v.listOfAccounts");

        let newListOfAccounts = [];
        for (let i = 0; i < listOfAccounts.length; i++) {
            let tempRecord = Object.assign({}, listOfAccounts[i]); //cloning object
            if (tempRecord.index !== toBeDeletedRowIndex) {
                newListOfAccounts.push(tempRecord);
            }
        }

        for (let i = 0; i < newListOfAccounts.length; i++) {
            newListOfAccounts[i].index = i + 1;
        }

        component.set("v.listOfAccounts", newListOfAccounts);
    },

    /**
     * Removes all rows
     */
    removeAllRows: function(component, event, helper) {
        let listOfAccounts = [];
        helper.createRow(component, listOfAccounts);
    },

    createAccounts: function(component, event, helper) {
        let action = component.get("c.insertAccounts");
        action.setParams({
            "jsonOfListOfAccounts": JSON.stringify(component.get("v.listOfAccounts"))
        });
        action.setCallback(this, function(response) {
            let listOfAccounts = [];
            helper.createRow(component, listOfAccounts);
            const toastEvent = $A.get("e.force:showToast");
            toastEvent.setParams({
                message: "Accounts successfully created!",
                type: "success",
                duration: '2000',
            });
            toastEvent.fire();
        });
        $A.enqueueAction(action);
    }
});

dynamicRecordRowsCreationHelper.js

({
    createRow: function(component, listOfAccounts) {
        let accountObject = {};
        if(listOfAccounts.length > 0) {
            accountObject.index = listOfAccounts[listOfAccounts.length - 1].index + 1;
        } else {
            accountObject.index = 1;
        }
        accountObject.Name = null;
        accountObject.Website = null;
        accountObject.Phone = null;
        listOfAccounts.push(accountObject);
        component.set("v.listOfAccounts", listOfAccounts);
    }
});

SfWiki_Handler.cls

public without sharing class SfWiki_Handler {

    @AuraEnabled
    public static void insertAccounts(String jsonOfListOfAccounts) {
        List<Account> listOfAccounts = (List<Account>) JSON.deserialize(jsonOfListOfAccounts, List<Account>.class);
        insert listOfAccounts;
    }

}

That’s it!

I hope you have enjoyed learning “How to add or remove rows dynamically [Aura]”. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

If you prefer to see the result with Lightning Web Components, here’s the link to it: How to add or remove rows dynamically [LWC].