LWC: Show Icons & Links in Lightning Datatable (Using Wrapper Class)
Problem Statement
I have often come across implementations where there is a need to show the Parent object record fields in a data table which has child object entries. For example, a list of contacts in a data table should also show related account information.
For this, often developers introduce a formula field on the child object that stores the parent account information. I am also guilty of using such a mechanism in my early days. This is usually done considering the following
The above picture shows the columns that will be used in the lightning datatable (list of cases). Notice the ‘Record Type’ & ‘Account’ entries. Both are formula fields, retrieving information from the Record Type object & Account object associated with the Case. Because in the ‘fieldName’ property, we mention the API names, and this does not take entries like ‘Account.Name’ or ‘CustomObject__r.Custom_Field__c’, we end up creating formula fields.
Solution
Use wrapper classes in apex to get around this without having to create a new field every time we need to show parent object information in a datatable.
Example
Show a list of Contacts and the associated Account’s information (Account Name, Account Number, Account Rating & Account Industry). Based on the rating of the account, show an icon in the datatable instead of the ‘Account Rating’ value. Also, the Account Name should be hyperlinked. The implementation in done using LWC.
- Fetch Data in Apex from the Contact Object.
2. Create a Wrapper Class in Apex, as below
3. Now wrap the data that we retrieved in Step-1 using the Wrapper class.
4. Now, instead of defining the fieldNames as API names, we can define them with the names used in the Wrapper class. Notice the Account object related fields’ fieldName property.
5. Link to code base for reference:
6. Once the data is received from the ‘wire’ method call, iterate over it to assign logos to each record based on the rating and hyperlink the account name.
7. Component in Action
Thank you for reading, have a wonderful day.
