Floating/Sticky Headers For Visualforce PageBlockTable

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 Plugin

Upload 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 FacebookTweet about this on TwitterShare on LinkedInShare on Google+Email this to someone

8 thoughts on “Floating/Sticky Headers For Visualforce PageBlockTable

  1. Steve

    Great work – really useful. I’m having trouble making the header stay visible. I have a pageBlock table with column headerValues specified and the header scrolls with the rows. Would you have any idea on how to fix this?

  2. Dan Post author

    Hey Steve, glad you found this useful. Do you happen to have a sample I could look at, or could you post your code? Does it generate any errors? Does it look like the plugin is actually running? You can probably tell by checking the table element in your developer tools and seeing if the table headers got ids.

  3. Steve

    Thanks for the response Dan. I’m using JS exactly as you have done so same version.

    I can’t see how to attach a file so apologies for the crap formatting. First the script:

    .tableContainer
    {
    height:290px;
    width: 100%;
    overflow: auto;
    }
    .floatingStyle
    {
    position:relative;
    }

    $(document).ready(function() {
    $(‘.floatingHeaderTable’).vfFloatingHeaders();
    });

    .clsCenter{
    text-align:center;
    }

    Now the relevant section of the page:

  4. Steve

    If you use a Facet in the column this doesn’t seem to work. The use case is to have a floating header with a selectable list, in my case it’s a wrapped list – not an sObject. I have a facet with inputCheckbox in the first column:

    Using this approach seems to override the floating header.

    Do you have any suggestions how you can have a selectable list with floating header?

    Steve

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>