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?

Answer 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?

Answer 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>

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