How to change header image of Primefaces Datatable?

Question

i try to change header image of the Primefaces Datatable. Bu t i'm not able to find out exact css class for Datatable header. style class as follows

     .thresholdTableClass.ui-datatable .ui-datatable-header {
      border: 1px solid #bed6f8;
      background: #c6deff url(../img/header-panel.png) repeat-x !important;
      font-weight: bold;
      color: #FFFFFF;
      }

my datatable is

<p:dataTable id="thresholdPanel" var="threshold"
          value="#{target.thresholdVOList}" editable="true"
           rowIndexVar="thresholdRowCntr" styleClass="thresholdTableClass">      
</p:dataTable>

but above values are not effecting my datatable header.

I have tried to to find out the styleclass, but what i found is

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: url("/EdgeApp/javax.faces.resource/images/default.png.xhtml?ln=primefaces-bluesky") repeat-x scroll 0 0 #C6DEFF;
border: 1px solid #BED6F8;
color: #000000;
font-weight: bold;
}

please help.

Magnilex Magnilex · Accepted Answer · 2013-09-05T06:55:06

The primefaces documentation has really good documentation on which classes to applies to which part of each component. For datatable headers, the following styleclass should be overridden:

.ui-datatable-header: Table header

I just verified that adding a background picture works:

.ui-datatable-header {
    background: url(../images/myImage.png)
}

This is the way to do it. Of course you can fine tune your css selector to only let the style apply to tables with certain ids and so on.

Also, this style applies to headers, not columns. In other words you need a header, something like:

<p:dataTable>
    <f:facet name="header">
        <h:outputText value="Header text" />
    </f:facet>
</p:dataTable>

Also note that you don't have to specify the styleclass on the datatable component.

How to change header image of Primefaces Datatable?

3 Answers