SLDS Table--Insert And Delete Rows Dynamically

In this post, we are going to create a lightning component to insert and delete rows dynamically on slds datatable.

If we hit an INSERT button a new row will be added at the end of the slds table.

If we hit a DELETE button the last row will be deleted from the slds datatable automatically.

Child Lightning Component1

---

Component:-

<aura:component >
<aura:attribute name=”rowIndex” type=”String” default=”1″/>
<!– Register 2 Lightning Event for handle add or Delete rows on Parent Component –>
<aura:registerEvent name=”DeleteRowEvt” type=”c:DeleteRowEvt”/>
<aura:registerEvent name=”AddRowEvt” type=”c:AddNewRowEvt”/>
<lightning:button name=”details” label=”ADD” onclick=”{!c.AddNewRow}” />
<lightning:button name=”details” label=”DELETE” onclick=”{!c.removeRow}” />
<table class=”slds-table slds-table_bordered slds-table_cell-buffer”>
<thead>
<tr class=”slds-text-title_caps”>
<th scope=”col”>

Name

</th>
<th scope=”col”>

Type

</th>
<th scope=”col”>

Phone

</th>
</tr>
</thead>
</table>
</aura:component>

JS Controller:-

({

AddNewRow : function(component, event, helper){

// fire the AddNewRowEvt Lightning Event

component.getEvent(“AddRowEvt”).fire();

},

removeRow : function(component, event, helper){

// fire the DeleteRowEvt Lightning Event and pass the deleted Row Index to Event parameter/attribute

component.getEvent(“DeleteRowEvt”).setParams({

“indexVar” : component.get(“v.rowIndex”) }).fire();

},

})

---

Child Lightning Component2

---

Componet:-

<aura:component >
<aura:attribute name=”AccountInstance” type=”Account”/>
<table class=”slds-table slds-table_bordered slds-table_cell-buffer”>
<tbody>
<tr class=”slds-text-title_caps”>
<td>
<ui:inputText class=”slds-input” value=”{!v.AccountInstance.Name}”/>
</td>
<td>
<ui:inputText class=”slds-input” value=”{!v.AccountInstance.Type}”/>
</td>
<td>
<ui:inputPhone class=”slds-input” value=”{!v.AccountInstance.Phone}”/>
</td>
</tr>
</tbody>
</table>

</aura:component>

JS Controller:-

({

Save: function(component, event, helper) {
var action = component.get(“c.saveContacts”);
alert(component.get(“v.contactList”));
action.setParams({
“ListContact”: component.get(“v.AccountInstance”)
});
action.setCallback(this, function(response) {
var state = response.getState();
alert(state);
if (state === “SUCCESS”) {
component.set(“v.AccountInstance”, []);
helper.createObjectData(component, event);
alert(‘record Save’);
}
});
$A.enqueueAction(action);
},

})

---

Parent Lightning Component

---

Component:-

<aura:component Implements=”flexipage:availableForRecordHome,force:hasRecordId,force:appHostable” controller=”addDeleteController”>
<!–Init handler which is call doInit js function on component Load–>
<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}”/>
<!–Event handler for Add and Delete Row Event which is fire from Child Component–>
<aura:handler name=”DeleteRowEvt” event=”c:DeleteRowEvt” action=”{!c.removeDeletedRow}”/>
<aura:handler name=”AddRowEvt” event=”c:AddNewRowEvt” action=”{!c.addNewRow}”/>
<!–Aura Attribute for store Contact Object List as Array–>
<aura:attribute name=”contactList” type=”Account[]”/>
<button class=”slds-button slds-button_brand” onclick=”{!c.Save}”>Save</button>
<c:dynamic />

<aura:iteration items=”{!v.contactList}” var=”item” indexVar=”index”>
<c:AddandDeleteRowsDynamically AccountInstance=”{!item}” />
</aura:iteration>

</aura:component>

JS Controller:-

({

// function call on component Load
doInit: function(component, event, helper) {
// create a Default RowItem [Contact Instance] on first time Component Load
// by call this helper function
helper.createObjectData(component, event);
},

// function for save the Records
Save: function(component, event, helper) {

var action = component.get(“c.saveContacts”);
alert(component.get(“v.contactList”));
action.setParams({
“ListContact”: component.get(“v.contactList”)
});
// set call back
action.setCallback(this, function(response) {
var state = response.getState();
alert(state);
if (state === “SUCCESS”) {
// if response if success then reset/blank the ‘contactList’ Attribute
// and call the common helper method for create a default Object Data to Contact List
component.set(“v.contactList”, []);
helper.createObjectData(component, event);
alert(‘record Save’);
}
});
// enqueue the server side action
$A.enqueueAction(action);

},

// function for create new object Row in Contact List
addNewRow: function(component, event, helper) {
// call the comman “createObjectData” helper method for add new Object Row to List
helper.createObjectData(component, event);
},

// function for delete the row
removeDeletedRow: function(component, event, helper) {
// get the selected row Index for delete, from Lightning Event Attribute
var index = event.getParam(“indexVar”);
// get the all List (contactList attribute) and remove the Object Element Using splice method
var AllRowsList = component.get(“v.contactList”);
AllRowsList.splice(index, 1);
// set the contactList after remove selected row element
component.set(“v.contactList”, AllRowsList);
},
AddNewRow : function(component, event, helper){
// fire the AddNewRowEvt Lightning Event
component.getEvent(“AddRowEvt”).fire();
},

removeRow : function(component, event, helper){
// fire the DeleteRowEvt Lightning Event and pass the deleted Row Index to Event parameter/attribute
component.getEvent(“DeleteRowEvt”).setParams({“indexVar” : component.get(“v.rowIndex”) }).fire();
},
})

JS Helper:-

({
createObjectData: function(component, event) {
// get the contactList from component and add(push) New Object to List
var RowItemList = component.get(“v.contactList”);
alert(RowItemList);
RowItemList.push({
‘sobjectType’: ‘Account’,
‘Name’: ”,
‘Type’: ”,
‘Phone’: ”
});

// set the updated list to attribute (contactList) again
component.set(“v.contactList”, RowItemList);
},
// helper function for check if first Name is not null/blank on save
validateRequired: function(component, event) {
var isValid = true;
var allContactRows = component.get(“v.contactList”);
for (var indexVar = 0; indexVar < allContactRows.length; indexVar++) {
if (allContactRows[indexVar].Name == ”) {
isValid = false;
alert(‘First Name Can\’t be Blank on Row Number ‘ + (indexVar + 1));
}
}
return isValid;
},
})

Apex Controller:-

public with sharing class addDeleteController {
@AuraEnabled
public static void saveContacts(List<Account> ListContact){
system.debug(‘ListContact’+ListContact);

Insert ListContact;
}
}

OutCome:-

Once the record got saved, just go to Account object. There you can find this newly inserted record.