Not able to Sort Url Column in LWC Datatable

Question

i am trying to build datatable where I want to show Product Name as url so that User can go that particular record

JS where i am making my name field as URL

 {   
     let nameUrl;
     this.showSpinner = false;
     this.allProducts = result.map(row =>{
     nameUrl = `/${row.Id}`;
     return {...row,nameUrl}
  });

Now when I am trying to sort "nameUrl" in my datatable the sort direction stays "asc" and doesn't change to "desc" even after clicking multiple time. I am not able to understand why this is happening. When i am using the same sort function for any other field it works perfectly fine. Can anyone let me know where i am wrong and how i can rectify the same

JS file for my Data Table

export default class SearchProductDataTable extends LightningElement {
@api products;
@track sortBy;
@track sortDirection;
@track allProducts;
@track prodNameObject = [];
cols = columns;


handleSortdata(event){

    let sortbyField= event.detail.fieldName;
    if(sortbyField ==='nameUrl'){
        this.sortBy = 'Name'; 
    } else{
        this.sortBy = sortbyField;

    }
    this.sortDirection = event.detail.sortDirection;
    console.log('This is the sort direction ',this.sortDirection);
    //Console Log : When nameUrl field is clicked Sort Direction is always 'asc'
    this.sortData(this.sortBy, this.sortDirection);
}

sortData(fieldName, sortDirection){
    let data =  [...this.products];
    console.log('This is the sort value of nameurl ',fieldName);
    //function to return the value stored in the field
    let key =(a) => a[fieldName]; 
    //console.log('This is key value ',key);
    let reverse = sortDirection === 'asc' ? 1: -1;
    data.sort((a,b) => {
        let valueA = key(a) ? key(a).toLowerCase() : '';
        let valueB = key(b) ? key(b).toLowerCase() : '';
        console.log('This is Value A',valueA);
        console.log('This is Value B',valueB);
        let vale = (valueA > valueB) - (valueB > valueA);
        console.log('This is Vale ',vale);
        console.log('This is the value of reverse',reverse);
        return reverse * ((valueA > valueB) - (valueB > valueA));
    });
    this.products = data;

}

get showTable(){
    if(this.products.length > 0){
        return true;
    } else {
        return false;
    }

}

Data Table Columns :

const columns = [
{
    label:'Prd Record Link',
    fieldName:'nameUrl',
    type:'url',
    typeAttributes: {label: { fieldName: 'Name' }, 
                    target: '_blank'},
    sortable: true,
    wrapText: true
},
{
    label: 'Product Name',
    fieldName:'Name',
    type:'text',
    sortable:true,
    wrapText: true
},
{
    label: 'Product Code',
    fieldName:'ProductCode',
    type:'text',
    sortable:true,
    wrapText: true
},
{
    label:'Eng Status',
    fieldName:'Eng_Status__c',
    type:'text',
    hideDefaultActions:true
},
{
    label:'Quotable',
    fieldName:'Quotable__c',
    type:'text',
    hideDefaultActions:true
},
{
    label:'Quoting Rules',
    fieldName:'Quoting_Rules__c',
    type:'text',
    hideDefaultActions:true
},
{
    label:'USD Price',
    fieldName:'USD_Price__c',
    type:'currency',
    typeAttributes:{currencyCode: 'USD'},
    hideDefaultActions:true
},
{
    label:'AUD Price',
    fieldName:'AUD_Price__c',
    type:'currency',
    typeAttributes:{currencyCode: 'AUD'},
    hideDefaultActions:true
},
{
    label:'CAD Price',
    fieldName:'CAD_Price__c',
    type:'currency',
    typeAttributes:{currencyCode: 'CAD'},
    hideDefaultActions:true
},
{
    label:'China Price',
    fieldName:'China_Price__c',
    type:'currency',
    typeAttributes:{currencyCode: 'CNY'},
    hideDefaultActions:true
},
{
    label:'EUR Price',
    fieldName:'EUR_Price__c',
    type:'currency',
    typeAttributes:{currencyCode: 'EUR'},
    hideDefaultActions:true
},
{
    label:'GBP Price',
    fieldName:'GBP_Price__c',
    type:'currency',
    typeAttributes:{currencyCode: 'GBP'},
    hideDefaultActions:true
}];

Answer 1

The fieldName attribute on the column needs to match sortBy, assuming you have that bound to sorted-by on the datatable:

To enable sorting of row data by a column label, set sortable to true for the column on which you want to enable sorting. Set sortedBy to match the fieldName attribute on the column. Clicking a column header sorts rows by ascending order unless the defaultSortDirection is changed, and clicking it subsequently reverses the order. Handle the onsort event handler to update the table with the new column index and sort direction.

https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation

Thus if you're sorting a column using a custom attribute, you could try just setting sortBy to match the fieldName attribute after the data is sorted:

handleSortdata(event) {
  let sortbyField = event.detail.fieldName;
  if (sortbyField === "nameUrl") {
    this.sortBy = "Name";
  } else {
    this.sortBy = sortbyField;
  }
  this.sortDirection = event.detail.sortDirection;
  this.sortData(this.sortBy, this.sortDirection);
  this.sortBy = sortbyField;
}