function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

How do I hide the header for pageBlockTable?

Is it possible to hide the header of the pageBlockTable component? If not, is there a way to add a inputText component to the header? I tried add the inputText and a commandButton to the header and only the commandButton is displayed on the screen. I also tried using the headerClass property to set the header to visibility:hidden but this also did not work.


<apex:page controller="MyController" >
<apex:form >

.header { visibility:hidden; }

<apex:pageblock >

<apex:tabPanel id="tabPanel">
    <apex:tab id="tab1" label="Label 1">
        <apex:pageBlockTable id="table"  value="{!Users}" var="user" width="100%">
            <apex:column >
                <apex:facet name="header">
                    <apex:inputText id="searchText"/><apex:commandButton id="doSearch" value="Search"/>
                <apex:outputText value="{!user.FirstName}"/>&nbsp;<apex:outputText value="{!user.LastName}"/>
    <apex:tab id="tab2" label="Label 2"></apex:tab>
    <apex:tab id="tab3" label="Label 3"></apex:tab>






Try the below code snippet as reference for hiding the header of the page block table:

----------- Vf page----------------

<apex:page id="page" controller="pageblocktablecolumn" >

<apex:form id="frm" >

<apex:tabPanel id="tabpanel1" switchType="client" selectedTab="name2" >

    <apex:tab label="One" name="name1" id="tabOne">

         <apex:pageBlock id="pageblock" >


     <apex:pageBlockTable id="pgtable" value="{!con}" var="cc" >

     <Apex:column ><apex:facet name="header">

     <apex:outputPanel ><apex:inputtext /><apex:commandButton value="txt"/></Apex:outputPanel>

     </apex:facet> {!}</apex:column>










    <apex:tab label="Two" name="name2" id="tabTwo">content for tab two</apex:tab>






var hide= true;

function hideRows(tableId){

var t = document.getElementById(tableId);

var len = t.rows.length;

var rowStyle = (hide)? "none":"";

for(i=1 ; i< len; i++){

t.rows[0].style.display = rowStyle;



hideRows('page:frm:pageblock:pgtable'); // Pass complete id of the pageblocktable





--------------- Apex controller-----------------


public class pageblocktablecolumn


public list<contact> con{get;set;}


public pageblocktablecolumn ()


    con=[select id, name from contact limit 1000];




Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 


It seems to me that the id's created for the elements on the page are dynamically generated and that this solution won't always work. Is this the case?


Can I reuse the hideRows function for multiple elements on the same page? At the moment it's not working.


Unfortunately what was a solution is not working in call cases. There must be a better way to solve this problem. Thank you for trying though.

Ben DvorachekBen Dvorachek
This works for me:
.hidden {
display: none;

<apex:pageBlockTable headerClass="hidden">

It sounds like your CSS rule may be getting overriden, you may need to pick a more specific selector. The "header" class may be already in use elsewhere on the page.
Jay SrinvasanJay Srinvasan
I know this a old post.
Replace <apex:pageBlockTable id="table" value="{!Users}" var="user" width="100%">
With <apex:pageBlockTable id="table" value="{!Users}" var="user" width="100%" rendered="{!Users.size > 0}">