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. 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. 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.

Wrapper Class Example with multiple delete options