How to show 2 line in one column in datatable?

Question

I have a data table in my application. One column have heavy data which increasing the width of table.

I want to split the data to two or more lines in that column.

I have tried by setting width for that column but data did't split and doesn't show total data.

<p:column headerText="#{msgs['exception.label.exceptionMsg']}" width="200">
         <h:outputText value="#{exception.exceptionMsg}"/>
</p:column>

How can i split the data?

Solution 1

The .ui-datatable tbody td has a default style of white-space: nowrap, meaning that long texts won't wrap. You want to override this style by setting it back to white-space: normal.

E.g.

<p:column width="200" styleClass="wrap">

with this CSS

.ui-datatable tbody td.wrap {
    white-space: normal;
}

See also:

• How do I override default PrimeFaces CSS with custom styles?

Solution 2

This is my solution. It's very simple.

<p:column style="white-space : normal ; width: 315px">
    <h:outputText value="T h i s   i s  a  v e r y  L a r g e   T e x t">
    </h:outputText>      
</p:column>

Solution 3

I used the following solution after going through an answer by BalusC to some other related question.

I use this in CSS:

.ui-datatable tbody td.wrap {
    white-space: normal;
    word-wrap: break-word;
}

And this with my columns:

<p:column style="text-align: left" width="38" styleClass="wrap">

This handles data with space and without spaces -both.

Comments

[Mindwin]

+1 for the simple CSS solution. Sometimes its not the JSF or the Java that needs tweaking, its just CSS magic.

[Venkat Maridu]

Thank you BalusC for answer but, Lines are breaking when data have spaces in it. Lines with continuous lines are not breaking. please tell me how to break for continuous lines.

[Venkat Maridu]

I have tried like this <p:column headerText="message" width="50" style="white-space: normal;"> <h:outputText value="#{message.msgHeader}" id="msgHeader"/> </p:column>