<aura:component controller="wrapperDisplayController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.loadData}"/>
    <aura:attribute name="wrapperList" type="object"/> 
    
    <div class="slds-p-around--large">
          <h1 style="font-size:25px;">{!v.wrapperList.headermsg}</h1> 
      <br/>
          <p style="color:red">Total Contacts = {!v.wrapperList.conCount}</p>
    </div>
     <table class="slds-table slds-table--bordered slds-table--cell-buffer">
      <thead>
        <tr class="slds-text-title--caps">
          <th scope="col">
            <div class="slds-truncate" title="First Name">First Name</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="First Name">Last Name</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="Department">Department</div>
          </th>
        
        </tr>
      </thead>
      <!--table body start, 
        Iterate contact list as a <tr>
        -->
      <tbody>
        <aura:iteration items="{!v.wrapperList.conList}" var="con">
          <tr>
            <th scope="row">
              <div class="slds-truncate" title="{!con.FirstName}">{!con.FirstName}</div>
            </th>
            <th scope="row">
              <div class="slds-truncate" title="{!con.LastName}">{!con.LastName}</div>
            </th>
            <th scope="row">
              <div class="slds-truncate" title="{!con.Department}">{!con.Department}</div>
            </th>
            <th scope="row">
               <div class="slds-truncate" title="{!con.LeadSource}">{!con.LeadSource}</div>
            </th>
          </tr>
        </aura:iteration>
      </tbody>
    </table>
</aura:component>





({
	loadData : function(component, event, helper) {
		helper.loadData_Helper(component);
	}
})




({
	loadData_Helper: function(component,event,helper) {
        console.log('i am inside helper');
        var action=component.get('c.initMethod') ;
		 action.setCallback(this, function(response) {
        //store state of response
        var state = response.getState();
             console.log('state==>'+state);
        if (state === "SUCCESS") {
          //set response value in wrapperList attribute on component.
          component.set('v.wrapperList', response.getReturnValue());
        }
      });
      $A.enqueueAction(action);
    
	}
})




public class wrapperDisplayController {
    
    @auraEnabled
    public static wrapperClass initMethod(){
        wrapperClass wrapperReturn=new wrapperClass();
        wrapperReturn.conList=[select firstName,LastName,department from contact where firstName !=null and LastName !=null and department !=null limit 10000];
        system.debug('conlist==>'+wrapperReturn.conList);
        wrapperReturn.conCount=wrapperReturn.conList.size();
        wrapperReturn.headermsg='This is contact information';
        return wrapperReturn;
    }
    public class wrapperClass{
        @auraEnabled public List<contact> conList{get;set;}
        @auraEnabled public integer conCount{get;set;}
        @auraEnabled public string headermsg{get;set;}
    }

}



<aura:application >
    <c:TestWrapper/>
</aura:application>