function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Diwanshu setia 2Diwanshu setia 2 

Sort data based on column heading in table in lightning

I need to sort data based on column heading in table in lightning is there any one who has worked on same requirement in lightning?
Srinivas SSrinivas S
Hi Diwanshu,

Use the following mark up in your lightning component -
Note: please remove unnecessary labels and attributes for your requirement 
<aura:iteration items="{!v.columnHeaders}" var="colHeader"> 
	<th class="slds-is-sortable" scope="col">
		<span class="slds-truncate" id="{!colHeader.name + ':span'}" onclick="{!c.onColumnSortClick}">{!colHeader.label}</span>
		<button class="slds-button slds-button--icon-bare" sortdir="asc" disabled="{!v.isWaiting}" id="{!colHeader.name + ':button'}" onclick="{!c.sortByColumn}">
			<aura:if isTrue="{!colHeader.sortDirection == 'ASC'}">
				<c:svgIcon id="{!colHeader.name}" pathd="M 3.8 6.5 h 16.4 c 0.4 0 0.8 0.6 0.4 1 l -8 9.8 c -0.3 0.3 -0.9 0.3 -1.2 0 l -8 -9.8 c -0.4 -0.4 -0.1 -1 0.4 -1 Z" class="slds-button__icon slds-button__icon--small"/>                                                                                                                                                            
				<aura:set attribute="else">
					<c:svgIcon id="{!colHeader.name}" pathd="M 20.2 17.5 H 3.8 c -0.4 0 -0.8 -0.6 -0.4 -1 l 8 -9.8 c 0.3 -0.3 0.9 -0.3 1.2 0 l 8 9.8 c 0.4 0.4 0.1 1 -0.4 1 Z" class="slds-button__icon slds-button__icon--small"/>                                                                                                                                                            
				</aura:set>
			</aura:if>
			<span class="slds-assistive-text">Sort</span>
		</button>
	</th>                                                                  
</aura:iteration>

JavaScript Controller Logic - 
sortByColumn : function (cmp, colId) {
	//implement the logic for sort
}
------------
Thanks,
Srinivas
- Please mark as solution if your problem is resolved.
 
Andy Grove 15Andy Grove 15
@Srinivas Do you have the Controller login for sorting handy? My solution is not working.
Thanks!
Diwanshu setia 2Diwanshu setia 2
Srinivas S-Can you please provide a running snipplet
nitesh halliyalnitesh halliyal
Hello Diwanshu-Below link of a working code snippet for client side table header sorting.

https://salesforce.stackexchange.com/questions/149779/lightning-client-side-sorting
Raghavendra NagRaghavendra Nag
Hello Diwanshu, You can utilize the lightning:datatable base component. You will get more details with examples in below link.
https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example#lightningcomponentdemo:exampleDatatableInAction