Displaying Records in Lightning component

Step 1: Create apex class.

Public class expensesRecordsDisplay{

   @AuraEnabled
   public static List<Expense__c> getExpensesRecords(){
   
     return [Select id,name,amount__c,date__c,client__c,Reimbursed__c from Expense__c];
   }
}


Step 2:create lightning component...

<aura:component controller="expensesRecordsDisplay"> <p class="white" >Display Expenses Records</p > <aura:attribute name="Expenses" type="Expense__c[]" ></aura:attribute> <ui:button label="Get Expenses" press="{!c.getOpps}"/> <table class="table"> <thead > <tr class="slds-text-title--caps"> <th scope="col"> <div class="slds-truncate" title="Expenses Name">Expenses Name</div> </th> <th scope="col"> <div class="slds-truncate" title="Amount">Amount</div> </th> <th scope="col"> <div class="slds-truncate" title="Date">Date</div> </th> <th scope="col"> <div class="slds-truncate" title="Client">Client</div> </th> <th scope="col"> <div class="slds-truncate" title="Reimbursed?">Reimbursed?</div> </th> </tr> </thead> <tbody> <aura:iteration var="Expenses" items="{!v.Expenses}"> <tr> <td><a href="#"> {!Expenses.Name}</a></td> <td> {!Expenses.Amount__c}</td> <td> {!Expenses.Date__c}</td> <td> {!Expenses.Client__c}</td> <td> {!Expenses.Reimbursed__c}</td> </tr> </aura:iteration> </tbody> </table> </aura:component>

step 3: create a controller for component..

({ getOpps : function(component, event, helper) { var action = component.get("c.getExpensesRecords");// calling apex class action.setCallback(this, function(response){ var state = response.getState(); if (state === "SUCCESS") { component.set("v.Expenses", response.getReturnValue()); } }); $A.enqueueAction(action); } })


Step 4: create Style component

.THIS.white  {
       font-family: "Times New Roman", Times, serif;
      background-color: lightblue;
}
.THIS.table  {
       font-family: "Times New Roman", Times, serif;
      background-color: pink;
      border: 1px solid black;
      border-collapse: collapse;
      width: 70%;
      height: 100%;
      text-align: left;
     vertical-align: bottom;

}


Step 5: create application for component...
<aura:application >
    <c:expensesRecordsDisplay />

</aura:application>