VisualForce Sortable Tables made easy

Are you a Force.com developer? Yes? Then as a Force.com Developer I am guessing that at some point you have faced the challenge of re-creating a table in VisualForce whilst trying to maintain the native Salesforce.com look and feel and I am guessing that the path you took to handle this was using apex:pageBlockTable.

But I suspect that many of you, myself included, have encountered issues or limitations with this path including:

  • Rendering in Internet Explorer issues

  • Sorting issues

  • Styling issues

  • Situations that require you to stay away from VisualForce components (due to responsive design, performance, or whatever reason)

So what’s the solution?

Homemade HTML tables with CSS styling...

Let me guess, any of the issues above lead you to creating your own HTML tables and styling them up using CSS? It's a workaround, it solves the problem but it's time consuming and fiddly work to get everything pixel perfect.

What about sorting?

- "Easily done, I'll find some jQuery code and I'll muck around with it"

Again, this is time consuming and not very efficient to load a whole library in order to achieve something straight forward and simple.

My solution: A template

Based on the amount of issues I experience using apex:pageBlockTable and the amount of occasions I need to create tables as a Developer, I decided to create a solution. I combined a bunch of static resources and wrote an HTML snippet that will serve you as a template every time you need to create a table.

The bundle consists of a CSS file for the look and a JavaScript file for the sorting functionality. Also the table relies on the standard Salesforce.com stylesheet classes, so any changes made by Salesforce.com will have impact on the layout of your table.

With only 2 quick steps you can get this up and running in minutes:

Step 1 - Create a static resource with this file into your org: SortableTable

Step 2 - Stick the following code inside your VisualForce page and modify it accordingly to your variables:

 

<apex:page controller="YourApexController" showHeader="true" sidebar="true" standardStylesheets="true">
	<apex:stylesheet value="{!URLFOR($Resource.YourStaticResourceName, 'sortableTable.css')}"/>
	<apex:includeScript value="{!URLFOR($Resource.YourStaticResourceName, 'sortableTable.js')}"/>

	<apex:sectionHeader title="Example" subtitle="Sortable Table" />
	<apex:form>
		<apex:pageBlock title="Accounts" mode="detail">
			<table class="list sortable" width="100%" cellpadding="0" cellspacing="0">
				<tr class="headerRow" >
					<th style="width: 25%;">Account Name</th>
					<th style="width: 25%;">Phone</th>
					<th style="width: 25%;">Type</th>
					<th style="width: 25%;">Owner</th>
				</tr>
				<apex:repeat value="{!accounts}" var="account">
					<tr class="dataRow even first">
						<td><apex:outputText value="{!account.Name}"/></td>
						<td><apex:outputText value="{!account.Phone}"/></td>
						<td><apex:outputText value="{!account.Type}"/></td>
						<td><apex:outputText value="{!account.Owner.Name}"/></td>
					</tr>
				</apex:repeat>
			</table>
		</apex:pageBlock>
	</apex:form>
</apex:page>

And voila, you now have a sortable HTML table with the native Salesforce.com look and feel. Below is a short video that demonstrates it in action: