1

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
}];
4
  • Can you give the data (in JSON) you are getting? – salesforce-sas Jun 6 '20 at 3:42
  • Hi JSON is fine the challenge is when i click on nameUrl column the sortDirection always stays "asc" because of which first time data get sorted perfectly but when I click second time to show reverse direction the sort direction still remain "asc" – Abhishek Khosla Jun 6 '20 at 4:27
  • I closed this as a duplicate, because it appears that this is your problem. Note that in LWC, attribute names will be sorted-by and sorted-direction instead. If you're still having problems, please let us know and I'll be glad to reopen the question for you. – sfdcfox Jun 6 '20 at 15:58
  • @sfdcfox in my data table i have used the attribute name correctly as mentioned by you and the sorting function is working perfectly fine with other columns like "Product Code" and "Product Name" only when I click on my custom column nameUrl the sort direction always stays "asc" – Abhishek Khosla Jun 7 '20 at 15:24
3

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.