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

Insert HTML into Lightning Datatable Column

I have a Lightning Datatable (" target="_blank) that needs to insert a formula field that contains some text and a hyperlink.
Ex. My Text <a href="" 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 ( but displays as My Text <a href="" 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 {
    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 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);

Reference, please watch my video:

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
Aravind MSAravind MS
Hey Nathan,

Did you get a chance to resolve this issue?

Aravind MS
sunil guptasunil gupta
Hi Nathan Solis,

Hope you already find soemhting to solve this, I found something to solve this by using Lightnign Datatable we can show the URL and text together by using the text type column, just specify the attribute "linkify".

Now, if my column has a value like "Test" it will display the Test as Text and as URL
label: 'Link',
fieldName: 'link',
type: 'text',
typeAttributes: { linkify:''}