Insert HTML into Lightning Datatable Column - Answers - Salesforce Trailblazer Community
Ask Search:
Nathan SolisNathan Solis 

Insert HTML into Lightning Datatable Column

Hello,
I have a Lightning Datatable (https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example" target="_blank) that needs to insert a formula field that contains some text and a hyperlink.
Ex. My Text <a href="mylink.com" target="_blank">Click Here</a>

However, when attempting to insert this field into a Lightning Datatable column it displays the entire anchor tag as text and not as a hyperlink. 
Ex. My Text Click Here (http://myLink.com) but displays as My Text <a href="mylink.com" target="_blank">Click Here</a> .

I've tried several formatting options including html encoding and decoding. Also, using the url type doesn't work as part of the data is text.

Thanks in advance
Sakthivel MadeshSakthivel Madesh
Hi Nathan,

Below are the Sample Code to add hyperlink in Lightning DataTable:

Apex Class:
public class AccountController {
    @AuraEnabled
    public static List<Account> getAccounts(){
        List<Account> acList = new List<Account>();
        acList = [Select Id, Name, Website From Account Where Website != NULL LIMIT 10];
        return acList;
    }
}

Lightning Component:
 
<aura:component controller="AccountController" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="accountList" type="Account[]"/>
    <aura:attribute name="columns" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
    <h4>Lightning Data Table</h4>
    <lightning:datatable
    	data="{!v.accountList}"
        columns="{!v.columns}"
        keyField="Id"
        hideCheckboxColumn="true"
    />
</aura:component>
Lightning Controller:
({
	onInit : function(component, event, helper) {
        var action = component.get("c.getAccounts");
        action.setCallback(this, function(response){
            if(response.getState() === 'SUCCESS'){
                component.set("v.accountList", response.getReturnValue());
                var columns = [
                    {label:'Id', fieldName:'Id', type:'String'},
                    {label:'Name', fieldName:'Name', type:'String'},
                    {label:'Website', fieldName:'Website', type: 'url', typeAttributes: { label: 'My Website Name', target:'_blank'}}
                ];
                component.set("v.columns", columns);
            }
            else{
                alert(response.getState());
            }
        });
        $A.enqueueAction(action);
	}
})


Reference, please watch my video:
https://www.youtube.com/watch?v=gljg7gEBUbM

Please let me know if you need any more information, happy to assist you!!

Thanks & Regards,
Sakthivel Madesh
Nathan SolisNathan Solis
Thanks Sakthivel,
Unfortunately defining the type as "url" doesn't solve the issue. The formula field also contains plain text that should not be "clickable," as well as a hyperlink. When using the "url" type, the entire field gets hyperlinked and the entire anchor tag.

I really just need a way to define the type as "html," but I haven't found any documentation that allows me to do such. I'm really just hoping to avoid having to write some extra javascript to replace the html in the dom with whatever value is in the formula field. 
Sakthivel MadeshSakthivel Madesh
Hi Nathan Solis,

Yes, so such case, either you try to modify your formula field to capture only link or do some additional logic in your controller to replace the html elements.

Thanks & Regards,
Sakthivel Madesh