Lightning Datatable with hyperlink example salesforce

Lightning:Datatable component displays tabular format where each column can be displayed based on the data type.
Lightning:Datatable also supports inline editing.
Lightning:Datatable is not supported on mobile devices.

Datatable populated during initialization using the data, columns, and keyField attributes.
The keyField attribute is a unique identifier.

//AccountController Class
public class AccountController 
{
 	@AuraEnabled
    public static List <Account> fetchAccounts()
	{
        //Qyery 10 accounts
        List<Account> accList = [SELECT Id, Name, BillingState, 
                                    Website, Phone, Industry, Type from Account ORDER BY CreatedDate DESC  LIMIT 10 ] ;
        //return list of accounts
        return accList;
    }
}
<!--AccountDatatableComponent-->
<aura:component controller="AccountController" >
<aura:attribute name="Accounts" type="List" />
<aura:attribute name="Accntcolumns" type="List"/>

<aura:handler name="init" value="{!this}" action="{!c.fetchAcc}"/>

<lightning:datatable data="{! v.Accounts }"
columns="{! v.Accntcolumns }"
keyField="id"
hideCheckboxColumn="flase"/>
</aura:component>
//AccountDatatableComponent JavaScript Controller
({
fetchAcc : function(component, event, helper) {
helper.fetchAccHelper(component, event, helper);
}
})
//AccountDatatableComponent Helper JavaScript.
({
	fetchAccHelper : function(component, event, helper) 
    {
		 component.set('v.Accntcolumns', [          
               {label: 'Account Name', fieldName: 'linkName', type: 'url', 
                typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},             
                {label: 'Industry', fieldName: 'Industry', type: 'text'},
                {label: 'Phone', fieldName: 'Phone', type: 'Phone'},               
                {label: 'Website', fieldName: 'Website', type: 'url', 
                typeAttributes: {label: { fieldName: 'Website' }, target: '_blank'}},
            ]);
        
         var action = component.get("c.fetchAccounts");      
         action.setCallback(this, function(response)
         {
             debugger;
            var state = response.getState();
            if (state == "SUCCESS")
            {
                var accVal=response.getReturnValue()
             	accVal.forEach(function(AccNameVal)
             	 {
                    AccNameVal.linkName = '/'+AccNameVal.Id; 
                });
               
                component.set("v.Accounts", accVal);
            }
         });
                      
        $A.enqueueAction(action);
	}
})
//Lightning Application:- "AccountDatatableApplication"
<aura:application extends="force:slds">
<c:AccountDatatableComponent/>
</aura:application>

Leave a Reply