hide primefaces table column header

Question

I have a p:treeTable and the tree contents are all in one column. The tree is a shared component so some of my pages require column header and and some don't. In the pages where the columnHeader is empty, it creates the an empty row for the column header, which I don't want. I do want the column contents, just not the header when there is no column header.

How can I fix this? Any pointers/ideas would be great. Thanks!

Answer 1

You can solved that with custom CSS by setting the thead display attribute to none:

Example:

div[id="testForm:first"] thead {
    display:none;
}

if your JSF is similar to this:

<h:form id="testForm">
    <p:dataTable id="first">
        ...
    <p:/dataTable>
</h:form>

Answer 2

If your <p:dataTable> uses columns widths like this

<p:dataTable styleClass="myTable">
   <p:column width="100">

and you use the following CSS to hide the column headers

.myTable thead {
    display:none;
}

you will also lose the column widths you set

---

Solution to hide column header and keep column widths

.myTable thead th { 
    border: none !important; 
    background: none !important; 
}

Answer 3

A more formal solution:

TAG:

<p:treeTable styleClass="tree-table-no-header">

Style:

.tree-table-no-header thead {
    display: none;
}

Answer 4

You may find you need to be more specific with your style selector:

 div[id$="myTableId"]>div>table>thead { display:none; }

This also eliminates the need to reference your form id. The '$' is a starts with wild card and the '>' says select only direct children. See http://www.w3schools.com/cssref/css_selectors.asp for a really good CSS Selector reference.

Answer 5

Hide header (same as other answers):

.hide-table-header thead {
    display: none;
}

... and specify column width:

<p:dataTable styleClass="hide-table-header">
        <p:column style="width: 80px">

These won't work with reflow="true" tables.

For me the border:none, background:none suggestion leaves an empty space above the table and hides the left side border of the table as well.

Answer 6

Add this code to your css3 file

** Remove the header from the dataTable**/
.ui-datatable.borderless thead {
  display: none;
}

/** Remove the border from the dataTable **/
.ui-datatable.borderless tbody,
.ui-datatable.borderless tbody tr,
.ui-datatable.borderless tbody td {
    border-style: none;
    }

Then call this code from the xhtml file like this :

<p:dataTable styleClass="borderless">