How do I support scrolling and lock/freeze the header row of a pageBlockTable?

Question

The following example code adds a scrollbar around the table if the number of items results in a table that has a height that is greater than 500px.

<apex:outputPanel layout="block" style="overflow:auto; height:500px;" rendered="{!items.size > 0}">
    <apex:pageBlockTable value="{!items}" var="item" columns="3" width="100%">

        <apex:column headerValue="Name">
            <apex:outputText value="{!item.Name}"/>
        </apex:column> 

        <apex:column headerValue="Count">
            <apex:outputText value="{!item.Count__c}"/>
        </apex:column> 

        <apex:column headerValue="Unit Price">
            <apex:outputText value="{!item.Unit_Price__c}"/>
        </apex:column> 

    </apex:pageBlockTable>
</apex:outputPanel>

The issue is that the table header is inside of the scrolling apex:outputpanel, so as soon as the user scrolls down the header row goes away. I would like the header row to stay locked/frozen in place.

Is there a setting on the pageBlockTable or some other component that I'm just missing to do this or some other way?

Thanks.

Answer 1

I don't believe this is a function provided by Visualforce, however you can probably create the effect you are looking for using CSS and jQuery. I did a search for 'jquery fixed table header' and found lots of plugins, I'm sure one of these could be customized.

Answer 2

While looking for a solution to the same problem I found Floating/Sticky Headers For Visualforce PageBlockTable. It isn't a native solution. Instead it uses CSS and jQuery to create the effect.

Answer 3

You can do this purely with CSS which means you may be able to do it with styleClass attributes on your pageBlockTable. If not, you'll have to use a regular HTML table and a repeat element. Here's the link: Pure CSS Scrollable Table With Fixed Header Row

Answer 4

Are you looking for a Pageblocktable/Visualforce approach / Is it ok if you can go HTML/Jquery way. I used Jquery http://www.tablefixedheader.com/documentation/

The only problem is : You cannot use standard style sheet and header( you will have set them off since the salesforce style sheets messes the stylesheets we load, it would be awesome if someone can help me on how to use standard style sheets and use the css over and not mess the page).

See the code and pic below:

From the link above download the CSS/JS and upload it to static resources and name them Fixed_Header_Css/Fixed_Header (or) whatever you like, but reference the same in your page.

From http://jqueryui.com/ download the Jquery CSS/ Jquery JS and name them Jquery_Latest/Jquery_Latest_css (or) whatever and reference in your code.

<apex:page controller="scrollbar_table" showHeader="false">
<apex:includeScript value="{!URLFOR($Resource.Jquery_Latest)}"/>
<apex:includeScript value="{!URLFOR($Resource.Fixed_Header)}"/>
<apex:stylesheet value="{!URLFOR($Resource.Fixed_Header_Css)}"/>
<apex:stylesheet value="{!URLFOR($Resource.Jquery_Latest_css)}"/>

<script type="text/javascript">
   var j$ = jQuery.noConflict();
    j$(document).ready(function() {
        j$('.fixme').fixheadertable({
            caption : 'My header is fixed !',
             height  : 200
        });
    });
</script>


<table class="fixme">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>XXX</td>
            <td>YYY</td>
            <td>ZZZ</td>
        </tr>
        <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
        </tr>
           <tr>
            <td>XXX</td>
            <td>YYY</td>
            <td>ZZZ</td>
        </tr>
        <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
        </tr>
           <tr>
            <td>XXX</td>
            <td>YYY</td>
            <td>ZZZ</td>
        </tr>
        <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
        </tr>
          <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
        </tr>
          <tr>
            <td>AAA</td>
            <td>BBB</td>
            <td>CCC</td>
        </tr>
    </tbody>
</table>

</apex:page>

Controller:

public class scrollbar_table {

    public List<account> getAccount_val() {
        return [select id,name from account limit 20];
    }

}

Output:

By adjusting the height property in the script tag in the vf page you can control the width of the table and scrollbar.

Answer 5

Try below trick to make it work.

style="display: block;"

A very simple example is as below:

Page

<apex:page controller="Cntl_VfPage" >
    <table border="1" style="width:300px; height:100px;">
        <thead style="display: block;">
            <tr>
                <td style ="width:135px;"><b>Name</b></td>          
                <td style ="width:135px;"><b>Owner</b></td>                
            </tr>
        </thead> 
        <tbody style="display: block; overflow-y: auto; height:100px;">    
            <apex:repeat rendered="{!IF(a.Size > 0 ,true,false)}" value="{!a}" var="a1"> 
                <tr>
                    <td style ="width:150px;">{!a1.name }</td> 
                    <td style ="width:150px;">{!a1.owner.name}</td> 
                </tr>                          
            </apex:repeat>            
        </tbody>
    </table>    
</apex:page>

Controller

public class Cntl_VfPage {
    public Account[] a {set; get;}
    public Cntl_VfPage() {
        a = [select id, name, owner.name from account limit 20];
    }  
}

ScreenShot (with scrollbar)