Hi readers, In this tutorial, I am going to show you How to display Record List in Lighting Component Salesforce.

After Completing this tutorial you will be able to understand:

  • Display Record List in Lightning Component.

What you’ll do?

  • Create a component that gets Record List from the server.
  • Bind Records on the UI using HTML Table.

Build a Lightning Component for showing Account List:

Login to your Salesforce Account and open Developer Console.

Record List

Step 1: Create an Apex Class:

Goto File>New and Create a New Apex class called GetAccountList. Replace the following code in GetAccountList class.

public class GetAccountList {
public static List<Account> GetAccount()
List<Account> lstAccount=[Select Id,Name,BillingState,BillingCity,Phone FROM Account];
return lstAccount;

Please Note: You have a to decorate a method as @AuraEnabled to expose it to Lightning Component.

Step 2: Create Lightning Component:

Goto File>New and create a Lightning Component called DisplayAccount. Write the following markup in Component.


<aura:component controller="GetAccountList">
<aura:attribute name="lstAccount" type="String[]" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div class="slds">
<div style="font-size:28px;font-weight:bold;margin-left:20px">
Record List
<table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
<tr class="slds-text-heading_label">
<th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
<th scope="col"><div class="slds-truncate" title="Type">Type</div></th>
<th scope="col"><div class="slds-truncate" title="Billing State">Billing State</div></th>
<th scope="col"><div class="slds-truncate" title="Billing City">Billing City</div></th>
<th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
<!-- Use the Apex model and controller to fetch server side data -->
<aura:iteration items="{!v.lstAccount}" var="account">
<td><div class="slds-truncate" title="{!account.Name}">{!account.Name}</div></td>
<td><div class="slds-truncate" title="{!account.Type}">{!account.Type}</div></td>
<td><div class="slds-truncate" title="{!account.BillingState}">{!account.BillingState}</div></td>
<td><div class="slds-truncate" title="{!account.BillingCity}">{!account.BillingCity}</div></td>
<td><div class="slds-truncate" title="{!account.Phone}">{!account.Phone}</div></td>


You can use “<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}” />”  to call a method on Load event. Where action contains the name of the method which you want to execute on component load.


getAccountList: function(component) {
var action = component.get('c.GetAccount');
// Set up the callback
var self = this;
action.setCallback(this, function(actionResult) {
component.set('v.lstAccount', actionResult.getReturnValue());


doInit : function(component, event, helper) {

Test the Component.

Create a New Lightning Application and replace the following code.

<aura:application extends="force:slds" >
<c:DisplayAccount />


Record List

View More:


I hope you loved this tutorial about How to Show Records in Lightning Component. I would like to have your feedback, Comments, and suggestions. Please don’t hesitate to comment for any technical help.

Thank You.