Hello guys, today in this post we are going to learn how we can create inline edit data table with refresh view. we don’t have to refresh the window for seeing our current changes component will load automictically while updating data
Apex
public class inlineEditDataTablectrl {
@AuraEnabled
public static List<Opportunity> getOpportunitys(){
return [SELECT Id, Name, Amount, CloseDate FROM Opportunity];
}
@AuraEnabled
public static boolean updateOppotunitys(List<Opportunity> oppList){
try {
update oppList;
return true;
} catch(Exception e) {
return false;
}
}
}
Component
<aura:component controller="inlineEditDataTablectrl" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="List"/>
<aura:attribute name="draftValues" type="Object" default="[]"/>
<aura:handler event="force:refreshView" action="{!c.doInit}" />
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
<div class="slds-p-around_medium">
<h2 class="slds-text-heading_large">Inline edit Data table with refresh view</h2>
</div>
<!-- the height of the datatable -->
<div style="height: 260px">
<lightning:datatable aura:id="dtTable"
columns="{! v.columns }"
data="{! v.data }"
keyField="Id"
draftValues="{! v.draftValues }"
onsave="{! c.handleSave }"
/>
</div>
</aura:component>
Controller
({
doInit: function (component, event, helper) {
component.set('v.columns', [
{label: 'Id', fieldName: 'Id', type: 'text' , editable: false},
{label: 'Name', fieldName: 'Name', type: 'text' ,editable: true},
{label: 'Amount', fieldName: 'Amount', type: 'currency' ,editable: true},
{label: 'Close Date', fieldName: 'CloseDate', type: 'date-local' ,editable: true}
]);
helper.fetchData(component,event, helper);
},
handleSave: function (component, event, helper) {
var draftValues = event.getParam('draftValues');
var action = component.get("c.updateOppotunitys");
action.setParams({"oppList" : draftValues});
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var data = response.getReturnValue();
if(data === true){
helper.showSuccessToast(component,event, helper, 'success','record updated successfully');
$A.get('e.force:refreshView').fire();
}else{
helper.showSuccessToast(component,event, helper, 'error','please try again')
}
}
});
$A.enqueueAction(action);
},
})
Helper
({
fetchData: function (component,event,helper) {
var action = component.get("c.getOpportunitys");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var data = response.getReturnValue();
component.set('v.data',data);
}
});
$A.enqueueAction(action);
},
showSuccessToast: function(component,event,helper,type,message){
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
"title": "Success!",
"type": type,
"message": message
});
toastEvent.fire();
}
})
Output
