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:



Labels: ,