Today We’ll focus on creating custom data table using HTML table tag so here we have taken an example of opportunity record data to show in table.
we’ll create an apex class for query opportunity record
Apex Class
public class opportunityController {
@AuraEnabled
public static List<Opportunity> opprtunityRecord(){
return [SELECT Id, Name, StageName, Amount, CloseDate FROM Opportunity];
}
}
Lightning Component
<aura:component controller="opportunityController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="opportunityRecord" type="list" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:card footer="SFDC Pathshala" title="Opportunity Record">
<table class="slds-table slds-table_cell-buffer slds-table_bordered" aria-labelledby="element-with-table-label other-element-with-table-label">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Account Name">Amount</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Close Date">Stage</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Stage">Close Date</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.opportunityRecord}" var="opp">
<tr>
<td>{!opp.Name}</td>
<td>{!opp.Amount}</td>
<td>{!opp.StageName}</td>
<td>{!opp.CloseDate}</td>
</tr>
</aura:iteration>
</tbody>
</table>
</lightning:card>
</aura:component>
({
doInit : function(component, event, helper) {
var action = component.get("c.opprtunityRecord");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.opportunityRecord" ,response.getReturnValue());
}
else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " +
errors[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action);
}
})
Output : -
