Dynamically Add/Delete Rows in Lightning | Salesforce

Suyash N
Suyash N 2.8k Views 1 comment

Hey Users,

Creating multiple rows at once is a common testing practice and same it is painful as every time one needs to go to dev. console and create rows by code. With this component, you can dynamically add/delete rows simultaneously with a button click. You can also save the rows and put validations.

This component is very useful when you need to create many rows at once. Currently, this component runs for the Account object & fields. You can update the code to work for any Custom object and fields. You can put validations too.

Component Features:
  • Single component
  • Add Single Row or Up to 10 rows on a button click
  • Disable/Clone a Row
  • Save Rows to Salesforce
  • Toast Message for Success or error if any.

Demo GIF:

dynamically add/delete rows lightning-gif


Also Check, Custom Lookup using Aura Lightning

Also Check, Multi-Select Lookup Lightning Component


Step-1: Create an Apex controller

Our apex controller will save the records on passing data to it. Here we are using a wrapper class to return message and messageType to check if successful or not.

dynamically add/delete rows lightning

Create DynamicRowController.cls Apex class.


Step-2: Create the DynamicRowCreation Lightning Component.

For creating a new Lightning Component, go to dev. console > File > New > Lightning Component.

Now open the DynamicRowCreation.cmp file and paste the below code.


Now open the controller file DynamicRowCreationController.js and paste the below code.


Open the helper file DynamicRowCreationHelper.js and paste the below code.


Now finally paste the CSS in the DynamicRowCreation.css file.



Step-3: Now we will call the component.

Finally, our component is ready to use. You can call this component in any Parent component and you can dynamically add/delete rows. You can also call this component on the VF page and put on the Record Detail page.

To call the Lightning component on VF Page – Click Here


Also Check:

For any queries or suggestions/queries, comment below.

Cheers … Happy Coding … 🙂

Share This Article
1 Comment
Notify of
1 Comment
Inline Feedbacks
View all comments

Hello thanks for this article this is really helpful , but i want add extra functionality to this where i want to remove  “+” icon should be remove after adding next section “. how can i achieve that ?