2

I have a URL field on a datatable:

<lightning-datatable
        key-field="id"
        data={data}
        columns={columns}
        onrowaction={handleRowAction}
        sorted-by={sortedBy} 
        sorted-direction={SortedDirection}
        onsort={updateSort} >
</lightning-datatable>

const columns = [
    { label: 'Id', fieldName: 'Id',sortable: true },
    { label: 'Contact', fieldName: 'URLF', sortable: true, 
        type: 'url', 
        typeAttributes:{
            label: {
                fieldName: 'Contact_Name__c'
            }, 
            target: '_self'
        }
    }

I am able to sort all the columns twice, but on the third time, when I click on the column name nothing happens.

sortedBy;
sortedDirection = 'asc';

updateSort(event) {
    let fieldName = event.detail.fieldName;
    fieldName = fieldName === 'URLF' ? 'Contact_Name_Formula__c' : fieldName;
    let sortDirection = event.detail.sortDirection;
    this.sortedBy = fieldName;
    this.sortedDirection = sortDirection;
    let reverse = sortDirection !== "asc";
    let data_clone = JSON.parse(JSON.stringify(this.data));
    this.data = data_clone.sort(this.sortData(fieldName, reverse));
    // keep this line at the end to reset the name field back to url so we get the sort diections.
    this.sortedBy = event.detail.fieldName;;
  }

  sortData(field, reverse, primer) {
    var key = function (x) {
      return primer ? primer(x[field]) : x[field];
    };
    return function (a, b) {
      var A = key(a),
        B = key(b);
      if (A === undefined) A = "";
      if (B === undefined) B = "";
      return (A < B ? -1 : A > B ? 1 : 0) * [1, -1][+!!reverse];
    };
  }

I saw a similar question to mine, implemented the suggested solution but still same results.

When I debug the event.detail record I see the following:

after clicking on the column header for the first time I get -> detail: {fieldName: "URLF", sortDirection: "asc"}
after 2nd click -> detail: {fieldName: "URLF", sortDirection: "desc"}
after 3rd click -> detail: {fieldName: "URLF", sortDirection: "desc"}
after 4th click -> detail: {fieldName: "URLF", sortDirection: "desc"}

So as you can see, the sortDirection stops changing.

2
  • you do know that Javsacript has a sorting function? did you add any sort of logging or do any debugging to see what might be causing this?
    – glls
    May 25, 2021 at 21:04
  • @glls edited my question
    – Json
    May 25, 2021 at 21:15

1 Answer 1

2

You have a typo in your code:

    sorted-direction={SortedDirection}

Should be:

    sorted-direction={sortedDirection}

Remember that LWC is completely, 100% cAsE-sEnSiTiVe, so even the smallest change in case can break code in amusing and hard-to-diagnose ways. Whenever you have a problem, it's often a good exercise to make sure you review the casing and spelling of all your variables and attributes.

Hint: since the sortedDirection kept popping up as "desc", I suspected that the problem was that the variable wasn't set correctly.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .