CODEWITHSUNDEEP
jsf-2primefaces
Tora
Tora

Reputation: 31

Wrong styling of p:dataTable with f:facet name="header"

I am showing data in a <p:dataTable>, but it shows like this

enter image description here

The view markup is straightforward:

<h:form>
    <p:dataTable id="campaignSummaryTable" var="mout" value="#{campaignSummarySearchRes.summaryList}" height="500" scrollable="true"  >
        <p:column>
            <f:facet name="header"><h:outputText value="Campaign Code"/></f:facet>
            <h:outputText value="#{mout.shortCode}"/>
        </p:column>
        <p:column>
            <f:facet name="header"><h:outputText value="Message"/></f:facet>
            <h:outputText value="#{mout.message}"/>
        </p:column>
        <p:column>
            <f:facet name="header"><h:outputText value="Option 1"/></f:facet>
            <h:outputText value="#{mout.option1}"/>
        </p:column>
        <p:column>
            <f:facet name="header"><h:outputText value="Option 2"/></f:facet>
            <h:outputText value="#{mout.option2}"/>
        </p:column>
        <p:column>
            <f:facet name="header"><h:outputText value="Option 3"/></f:facet>
            <h:outputText value="#{mout.option3}"/>
        </p:column>
        <p:column>
            <f:facet name="header"><h:outputText value="Option 4"/></f:facet>
            <h:outputText value="#{mout.option4}"/>
        </p:column>
        <p:column>
            <f:facet name="header"><h:outputText value="Other"/></f:facet>
            <h:outputText value="#{mout.other}"/>
        </p:column>
    </p:dataTable>                  
</h:form>

How I can solve this issue? The header and the content should have the same column width.

Upvotes: 1

Views: 3541

Answers (2)

spauny
spauny

Reputation: 5096

What version do you use?

You do not have to put a facet in a column; each column has a headerText attribute. Look at this: http://www.primefaces.org/showcase-labs/ui/datatableComplex.jsf.

Upvotes: 0

jk2
jk2

Reputation: 79

Add a style="width:125px" attribute to your columns so they look like this one:

    <p:column headerText="Campaign Code" style="width:125px">
            <h:outputText value="#{mout.shortCode}" />
    </p:column>

I also put the header as an attribute of column. I dont know if thats neccessary, but it looks better.

See also PF Showcase

Upvotes: 1

Related Questions