Boost User Experience: How to Incorporate Icons in lightning datatable

You might have implemented a datatable in LWC, but have you ever come across a scenario to show icons in lightning datatable. In this article we are going to go through steps to show static and dynamic icons in lightning datatable along with code samples.

Step 1: Setting Up Lightning Web Components

First, create a new Lightning Web Component from VSCode and give it a name. If you need assistance in setting up VSCode read our article on Setting up VSCode for Salesforce LWC.

HTML Code

<template>
    <lightning-datatable
            key-field="id"
            data={contactList}
            columns={columns}>
    </lightning-datatable>
</template>

Explanation:

In this HTML snippet, we set up a basic Lightning Datatable. The datatable has basic setup with the columns and data configuration. We will be using the column attribute to configureboth static and dynamic icons that we want to show in the datatable.

Step 2: Defining Columns with Icons in lightning datatable

JS Code

import { LightningElement,wire,api } from 'lwc';
import { getRelatedListRecords } from 'lightning/uiRelatedListApi';
export default class OpportunityListDatatable extends LightningElement {
    @api recordId; 
    contactList;
    error;
    records;

    columns = [
        { label: 'Name', fieldName: 'Name', type: 'text' },
        { label: 'Account Name', fieldName: 'Account', type: 'text' },
        { label: 'Amount', fieldName: 'Amount', type: 'number' },
        { label: 'Close Date', fieldName: 'CloseDate', type: 'date' },
        { label: 'Stage', fieldName: 'Stage', type: 'text' },
        { label: 'Static Icon', fieldName: '',cellAttributes: { class: 'slds-text-color_success',iconName: 'utility:anywhere_chat' }},
        { label: 'Dynamic Icon', fieldName: '',cellAttributes: { iconName: { fieldName: 'dynamicIcon' } }},
       
    ];

    @wire(getRelatedListRecords, {
        parentRecordId: '$recordId',
        relatedListId: 'Opportunities',
        fields: ['Opportunity.Id','Opportunity.Name','Account.Name', 'Opportunity.AccountId','Opportunity.Amount','Opportunity.CloseDate','Opportunity.StageName']
    })
    listInfo({ error, data }) {
        if (data) {
            console.log('listInfo : ',data);
            this.records = data.records;

            let contactRecArr = [];
            data.records.forEach((eachRec)=>{
                let fields = eachRec.fields;
                contactRecArr.push({
                    Name        :fields.Name.value,
                    Account     :fields.AccountId.value,
                    Amount      :fields.Amount.value,
                    CloseDate   :fields.CloseDate.value,
                    Stage       :fields.StageName.value,
                    dynamicIcon :this.getDynamicIcon(fields.Amount.value)
                });
            })
            this.contactList = contactRecArr;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.records = undefined;
        }
    }

    //method to return the right icon name based on amount.
    getDynamicIcon(amount){
        let icon = 'action:check';
       if(amount < 15000){
            icon = 'action:new_lead';
       }else if(50000 > amount && amount > 15000){
            icon = 'action:fallback';
       }
       else if(150000 > amount && amount > 50000){
            icon = 'action:announcement';
       }
       else if(1000000 > amount && amount > 150000){
            icon = 'action:call';
       }
       else if(amount > 1000000){
            icon = 'action:priority';
       }

       return icon;
    }
}

Explanation:

If this is the first time you are working with lightning datatable in LWC, you can read this post on Using Lightning Datatable in LWC with Apex first to get a grip of it and come back.

In the above JS Code, we are configuring the columns JSON array to show the columns that we want to show in the datatable.

Observe, that the last two entries in the JSON is around icons. Let’s try to understand this in detail.

{ label: 'Static Icon', fieldName: '',cellAttributes: { class: 'slds-text-color_success',iconName: 'utility:anywhere_chat' }},

{ label: 'Dynamic Icon', fieldName: '',cellAttributes: { iconName: { fieldName: 'dynamicIcon' }

For our example we have created two column Static Icon and Dynamic Icon, as you can see from the label variable above.

Static Icon Column

The Static Icon column is created to show the same icon for all the rows in the table. Using the cellAttributes we are able to specify the iconName and other configurations. Get the list of all icons available in SLDS here. In our example we are using ‘utility:anywhere_chat’ icon.

For details around cellAttributes read the Salesforce documentation here.

Dynamic Icon Column

The Dynamic Icon column is created to render icons based on certain conditions. For example: We can show different icons if the Opportunity Amount falls under a specific value.

In this case, we have specified the cellAttributes as fieldName: ‘dynamicIcon’. This name acts as a placeholder, which we will use later to dynamically assign the icons for this column.

Dynamically assigning the icon to the rows in datatable

We make a call to getRelatedListRecords to get the list of Opportunities of an Account record.

 @wire(getRelatedListRecords, {
        parentRecordId: '$recordId',
        relatedListId: 'Opportunities',
        fields: ['Opportunity.Id','Opportunity.Name','Account.Name', 'Opportunity.AccountId','Opportunity.Amount','Opportunity.CloseDate','Opportunity.StageName']
    })

Next, in the below snippet we map the opportunity fields to the column names so that the values are displayed under the right column.

contactRecArr.push({
                    Name        :fields.Name.value,
                    Account     :fields.AccountId.value,
                    Amount      :fields.Amount.value,
                    CloseDate   :fields.CloseDate.value,
                    Stage       :fields.StageName.value,
                    dynamicIcon :this.getDynamicIcon(fields.Amount.value)
                });

Observe that for dynamicIcon column name, we are calling a method getDynamicIcon which returns the icon based on the opportunity Amount value passed.

The getDynamicIcon methods returns the right icon based on the Amount passed, the icons are then dynamically assigned under the Dynamic Icon column

 //method to return the right icon name based on amount.
    getDynamicIcon(amount){
        let icon = 'action:check';
       if(amount < 15000){
            icon = 'action:new_lead';
       }else if(50000 > amount && amount > 15000){
            icon = 'action:fallback';
       }
       else if(150000 > amount && amount > 50000){
            icon = 'action:announcement';
       }
       else if(1000000 > amount && amount > 150000){
            icon = 'action:call';
       }
       else if(amount > 1000000){
            icon = 'action:priority';
       }

       return icon;
    }

With the above code explantion is should be clear by now, how we can show static or dynamic icons in lightning datatable.

Step 3: Implementing UI/UX Best Practices

To further customize the datatable and adhere to UI/UX best practices, consider adding CSS for styling. This can include adjusting the column width, colors, or any other visual elements based on your design preferences.

Demo

Conclusion

By following this tutorial, you’ve learned how to seamlessly incorporate static or dynamic icons into a Lightning Datatable. Feel free to use the provided code snippets in your personal orgs and explore additional customization possibilities.

If you found this article helpful, we encourage you to provide feedback or suggestions in the comments below. Subscribe to our newsletter for more Salesforce tips and tricks, and don’t forget to share this article with your friends in the Salesforce community.