Dispalying Data Table in Lightning

Lightning is revolutionary change in user interface of Salesforce. This post will be explaining how to use Lightning component to display data in table format by querying data from Sobject, how to use SLDS to format table and call server method from component controller.
We have 4 code snippets here.

1. DataTable.cmp - Lightning component to display data.
2. DataTableController.js - Client side controller in Javascript.
3. DataTableController - Server side controller in Apex.
4  DataDisplay.app - Lightning application to where DataTable component will be used.

=====================================================================================

1)  DataTable.cmp

<aura:component controller="DataTableController">
    <ltng:require styles="{! $Resource.SLDS105 + '/assets/styles/salesforce-lightning-design-system.css'}"/>
    <aura:attribute name="accountList" type="Account[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <!-- init is a predefined event sent to every component. After the component is initialized,-->
        <div class= "container slds-p-top--medium">
            <div id="list" class= "row">
                <table  class="slds-table slds-table--bordered slds-table--striped">
                     <thead>
                        <tr>
                            <th scope="col"><span class="slds-text-heading--medium">AccountNumber</span></th>
                            <th scope="col"><span class="slds-text-heading--medium">Name</span></th>
                            <th scope="col"><span class="slds-text-heading--medium">Industry</span></th>
                            <th scope="col"><span class="slds-text-heading--medium">Type</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <aura:iteration items="{!v.accountList}" var="acc">
                               <tr>
                                 <td>{!acc.AccountNumber}</td>
                                 <td>{!acc.Name}</td>
                                 <td>{!acc.Industry}</td>
                                 <td>{!acc.Type}</td>
                               </tr>
                
                        </aura:iteration>
                    </tbody>
                </table>
            </div>
        </div>    
</aura:component>

==============================================================================================================

2) DataTableController.js

({
    doInit : function(component, event, helper) {
        console.log("something is working");
  var action = component.get("c.getAccountList");
          action.setCallback(this, function(res) {
         var state = res.getState(); 
             if (state === "SUCCESS") {
                 component.set("v.accountList", res.getReturnValue());
             }
          });
           $A.enqueueAction(action);                  
         }
                             
        
 
})
==============================================================================================================

3) 

public class DataTableController {
 
    @AuraEnabled // if method need to be invoked from component controller needs this annotation
    public static List<Account> getAccountList() {
        System.debug('code is working till here');
        return [Select Id, AccountNumber, Name, AccountSource, Industry, Type from Account LIMIT 10];
    }
}

==============================================================================================================
4) DataDisplay.app

<aura:application > 
    <c:DataTable />
</aura:application>

==============================================================================================================

1)  DataTable.cmp

Add SLDS (ltng:require):

 To add SLDS CSS we need to add  <ltng:require styles= 
 "{! $Resource.SLDS105 + '/assets/styles/salesforce-lightning-design-system.css'}"/>

 tag you can download salesforce-lightning-design-system-x.y.z.zip  file from here and add to Static Resources name 

  as SLDSxyz.

  Here in my Case I have downloaded salesforce-lightning-design-system-1.0.5.zip so saved as SLDS105.

Define Attribute (aura:attribute)

 Define attribute with appropriate type to hold  data here in our Case we are querying Accounts

 <aura:attribute name="accountList" type="Account[]"/>

Iterate Data (aura:iteration)

 We are getting List Of Accounts and to iterate each Account use aura:iteration.

 <aura:iteration items="{!v.accountList}" var="acc">

Adding CSS

We have used CSS Like class="slds-table slds-table--bordered slds-table--striped" this we need to search

in https://www.lightningdesignsystem.com/ and add as per our requirement.

<aura:handler name="init"> 

This event is automatically fired when an app or component is initialized, prior to rendering by

 firing this event before component initialization we are assigning List of Accounts to accountList attribute.

2) DataTableController.js

In this controller by using var action = component.get("c.getAccountList");

 We are creating one time use instance of getAccountList Action in DataTableController. Callback is executed after server side action returns and set List of Accounts returned by server side action to accountList attribute. component.set("v.accountList", res.getReturnValue());

3)DataTableController 


This class is pretty self explanatory just make sure action i.e method you are invoking is static  and annotated 

with @AuraEnabled Annotation.

4)DataDisplay.app

Create an app and component to your app and we are done.

See how it looks