In this blog, I showed the code for show records in the aura component using the table and lightning application with the help of apex controller.
Create an apex file (Name : GetContactController.apxc)
Source Code: GetContactController.apxc
public class GetContactController {
@AuraEnabled
public static List<Contact> getCon(){
return [Select Id,Name,Email,Phone From Contact Order by Name ASC];
}
}
Create a lightning component (Name: GetContactCmp)
Source Code: GetContactCmp.cmp
<aura:component controller="GetContactController">
<aura:handler name="init" value="{!this}" action="{!c.getContactData}" />
<aura:attribute name="getConList" type="List" />
<div class="slds">
<table class="slds-table slds-table--bordered slds-table--striped">
<thead>
<tr>
<th scope="col"><span class="slds-truncate">Name</span></th>
<th scope="col"><span class="slds-truncate">Email</span></th>
<th scope="col"><span class="slds-truncate">Phone</span></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.getConList}" var="con">
<tr>
<td>{!con.Name}</td>
<td>{!con.Email}</td>
<td>{!con.Phone}</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</aura:component>
Source Code: getContactCmpController.js
({
getContactData : function(component, event, helper) {
var action = component.get("c.getCon");
action.setCallback(this,function(response){
var state = response.getState();
if(state == 'SUCCESS'){
var returnData = response.getReturnValue();
component.set("v.getConList",returnData);
}
});
$A.enqueueAction(action);
}
})
Create a lightning application (Name: GetContactApp)
Source Code: GetContactApp.app
<aura:application extends="force:slds">
<c:GetContactCmp />
</aura:application>
