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 itb. How many columns in total can we display in datatablesheilaHi 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
and then replace "Account.Name' with "AccountName" in your column data.Like this: {label: 'Acc Name', fieldName: 'AccountName', type: 'text'},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);
Below is the complete helper code:
There is no documentaion for how many columns we can display in DataTablePlease refer to below link for more information on lightning:datatable:https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/documentationI 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.({
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);
}
})
Thanks and Regards,
Khan Anas
