CODEWITHSUNDEEP
cssjsfjsf-2primefaces
vr3w3c9
vr3w3c9

Reputation: 1178

Applying styles to Header in p:datatable

I would like to know how to apply the styles for the header column in the primefaces Datatable. I was able to change the styles for the rows using the rowStyleClass attribute. But not sure, how to change the style for the header columns. A sample example would be really helpful. I have tried the below, but the style for the entire column seems to get changed 

 <p:column id="SelectallID" headerText="Select ID" style="text-align:center; background-color:#C6C3C6;padding:12px;">
 <h:outputText>
 <h:selectBooleanCheckbox id="checkbox2"  value="#{car.selected}"/>
 </h:outputText>
 </p:column>

when I use the above, the entire column style seems to get changed. But I want to change the style for only the header columns. Please Assist. Thanks in Advance.

Upvotes: 9

Views: 59855

Answers (3)

eddie
eddie

Reputation: 33

You can target the table header of all <p:dataTable> with the following code:

.ui-datatable thead th {
    background-image: none !important;
    background-color: var(--primary-color) !important;
    color: var(--secondary-color) !important;
}

You may need to use !important to override inherited properties

EDIT: I agree with @Kukeltje's comment about avoiding the usage of !important, which results in the logic used by the accepted answer.

.reskinned-datatable th {
    background-image: none;
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

Upvotes: 2

druiz
druiz

Reputation: 125

I know this is old but just in case someone else finds it:

You can create a p:dataTable with a p:columnGroup like this:

<p:dataTable id="example" value="#{bean.values}" var="value">
    <p:columnGroup type="header">
      <p:column headerText="column1" />
      <p:column headerText="column2" styleClass="text-left"/>
      <p:column headerText="column3" styleClass="text-left"/>
    </p:columnGroup>
    <p:column>#{value.val1}</p:column>
    <p:column>#{value.val2}</p:column>
    <p:column>#{value.val3}</p:column>
</p:dataTable>

The style in the columnGroup will affect the headers <th> and the style in the rest of the columns will affect the <td>

I hope this helps.

Upvotes: 2

Matt Handy
Matt Handy

Reputation: 30025

Primefaces datatable headers generate a html <th> element. You could use an element selector in your style definition:

th {
  color: red !important;
}

This will for instance change the font color of all <th> elements on the page.

If this selection is not specific enough for your purposes, you can combine it with the id of the datatable:

#review-table th {
  color: red;
}

Upvotes: 13

Related Questions