Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

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.

share|improve this question
    
Did u got any way to achieve this.?? –  Arun SFDC Dec 24 '12 at 9:51
    
I have to create a PageBlockTable with freezeHeader and have to freeze firstcolumn. Did you find any jqueryPugin. Can you please share your code if possible. Thank you Suja –  user3182 Jul 1 '13 at 20:35
add comment

4 Answers

up vote 2 down vote accepted

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.

share|improve this answer
    
Thanks, Jon! I was thinking I might have to do that, but wanted to see if there was a VF solution first. –  Peter Knolle Oct 3 '12 at 14:02
    
@PeterKnolle Sorry I couldn't help out more, I'm actually hoping someone comes along with a bit of hidden functionality for this. I did see this as being listed on the SF Ideas pages but it doesn't seem to have been selected for Dev yet. –  Jon Hazan Oct 3 '12 at 14:22
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

enter image description here

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.