Search code examples
cssprimefacesjsf-2line-breaks

How to put custom content like a linebreak inside p:column header

In my application, I have the following <p:dataTable>:

data table

The 2nd column's header costs too much spaces. Hence, I'd like to put a linebreak between Number of & Sessions and also vertically align the headers of the table. I tried to reduce the width of the column but it didn't automatically result in a linebreak.

Besides, since the header name is retrieved from the l10n.properties file, I also tried to set it as Number of /n Sessions but /n was printed out as a normal string.

UPDATE: I also tried to set the property as Number of <br/> Sessions. However, in the HTML code generated, <br/> disappeared and the table looks exactly the same as above.

I'd be very grateful if you could give me an advice.

Best regards,

Solution

  • First of all, you need to remove the headerText attribute from the column and add a header facet inside it:

    /*  no_of_sessions = Number of &#10; Sessions  */
<p:column ... >
    <f:facet name="header">
        <h:outputText value="#{l10n.no_of_sessions}" 
                  escape="false" style="white-space:pre-line;" />
    </f:facet>
    ...
</p:column>

    The escape="false" is relevant so html is escaped, then you can put anything you want in there. If you just want to style content, this is not needed