[SalesForce] Arrow sorting on columns – client side

From the backend I am getting an Array of Objects {Object, Object,……}
I did sorting of the datatable and it is getting sorted but there is some issue with arrow.

Below is the code written:

Aura Component:
Defined 2 attributes sortAsc (default value is true) and sortColumn (default value is Account Name)

<aura:if isTrue="{! and(v.sortAsc == 'true', v.sortColumn == 'AccountName') }">
   <div class="slds-icon_container">  
      <lightning:icon iconName="utility:arrowup" size="xx-small" alternativeText="sort arrow up"/>  
   </div>
</aura:if>
<aura:if isTrue="{! and(v.sortAsc != 'true', v.sortColumn == 'AccountName') }"> 
   <div class="slds-icon_container">  
      <lightning:icon iconName="utility:arrowdown" size="xx-small" alternativeText="sort arrow down"/>  
   </div>
</aura:if>

Controller.js
In the controller I am just calling the helper class

sortAccountName: function(component, event, helper){
    helper.sortBy(component,"AccountName");
  },

Helper.js

sortByColumn: function(component, column) {
        var sortAsc = component.get("v.sortAsc");
        var sortColumn = component.get("v.sortColumn");
        var listOfEntities = component.get("v.list1");
        sortAsc = (column === sortColumn)? !sortAsc: true;
        console.log(listOfEntities);
        console.log(sortAsc);
        listOfEntities.sort(function(a,b){
                    x = a[column];
                    y = b[column];
            (x > y)? alert('x is greater than y'):(x < y ? alert('x is less than y'): alert('x is equal to y'));
            console.log(x);
            console.log(y);
            return (x == y)? 0 : (sortAsc?-1:1)*(x > y? -1 : 1);
        });
        console.log(listOfEntities);
        component.set("v.sortAsc", sortAsc);
        component.set("v.sortColumn", column);
        component.set("v.list1", listOfEntities);

    }

The default arrow on the datatable is down arrow even though sortAsc field is set to true. Can anyone help me with these arrows in lightning?
(Whenever it is ascending, the arrow needs to be down and whenever it is descending the arrow needs to be Up)

Best Answer

Lets reduce some more lines of code :)

<aura:if isTrue="{!v.sortField=='Name'}">
  <span>
    {!v.sortAsc ? '&#8593;' : '&#8595;'}
  </span>
</aura:if>

It's not necessaries to write aura:if in every place.

Edit

Here's an updated link for the code provided below.

In Lightning, there's no need to import a library or call out to the server, you can just write your own. Note: I've not tested this, so you may need to tweak it to suit your needs.

({
    sortByName: function(component, event, helper) {
        var currentOrder = component.get("v.sortAsc"),
            currentList = component.get("v.records");
        currentOrder = !currentOrder;
        currentList.sort(function(a,b) {
            var t1 = a.Name == b.Name, t2 = a.Name < b.Name;
            return t1? 0: (currentOrder?-1:1)*(t2?1:-1);
        });
        component.set("v.sortAsc", currentOrder);
        component.set("v.records", currentList);
    }
})

Your actual click handler needs a minor adjustment as well:

onclick="{!c.sortByName}"

This code assumes two variables, namely sortAsc, a Boolean, and records, a list of Opportunity records.

To make it more palatable for multiple fields to sort by, you'll want to put this logic into a helper function, then you can replace all the .Name references with a dynamic attribute, like a[field] < b[field].

I actually wrote a demo for this. It's not "pretty", but it demonstrates the functionality:

OpportunityHelper.cls

public class OpportunityHelper {
    @AuraEnabled public static Opportunity[] loadOpportunityRecords() {
        return [SELECT Name, Amount FROM Opportunity WHERE Amount <> NULL LIMIT 10];
    }
}

opportunity.app

<aura:application controller="OpportunityHelper">
    <aura:attribute type="Opportunity[]" name="records" />
    <aura:attribute type="Boolean" name="sortAsc" />
    <aura:attribute type="String" name="sortField" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <table>
        <thead>
            <td onclick="{!c.sortByName}">Name</td>
            <td onclick="{!c.sortByAmount}">Amount</td>
        </thead>
        <tbody>
            <aura:iteration items="{!v.records}" var="record">
                <tr>
                    <td>{!record.Name}</td>
                    <td>{!record.Amount}</td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:application>

opportunityController.js

({
    doInit: function(component, event, helper) {
        var load = component.get("c.loadOpportunityRecords");
        load.setCallback(this, function(result) {
            component.set("v.records", result.getReturnValue());
            component.set("v.sortAsc", true);
            helper.sortBy(component, "Name");
        });
        $A.enqueueAction(load);
    },
    sortByName: function(component, event, helper) {
        helper.sortBy(component, "Name");
    },
    sortByAmount: function(component, event, helper) {
        helper.sortBy(component, "Amount");
    }
})

opportunityHelper.js

({
    sortBy: function(component, field) {
        var sortAsc = component.get("v.sortAsc"),
            sortField = component.get("v.sortField"),
            records = component.get("v.records");
        sortAsc = field == sortField? !sortAsc: true;
        records.sort(function(a,b){
            var t1 = a[field] == b[field],
                t2 = a[field] > b[field];
            return t1? 0: (sortAsc?-1:1)*(t2?-1:1);
        });
        component.set("v.sortAsc", sortAsc);
        component.set("v.sortField", field);
        component.set("v.records", records);
    }
})

[SalesForce] Sorting of DataTable on Client side in Lightning

I think this would be best approach to do so in javascript which is totally client side and it wont take much time as I am already using it on large data set it is not taking time. Again if you think it s taking time then please use lightning:spinner as well. I f you notice on standard list view on objects they are totally on server side.