Visualforce Products Related List with sorting option by clicking on header

Apex Class -

	public class OpportunityProductsExt {
	private List<OpportunityLineItem> products;
	private String sortDirection = 'ASC';
	private String sortExp = 'name';
	Id oppId;
	public OpportunityProductsExt(ApexPages.standardController stdCon) {
	oppId = stdCon.getId();
	ViewData();
	}
	public String sortExpression
	{
	get {
	return sortExp;
	}
	set {
	//if the column is clicked on then switch between Ascending and Descending modes
	if (value == sortExp)
	sortDirection = (sortDirection == 'ASC')? 'DESC' : 'ASC';
	else
	sortDirection = 'ASC';
	sortExp = value;
	}
	}
	public String getSortDirection() {
	//if not column is selected
	if (sortExpression == null || sortExpression == '')
	return 'ASC';
	else
	return sortDirection;
	}
	public void setSortDirection(String value) {
	sortDirection = value;
	}
	public List<OpportunityLineItem> getProducts() {
	return products;
	}
	public PageReference ViewData() {
	//build the full sort expression
	string sortFullExp = sortExpression + ' ' + sortDirection;
	//query the database based on the sort expression
	products = Database.query('Select id, Product2.Name, Quantity, ServiceDate, UnitPrice, Discount, Subtotal, TotalPrice from OpportunityLineItem where OpportunityId ='+'\''+oppId+'\''+' order by ' + sortFullExp + ' limit 1000');
	return null;
	}
	}

view raw OpportunityProductsExt hosted with ❤ by GitHub

Visualforce Page -

	<apex:page standardController="Opportunity" extensions="OpportunityProductsExt">
	<apex:form >
	<apex:pageblock title="Products">
	<apex:pageblockButtons location="top">
	<apex:commandButton value="Edit All" onclick="window.open('/oppitm/multilineitem.jsp?oppId={!Opportunity.id}&retURL=/{!Opportunity.id}','_parent')"/>
	<apex:commandButton value="Choose Price Book" onclick="window.open('/oppitm/choosepricebook.jsp?id={!Opportunity.id}&retURL=/{!Opportunity.id}&saveURL=/{!Opportunity.id}','_parent')"/>
	<apex:commandButton value="Sort" onclick="window.open('/oppitm/lineitemsort.jsp?id={!Opportunity.id}&retURL=/{!Opportunity.id}','_parent')"/>
	</apex:pageblockButtons>
	<apex:pageblockTable value="{!products}" var="prod">
	<apex:column>
	<apex:facet name="header">
	<apex:outputPanel>
	<apex:inputCheckbox/>
	<apex:outputLabel value="Action"/>
	</apex:outputPanel>
	</apex:facet>
	<apex:inputCheckbox/>
	<apex:outputText value=" | "/>
	<apex:commandLink value="Edit" action="/{!prod.id}/e?retURL=/{!Opportunity.id}" target="_parent"/>
	<apex:outputText value=" | "/>
	<apex:commandLink value="Del" onclick="return confirm('Are you sure?');" action="{!URLFOR($Action.OpportunityLineItem.delete,prod.id)}"/>
	</apex:column>
	<apex:column headerValue="Product">
	<apex:outputLink value="/{!prod.Id}">{!prod.Product2.Name}</apex:outputLink>
	</apex:column>
	<apex:column>
	<apex:facet name="header">
	<apex:commandLink action="{!ViewData}" value="Product Family{!IF(sortExpression=='Quantity',IF(sortDirection='ASC','▼','▲'),'')}" id="cmdSort">
	<apex:param value="Quantity" name="column" assignTo="{!sortExpression}" ></apex:param>
	</apex:commandLink>
	</apex:facet>
	{!prod.Quantity}
	</apex:column>
	<apex:column value="{!prod.ServiceDate}"/>
	<apex:column value="{!prod.UnitPrice}"/>
	<apex:column value="{!prod.Discount}"/>
	<apex:column value="{!prod.Subtotal}"/>
	<apex:column value="{!prod.TotalPrice}"/>
	</apex:pageblockTable>
	</apex:pageblock>
	</apex:form>
	</apex:page>

view raw OpportunityProducts hosted with ❤ by GitHub

Reference -
http://salesforcesource.blogspot.com/2008/11/adding-sorting-capability-to.html