Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Surender reddy SalukutiSurender reddy Salukuti 

Lightning_datatable

Hi Every one,

i am new to lightning i am learning know

i wrote apex class-

public class Lightning_3 {
   
    @AuraEnabled
    public static List<contact> show(){
        List<contact> contacts=[select id,FirstName,LastName,phone from contact limit 5];
        return contacts;
    }
  }
and after i design my component
.<aura:component controller="Lightning_3" >
    <aura:attribute name="contacts" type="List"/>
    <aura:attribute name="columns" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.callme}"/>
    <lightning:DataTable keyfield="id" data="{!v.contacts}" columns="{!v.columns}"/>
</aura:component>
and after my controller
({
    callme : function(component, event, helper) {
        
        component.set('v.columns',[
            
            {label: 'FirstName', fieldName: 'FirstName', type: 'text'},
            {label: 'LastName', fieldName: 'LastName', type: 'text'},
            {label: 'phone', fieldName: 'phone', type: 'text'},
            
        ]);
            var action=component.get("c.show");
            action.setCallback(this,function(response){
               var state=response.getState();
               if(state==='SUCCESS'){
              
                var result=response.getReturnValue();
                component.set("v.data",result);
              }
            });
            $A.enqueueAction(action);
          }
})

actuall my task is to show contact recorrds on data table using apex in lightning
when i running this program it snot showing any error but i am not getting out put it s showing blank page.
if you know any one help me.

Thank you
Surender reddy.

 
Khan AnasKhan Anas (Salesforce Developers) 
Hi Surender,

Greetings to you!

You have a few mistakes in your code which are related to case-sensitivity. Please try below code.

Component: 
<aura:component controller="Lightning_3" >
    
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <lightning:datatable keyField="id" 
                         data="{!v.data}" 
                         columns="{!v.columns}"/>
</aura:component>

Controller: 
({
    doInit : function(component, event, helper) {
        component.set('v.columns',[
            
            {label: 'First Name', fieldName: 'FirstName', type: 'text'},
            {label: 'Last Name', fieldName: 'LastName', type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'text'}
            
        ]);
        var action=component.get("c.show");
        action.setCallback(this,function(response){
            var state=response.getState();
            if(state==='SUCCESS'){
                
                var result=response.getReturnValue();
                component.set("v.data",result);
            }
        });
        $A.enqueueAction(action);
    },
})

Apex: 
public class Lightning_3 {
    
    @AuraEnabled
    public static List<Contact> show(){
        List<contact> contacts=[SELECT Id, FirstName, LastName, Phone FROM Contact LIMIT 5];
        return contacts;        
    }
}

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Ajay K DubediAjay K Dubedi
Hi Surender,
You have only single mistake in component part Line_No->17,Please try below code: 
({
    callme : function(component, event, helper) {
       
        component.set('v.columns',[
           
            {label: 'FirstName', fieldName: 'FirstName', type: 'text'},
            {label: 'LastName', fieldName: 'LastName', type: 'text'},
            {label: 'phone', fieldName: 'phone', type: 'text'},
           
        ]);
            var action=component.get("c.show");
            action.setCallback(this,function(response){
               var state=response.getState();
               if(state==='SUCCESS'){
             
                var result=response.getReturnValue();
                component.set("v.contacts",result);
              }
            });
            $A.enqueueAction(action);
          }
})")


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
 
hytech prohytech pro
Hi
Surender reddy Salukuti,

Please try the following code its work on my end

component:
<aura:component controller="Lightning_3" >
<aura:attribute name="contacts" type="Contact"/>
    <aura:attribute name="columns" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.callme}"/>
    <!--<aura:iteration items="{!v.contacts}" var="cont">
    {!cont.Id}
    
    </aura:iteration>-->
    
    <lightning:datatable keyField="id" data="{!v.contacts}" columns="{!v.columns}"/>
</aura:component>

controller:

({
     callme : function(component, event, helper) {
        
        component.set('v.columns',[{label: 'FirstName', fieldName: 'FirstName', type: 'text'},{label: 'LastName', fieldName: 'LastName', type: 'text'},{label: 'phone', fieldName: 'phone', type: 'text'}
        ]);
            var action=component.get("c.show");
            action.setCallback(this,function(response){
               var state=response.getState();
               if(state==='SUCCESS'){
              console.log(response.getReturnValue());
                var result=response.getReturnValue();
                component.set("v.contacts",result);
              }
            });
            $A.enqueueAction(action);
          }
})


apex class :

public class Lightning_3 {
   
    @AuraEnabled
    public static List<contact> show(){
        List<contact> contacts=[select id,FirstName,LastName,phone from contact limit 5];
        return contacts;
    }
  }    
lkatneylkatney
Hi Guys,

Thank you for the solution. It would be best to upload your solution in this new tool Playground (https://playg.app) so that it can be easily shared with others as well. It will give a nice experience to others. Currently, it is too much code on this screen.

Thanks
Playground is a Salesforce online community to share solutions free of cost that can be used by anyone & with one click deploy technology, it gives hassle-free experience to test these solutions quickly. Check this out at https://playg.app to see existing/upload your solutions