Salesforce Aura Custom Data Table


<aura:component implements="force:appHostable" controller="customDataTablesController">
	<aura:handler name="init" value="{! this }" action="{! c.doInit }" />
    <aura:attribute name="allAccounts" type="Account[]" />
	<lightning:card title="Custom Data Table">

		<table class="slds-table slds-table_cell-buffer slds-table_bordered">
				<tr class="slds-line-height_reset">
					<th class="slds-text-title_caps" scope="col">
						<div class="slds-truncate" title="Account Name">Account Name</div>
					<th class="slds-text-title_caps" scope="col">
						<div class="slds-truncate" title="Account Type">Account Type</div>
					<th class="slds-text-title_caps" scope="col">
						<div class="slds-truncate" title="Industry">Industry</div>
					<th class="slds-text-title_caps" scope="col">
						<div class="slds-truncate" title="Rating">Rating</div>
				 <!-- We are not trying to display the records related information
				 here, rather, we are trying to pass every snigle record to 
				 another child component <c:customDataTableRow /> and this child component will take 
				 care of getting the fields of a record displayed. -->

				<aura:iteration items="{! v.allAccounts }" var="accountRec">
					<c:customDataTableRow account="{!accountRec}"/>


	doInit : function(component, event, helper) {
		// Making a call to Apex method to fetch the account records. 
		var action = component.get("c.fetchAccounts");
		//Defining the callback function
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === "SUCCESS"){
                component.set( "v.allAccounts", response.getReturnValue());
            else if(state === "INCOMPLETE"){
            else if(state === "ERROR"){
                var errors = response.getError();
                    if(errors[0] && errors[0].message){
                        console.log("Error message: " + errors[0].message);
                    console.log("Unknown error");
		//Adding the request to queue

Leave a Reply