function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
shalini sharma 24shalini sharma 24 

Displaying image formula field in lightning data table

Hi
i have created a lightning datatable and in that i have a column that displays text formula field. But the table shows html instead of image. Any solution for this??

Thanks
Alain CabonAlain Cabon
Hi,

Tiago Armando Coelho (22 days ago): lightning:datatable support image data type​
https://success.salesforce.com/ideaView?id=0873A000000lKqxQAE

Tiago participates in this forum. He could have more interesting details.

That seems impossible currently.

I didn't try by myself.
Akash Choudhary 19Akash Choudhary 19
Hi ,

In datatable i want to display the image in one column. I dont want to show the link. I want to show image associated with the link.Please help me out
Oshin AgrawalOshin Agrawal
Hi,
You can not directly display image in data table for now, but I found a solution which worked for me.
I had a formula field which I was willing to show on data table which was something like:
IF( (Licenses_Purchased__c - Licenses_Occupied__c )>0,"/img/samples/flag_green.gif", "/img/samples/flag_red.gif")

and so the image was not displayed so I changed it to:
IF( (Licenses_Purchased__c - Licenses_Occupied__c )>0,"green", "red")

and then you declare your column similar to whats shown below (providing a fieldname to be used in the js controller/helper to set the iconName):
{label: 'Status',cellAttributes: { class: { fieldName: 'License_Track__c' } }},

and in the Style component you can give URL to your image like:
.THIS .green { 
   background-image: url("/img/samples/flag_green.gif");
}
.THIS .red {
   background-image: url("/img/samples/flag_red.gif");
}

Output is as follows:
User-added image

Thank you
Serhii DvorakSerhii Dvorak
Hi,
Oshin Agrawal, big thanks to you, you're a life lifesaver.
I had a problem that my image repeated a lot of times, so i had to change you're code a little bit:
.THIS .green { 
   background-image: url("/img/samples/flag_green.gif");
    background-repeat: no-repeat;
    background-position: left;
}
.THIS .red {
    background-image: url("/img/samples/flag_red.gif");
    background-repeat: no-repeat;
    background-position: left;
}