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.