+ Start a Discussion
ajithajith 

Freezing column header in a apex pageblocktable with a scrollbar.

Hi all

I have used a pageblocktable in my visualforce page and applied a scrollbar for that by using ouputpanel styleClass but this applies a scroll for the entire table where as i whant to freeze my table header and apply scroll for only the data part how can i do that.

here is my code:

<apex:page Controller="mycontroller">
<style>
.container
{
   overflow:auto;  
   height:50px;  
   align:bottom;
}
</style>
     <apex:form >
        <apex:pageBlock title="My Content" mode="edit">
           <apex:pageBlockSection title="My Content Section" columns="1"   > 
               <apex:outputPanel layout="block" styleClass="container"  >           
                <apex:pageBlockTable value="{!temp}" var="item" align="top" width="100%" columns="10" >
                    <apex:column value="{!item.password__c}" ></apex:column>
                    <apex:column value="{!item.password__c}"></apex:column>  
                    <apex:column value="{!item.password__c}"></apex:column> 
                    <apex:column value="{!item.password__c}"></apex:column> 
                    <apex:column value="{!item.password__c}"></apex:column> 
                    <apex:column value="{!item.password__c}"></apex:column>
                    <apex:column value="{!item.password__c}"></apex:column>                      
                </apex:pageBlockTable>
             </apex:outputPanel>           
            </apex:pageBlockSection>
         </apex:pageBlock>
    </apex:form>
</apex:page>

 

 

 

ShwetaSShwetaS

Hi,

 

I am afraid there is no direct attribute to accomplish this.
You can use a diferrent row to show the table columns only. And just below that show the entire set of records. Using this approach the scroll bar will appear for records only excluding the column header as they are in different row now.

 

 

Shweta
Salesforce Developer Support

If my answer solved your question, please mark it solved so I can help as many community members as possible!

DroDro

Would this approach require that the column widths be set manually?  Otherwise how would one get the columns to match up?  Similarly, I suppose you'd have to adjust the whole table width to account for the scrollbar?

 

Also, what attributes would I use on the PageBlockTable to show just the header?  With rows="1", I get just one row (plus the header).  With rows="0", the table doesn't show at all.

 

Thanks!

vriavmvriavm

Hi,

 

             If still looking for options please use below ink to achieve:

                   http://jeromebulanadi.wordpress.com/2010/03/22/scrollable-fixed-header-table-a-jquery-plugin/

             I used this in multiple places and it works great...

 

Thanks & Regards,

Vivek V.

Cookie76Cookie76

Dan/Kenji, Senior Developer for Redkite built a solution for this:

http://www.redkitetechnologies.com/2013/03/floatingsticky-headers-for-visualforce-pageblocktable/

 

 

I just tried it out.  Works a treat.

Niz RNiz R
Hi Vivek,

Can you please provide more details like code and steps you followed. it’s not working for me when I tried it.
Thanks in advance.