Sorting the cloumns in Datatable while working with Lightning Component

I am giving the simple idea to implement the sorting functionality for the datatable.

Create the following Apex Class -

	public class Demo_LightningSortableDatatableContrl {
	@AuraEnabled
	public static List<Sobject> fetchOpps(String sortField, String sortOrder) {
	String query = 'select id, name, stagename, amount from Opportunity';
	if(String.isNotBlank(sortField) && String.isNotBlank(sortOrder)) {
	query += ' order by '+sortField+' '+sortOrder;
	}
	return Database.query(query);
	}
	}

view raw Demo_LightningSortableDatatableContrl hosted with ❤ by GitHub

Create the following Lightning Component -

	<aura:component controller="Demo_LightningSortableDatatableContrl">
	<aura:attribute name="opportunities" type="list"/>
	<aura:attribute name="sortField" type="String" default="Name"/>
	<aura:attribute name="sortOrder" type="String" default="Asc"/>
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
	<table class="slds-table slds-table_bordered" role="grid">
	<thead>
	<tr class="slds-line-height_reset">
	<th aria-sort="none" class="slds-is-sortable slds-text-title_caps" aria-label="Name" scope="col">
	<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1" onclick="{!c.sortColumn}" id="Name" onmouseover="{!c.arrowOnHover}" onmouseout="{!c.arrowOnOut}">
	<span class="slds-assistive-text">Sort by: </span>
	<span class="slds-truncate" title="Name">Name</span>
	<div class="slds-icon_container">
	<aura:if isTrue="{!v.sortField eq 'Name' &amp;&amp; v.sortOrder eq 'Asc'}">
	<lightning:icon iconName="utility:arrowdown" size="x-small" alternativeText="Indicates arrowdown"/>
	<aura:set attribute="else">
	<aura:if isTrue="{!v.sortField eq 'Name' &amp;&amp; v.sortOrder eq 'Desc'}">
	<lightning:icon iconName="utility:arrowup" size="x-small" alternativeText="Indicates arrowup"/>
	</aura:if>
	</aura:set>
	</aura:if>
	<aura:if isTrue="{!v.sortField ne 'Name'}">
	<div id="NameUpArrow" style="display:none">
	<lightning:icon iconName="utility:arrowdown" size="x-small" alternativeText="Indicates arrowdown"/>
	</div>
	</aura:if>
	</div>
	</a>
	<span class="slds-assistive-text" aria-live="assertive" aria-atomic="true">Sorted none</span>
	<div class="slds-resizable">
	<input type="range" min="20" max="1000" aria-label="Name column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-8" tabindex="-1" />
	<span class="slds-resizable__handle">
	<span class="slds-resizable__divider"></span>
	</span>
	</div>
	</th>
	<th aria-sort="none" class="slds-is-sortable slds-text-title_caps" aria-label="Stage" scope="col">
	<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1" onclick="{!c.sortColumn}" id="StageName">
	<span class="slds-assistive-text">Sort by: </span>
	<span class="slds-truncate" title="Stage">Stage</span>
	<div class="slds-icon_container">
	<!--<lightning:icon iconName="utility:arrowdown" size="x-small" alternativeText="Indicates arrowdown"/>-->
	</div>
	</a>
	<span class="slds-assistive-text" aria-live="assertive" aria-atomic="true">Sorted none</span>
	<div class="slds-resizable">
	<input type="range" min="20" max="1000" aria-label="Stage column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-11" tabindex="-1" />
	<span class="slds-resizable__handle">
	<span class="slds-resizable__divider"></span>
	</span>
	</div>
	</th>
	<th aria-sort="none" class="slds-is-sortable slds-text-title_caps" aria-label="Amount" scope="col">
	<a class="slds-th__action slds-text-link_reset" href="javascript:void(0);" role="button" tabindex="-1" onclick="{!c.sortColumn}" id="Amount" onmouseover="{!c.arrowOnHover}" onmouseout="{!c.arrowOnOut}">
	<span class="slds-assistive-text">Sort by: </span>
	<span class="slds-truncate" title="Amount">Amount</span>
	<div class="slds-icon_container">
	<aura:if isTrue="{!v.sortField eq 'Amount' &amp;&amp; v.sortOrder eq 'Asc'}">
	<lightning:icon iconName="utility:arrowdown" size="x-small" alternativeText="Indicates arrowdown"/>
	<aura:set attribute="else">
	<aura:if isTrue="{!v.sortField eq 'Amount' &amp;&amp; v.sortOrder eq 'Desc'}">
	<lightning:icon iconName="utility:arrowup" size="x-small" alternativeText="Indicates arrowup"/>
	</aura:if>
	</aura:set>
	</aura:if>
	<aura:if isTrue="{!v.sortField ne 'Amount'}">
	<div id="AmountUpArrow" style="display:none">
	<lightning:icon iconName="utility:arrowdown" size="x-small" alternativeText="Indicates arrowdown"/>
	</div>
	</aura:if>
	</div>
	</a>
	<span class="slds-assistive-text" aria-live="assertive" aria-atomic="true">Sorted none</span>
	<div class="slds-resizable">
	<input type="range" min="20" max="1000" aria-label="Amount column width" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-13" tabindex="-1" />
	<span class="slds-resizable__handle">
	<span class="slds-resizable__divider"></span>
	</span>
	</div>
	</th>
	</tr>
	</thead>
	<tbody>
	<aura:iteration items="{!v.opportunities}" var="opp">
	<tr class="slds-hint-parent">
	<td role="gridcell">
	<div class="slds-truncate" title="salesforce.com">{!opp.Name}</div>
	</td>
	<td role="gridcell">
	<div class="slds-truncate" title="salesforce.com">{!opp.StageName}</div>
	</td>
	<td role="gridcell">
	<div class="slds-truncate" title="salesforce.com">{!opp.Amount}</div>
	</td>
	</tr>
	</aura:iteration>
	</tbody>
	</table>
	</aura:component>

view raw Demo_LightningSortableDatatable.cmp hosted with ❤ by GitHub

Create the following Lightning Controller Js -

	({
	doInit : function(component, event, helper) {
	helper.handleDoInit(component, event);
	},
	sortColumn : function(component, event, helper) {
	var target;
	if(event.currentTarget.id)
	target = event.currentTarget.id;
	component.set("v.sortField",target);
	if(component.get("v.sortOrder")) {
	if(component.get("v.sortField") != target) {
	component.set("v.sortOrder",'Asc');
	}
	else {
	if(component.get("v.sortOrder") == 'Asc') {
	component.set("v.sortOrder",'Desc');
	}
	else {
	component.set("v.sortOrder",'Asc');
	}
	}
	}
	helper.handleDoInit(component, event);
	},
	arrowOnHover : function(component, event, helper) {
	var target;
	if(event.currentTarget.id)
	target = event.currentTarget.id;
	if( document.getElementById(target+"UpArrow"))
	document.getElementById(target+"UpArrow").style.display = 'block';
	},
	arrowOnOut : function(component, event, helper) {
	var target;
	if(event.currentTarget.id)
	target = event.currentTarget.id;
	if( document.getElementById(target+"UpArrow"))
	document.getElementById(target+"UpArrow").style.display = 'none';
	}
	})

view raw Demo_LightningSortableDatatableController.js hosted with ❤ by GitHub

Create the following Lightning Helper Js -

	({
	handleDoInit : function(cmp, event) {
	var action = cmp.get("c.fetchOpps");
	action.setParams(
	{
	sortField : cmp.get("v.sortField"),
	sortOrder : cmp.get("v.sortOrder")
	}
	);
	action.setCallback(this, function(response) {
	var state = response.getState();
	if (state === "SUCCESS") {
	cmp.set("v.opportunities",response.getReturnValue());
	alert(JSON.stringify(cmp.get("v.opportunities")));
	}
	else if (state === "INCOMPLETE") {
	// do something
	}
	else if (state === "ERROR") {
	var errors = response.getError();
	if (errors) {
	if (errors[0] && errors[0].message) {
	console.log("Error message: " +
	errors[0].message);
	}
	} else {
	console.log("Unknown error");
	}
	}
	});
	$A.enqueueAction(action);
	}
	})

view raw Demo_LightningSortableDatatableHelper.js hosted with ❤ by GitHub

Create the following Lightning App in which you can see the preview for the above created component -

	<aura:application extends="force:slds">
	<c:Demo_LightningSortableDatatable />
	</aura:application>

view raw Demo_LightningSortableDatatableApp.app hosted with ❤ by GitHub

I still didn't work on showing the up and down arrows which I might work in future. (Please comment if you want that functionality to add, with some response it will be encouraging me to work on that part as soon as possible.)