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 
    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;
<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 }"
//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)
            var state = response.getState();
            if (state == "SUCCESS")
                var accVal=response.getReturnValue()
                    AccNameVal.linkName = '/'+AccNameVal.Id; 
                component.set("v.Accounts", accVal);
//Lightning Application:- "AccountDatatableApplication"
<aura:application extends="force:slds">

Leave a Reply