Oh my god. It's full of code!

Floating/Sticky Headers For Visualforce PageBlockTable

So this is it. This is going to be the definitive guide for how to get some floating headers on your Visualforce page block table. I know there are many approaches, lots of debates about how to do it, but what I’ve got here is likely the best, simplest way to do it. It’s a jQuery plugin that will make the headers of a page block table stick to the top of the tables parent div. Check out a demo here

http://xerointeractive-developer-edition.na9.force.com/partyForce/floatingHeaders

You can download the plugin here.

https://www.box.com/s/lr73ibecfvo4bi0qzzbn

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. So just

<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;
    }
}

I should totally mention that the bulk of this code came from the blog at

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 page block tables since their table headers didn’t originally have ids, and put it into a nifty plugin.

6 responses

  1. I did something similar. http://stackoverflow.com/a/11807628/445594. Good post buddy! As usual its simple and clean solution (compared to stackoverflow one).

    March 5, 2013 at 8:16 pm

  2. Sushil.

    Hi,

    I tried this approach and worked for me in IE and Crome. I am facing issue in Mozilla, the issue is that when I scrolll the table, the data rows get up and hide the Header, means though the header is constant but data rows are going up to the header and thus header is not visible. Please help urgently

    June 27, 2013 at 7:14 am

  3. As others have commented elsewhere, this does not work when the table is set up using column facets. Any ideas on how to make that work?

    September 24, 2013 at 3:17 pm

  4. Aakaash

    Nice post!

    October 11, 2013 at 4:36 am

  5. Anonymous

    It’s not working for me. I have checked the link provided above for demo. Headers are not sticky there too. Can you please check again?

    October 15, 2015 at 8:12 am

  6. Anonymous

    it’s not working, neighter the provided link

    March 17, 2016 at 4:21 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s