Can someone please give me a sample code which can display list of records using Lightning component? I have tried, but i am unable to work this correct resources. I have gone through many knowledge resources, but none of them has worked for me to display simple record list in a Grid or table using Lightning Components.

Pls paste the code here, i will learn by myself.

  • what do you mean by PGB? – Himanshu Nov 23 '15 at 5:36
  • Pageblocktable. So, i want to display each record as a Tile using Lightning Component framework – Praveen Nov 23 '15 at 6:11
  • you need pageblocktable or simple html table will work? – Ratan Paul Nov 23 '15 at 6:22

The short answer to your question is this: there is no analog to apex:pageBlock or its child tags in Lightning Components.

As you know, the pageBlock family of tags in Visualforce gave developers tools to create Salesforce look-and-feel pages. There were a bunch of attributes and options to make it so that you could compose a UI that looked just like a page layout, but without actually conforming to page layout metadata. No understanding of CSS, or the underlying actual HTML composition was required.

This has some very positives: once you understand how it works, and if you are willing to play by the rules of how Salesforce composes HTML for you, you can very quickly put together a standard SF-looking UI.

But it has some down sides: if you want to break the rules the slightest bit, there is potentially a lot of work to do. In fact, a lot of developers have devoted a lot of time to reverse-engineering the Salesforce UI when they wanted to do this.

In the world of Lightning Components there are, as of Winter 16, a number of features in VF that have not yet shown up. Bringing in a pageBlock analog is obviously one of them. But actually Salesforce have taken a different approach as a first iteration of recreating the standard UI

Instead of making a set of components in LCF that will just build the UI, the actual CSS and UI framework are themselves a supported feature.

Salesforce Lightning Design System (SLDS) is the Salesforce look and feel. If you want to build a UI that looks like Salesforce, there is how. There are lots of examples that show you how to go about it. It isn't complete, but the UX team is adding new examples all the time, and new versions are being released pretty regularly.

But, the downside here is that this only applies to the new Lightning Experience (LEX) desktop functionality (along with a few mobile examples). It will not look like the pre LEX look and feel, or, what is sometimes referred to as the "Aloha" UI. Which is what apex:pageBlock used to give you.

For specifically getting SLDS working with Lightning Components, there are examples already in the SLDS web page, and another answer to this question to show one way to do this.

My hope is eventually they give us some kind of component in LCF that will just show either the Aloha, or LEX UI, based on user config. But I suspect, if that ever happens, that will be a long way off.


Following example will show you Account names using Lightning Component. First of all you need apex class which will return data for your lightning component. Method should be defined with @AuraEnabled annotation.

Apex Class :

public class AccountDetails{
 public static List<Account> getAccounts(){
 List<Account> acc = [select id,Name from Account];
 return acc;



 //Fetch the accounts from the Apex controller
 getUserList: function(component) {
 var action = component.get("c.getAccounts");

 //Set up the callback

 action.setCallback(this, function(actionResult) {

 component.set("v.Accounts", actionResult.getReturnValue()); 


   doInit : function(component, event, helper) {      
      //Fetch the expense list from the Apex controller   


<aura:component controller="AccountDetails" implements="flexipage:availableForAllPageTypes">
 <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
 <aura:attribute name="Accounts" type="List"/>

 <ltng:require styles="/resource/SLDS0102/assets/styles/salesforce-lightning-design-system-ltng.css" />
 <div class="slds">

 <table class="slds-table slds-table--bordered slds-table--striped">
 <th scope="col"><span class="slds-truncate">Name</span></th>

 <aura:iteration items="{!v.Accounts}" var="account">
 <td> {!account.Name}</td> 

Here is the starting guide for Lightning Component

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.