requirements - 
on mouse over the "manager" column should show an manager column along with an arrow.

component-

<th class="slds-is-sortable slds-text-title--caps" scope="col" onmouseover="{!c.arrowshow}" onclick="{!c.sortManager}"><div class="slds-truncate slds-cell-fixed" style="width: 980px;padding-left: 10px;padding-top: 10px;" title="Manager">Manager
                                    <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'Manager') }">&nbsp; &#8595;  </aura:if>  
                                    <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'Manager') }"> &nbsp; &#8593;  </aura:if>   
                                    </div></th>

controller.js-

  sortManager: function(component, event, helper) {
          try {
                   component.set("v.selectedTabsoft", 'Manager');
                 helper.sortManagerHelper(component, event, 'Manager');
          }
          catch(Err){
            helper.showToast(component, 'Error',"Error Occured While Loading Component", "Error");
        }
    },
     arrowshow: function(component, event, helper) {
           var arw = component.find('Manager');
          $A.util.addClass(arw,'arrowdown');

    },

helper-

sortManagerHelper: function(component, event, sortField,isAsc) { 
        try {
            var currentDir = component.get("v.arrowDirection");
            if (currentDir == 'arrowdown') {
                component.set("v.arrowDirection", 'arrowup');
                component.set("v.isAsc", true);
                component.set("v.isSort", true);
            } else {
                component.set("v.arrowDirection", 'arrowdown');
                component.set("v.isAsc", false);
                component.set("v.isSort", true);
            }
            this.doinitHelper(component, event);
        }
        catch(Err){
            helper.showToast(component, 'Error',"Error Occured While Loading Component", "Error");
        }
    },