Update, Delete Record from DataTable in Lightning

In Lightning, let's see how we can easily access the current record in a list view or data table to update/delete. Those who are familiar with Visualforce will see a slight change in the concept to achieve this as we have a follow a component based design to update/delete record in a list view or data table.

In the below example, we are fetching account records and displaying in a data table with Update, Delete Icon for each record. User could click on any account specific edit, delete to fire the respective action. In this code snippet, we are just showing the trick to access the respective record Id and record object of the user selected account, so that the user could use the selected record id, record object to either edit or delete the record.

Now lets see the parent component(Demo_CRUD_Component) wherein we are fetching accounts and displaying the list of records using an Iteration. In iteration we use a child component(Demo_CRUD_Component_ROW) to display each record. To child component, we are passing single record, so that the edit, delete event can be easily handled in the child component. Let's see the code of parent component(Demo_CRUD_Component), related controller and apex class.

	public class Demo_CRUD_CompCtrl {
	@AuraEnabled
	public static List<Account> getAllRecords()
	{
	return [select id, Name,Industry, Phone from Account where Industry != null and Phone != null Limit 10];
	}
	}

view raw Demo_CRUD_CompCtrl.cls hosted with ❤ by GitHub

	<aura:component controller="Demo_CRUD_CompCtrl">
	<aura:attribute access="PUBLIC" name="manageView" type="Object[]"/>
	<aura:handler name="init" value="{!this}" action="{!c.getAccountRecord}" />

	<div class="slds">
	<table data-reactroot="" class="slds-table slds-table_bordered slds-table_cell-buffer">
	<thead>
	<tr class="slds-text-title_caps">
	<th scope="col">
	<div class="slds-truncate" title="Account Name">Account Name</div>
	</th>
	<th scope="col">
	<div class="slds-truncate" title="Industry">Industry</div>
	</th>
	<th scope="col">
	<div class="slds-truncate" title="Phone">Phone</div>
	</th>
	<th scope="col">
	<div class="slds-truncate" title="Action"></div>
	</th>
	</tr>
	</thead>
	<tbody>
	<aura:iteration items="{!v.manageView}" var="row">
	<c:Demo_CRUD_Component_ROW view="{!row}"/>
	</aura:iteration>
	</tbody>
	</table>
	</div>
	</aura:component>

view raw Demo_CRUD_Component.cmp hosted with ❤ by GitHub

	({
	getAccountRecord : function(component, event, helper) {
	var action = component.get("c.getAllRecords");
	action.setCallback(this, function(a)
	{
	if (a.getState() === "SUCCESS")
	{
	component.set('v.manageView',a.getReturnValue());
	}
	else if (a.getState() === "ERROR")
	{
	console.log(a.getError());
	}
	});
	$A.enqueueAction(action);
	}
	})

view raw Demo_CRUD_ComponentController.js hosted with ❤ by GitHub

Here is the code of child component wherein we are handling the edit and delete for each record. Since we have designed the child component for each record, it is easy to get the current record or object, selected by user for either edit, delete. Let's see the code of child component(Demo_CRUD_Component_ROW).

	<aura:component controller="Demo_CRUD_CompCtrl">
	<aura:attribute access="PUBLIC" name="view" type="Object"/>
	<tr>
	<th scope="row" data-label="Account Name">
	<div class="slds-truncate" ><a href="javascript:void(0);">{!v.view.Name}</a></div>
	</th>
	<td data-label="Industry">
	<div class="slds-truncate" >{!v.view.Industry}</div>
	</td>
	<td data-label="Close Date">
	<div class="slds-truncate" >{!v.view.Phone}</div>
	</td>
	<td data-label="">
	<div class="slds-truncate" >
	<button onclick="{!c.callUpdateRecord}" class="slds-button slds-button_icon" title="Edit Record">
	<lightning:icon iconName="action:edit" size="xx-small" alternativeText="Edit"/>
	<span class="slds-assistive-text">Edit</span>
	</button>
	<button onclick="{!c.callDeleteRecord}" class="slds-button slds-button_icon" title="Delete Record">
	<lightning:icon iconName="action:delete" size="xx-small" alternativeText="Delete"/>
	<span class="slds-assistive-text">Delete</span>
	</button>

	</div>
	</td>
	</tr>
	</aura:component>

view raw Demo_CRUD_Component_ROW.cmp hosted with ❤ by GitHub

	({
	callDeleteRecord : function(component, event, helper) {
	var currentRecordId = component.get("v.view.Id");
	alert ('Current Record Id ' + currentRecordId + '. Now you could pass the current record Id to server to delete the record.' )
	},
	callUpdateRecord : function(component, event, helper) {
	var currentRecordId = component.get("v.view.Id");
	var currentRecord = component.get("v.view");
	alert ('Current Record Id ' + currentRecordId + ' and Current Record Object is ' + component.get('v.view') +'. Now you could pass the current object to a modal popup and show the fields accordingly to update the record.' )
	}
	})