You need to sign in to do that
Don't have an account?
.12
I was getting the above error while i was trying to sort the data in datatable
Component:
<aura:component controller="DataController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickActionWithoutHeader,lightning:availableForFlowScreens" access="global" >
<aura:attribute type="sobject" name="acctList"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:attribute name="sortedBy" type="String" default="Name"/>
<aura:attribute name="sortedDirection" type="String" default="asc"/>
<aura:handler name="init" value="{!this}" action="{!c.fetchAccounts}"/>
<lightning:datatable data="{!v.acctList.stocks}"
columns="{!v.mycolumns}"
keyField="id"
hideCheckboxColumn="true"
onsort="{!c.updateColumnSorting}"
sortedBy="{!v.sortedBy}"
sortedDirection="{!v.sortedDirection}"/>
</aura:component>
Controller:
({
fetchAccounts : function(component, event, helper) {
component.set('v.mycolumns', [ {label: 'Stock Name', fieldName: 'stockName', type: 'text', sortable: true},
{label: 'Stock', fieldName: 'stock', type: 'text', sortable: true},
{label: 'Total Share', fieldName: 'totalShare', type: 'text', sortable: true}
]);
var action = component.get("c.dataFetch");
action.setParams({
});
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.acctList", response.getReturnValue());
helper.sortData(component, component.get("v.sortedBy"), component.get("v.sortedDirection"));
}
});
$A.enqueueAction(action);
},
updateColumnSorting: function (cmp, event, helper) {
var fieldName = event.getParam('fieldName');
var sortDirection = event.getParam('sortDirection');
cmp.set("v.sortedBy", fieldName);
cmp.set("v.sortedDirection", sortDirection);
helper.sortData(cmp, fieldName, sortDirection);
}
})
Helper:
({
sortData: function (cmp, fieldName, sortDirection) {
var data = cmp.get("v.acctList");
var reverse = sortDirection !== 'asc';
data.sort(this.sortBy(fieldName, reverse));
cmp.set("v.acctList", data);
},
sortBy: function (field, reverse, primer) {
var key = primer ?
function(x) {return primer(x[field])} :
function(x) {return x[field]};
reverse = !reverse ? 1 : -1;
return function (a, b) {
return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
}
}
})
Apex:
public class DataController {
@AuraEnabled
public static DataWrapper dataFetch(){
try{
String json = '{\"accountName\": \"RAM REDDY\",\"registrationId\": \"501049438\",\"accountType\": \"Savings\",\"openDate\": \"08/24/2021\",\"allowedTransactions\": [\"Send\",\"Recieve\",\"Manage\"],\"address\": {\"addressLine1\": \"\",\"addressLine2\": \"\",\"addressLine3\": \"\"},\"stocks\": [{\"stock\": \"BTC\",\"stockName\": \"Bitcoin\",\"stockNumber\": \"051\",\"accountNumber\": \"12000012653\",\"currentValue\": \"161293.80\",\"totalShare\": \"5367.514\", \"totalCost\": \"134931.56089999998\",\"minimumInvestment\": \"200.000000000000\"},{\"stock\": \"LTC\",\"stockName\": \"Litecoin\",\"stockNumber\": \"052\",\"accountNumber\": \"3338493\",\"currentValue\": \"324.80\",\"totalShare\": \"545.514\", \"totalCost\": \"2242.56089999998\",\"minimumInvestment\": \"50.000000000000\"}],\"accountClosedStatus\": false,\"totalCurrentValue\": 170790.31}';
DataWrapper responseWrapper = DataWrapper.parse(json);
return responseWrapper;
} catch(Exception ex){
System.debug('Error occured while fetching the documents list' + ex);
}
return null;
}
Wrapper:
//
// Generated by JSON2Apex http://json2apex.herokuapp.com/
//
public class DataWrapper {
@AuraEnabled
public String accountName;
@AuraEnabled
public String registrationId;
@AuraEnabled
public String accountType;
@AuraEnabled
public String openDate;
@AuraEnabled
public List<String> allowedTransactions;
@AuraEnabled
public Address address;
@AuraEnabled
public List<Stocks> stocks;
@AuraEnabled
public Boolean accountClosedStatus;
@AuraEnabled
public Double totalCurrentValue;
public class Address {
@AuraEnabled
public String addressLine1;
@AuraEnabled
public String addressLine2;
@AuraEnabled
public String addressLine3;
}
public class Stocks {
@AuraEnabled
public String stock;
@AuraEnabled
public String stockName;
@AuraEnabled
public String stockNumber;
@AuraEnabled
public String accountNumber;
@AuraEnabled
public String currentValue;
@AuraEnabled
public String totalShare;
@AuraEnabled
public String totalCost;
@AuraEnabled
public String minimumInvestment;
}
public static DataWrapper parse(String json) {
return (DataWrapper) System.JSON.deserialize(json, DataWrapper.class);
}
}
column sorting in lightning datatable getting data.sort is not a function don't know where i missed
I was getting the above error while i was trying to sort the data in datatable
Component:
<aura:component controller="DataController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickActionWithoutHeader,lightning:availableForFlowScreens" access="global" >
<aura:attribute type="sobject" name="acctList"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:attribute name="sortedBy" type="String" default="Name"/>
<aura:attribute name="sortedDirection" type="String" default="asc"/>
<aura:handler name="init" value="{!this}" action="{!c.fetchAccounts}"/>
<lightning:datatable data="{!v.acctList.stocks}"
columns="{!v.mycolumns}"
keyField="id"
hideCheckboxColumn="true"
onsort="{!c.updateColumnSorting}"
sortedBy="{!v.sortedBy}"
sortedDirection="{!v.sortedDirection}"/>
</aura:component>
Controller:
({
fetchAccounts : function(component, event, helper) {
component.set('v.mycolumns', [ {label: 'Stock Name', fieldName: 'stockName', type: 'text', sortable: true},
{label: 'Stock', fieldName: 'stock', type: 'text', sortable: true},
{label: 'Total Share', fieldName: 'totalShare', type: 'text', sortable: true}
]);
var action = component.get("c.dataFetch");
action.setParams({
});
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.acctList", response.getReturnValue());
helper.sortData(component, component.get("v.sortedBy"), component.get("v.sortedDirection"));
}
});
$A.enqueueAction(action);
},
updateColumnSorting: function (cmp, event, helper) {
var fieldName = event.getParam('fieldName');
var sortDirection = event.getParam('sortDirection');
cmp.set("v.sortedBy", fieldName);
cmp.set("v.sortedDirection", sortDirection);
helper.sortData(cmp, fieldName, sortDirection);
}
})
Helper:
({
sortData: function (cmp, fieldName, sortDirection) {
var data = cmp.get("v.acctList");
var reverse = sortDirection !== 'asc';
data.sort(this.sortBy(fieldName, reverse));
cmp.set("v.acctList", data);
},
sortBy: function (field, reverse, primer) {
var key = primer ?
function(x) {return primer(x[field])} :
function(x) {return x[field]};
reverse = !reverse ? 1 : -1;
return function (a, b) {
return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
}
}
})
Apex:
public class DataController {
@AuraEnabled
public static DataWrapper dataFetch(){
try{
String json = '{\"accountName\": \"RAM REDDY\",\"registrationId\": \"501049438\",\"accountType\": \"Savings\",\"openDate\": \"08/24/2021\",\"allowedTransactions\": [\"Send\",\"Recieve\",\"Manage\"],\"address\": {\"addressLine1\": \"\",\"addressLine2\": \"\",\"addressLine3\": \"\"},\"stocks\": [{\"stock\": \"BTC\",\"stockName\": \"Bitcoin\",\"stockNumber\": \"051\",\"accountNumber\": \"12000012653\",\"currentValue\": \"161293.80\",\"totalShare\": \"5367.514\", \"totalCost\": \"134931.56089999998\",\"minimumInvestment\": \"200.000000000000\"},{\"stock\": \"LTC\",\"stockName\": \"Litecoin\",\"stockNumber\": \"052\",\"accountNumber\": \"3338493\",\"currentValue\": \"324.80\",\"totalShare\": \"545.514\", \"totalCost\": \"2242.56089999998\",\"minimumInvestment\": \"50.000000000000\"}],\"accountClosedStatus\": false,\"totalCurrentValue\": 170790.31}';
DataWrapper responseWrapper = DataWrapper.parse(json);
return responseWrapper;
} catch(Exception ex){
System.debug('Error occured while fetching the documents list' + ex);
}
return null;
}
Wrapper:
//
// Generated by JSON2Apex http://json2apex.herokuapp.com/
//
public class DataWrapper {
@AuraEnabled
public String accountName;
@AuraEnabled
public String registrationId;
@AuraEnabled
public String accountType;
@AuraEnabled
public String openDate;
@AuraEnabled
public List<String> allowedTransactions;
@AuraEnabled
public Address address;
@AuraEnabled
public List<Stocks> stocks;
@AuraEnabled
public Boolean accountClosedStatus;
@AuraEnabled
public Double totalCurrentValue;
public class Address {
@AuraEnabled
public String addressLine1;
@AuraEnabled
public String addressLine2;
@AuraEnabled
public String addressLine3;
}
public class Stocks {
@AuraEnabled
public String stock;
@AuraEnabled
public String stockName;
@AuraEnabled
public String stockNumber;
@AuraEnabled
public String accountNumber;
@AuraEnabled
public String currentValue;
@AuraEnabled
public String totalShare;
@AuraEnabled
public String totalCost;
@AuraEnabled
public String minimumInvestment;
}
public static DataWrapper parse(String json) {
return (DataWrapper) System.JSON.deserialize(json, DataWrapper.class);
}
}
Are you facing this error, when you click on Column Or when you load the Page?
Thank you!
Regards
Suraj Tripathi