Inline editing in lightning:datatable in Salesforce Lightning Component

Sample Code:

Component:

1. <aura:component implements="force:appHostable"    
2.                 controller="AccountListController">    
3.         
4.     <aura:attribute type="object" name="acctList"/>    
5.     <aura:attribute name="mycolumns" type="List"/>    
6.         
7.     <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>    
8.         
9.     <lightning:datatable aura:id="acctTable"  
10.                          data="{! v.acctList }"     
11.                          columns="{! v.mycolumns }"     
12.                          keyField="Id"    
13.                          hideCheckboxColumn="true"  
14.                          onsave="{! c.onSave }"/>    
15.         
16. </aura:component>  

Component Controller:

1. ({    
2.       
3.     onInit : function( component, event, helper ) {    
4.           
5.         component.set( 'v.mycolumns', [    
6.             {label: 'Account Name', fieldName: 'Name', type: 'text', editable:'true'},    
7.             {label: 'Industry', fieldName: 'Industry', type: 'text'},    
8.             {label: 'Created Date', fieldName: 'CreatedDate', type: 'date', typeAttributes: {  
9.                 day: 'numeric',  
10.                 month: 'short',  
11.                 year: 'numeric',  
12.                 hour: '2-digit',  
13.                 minute: '2-digit',  
14.                 second: '2-digit',  
15.                 hour12: true}},    
16.             {label: 'Type', fieldName: 'Type', type: 'Text'}    
17.         ]);    
18.         helper.fetchAccounts(component);  
19.           
20.     },  
21.       
22.     onSave : function( component, event, helper ) {   
23.           
24.         var updatedRecords = component.find( "acctTable" ).get( "v.draftValues" );  
25.         var action = component.get( "c.updateAccts" );  
26.         action.setParams({  
27.               
28.             'updatedAccountList' : updatedRecords  
29.               
30.         });  
31.         action.setCallback( this, function( response ) {  
32.               
33.             var state = response.getState();   
34.             if ( state === "SUCCESS" ) {  
35.   
36.                 if ( response.getReturnValue() === true ) {  
37.                       
38.                     helper.toastMsg( 'success', 'Records Saved Successfully.' );  
39.                     component.find( "acctTable" ).set( "v.draftValues", null );  
40.                       
41.                 } else {   
42.                       
43.                     helper.toastMsg( 'error', 'Something went wrong. Contact your system administrator.' );  
44.                       
45.                 }  
46.                   
47.             } else {  
48.                   
49.                 helper.toastMsg( 'error', 'Something went wrong. Contact your system administrator.' );  
50.                   
51.             }  
52.               
53.         });  
54.         $A.enqueueAction( action );  
55.           
56.     }  
57.       
58. })  

Component Helper:

1. ({  
2.       
3.     fetchAccounts : function( component ) {  
4.           
5.         var action = component.get( "c.fetchAccts" );  
6.         action.setCallback(this, function( response ) {    
7.               
8.             var state = response.getState();    
9.             if (state === "SUCCESS")     
10.                 component.set( "v.acctList", response.getReturnValue() );                
11.               
12.         });    
13.         $A.enqueueAction(action);   
14.           
15.     },  
16.       
17.     toastMsg : function( strType, strMessage ) {  
18.           
19.         var showToast = $A.get( "e.force:showToast" );   
20.         showToast.setParams({   
21.               
22.             message : strMessage,  
23.             type : strType,  
24.             mode : 'sticky'  
25.               
26.         });   
27.         showToast.fire();   
28.           
29.     }  
30.       
31. })  

Apex Class:

1. public class AccountListController {    
2.         
3.     @AuraEnabled    
4.     public static List < Account > fetchAccts() {    
5.             
6.         return [ SELECT Id, Name, Industry, Type, CreatedDate FROM Account LIMIT 100 ];    
7.             
8.     }    
9.       
10.     @AuraEnabled    
11.     public static boolean updateAccts( List < Account > updatedAccountList ) {    
12.             
13.         try {  
14.           
15.             update updatedAccountList;  
16.             return true;  
17.               
18.         } catch(Exception e) {  
19.           
20.             return false;  
21.               
22.         }  
23.             
24.     }    
25.         
26. }  

Output: