When working with the Winter ’18 <lightning:datatable> component in Salesforce, many developers face an issue when trying to display fields from parent objects. The component binds data correctly for direct fields of an object, but when you try to display fields such as Account.Name from a related object, the values do not appear in the datatable.
For example, if you are fetching Contact records and want to display their related Account names, you may try using fieldName: 'Account.Name' in the datatable column definition. Although the SOQL query retrieves the data correctly, the datatable does not automatically render these nested fields because it expects flat key-value pairs. The nested Account object is returned as an object itself, which causes the binding to fail.
Let’s consider this code snippet where the column definition includes Account.Name:
component.set('v.mycolumns', [
{label: 'Id', fieldName: 'Id', type: 'id', sortable:"true"},
{label: 'First Name', fieldName: 'FirstName', type: 'text', sortable:"true"},
{label: 'Last Name', fieldName: 'LastName', type: 'text', sortable:"true"},
{label: 'Account', fieldName: 'Account.Name', type: 'text', sortable:"true"},
{label: 'Email', fieldName: 'Email', type: 'email', sortable:"true"}
]);
Code Explanation: In this snippet, the datatable columns are defined with field names such as FirstName, LastName, and Account.Name. While direct fields like FirstName and LastName work fine, the Account.Name field is nested and Salesforce returns it as part of an object (Account). Since <lightning:datatable> cannot automatically resolve nested properties, the column remains blank. This highlights the need to flatten parent fields before binding them.
Even though the SOQL query SELECT Id, FirstName, LastName, Account.Name, Email FROM Contact returns the related Account.Name, the datatable cannot resolve the nested object path Account.Name.
The root cause is that <lightning:datatable> does not support nested property resolution like foo.bar.baz. Instead, it only understands flat JSON structures. Therefore, to display parent record fields, we need to flatten the data either on the client side or server side.
Client-Side Flattening Approach
One solution is to modify the JavaScript response before assigning it to the datatable attribute. The idea is to traverse the nested fields (like Account.Name) and copy their values into new flat fields on each record.
var commaDelimitedFieldNamesArray = commaDelimitedFieldNames.split(',');
var data = response.getReturnValue();
for (var i = 0; i < commaDelimitedFieldNamesArray.length; i++) {
var fieldName = commaDelimitedFieldNamesArray[i];
if (fieldName.indexOf('.') != -1) {
var relationshipFields = fieldName.split('.');
for (var j = 0; j < data.length; j++) {
var record = data[j];
var fieldValue = record[relationshipFields[0]];
for (var k = 1; k < relationshipFields.length; k++) {
if (fieldValue && relationshipFields[k]) {
fieldValue = fieldValue[relationshipFields[k]];
}
}
record[fieldName] = fieldValue;
}
}
}
component.set("v.mydata", data);
Code Explanation: This JavaScript code loops through the field names requested from the server. If a field contains a dot (.), it is identified as a parent relationship field such as Account.Name. The code then walks through the object structure to extract the nested value (e.g., record.Account.Name). Finally, it flattens this value by assigning it to record["Account.Name"]. This way, the datatable receives a simple key-value property it can display.
In this code, we detect fields containing a dot (.) and resolve them step by step until we reach the final value, such as record.Account.Name. Then we add a new flattened property record["Account.Name"] so that the datatable can render it correctly.
Server-Side Flattening Approach
Alternatively, you can preprocess the data in Apex and flatten relationship fields before sending the data back to the client. This ensures that the datatable receives already prepared flat JSON data.
@AuraEnabled
public static List<Map<String,Object>> getContacts() {
List<Contact> contacts = [SELECT Id, FirstName, LastName, Account.Name FROM Contact];
List<Map<String,Object>> results = new List<Map<String,Object>>();
for (Contact c : contacts) {
Map<String,Object> row = new Map<String,Object>();
row.put('Id', c.Id);
row.put('FirstName', c.FirstName);
row.put('LastName', c.LastName);
row.put('AccountName', c.Account != null ? c.Account.Name : null);
results.add(row);
}
return results;
}
Code Explanation: This Apex method queries Contact records with their related Account name. Instead of returning raw sObject records, it builds a map for each Contact. Each map contains flat key-value pairs like Id, FirstName, LastName, and AccountName. By flattening Account.Name into AccountName, the method avoids nested structures. When returned to the client, this data works perfectly with <lightning:datatable>.
In this approach, instead of returning raw sObject data with nested structures, we create a Map<String,Object> for each record and flatten the parent relationship fields into simple keys like AccountName. The datatable column definition should then reference fieldName: 'AccountName'
Conclusion
The <lightning:datatable> component cannot directly handle nested fields such as Account.Name because it only works with flat key-value pairs. To display related parent record data, you must flatten the data either by transforming it on the client side with JavaScript or on the server side in Apex before sending it to the component. Both approaches are valid, and the choice depends on whether you prefer to preprocess data in Apex for efficiency or handle it dynamically in JavaScript for flexibility.
Kick Start Your Journey with Real-Time Project-Based Salesforce Learning
Our Salesforce Course is designed to offer a complete understanding of the Salesforce platform, providing you with the necessary skills to excel in the CRM industry. The program covers essential modules such as Salesforce Admin, Developer, and AI, combining theoretical knowledge with practical experience. Through real-world projects and assignments, you’ll develop the expertise needed to solve complex business challenges using Salesforce solutions. Our expert instructors ensure you gain both technical skills and valuable industry insights to succeed in the Salesforce environment.
Along with technical expertise, our Salesforce training in Chennai offers personalized mentoring, certification preparation, and interview coaching to improve your career prospects. You’ll have access to comprehensive study resources, practical project experience, and continuous support throughout your learning journey. By the time you complete the course, you’ll be well-equipped for certification exams and capable of applying your problem-solving skills in real-world scenarios. Begin your Salesforce career with us and unlock limitless career opportunities. Enroll for a Free Demo today!
Leave a Reply
You must be logged in to post a comment.