Centering output text in a primefaces datatable column

1
votes

I have been scouring resources for a couple of hours trying to find a working solution to what I think is a simple problem: How to center output text in individual columns of a primefaces datatable?

Everywhere I look says to surround the column with a <div> tag, which really seems odd and inefficient to me. Lots of places say to use style="center", which doesn't work. Even the example given at primefaces.org extensions showcase shows this doesn't work, where they have:

 <p:column filterBy="#{message.country}">  
      <f:facet name="header">  
         <h:outputText value="Country" />  
      </f:facet>  
         <h:outputText value="#{message.country}" style="center"/>  
 </p:column>

Yet the data for country is aligned to the left.

In order to center the text in the column:

<p:column headerText="Last Name">
    <h:outputText value="#{item.lastName}" />
</p:column>

Is this:

<p:column headerText="Last Name">
    <div align="center">
        <h:outputText value="#{item.lastName}" />
    </div>
</p:column>

the only way?

1
cssjsfprimefaces

1 Answers

6
votes

You can define styleClass attribute for p:column element and then use css to set the proper style.

<p:column headerText="Last Name" styleClass="centeredColumnContent">
    <h:outputText value="#{item.lastName}" />
</p:column>

and the in your css 

td.centeredColumnContent{
    text-align: center;
}