function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SFDC coderSFDC coder 

How to get fixed headers for page block table?

Hi all i have a scenario where in i am trying to make my header row of the pageblock table fixed can anyone help on this?
below is my code

<apex:page>
<apex:outputPanel id="tablePanel" style="overflow: auto; height: 200px;" layout="block">
   <apex:pageBlockTable value="{!wrapperLst}" var="data" id="table" >
  
    <apex:column headerValue="Action">
    <apex:inputCheckbox value="{!data.isChecked}"/>
    </apex:column>
  
    <apex:column headerValue="Name">
    <apex:facet name="header">
    <apex:commandLink value="Product Name" style="text-decoration:underline" reRender="table" 
       action="{!doSorting}">
     <apex:param assignTo="{!sortParam}" value="name"/>
   </apex:commandLink>
  </apex:facet>
  <apex:outputField value="{!data.prodItem.name}"/>
  </apex:column>
      .......
       ....
</apex:pageBlockTable>
</apex:outputPanel >

</apex:page>

Any help would be appreciated

thanks
Anoop yadavAnoop yadav
Hi,

Check the below kinks.

http://www.redkitetechnologies.com/2013/03/floatingsticky-headers-for-visualforce-pageblocktable/
http://iwritecrappycode.wordpress.com/2013/03/05/floatingsticky-headers-for-visualforce-pageblocktable/
SFDC coderSFDC coder
hi anoop ,

thanks for our reply
well i have checked these links and they have used jquery which i am trying to avoid...is there any other solution thats possible?


thanks
Sumitkumar_ShingaviSumitkumar_Shingavi
You need to inspect outputPanel styles applied by SFDC and over-ride them in your VF.

 
smriti sharan19smriti sharan19
There are couple of ways to fix header in Visualforce.  You can do so using CSS and jQuery.  Use the below code. By adjusting the height property in the script tag in the vf page you can control the width of the table and scrollbar. 
<script type="text/javascript">
   var j$ = jQuery.noConflict();
    j$(document).ready(function() {
        j$('.fixme').fixheadertable({
            caption : 'My header is fixed !',
             height  : 200
        });
    });
</script

Second way is  using below code
       
<tbody style="display: block; overflow-y: auto; height:100px;">    
User-added image

Reference
https://apexfixheader.blogspot.com/