You need to sign in to do that
Don't have an account?
shalini sharma 24
url type column sorting in datatable
HI All,
I want to sort the column in lightning datatable. All other columns are getting sorted properly except Account Name
<aura:component controller="AccountListController"
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
Component
<aura:attribute type="Account[]" 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}"
columns="{!v.mycolumns}"
keyField="id"
hideCheckboxColumn="true"
onsort="{!c.updateColumnSorting}"
sortedBy="{!v.sortedBy}"
sortedDirection="{!v.sortedDirection}"/>
</aura:component>
CONTROLLER.JS
({
fetchAccounts : function(component, event, helper) {
component.set('v.mycolumns', [
{label: 'Account Name', fieldName: 'accUrl__c', type: 'url', sortable: true,typeAttributes: {label: { fieldName: 'Name' }, target: '_blank',sortable:'true'}},
{label: 'Industry', fieldName: 'Industry', type: 'text'},
{label: 'Type', fieldName: 'Type', type: 'Text'}
]);
var action = component.get("c.fetchAccts");
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');
if (fieldName == 'accUrl__c'){fieldName = 'Name';}
alert('fieldName >> '+fieldName);
var sortDirection = event.getParam('sortDirection');
alert('sortDirection >> '+sortDirection);
cmp.set("v.sortedBy", fieldName);
cmp.set("v.sortedDirection", sortDirection);
helper.sortData(cmp, fieldName, sortDirection);
}
})
Helper.Js
({
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.hasOwnProperty(field) ? (typeof x[field] === 'string' ? x[field].toLowerCase() : x[field]) : 'aaa')} :
function(x) {return x.hasOwnProperty(field) ? (typeof x[field] === 'string' ? x[field].toLowerCase() : x[field]) : 'aaa'};
alert('direction2 >> '+reverse);
alert('direction3 >> '+reverse);
reverse = !reverse ? 1 : -1;
alert('direction4 >> '+reverse);
return function (a, b) {
// return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
return a = key(a)?key(a):'', b = key(b)?key(b):'', reverse * ((a > b) - (b > a));
}
}
})
Apex Class:
public class AccountListController {
@AuraEnabled
public static List < Account > fetchAccts() {
return [ SELECT Id, Name, Industry, Type,accUrl__c FROM Account ];
}
}
accUrl__c is a formula field on Account with return type text : "https://toons-dev-ed.lightning.force.com/one/one.app#/sObject/" &Id& "/view"
I want to sort the column in lightning datatable. All other columns are getting sorted properly except Account Name
<aura:component controller="AccountListController"
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
Component
<aura:attribute type="Account[]" 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}"
columns="{!v.mycolumns}"
keyField="id"
hideCheckboxColumn="true"
onsort="{!c.updateColumnSorting}"
sortedBy="{!v.sortedBy}"
sortedDirection="{!v.sortedDirection}"/>
</aura:component>
CONTROLLER.JS
({
fetchAccounts : function(component, event, helper) {
component.set('v.mycolumns', [
{label: 'Account Name', fieldName: 'accUrl__c', type: 'url', sortable: true,typeAttributes: {label: { fieldName: 'Name' }, target: '_blank',sortable:'true'}},
{label: 'Industry', fieldName: 'Industry', type: 'text'},
{label: 'Type', fieldName: 'Type', type: 'Text'}
]);
var action = component.get("c.fetchAccts");
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');
if (fieldName == 'accUrl__c'){fieldName = 'Name';}
alert('fieldName >> '+fieldName);
var sortDirection = event.getParam('sortDirection');
alert('sortDirection >> '+sortDirection);
cmp.set("v.sortedBy", fieldName);
cmp.set("v.sortedDirection", sortDirection);
helper.sortData(cmp, fieldName, sortDirection);
}
})
Helper.Js
({
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.hasOwnProperty(field) ? (typeof x[field] === 'string' ? x[field].toLowerCase() : x[field]) : 'aaa')} :
function(x) {return x.hasOwnProperty(field) ? (typeof x[field] === 'string' ? x[field].toLowerCase() : x[field]) : 'aaa'};
alert('direction2 >> '+reverse);
alert('direction3 >> '+reverse);
reverse = !reverse ? 1 : -1;
alert('direction4 >> '+reverse);
return function (a, b) {
// return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
return a = key(a)?key(a):'', b = key(b)?key(b):'', reverse * ((a > b) - (b > a));
}
}
})
Apex Class:
public class AccountListController {
@AuraEnabled
public static List < Account > fetchAccts() {
return [ SELECT Id, Name, Industry, Type,accUrl__c FROM Account ];
}
}
accUrl__c is a formula field on Account with return type text : "https://toons-dev-ed.lightning.force.com/one/one.app#/sObject/" &Id& "/view"
I recently encountered this problem and I have a quick fix that worked for me if you are still having this issue. Although I can't exactly explain why it does not sort properly when setting the fieldName = 'Name' in the controller but it worked for me when I set it in the helper.
Best of luck,
Jay