Lightning DataTable Working Example

This is Lightning DataTable Working example with all functionalities of sorting,searching with the table,
You need to install Lightning DataTable Dev from https://appexchange.salesforce.com/listingDetail?listingId=a0N3A00000E9TBZUA3 and then you can use this feature in your Lightning Component.

You can refer the guide in the app exchange to fully understand it.😏Or you can mail me on
deepakagarwal483@gmail.com for any queries.
Here goes the code:

<aura:component controller="FetchData" implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="Accounts" type="Account[]"/>
    <aura:attribute name="Coldata" type="list"/>
    <aura:attribute name="Config" type="Map"/>
    <aura:attribute name="SelectedRows" type="List"/>
    <aura:attribute name="TypeValues"  type="List"/>
    <aura:attribute name="SelectedAccount" type="Account" access="public"/>
    <aura:attribute name="rowIndex" type="integer"/>
    <aura:handler event="ldt:clickedDtAction" name="dtActionClick" value="{!this}" action="{!c.tableActionHandler}"/>
    <c:Editable aura:id="taskEditModal" closeAction="{!c.closeTaskModal}">
 <aura:set attribute="header">
   Edit Account
 </aura:set>
 <aura:set attribute="content">
 <div class="task-inputs">
 <div class="slds-grid slds-wrap">
 <div class="slds-p-horizontal--small slds-size--1-of-2">
 <ui:inputText label="Name" labelClass="slds-form- element__label" class="slds-input" value="{!v.SelectedAccount.Name}" />
 </div>
 <div class="slds-p-horizontal--small slds-size--1-of-2">
     <ui:inputSelect label="Type" aura:id="Select" class="slds-select" change="{!c.OnSelect}">    
         <aura:iteration items="{!v.TypeValues}" var="Tvalues">
         <ui:inputSelectOption label="{!Tvalues}" text="{!Tvalues}"                              
                  value="" aura:id="SelectOption"/>          
         </aura:iteration>
     
  </ui:inputSelect>
 </div>
 <div class="slds-p-horizontal--small slds-size--1-of-2">
 <ui:inputText label="BillingCity" labelClass="slds-form- element__label" class="slds-input" value="{!v.SelectedAccount.BillingCity}" />
      <ui:inputText label="BillingState" labelClass="slds-form- element__label" class="slds-input" value="{!v.SelectedAccount.BillingState}" />
 </div>
     </div>
     </div>
     </aura:set>
        <aura:set attribute="footer"> <ui:button class="slds-button slds-button--neutral" press="{!c.closeTaskModal}" label="Cancel"/> <ui:button class="slds-button slds-button--brand" press="{!c.saveTask}" label="Save"/></aura:set>
</c:Editable>
     <lightning:buttonGroup class="button">
        <lightning:button label="Account" onclick="{!c.account}"/>
        <lightning:button label="Contact" onclick="{!c.contact}" />
        <lightning:button label="Opportunity" onclick="{!c.opportunity}" />
    </lightning:buttonGroup>
           <div class="task-list slds-p-top--medium">
     <ldt:datatableDev title="Accounts" aura:id="AccountTable"
                      dataRows="{!v.Accounts}" header="{!v.Coldata}"
                         selectedRows="{!v.SelectedRows}" config="{!v.Config}"/>
    </div>
 
</aura:component>

//JS controller
({
account : function(component, event, helper) {
        var dataset;
        var dataarr=[
            {
                'label':'Name',
                'name':'Name',
                'type':'url',
                'resizeable':true                            
            },
            {
                'label':'BillingCity',
                'name':'BillingCity'  
            },
            {
                 'label':'Type',
                'name':'Type'
             
            },        
            {
                'label':'BillingState',
                'name':'BillingState'
            }
        ];
        var rowaction=
            {
                    "massSelect":true,
                   "rowAction":[              
                       {                  
                           "label":"Edit",                  
                           "type":"url",                
                           "id":"editAccount",
                           "class":"width"
                       },
                       {
                        "label":"Del",                  
                        "type":"url",
                           "id":"delAccount"
                        }
                    ],
                     
         "globalAction":[
             {
                 "label": "Delete",
                 "type":  "Button",
                 "id": "Deletebutton",
                 "class":"slds-button slds-button--neutral"
               
             }
                                   
         ]
    }
        var action=component.get("c.Accdata");
          action.setCallback(this,function(result){
         var state=result.getState();
           if(state=='SUCCESS' && component.isValid()){
              dataset =JSON.stringify(result.getReturnValue());
               component.set("v.Accounts",result.getReturnValue());  
                component.set("v.Coldata",dataarr);
            }
            component.find("AccountTable").initialize({
                "order":[0,"asc"],
                "itemsPerPage":10
            })
component.set("v.Config",rowaction);
     
});
         $A.enqueueAction(action);
    },  
 
    tableActionHandler: function(cmp, event, helper)
      {
        var selectedAccounts = cmp.find("AccountTable").get("v.selectedRows");
        var action=cmp.get("c.DelAccount");
        var actionId = event.getParam('actionId');
        if(actionId == 'editAccount'){
        var rowIdx = event.getParam("index");
        var clickedRow = event.getParam('row');
        cmp.set("v.rowIndex",rowIdx);
        cmp.set("v.SelectedAccount",clickedRow);
        cmp.find("taskEditModal").open();
              }      
       if(actionId=='Deletebutton'){
         var rowIdx = event.getParam("index");
           action.setParams({
              "MassDelete":selectedAccounts
              });
          action.setCallback(this,function(res){
              var state=res.getState();
              if(state=='SUCCESS' && cmp.isValid() && selectedAccounts!=' '){
                  alert('Records deleted Successfully');
                  cmp.find("AccountTable").rerenderRows();
              }
          });
          }
          if(actionId=='delAccount'){
          var rowIdx = event.getParam("index");
          var clickedRow = event.getParam('row');    
              action.setParams({
                  "Accdel":clickedRow
              });
           
          action.setCallback(this,function(res){
              var state=res.getState();
          if(state=='SUCCESS' && cmp.isValid()){
                  alert('Record deleted Successfully');
                  cmp.find("AccountTable").deleteRow(rowIdx);
              }
          });
          }
          if(cmp.get("v.SelectedAccount.Type")==null){
              var arr=[
                '--None--','Prospect','Customer-Direct','Customer-Channel','Channel Partner','Installation Partner',
                       'Technology Partner','Other'];              
              cmp.set("v.TypeValues",arr);
          }
        if(cmp.get("v.SelectedAccount.Type")=='Prospect'){
              var arr=[
                'Prospect','Customer-Direct','Customer-Channel','Channel Partner','Installation Partner',
                       'Technology Partner','Other','--None--'];              
              cmp.set("v.TypeValues",arr);
          }
               
           if(cmp.get("v.SelectedAccount.Type")=='Customer - Direct'){
              var arr=
                 ['Customer - Direct','Prospect',
 'Customer-Channel',
 'Channel Partner',
 'Installation Partner',
 'Technology Partner',
 'Other',          
 '--None--'];
              cmp.set("v.TypeValues",arr);
          }
                       if(cmp.get("v.SelectedAccount.Type")=='Customer - Channel'){
              var arr=['Customer - Channel','Prospect',
 'Customer-Direct',
 'Channel Partner',
 'Installation Partner',
 'Technology Partner',
 'Other',
  '--None--'];
              cmp.set("v.TypeValues",arr);
          }
                       if(cmp.get("v.SelectedAccount.Type")=='Channel Partner'){
              var arr=['Channel Partner','Prospect',
 'Customer-Channel',
 'Customer-Direct',
 'Installation Partner',
 'Technology Partner',
 'Other',
  '--None--'];
              cmp.set("v.TypeValues",arr);
          }
            if(cmp.get("v.SelectedAccount.Type")=='Installation Partner'){
              var arr=['Installation Partner','Prospect',
 'Customer-Channel',
 'Customer-Direct',
 'Channel Partner',
 'Technology Partner',
 'Other',
   '--None--'];
              cmp.set("v.TypeValues",arr);
          }
        if(cmp.get("v.SelectedAccount.Type")=='Technology Partner'){
              var arr=['Technology Partner','Prospect',
 'Customer-Channel',
 'Customer-Direct',
 'Channel Partner',
 'Installation Partner',
 'Other',
 '--None--'];
              cmp.set("v.TypeValues",arr);
          }
           $A.enqueueAction(action);
  },
 
    saveTask: function(cmp, event, helper){
        var action=cmp.get("c.SaveAccount");
        var rowIdx = event.getParam("index");
        var savedata=cmp.get("v.SelectedAccount");
        action.setParams({
            "SaveAcc":savedata
        });    
       alert('Record saved Successfully');
        cmp.find("taskEditModal").close();
        cmp.find("AccountTable").updateRow(rowIdx,savedata);
        $A.enqueueAction(action);
    },
 
   closeTaskModal : function(cmp){
     cmp.find("taskEditModal").close();
         cmp.set("v.rowIndex",-1);
   },
 
    OnSelect :function(cmp,event){      
         var rowIdx = event.getParam("index");
        var AccountType=cmp.find("Select").get("v.value");
        var Typeid=cmp.get("v.SelectedAccount.Id");    
        cmp.set("v.SelectedAccount.Type",AccountType);
       cmp.find("AccountTable").updateRow(rowIdx,AccountType);
        //$A.enqueueAction(action);
    },
   
})

Component : Editable(<c:Editable>)

 <aura:component access="public">
<aura:attribute name="header" type="Aura.Component[]" access="public"/>
<aura:attribute name="content" type="Aura.Component[]" access="public"/>
<aura:attribute name="footer" type="Aura.Component[]" access="public"/>
 <aura:attribute name="closeAction" type="Aura.Action" access="public"/>
 <aura:method name="open" action="{!c.toggleModal}" />
 <aura:method name="close" action="{!c.toggleModal}" />
 <div class="slds-modal" aura:id="modal" aria-hidden="false" role="dialog">
 <div class="slds-modal__container">
 <div class="slds-modal__header" onclick="{!v.closeAction}">
 <button class="slds-button slds-button--icon-inverse slds- modal__close">
 <c:svgIcon svgPath="/resource/ldt__SLDS202/assets/icons/utilit y-sprite/svg/symbols.svg#close" class="slds- button__icon slds-button__icon--medium" containerClass="slds-icon_container"/>
 <span class="slds-assistive-text">Close</span> </button>
 <h2 class="slds-text-heading--medium">{!v.header}</h2>
 </div>
 <div class="slds-modal__content slds-p-around--medium">
{!v.content}
</div>
<div class="slds-modal__footer"> {!v.footer}
</div>
</div> </div>
<div class="slds-backdrop" aura:id="modal-backdrop"></div>
 </aura:component>

//JS controller
({ toggleModal : function(cmp, event, helper)
  {
      $A.util.toggleClass(cmp.find("modal"),'slds-fade-in-open');
      $A.util.toggleClass(cmp.find("modal-backdrop"),'slds-backdrop--open');
  }
 })

//Server-Side Controller
Public class FetchData {
    @AuraEnabled
    Public static List<Account> Accdata(){
        List<Account> alist=[Select Name,Billingcity,Type,BillingState from Account order by createddate];
        //upsert SaveAcc;
         return alist;
     
    }
    @AuraEnabled
    Public static void SaveAccount(Account SaveAcc){
        update SaveAcc;      
    }  
     @AuraEnabled
    Public static void DelAccount(Account Accdel,List<Account> MassDelete){
        system.debug(MassDelete);
        system.debug(Accdel);
        if(Accdel!=null){
        delete Accdel;
        }
        if(MassDelete!=null)
        delete MassDelete;
         
    }


}


Comments

  1. Deepak25 May 2017 at 23:19

    Hi guys in this post i created Contact and Opportunity tabs which doesnot have any functionality but you can do the same thing as i did for Account.

    ReplyDelete
  2. Abhiram17 June 2019 at 01:54

    how to get the selected row number? I am trying to display error msg for validation. After edit i am checking whethere entered value is duplicate or not in back end and i am trying to display entered value is duplicate but i want to include the row number also.So that user can understand in which row duplicate value entered

    ReplyDelete

Post a Comment

Popular posts from this blog

Lightning table with multiple checkbox select options and filter table data.

Image
Hi All, This is good example of Lightning table with multiple checkbox selection and also you can filter the table data.For my convenience i have named the component as DefectTracker. DefectTracker.cmp    <aura:component controller="LeadController">     <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>     <aura:attribute name="Leads" type="list" />        <aura:attribute name="check" type="boolean"/>     <aura:attribute name="Bools" type="list"/>     <aura:attribute name="key" type="string"/>     <!---Use Salesforce Lightning Design System CSS From Static resources-->       <ltng:require styles="{!$Resource.salesforcelightningdesignsystem + '/assets/styles/salesforce-lightning-design-system.css'}"/>         <!--declare attributes-->     <aura:attribut
Read more

Wrapper Class Example with multiple delete options

This is the working example of Wrapper Class with lead as example with multiple delete option. <apex:page controller="wrapperClas">     <apex:form >         <apex:pageBlock id="pbLead">             <apex:pageBlockButtons >                 <apex:commandButton value="Delete" action="{!del}" rerender="pbLead"/>             </apex:pageBlockButtons>             <!-- In our table we are displaying the cContact records -->             <apex:pageBlockTable value="{!leadList}" var="l" id="table">                 <apex:column >                     <!-- This is our selected Boolean property in our wrapper class -->                     <apex:inputCheckbox value="{!l.selected}"/>                 </apex:column>                 <!-- This is how we access the contact values within our cContact container/wrapper
Read more