Primefaces datatable column width does not work

Question

i created a datatable which contains some test data. My problem is that some values are too large for one of my columns, that leads to a weird layout:

(after the order column two other columns should be displayed)

i already tried a few things out:

• <p:column headerText="Orders" width="50"> no changes
• <p:column headerText="Orders" style="max-width: 30px;"> makes the column smaler but the value is cut after 30px
• adding after a few numbers a <br/> to force a breakline, but no changes

The order value is one big string. My goal is to change the orders column to a multiline column where the string value is splitted.

My datatable code:

<h:body>
    <h:head>
    </h:head>
    <h:form id="form">           
        <p:dataTable id="customerTable" var="customer" value="#{customerDataTable.allCustomer}"
         rows="25" paginator="true" emptyMessage="No customer found.">  

                <p:column headerText="Customer ID" style="text-align: center;">  
                <h:outputText value="#{customer.customerNumber}" /> 
                </p:column>

                <p:column headerText="Fist Name" style="text-align: center;">  
                <h:outputText value="#{customer.contactFirstName}" />  
                </p:column> 

                <p:column headerText="Last Name" style="text-align: center;">  
                <h:outputText value="#{customer.contactLastName}" />  
                </p:column> 

                <p:column headerText="Sales Employee Nr." style="text-align: center;">  
                <h:outputText value="#{customer.employee.employeeNumber}" />  
                </p:column> 

                <p:column headerText="Orders">  
                <h:outputText value="#{customer.allOrders}"/>
                </p:column> 


                <p:column headerText="Payments" style="text-align: center;" >
                    <p:commandButton id="payment_btn" update=":form:p_display" oncomplete="paymentDialog.show()" icon="ui-icon-calculator">
                    <f:setPropertyActionListener target="#{customerDataTable.selectedCustomer}" value="#{customer}"/>
                    </p:commandButton>  
                    <p:tooltip for="payment_btn" value="Click to see all payments" showEffect="fade" hideEffect="fade"></p:tooltip>
                </p:column>

                <p:column headerText="Contact Data" style="text-align: center;" >
                    <p:commandButton id="contact_btn" update=":form:c_display" oncomplete="contactDialog.show()" icon="ui-icon-home">
                    <f:setPropertyActionListener target="#{customerDataTable.selectedCustomer}" value="#{customer}"/>
                    </p:commandButton>  
                    <p:tooltip for="contact_btn" value="Click to see the detailed contact data" showEffect="fade" hideEffect="fade"></p:tooltip>
                </p:column>

        </p:dataTable>
    </h:form>    
    </h:body>  

In other threads i found solutions using css but that didn't work either (the reason could be that i dont now how and where the css file and methods should be created).

Answer 1

If you want rows to break you can use CSS. Try adding this to your style

.ui-datatable td,.ui-datatable th {
    white-space: normal;
}

This won't work if there are no blank spaces in your text, because the browser won't know where to break the line, in that case you could make use of the wbr tag, but it's important to say it's not supported by IE

See also:

• http://www.w3schools.com/tags/tag_wbr.asp