RSS feed
More news & opinion »
Floating/Sticky Headers For Visualforce PageBlockTable
By daniel on March 21, 2013
Hey everyone, it’s Dan/Kenji, Senior Developer for Redkite here with a nifty solution to an ever so annoying problem. That is of course that headers of a pageblocktable in Visualforce do not remain visible if you put the table in a scrollable area. I know there are a few approaches on how exactly to best pull this off, but they always seemed too complicated and not very reliable. So I decided to just bite the bullet and write a nice reusable jQuery plugin to take care of it for you. First off, to make sure we are talking about the same thing and what I’m proposing if what you want, check out the demo link below.
Demo of Sticky/Floating Headers
If you like what you see, you can download the plugin here.
Download jQuery PluginUpload it as a static resource, or just copy paste the contents into your visualforce page. Either way is fine. Also, in your visualforce page you’ll need to include the css class .floatingStyle and set it’s position to relative. Like this
<style>
.floatingStyle
{
position:relative;
}
</style>
To use it, simply put your pageblocktable inside a div or apex:outputpanel (with layout set to block). Give that container a height. Invoke the plugin on the table either by class or id. So if my pageblock tables had the styleClass of ‘floatingHeaderTable’ I could invoke it this way.
<script>
$(document).ready(function() {
$('.floatingHeaderTable').vfFloatingHeaders();
});
</script>
and that’s it. You are good to go. Here is a full sample page.
Visualforce Page<apex:page controller="floatingHeadersController">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="{!URLFOR($Resource.jquery_vfFloatingHeaders)}"></script>
<style>
.tableContainer
{
height:290px;
width: 100%;
overflow: auto;
}
.floatingStyle
{
position:relative;
}
</style>
<script>
$(document).ready(function() {
$('.floatingHeaderTable').vfFloatingHeaders();
});
</script>
<apex:pageBlock >
<apex:outputPanel styleClass="tableContainer" layout="block">
<apex:pageBlockTable value="{!contactList}" var="item" title="Contact List" styleclass="floatingHeaderTable" >
<apex:column value="{!item.firstname}"/>
<apex:column value="{!item.lastname}"/>
<apex:column value="{!item.email}"/>
<apex:column value="{!item.phone}"/>
</apex:pageBlockTable>
</apex:outputPanel>
</apex:pageBlock>
</apex:page>
Apex Class
public class floatingHeadersController
{
public list<contact> contactList
{
get
{
if (contactList == null)
{
contactList = [select firstname, lastname, email, phone from contact];
}
return contactList;
}
set;
}
}
Also, I would like to give credit to a blog which helped me immensely with the technique for getting the headers to float properly. http://rajputyh.blogspot.com/2011/12/floatingfixed-table-header-in-html-page.html I just wrapped it up and modified it a bit to work with pageblocktables and packaged it into a plugin.
Share on Twitter
Share on Facebook
Share on LinkedIn
App of the Month