Lightning Datatable - sorting a column with URL data type

Question

Sorting is working with any data type but url. Columns with url data type sorts according to underlying ID of the url. But I want the sorting display label. eg. I have a contact name with url link it does not sort according to the last name but Id of te url. This is my code:

HELPER: ({ sortData: function (cmp, fieldName, sortDirection) { var data = cmp.get("v.enrolmentRows"); var reverse = sortDirection !== 'asc'; //sorts the rows based on the column header that's clicked data.sort(this.sortBy(fieldName, reverse)) cmp.set("v.enrolmentRows", 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)?key(a):'', b = key(b)?key(b):'', reverse * ((a > b) - (b > a));

    }
}

})

Part of CONTROLLER: doInit: function(component, event, helper) {

    component.set('v.mycolumns', [
        {label: 'Trainee', fieldName: 'linkName', type: 'url',
         typeAttributes: {label: { fieldName: 'Trainee_Name__c'}}, initialWidth: 150, cellAttributes: {alignment: 'left'}},  
        {label: 'Progress %', fieldName: 'Progress__c', type: 'number', initialWidth: 115, cellAttributes: {alignment: 'center'}, sortable: true},
        {label: 'Status', fieldName: 'Moodle_Enrolment_Status__c', type: 'text',initialWidth: 125, cellAttributes:{alignment: 'left'}, sortable: true},
        {label: 'To be Graded', fieldName: 'Waiting_for_Grading__c', type: 'number',  initialWidth: 115, cellAttributes: {alignment: 'center'}, sortable: true},
        {label: 'Assessor', fieldName: 'linkNameAss', type: 'url', 
         typeAttributes: {label: { fieldName: 'Assessor_Name__c' }},initialWidth: 150, cellAttributes: {alignment: 'left'}, sortable: true},
        {label: 'Last Access', fieldName: 'Last_Accessed__c', type: 'date',initialWidth: 125, sortable: true},
        {label: 'LSA', fieldName: 'LSA_Name__c', type: 'text',initialWidth: 125, cellAttributes:{alignment: 'left'}, sortable: true}
    ]);

Answer 1

I dont know if you ever got an answer for this Query but i managed to get round this by putting an If statement in to check for the URL columns fieldname and if it matches replace the field name with the data for the Label Field

HELPER: ({ sortData: function (cmp, fieldName, sortDirection) { 
var data = cmp.get("v.enrolmentRows"); 
var reverse = sortDirection !== 'asc'; 
//sorts the rows based on the column header that's clicked 
if(fieldName === 'URLFieldName')
{
  fieldName = 'LabelFieldName';
}
data.sort(this.sortBy(fieldName, reverse)) cmp.set("v.enrolmentRows", data);
},

Answer 2

Expanding on @Matt Collins's solution, I put the switch of names up at the controller level for when multiple columns have a url type. Note that the sortedBy field retains the original fieldName.

    var fieldName = event.getParam('fieldName');
    component.set("v.sortedBy", fieldName);
    for (let entry of mycolumns) {
        if (entry.fieldName == fieldName){
            if (entry.type == 'url'){
                fieldName = entry.typeAttributes.label.fieldName;
            }//endif type
        }//endif fieldname
    }//next
    var sortDirection = event.getParam('sortDirection');
    helper.sortData(component, fieldName, sortDirection);

Also, for other sort methods, see What is the third parameter "primer" in the lightning-datatable sort example?