function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
shalini sharma 24shalini 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" 
Jay Wang 2Jay Wang 2
Hi, 

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.
 
updateColumnSorting: function (cmp, event, helper) {
        var fieldName = event.getParam('fieldName');
        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);
}
sortData: function (cmp, fieldName, sortDirection) {
        var data = cmp.get("v.acctList");
        var reverse = sortDirection !== 'asc';
        if (fieldName == 'accUrl__c') {
            data.sort(this.sortBy('Name', reverse))
        } else {
	        data.sort(this.sortBy(fieldName, reverse));            
        }
        cmp.set("v.mydata", data);
},

Best of luck,

Jay