Data Table Sort Direction Param Not Firing On Certain Columns

Question

working on finishing up a project. The sort was totally fine until there was a requirement for two of the data type in two of the columns to be a url. Now the event.pararm sortDirction never changes for those two columns. It remains asc.

I am hoping I can get someone to look at the code and share their thoughts. It is related to the if statement in the Aura controller. If I comment that out then the sort direction param works fine -but the columns values are no longer correctly sorted.

Here is a truncated version of the code.

Controller code

sortByColumn: function(component, event, helper) {        
        //Decide to do sync or async operation
        var totalSize = component.get('v.totalNumOfRecs');
        var fieldName = event.getParam('fieldName');
        var galileoString = "dt_Galileo_Id__c";
        var lastNameString = "dt_Last_Name__c";        

       // Logic to use associated field for sorting instead of URL field
        if(fieldName =='dt_Galileo_Id_Link__c'){
            fieldName = galileoString;            

        } else if(fieldName == 'dt_Last_Name_Link__c'){
            fieldName = lastNameString;            
        }       
        var sortDirection = event.getParam('sortDirection');


        // assign the latest attribute with the sorted column fieldName and sorted direction
        component.set('v.sortedBy', fieldName);
        component.set('v.sortedDirection', sortDirection);
        helper.sortData(component, fieldName, sortDirection);

    },

Here is the code for the columns and the sort in the helper file. The sort works fine on ever column except dt_Galileo_Id_Link__c and dt_Last_Name__c.

component.set('v.mycolumns', [            
            {label: 'Id', fieldName: 'Id', type: 'text', sortable: true, initialWidth: widthValue50}, //TODO: Note by Tony - I added this in to help with troubleshooting; Remove before pushing code to Production
            {label: 'Delivery Name', fieldName: 'dt_Delivery_Name__c', type: 'text', sortable: true, initialWidth: widthValue200},
            {label: 'Informal Salutation', fieldName: 'dt_Informal_Salutation__c', type: 'text', sortable: true, initialWidth: widthValue100},
            {label: 'Last Name', fieldName: 'dt_Last_Name_Link__c', type: 'url', sortable: true, typeAttributes:{label:{fieldName: 'dt_Last_Name__c'},target: '_self'},initialWidth: widthValue100},
            {label: 'Email1', fieldName: 'dt_Email1__c', type: 'email', sortable: true, initialWidth: widthValue200},
            {label: 'Inviter/Sender', fieldName: 'dt_Inviter_Sender__c', type: 'text', sortable: true, initialWidth: widthValue200},
            {label: 'Galileo ID', fieldName: 'dt_Galileo_Id_Link__c', type: 'url', sortable: true, typeAttributes:{label:{fieldName: 'dt_Galileo_Id__c'},target: '_self'}, initialWidth: widthValue100},
            {label: 'Relationship Type', fieldName: 'dt_Relationship_Type__c', type: 'text', sortable: true, initialWidth: widthValue200},
            {label: 'Age', fieldName: 'dt_Age__c', type: 'number', sortable: true, initialWidth: widthValue50},
            {label: 'BA Office', fieldName: 'dt_BA_Office__c', type: 'text', sortable: true, initialWidth: widthValue100},
            {label: 'Marketing Restrictions', fieldName: 'dt_Marketing_Restrictions__c', type: 'text', sortable: true, initialWidth: widthValue100},
            {label: 'Email Opt Out', fieldName: 'dt_Email_Opt_Out__c', type: 'text', sortable: true, initialWidth: widthValue100},
            {label: 'Primary Contact', fieldName: 'dt_Primary_Contact__c', type: 'text', sortable: true, initialWidth: widthValue100},
            {label: 'City', fieldName: 'dt_City__c', type: 'text', sortable: true, initialWidth: widthValue100},
            {label: 'State', fieldName: 'dt_State__c', type: 'text', sortable: true, initialWidth: widthValue100},
            {label: 'Company', fieldName: 'dt_Company__c', type: 'text', sortable: true, initialWidth: widthValue100},
            {label: 'Business Unit', fieldName: 'dt_Business_Unit__c', type: 'text', sortable: true, initialWidth: widthValue200},
            {label: 'Last Modified By', fieldName: 'dt_Last_Modified_By__c', type: 'text', sortable: true, initialWidth: widthValue200},
        ]);

sortData: function (component, fieldName, sortDirection) {
        var data = component.get("v.allRecords");
        var reverse = sortDirection !== 'asc';

        //sorts the rows based on the column header that's clicked
        data.sort(this.compareValues(fieldName, reverse));

        component.set("v.allRecords", data);

        //pass data back to helper function to display information
        this.updateShownData(component, "Initialize");
    },

compareValues: function (key, order) {
        console.log('value of sort key = ' + key);
        console.log('value of order = ' + order);
        return function innerSort(a, b) {
            if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
                // property doesn't exist on either object
                return 0;
            }

            const varA = (typeof a[key] === 'string') ? a[key].toUpperCase() : a[key];
            const varB = (typeof b[key] === 'string') ? b[key].toUpperCase() : b[key];

            let comparison = 0;
            if(varA === varB ){
                return 0;
            }else if (varA === null){
                return -1;
            }else if (varB === null ){
                return -1;
            }
                else if (varA > varB) {
                    comparison = 1;
                } else if (varA < varB) {
                    comparison = -1;
                }
            return (
                (order) ? (comparison * -1) : comparison
            );
        };
    },

Answer 1

Your data table is getting confused because, for the two columns for which you're using one field as the content and another as the display text, you're mapping to the display field by which you wish to sort before you tell the data table what column is sorted:

    if(fieldName =='dt_Galileo_Id_Link__c'){
        fieldName = galileoString;            

    } else if(fieldName == 'dt_Last_Name_Link__c'){
        fieldName = lastNameString;            
    }       
    var sortDirection = event.getParam('sortDirection');


    // assign the latest attribute with the sorted column fieldName and sorted direction
    component.set('v.sortedBy', fieldName);
    component.set('v.sortedDirection', sortDirection);

You already overwrote fieldName, so here you're telling the data table that it's sorted by a field that does not correspond to a column (although it is in fact the underlying sort of the data).

Just flip the order in which you map fieldName and update the data table parameters and your code looks like it'll work fine.