0

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)

2

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.

  • 1
    I was actually mobile when I wrote my answer, or it would have looked more like this. In the spirit of OP's question, the code could actually look like this: <aura:if isTrue="{!v.sortField=='Name'}"><lightning:icon iconName="{!'utility:arrow'+(v.sortAsc?'up':'down')}" size="xx-small" alternativeText="{!'sort arrow '+(v.sortAsc?'up':'down')}"/></aura:if>. – sfdcfox Jul 10 '17 at 14:25
  • @sfdcfox Correct – Tariq Jul 10 '17 at 19:11
4

See this gist, but basically, you're comparing a string to a Boolean. Expect surprises.

Also, I strongly suggest using aura:if and aura:set attribute="else", as demonstrated in my code, from above. Setting consecutive aura:if next to each other can cause bugs.

Here's the relevant code from my source:

<aura:if isTrue="{!v.sortField=='Name'}">
  <span>
    <aura:if isTrue="{!v.sortAsc}">
    &#8593;
      <aura:set attribute="else">
       &#8595;
      </aura:set>
     </aura:if>
  </span>
</aura:if>
  • @sfdcfox What you think about my answer ? – Tariq Jul 10 '17 at 10:32

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.