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:





2 comments:

  1. How to throw error message before saving the record by checking the entered draft values and database values

    ReplyDelete
    Replies
    1. updatedRecords will have the values. Do the validations before calling the server side apex method.

      Delete