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?

Try the `` component and specify `rules=rows` to display lines between each row — kolossus, Feb 15 '13 at 12:51
"split" isn't exactly the right keyword, you don't want to have multiple text components, you need "wrap". — BalusC, Feb 15 '13 at 13:18

score 32 · Accepted Answer · edited May 23 '17 at 12:02

32

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;
}

+1 for the simple CSS solution. Sometimes its not the JSF or the Java that needs tweaking, its just CSS magic. – Mindwin Remember Monica Feb 15 '13 at 13:56
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 Feb 28 '13 at 07:27
I have tried like this – Venkat Maridu Feb 28 '13 at 07:28

score 1 · Answer 2 · edited May 07 '14 at 00:01

1

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>

edited May 07 '14 at 00:01

mmohab

2,303
4
27
43

answered May 06 '14 at 23:36

staverk

61
1
4

score 1 · Answer 3 · answered Jul 08 '14 at 20:15

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.

How to show 2 line in one column in datatable?

3 Answers3

See also:

Linked