Close Menu
SalesforceCodex
    Facebook X (Twitter) Instagram
    Trending
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    • How to Implement Basic Queueable Chaining in Salesforce Apex
    • How to Suppress PMD Warnings in Salesforce Apex
    • Top 10 PMD Issues Salesforce Developers Should Focus on in Apex
    • How to Use Graph API for Outlook-Salesforce Connection
    • Enhancing Performance with File Compression in Apex
    Facebook X (Twitter) Instagram
    SalesforceCodex
    Subscribe
    Friday, May 16
    • Home
    • Architecture
    • Salesforce
      • News
      • Apex
      • Integration
      • Books Testimonial
    • Questions
    • Certification
      • How to Prepare for Salesforce Integration Architect Exam
      • Certification Coupons
    • Integration Posts
    • Downloads
    • About Us
      • Privacy Policy
    SalesforceCodex
    Home»Salesforce»Show Image in Lightning Web Component Data Table

    Show Image in Lightning Web Component Data Table

    Dhanik Lal SahniBy Dhanik Lal SahniOctober 10, 201927 Comments2 Mins Read
    Facebook Twitter Pinterest LinkedIn Tumblr Email
    Show Image in Lightning Web Component Data Table
    Share
    Facebook Twitter LinkedIn Pinterest Email

    Showing image in data table is one of major requirements in projects. In this post, we will see how we can show image in Lightning Web Component Data Table.  In last blog Integrate Salesforce Stackexchange using Lightning Web Component and Apex I have created community to show Salesforce StackExchange user list. Let us add profile picture of user in same community.

    By default datatable does not support image data type. We have to create custom data type for image in Lightning Web component.

    Steps for creating custom data type

    1. Custom Control Creation
    2. Extend Lightning Data Table
    3. Use extended data table in Component

    1. Custom Control Creation

    Create custom control for showing profile pics.  For this we need to create a lightning web component with below code. We are using img control to show profile pic and source for this image will be passed at runtime using @api parameter.

    2. Extend Lightning Data Table

    We have to extend lightning data table to show image in table row. Create another Lightning Web Component named ‘salesforceCodexDataTable’ .  Create imageTableControl.html in same folder to use above created image control to show profile pics. This file is used as custom type while extending data table.

    Folder structure for custom components:

    3. Use extended data table in Component

    After image custom data type is created for data table. Let us use this in component to show profile pics of Salesforce Stack Exchange User on community portal.

    Here we have used image type to show profile pic in line no 3. fieldName: ‘profile_image‘ is having profile image url which is passed to image control as source url.

    Reference:  https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation#creating-custom-data-types

    custom data type lightning Lightning web component
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Previous ArticleIntegrate Salesforce Stackexchange using Lightning Web Component and Apex
    Next Article Create Dynamic Patch REST API in Salesforce Apex
    Dhanik Lal Sahni
    • Website

    Related Posts

    By Dhanik Lal Sahni6 Mins Read

    Top 10 Salesforce Flow Features of Salesforce Summer ’25

    May 11, 2025
    By Dhanik Lal Sahni6 Mins Read

    Unlock the Power of Vibe Coding in Salesforce

    April 30, 2025
    By Dhanik Lal Sahni5 Mins Read

    How to Implement Dynamic Queueable Chaining in Salesforce Apex

    April 21, 2025
    View 27 Comments

    27 Comments

    1. sayanta on October 13, 2019 7:38 pm

      awesome post

      Reply
      • loka on April 6, 2020 12:32 am

        Can you please show the complete implementation?

        Reply
        • Dhanik Lal Sahni on April 6, 2020 6:41 pm

          Hello,

          It is complete implementation. Few steps are written in blog https://salesforcecodex.com/2019/10/integrate-salesforce-stackexchange-using-lightning-web-component-and-apex/ and rest in this blog. Please try using implementing using both blogs. Let me know, if you find any issue.

          Thank You,
          Dhanik

          Reply
    2. neha on April 4, 2020 4:41 pm

      hey
      can you show the apex side as well and in which cmp you added that?

      Reply
      • Dhanik Lal Sahni on April 6, 2020 6:38 pm

        Hello Neha,

        Apex detail is shown in blog https://salesforcecodex.com/2019/10/integrate-salesforce-stackexchange-using-lightning-web-component-and-apex/ which is mentioned in this blog as well. Please check that blog.

        Let me know, if it is not working.

        Thank You,
        Dhanik

        Reply
    3. Charles Yach on May 12, 2020 1:09 am

      Hello Dhanik,

      In imageTableControl.html you have the url attribute set to value, yet it looks like value is never defined in the js. How does this work? I ask because I notice you are hardcoding the alt-text as “Image Not Found” and I would like to know how to pass an alt-text through as well.

      Thank you

      Reply
      • Dhanik Lal Sahni on May 12, 2020 7:31 am

        Hello Charles,
        Url values is passed from data table records in showProfile.js. Please check https://salesforcecodex.com/2020/04/extend-lightning-datatable-with-file-upload-element-in-lightning-web-component/ for passing Alt-text through parameter. You can use typeAttributes for this purpose.

        Thank You,
        Dhanik
        https://salesforcecodex.com/

        Reply
      • Dimple on October 13, 2022 12:54 pm

        I am also getting “Image not found”.Can you please help me out?

        Reply
        • Dhanik Lal Sahni on October 15, 2022 9:42 pm

          Hello Dimple,

          If you still facing issues, ping me on Linkedin and we will resolve your issue.

          Thank You,
          Dhanik

          Reply
    4. Pingback: Extend datatable in Lightning Web Component | SalesforceCodex

    5. Shiran on July 6, 2020 12:41 pm

      Great post Dhanik!
      In this case how would you propagate click in imageControl component to showProfile component? It is useful for one of the projects i’m doing right now

      Reply
    6. Shiran on July 6, 2020 12:48 pm

      Great post Dhanik!
      In this case how would you dispatch an onclick event from imageControl to showProfile component?

      Reply
      • Dhanik Lal Sahni on August 20, 2021 9:15 pm

        Thank You Shiran,

        You can add events for this. Checkout post https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events_handling for this.

        Thank You,
        Dhanik

        Reply
    7. Hassan on April 14, 2021 5:04 am

      Hi folks,
      Awesome article. Can we use this solution for lighting tree grid.

      Reply
      • Dhanik Lal Sahni on April 17, 2021 10:19 pm

        Yes Hassan, As per documentation lighting-tree-grid is not supporting custom data type so you will not able to do this. You can try your custom tree grid control.

        Thank You,
        Dhanik

        Reply
    8. Dhanik Lal Sahni on July 3, 2021 1:46 pm

      Thank You Abhilash.

      Regards
      Dhanik

      Reply
    9. vishnu on July 23, 2021 4:34 pm

      Hi Dhanik,

      We are getting following error,
      LWC1011: Failed to resolve import “./imageTableControl.html” from “salesforceCodexDataTable.js”. Please add “imageTableControl.html” file to the component folder.
      please help us to resolve this issue.

      Thanks,
      Vishnu

      Reply
      • Dhanik Lal Sahni on August 20, 2021 9:11 pm

        Hello Vishnu,
        imageTableControl.html should be in same folder as salesforceCodexDataTable is. If not then add proper path in importing it in SalesforceCodexDataTable js.

        Thank You,Dhanik

        Reply
    10. Mounika on August 14, 2021 5:15 pm

      Hey dhanik,
      I’ve a similar scenario of displaying picklist field on editable lightning-datatable. When i used the above approach picklist values are not displaying in edit mode . Can you please help

      Reply
      • Dhanik Lal Sahni on August 20, 2021 9:07 pm

        Hello Mounika,

        If issue still exist, we can connect in a meeting to see issues.

        Thank You,
        Dhanik

        Reply
    11. Pingback: LWC Datatable with custom data type not rendering as supose

    12. Pingback: LWC Datatable with custom data type not rendering as supose – GrindSkills

    13. Pingback: LWC Datatable with custom data type not rendering as supose - Code Solution

    14. Kari SaiMohan on March 7, 2023 4:25 pm

      Hi Dhanik in the place of image it is showing image link where i want to change

      Reply
      • Dhanik Lal Sahni on March 12, 2023 10:39 am

        Hello Kari,
        You have to see if js is loading properly or not. If the issue is not resolved, ping me on LinkedIn.

        Thank You,
        Dhanik

        Reply
    15. Dhanik Lal Sahni on April 29, 2024 1:23 pm

      Hello Varsha,

      You can check post https://salesforce.stackexchange.com/questions/310845/how-to-make-the-icon-on-a-data-table-clickable-in-lwc for your issue.

      Thank You,
      Dhanik

      Reply
    16. Pingback: File Related List in Lightning Web Component | SalesforceCodex

    Leave A Reply Cancel Reply

    Ranked #1 SALESFORCE DEVELOPER BLOG BY SALESFORCEBEN.COM
    Featured on Top Salesforce Developer Blog By ApexHours
    Recent Posts
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    • How to Implement Basic Queueable Chaining in Salesforce Apex
    • How to Suppress PMD Warnings in Salesforce Apex
    Ranked in Top Salesforce Blog by feedspot.com
    RSS Recent Stories
    • How to Connect Excel to Salesforce to Manage Your Data and Metadata February 9, 2025
    • Difference Between With Security and Without Security in Apex January 2, 2025
    • Top Reasons to Love Salesforce Trailhead: A Comprehensive Guide December 5, 2024
    • How to Utilize Apex Properties in Salesforce November 3, 2024
    • How to Choose Between SOQL and SOSL Queries July 31, 2024
    Archives
    Categories
    Tags
    apex (110) apex code best practice (8) apex rest (11) apex trigger best practices (4) architecture (22) Asynchronous apex (9) AWS (5) batch apex (9) batch processing (4) code optimization (8) code review tools (3) custom metadata types (5) design principle (9) einstein (3) flow (15) future method (4) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (64) lightning-combobox (5) lightning-datatable (10) lightning component (29) Lightning web component (61) lwc (50) named credential (8) news (4) optimize apex (3) optimize apex code (4) Permission set (4) Queueable (9) rest api (23) S3 Server (4) salesforce (140) salesforce apex (46) salesforce api (4) salesforce api integration (5) Salesforce Interview Question (4) salesforce news (5) salesforce question (5) solid (6) tooling api (5) Winter 20 (8)

    Get our newsletter

    Want the latest from our blog straight to your inbox? Chucks us your detail and get mail when new post is published.
    * indicates required

    Ranked #1 SALESFORCE DEVELOPER BLOG BY SALESFORCEBEN.COM
    Featured on Top Salesforce Developer Blog By ApexHours
    Recent Posts
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    • How to Implement Basic Queueable Chaining in Salesforce Apex
    • How to Suppress PMD Warnings in Salesforce Apex
    Ranked in Top Salesforce Blog by feedspot.com
    RSS Recent Stories
    • How to Connect Excel to Salesforce to Manage Your Data and Metadata February 9, 2025
    • Difference Between With Security and Without Security in Apex January 2, 2025
    • Top Reasons to Love Salesforce Trailhead: A Comprehensive Guide December 5, 2024
    • How to Utilize Apex Properties in Salesforce November 3, 2024
    • How to Choose Between SOQL and SOSL Queries July 31, 2024
    Archives
    Categories
    Tags
    apex (110) apex code best practice (8) apex rest (11) apex trigger best practices (4) architecture (22) Asynchronous apex (9) AWS (5) batch apex (9) batch processing (4) code optimization (8) code review tools (3) custom metadata types (5) design principle (9) einstein (3) flow (15) future method (4) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (64) lightning-combobox (5) lightning-datatable (10) lightning component (29) Lightning web component (61) lwc (50) named credential (8) news (4) optimize apex (3) optimize apex code (4) Permission set (4) Queueable (9) rest api (23) S3 Server (4) salesforce (140) salesforce apex (46) salesforce api (4) salesforce api integration (5) Salesforce Interview Question (4) salesforce news (5) salesforce question (5) solid (6) tooling api (5) Winter 20 (8)

    Get our newsletter

    Want the latest from our blog straight to your inbox? Chucks us your detail and get mail when new post is published.
    * indicates required

    Facebook X (Twitter) Instagram Pinterest YouTube Tumblr LinkedIn Reddit Telegram
    © 2025 SalesforceCodex.com. Designed by Vagmine Cloud Solution.

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Our website is made possible by displaying online advertisements to our visitors. Please support us by disabling your Ad Blocker.