DocSF

DocSF

Did You Know?

Advanced visual search system powered by Ajax

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);    
	}
})

Related Post

Quanti dati mostra google per fonte per ricerca

Quanti dati della stessa fonte google mostra

Ogni sito interrogato viene evidenziato un solo risulta...

Truffe Trading Online

Ormai il trading online ha preso sempre più piede tra ...

Salone Risparmio: La gestione attiva offre un

Salone Risparmio: La gestione attiva offre un buon rend...

Leave a Comment