function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sheila srivatsavsheila srivatsav 

lightning data table not rendering field values

I just started working on lightning datatable.

The code is working but StageName , closedate and amount values are not displayed.
  
public class DataTableController {

    @AuraEnabled
    public static List<Opportunity> getOpportunities()
    {
        List<Opportunity> oppList=new List<Opportunity>();
        
        oppList=[select name,Account.Name,StageName,CloseDate,Amount from Opportunity
                       where StageName != NULL
                       AND
                       Amount != NULL
                       order by Account.Name];
        
        return oppList;
    }
}

<aura:component implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes" 
                controller="DataTableController"
                access="global">
	
        <!-- Three important parts of datatable is Key , data and columns
         so we need attribute for data and columns(metatadata)-->
    <!-- attributes -->
    <aura:attribute name="data" 
                    type="Object"/>
    
    <aura:attribute name="columns" 
                    type="List[]"/>
    

    <!-- handlers-->
    <aura:handler name="init" 
                  value="{!this}" 
                  action="{!c.doInit}"/>
    
    <!-- the container element determine the height of the datatable -->
    <div style="height: 300px">
        
        <lightning:datatable aura:id="opportunitydatatable"
                             
                             keyField="id"
                             data="{!v.data}"
                             columns="{!v.columns}"
                             hideCheckboxColumn="true"/>
        
    </div>
</aura:component>

({
	doInit : function(component, event, helper) {
        
        helper.queryColumns(component,event,helper);
        
        helper.queryContacts(component,event,helper);
  	}
})

({
	queryColumns : function(component,event,helper) {
        
		  component.set('v.columns', [
            {label: 'Opp Name', fieldName: 'Name', type: 'text'},
            {label: 'Acc Name', fieldName: 'Name', type: 'text'},
            {label: 'StageName', fieldName: 'Stage Name', type: 'text'},
            {label: 'CloseDate', fieldName: 'CloseDate', type: 'text'},
            {label: 'Amount', fieldName: 'Amount', type: 'decimal'}  
        ]);
	},
    
    queryContacts : function(component,event,helper) {
        
        var action=component.get('c.getOpportunities');
        
        action.setParams({
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.data", response.getReturnValue());
                
            }
        });
        $A.enqueueAction(action);
    }
       
})
I need to know two things
a. what is the issue I am facing and how to resolve it
b. How many columns in total can we display in datatable

sheila
 
Best Answer chosen by sheila srivatsav
Khan AnasKhan Anas (Salesforce Developers) 
Hi Sheila,

I trust you are doing very well.

You are not getting different columns values because you are not using correct fieldName and type when setting columns of dataTable.
fieldName: The name that binds the columns properties to the associated data. It is an API name of a field.
type: The data type to be used for data formatting.

So, for stageName you need to use fieldName: 'StageName'
For ClosedDate you need to use fieldName: 'CloseDate', type: 'date'
And for Amount you need to use fieldName: 'Amount', type: 'currency', cellAttributes: { alignment: 'left' }

cellAttributes: Provides additional customization, such as horizontal alignment or appending an icon to the output.

Also, if you want to display parent's information in dataTable then there is no way to access data like foo.bar.baz. The consumer of datatable has to flatten their data(server side or client side). It's a valid use case to consider.

So, you need to use 
  
if (state === "SUCCESS") {
            var rows = response.getReturnValue();
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                if (row.Account) row.AccountName = row.Account.Name;
            }
            cmp.set('v.mydata', rows);

and then replace "Account.Name' with "AccountName" in your column data.

Like this: {label: 'Acc Name', fieldName: 'AccountName', type: 'text'},

Below is the complete helper code: 
({
    queryColumns : function(component,event,helper) {
        
        component.set('v.columns', [
            {label: 'Opp Name', fieldName: 'Name', type: 'text'},
            {label: 'Acc Name', fieldName: 'AccountName', type: 'text'},
            {label: 'StageName', fieldName: 'StageName', type: 'text'},
            {label: 'CloseDate', fieldName: 'CloseDate', type: 'date'},
            {label: 'Amount', fieldName: 'Amount', type: 'currency', cellAttributes: { alignment: 'left' }}  
        ]);
    },
    
    queryContacts : function(component,event,helper) {
        
        var action=component.get('c.getOpportunities');
        
        action.setParams({
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var rows = response.getReturnValue();
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    if (row.Account) row.AccountName = row.Account.Name;
                }
                component.set("v.data", rows);
                
            }
        });
        $A.enqueueAction(action);
    }
    
})

There is no documentaion for how many columns we can display in DataTable

Please refer to below link for more information on lightning:datatable:
https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/documentation

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Sheila,

I trust you are doing very well.

You are not getting different columns values because you are not using correct fieldName and type when setting columns of dataTable.
fieldName: The name that binds the columns properties to the associated data. It is an API name of a field.
type: The data type to be used for data formatting.

So, for stageName you need to use fieldName: 'StageName'
For ClosedDate you need to use fieldName: 'CloseDate', type: 'date'
And for Amount you need to use fieldName: 'Amount', type: 'currency', cellAttributes: { alignment: 'left' }

cellAttributes: Provides additional customization, such as horizontal alignment or appending an icon to the output.

Also, if you want to display parent's information in dataTable then there is no way to access data like foo.bar.baz. The consumer of datatable has to flatten their data(server side or client side). It's a valid use case to consider.

So, you need to use 
  
if (state === "SUCCESS") {
            var rows = response.getReturnValue();
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                if (row.Account) row.AccountName = row.Account.Name;
            }
            cmp.set('v.mydata', rows);

and then replace "Account.Name' with "AccountName" in your column data.

Like this: {label: 'Acc Name', fieldName: 'AccountName', type: 'text'},

Below is the complete helper code: 
({
    queryColumns : function(component,event,helper) {
        
        component.set('v.columns', [
            {label: 'Opp Name', fieldName: 'Name', type: 'text'},
            {label: 'Acc Name', fieldName: 'AccountName', type: 'text'},
            {label: 'StageName', fieldName: 'StageName', type: 'text'},
            {label: 'CloseDate', fieldName: 'CloseDate', type: 'date'},
            {label: 'Amount', fieldName: 'Amount', type: 'currency', cellAttributes: { alignment: 'left' }}  
        ]);
    },
    
    queryContacts : function(component,event,helper) {
        
        var action=component.get('c.getOpportunities');
        
        action.setParams({
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var rows = response.getReturnValue();
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    if (row.Account) row.AccountName = row.Account.Name;
                }
                component.set("v.data", rows);
                
            }
        });
        $A.enqueueAction(action);
    }
    
})

There is no documentaion for how many columns we can display in DataTable

Please refer to below link for more information on lightning:datatable:
https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/documentation

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
sheila srivatsavsheila srivatsav
Hi khan

thanks for making me clear my prev post as well as current post.
All the column values are displaying now.

thanks very much,

sheila
Giorgio BonifaziGiorgio Bonifazi
Thanks for your help! very clear explanation, in particular regarding "flatten" of data