Categories
Appunti

Salesforce Aura Custom Data Table

Aura:

<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">
			<thead>
				<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>
					<th class="slds-text-title_caps" scope="col">
						<div class="slds-truncate" title="Account Type">Account Type</div>
					</th>
					<th class="slds-text-title_caps" scope="col">
						<div class="slds-truncate" title="Industry">Industry</div>
					</th>
					<th class="slds-text-title_caps" scope="col">
						<div class="slds-truncate" title="Rating">Rating</div>
					</th>
				</tr>
			</thead>
			<tbody>
				 <!-- 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}"/>
				</aura:iteration>
			</tbody>
		</table>
	</lightning:card>
	
</aura:component>

Controller:

({
	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){
                    if(errors[0] && errors[0].message){
                        console.log("Error message: " + errors[0].message);
                    }
                }else{
                    console.log("Unknown error");
                }
            }
        });
		//Adding the request to queue
        $A.enqueueAction(action);    
	}
})

Leave a Reply