[SalesForce] Update is not working in Inline Editing for Lightning:dataTable

I am trying to update data in inline editing, here I used Lightning:dataTable. As of now, I am not able to capture newly updated data, means the update is not working.

enter image description here

Please find the code below:

Cmp Code:

<aura:component controller="My_Controller" 
implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" access="global" >    
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="wrapperDataRec" type="Object" />
<aura:attribute name="recordId" type="Id" access="public" />

<div class="slds-grid slds-gutters, slds-is-edited" style="margin-left:2px;">                   
<lightning:datatable aura:id="conlistId" 
                 data="{!v.wrapperDataRec.contactData}"
                 columns="{!v.oppCols}"
                 keyField="Id"
                 hideCheckboxColumn="false"
                 showRowNumberColumn="true"
                 onsave="{!c.handleSaveTable}"/>
             <!--selectedRows="{!v.selectedRows}"
                 onsave="{!c.handleSaveTable}"--> 
</div>
</aura:component>

JS Code:

    handleSaveTable : function(component, event, helper) {          
        var action = component.get("c.saveContact");
        var newCont = component.find("conlistId").get("v.data");
        action.setParams({"conList" : newCont});
        action.setCallback(this, function(response){
        });
        $A.enqueueAction(action);
        component.find("conlistId").set("v.draftValues", null);
        alert('Save working fine');
    })

APEX CLASS:

    public class My_Controller {
    @AuraEnabled
    public static void saveContact(List<Contact> conList)
    {
        System.debug('Updated Data: '+conList);
        database.update(conList);
        //Update conList;
    }
}

Best Answer

Your issue is on these lines:

var newCont = component.find("conlistId").get("v.data");
action.setParams({"conList" : newCont});

If you refer to the documentation for lightning:datatable, the changed values are retrieved from event.getParam('draftValues')

Retrieve the new value using event.getParam('draftValues').

The draftValues data structure is an array of objects. Each object describes the changed values by specifying the keyField to identify the row containing the changed values, the data column name, and the changed value for that column. The data structure is useful to make a server side call that persists the changes in the datatable.

So you will need to change your code to:

var drafts = event.getParam('draftValues');
action.setParams({"conList" : drafts});

This will make sure that your Contact here is updated. However you will need to refresh the wrapper class to update the list with the updated values to be reflected properly back to the component.