CODEWITHSUNDEEP
primefacesdatatablewidth
dontcare
dontcare

Reputation: 975

Primefaces datatable column width does not work

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:

enter image description here

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

i already tried a few things out:

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).

Upvotes: 5

Views: 8781

Answers (2)

Ekici
Ekici

Reputation: 9

try adding this to datatable scrollable="true" it worked.

Upvotes: 0

Rodrigo Sasaki
Rodrigo Sasaki

Reputation: 7226

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:

Upvotes: 6

Related Questions