How to limit column width in p: dataTable, without line break, keeping one row?

Question

It was hard for me with Primefaces, and SO is my last place to find the answer to the problems.

I have p:dataTable with many columns, so each of them should have a small width. For headers, they look fine, but for data columns, they break into 2 or more rows, which I don't prefer.

I made the width of the first column larger to show what is in the data table. The title text is in order, keeping it on one line. But data columns are bad for me. I prefer them to keep it on the same line. I don't want a line break. Ellipses are preferable, but not necessary.

 <p:dataTable id="searchResultTable" var="searchData" value="#{registerBean.searchDataList}" scrollHeight="200" rowIndexVar="rowIndex" rowKey="#{searchData.model}" selectionMode="single" selection="#{registerBean.selectedSearchData}" paginator="true" rows="10" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="5,10,20" resizableColumns="true"> <p:ajax event="rowSelect" listener="#{registerBean.onSelectedSearchData}"/> <p:column headerText="#{registerBean.getSearchResultHeaderText(0)}" width="30" style="height: 10px; font-size: 8pt;"> <h:outputText value="#{registerBean.getSearchResultText(rowIndex,0)}" /> </p:column> <p:column headerText="#{registerBean.getSearchResultHeaderText(1)}" width="30" style="10px; height: 10px; font-size: 8pt;"> <h:outputText value="#{registerBean.getSearchResultText(rowIndex,1)}" /> </p:column> <p:column headerText="#{registerBean.getSearchResultHeaderText(2)}" width="30" style="10px; height: 10px; font-size: 8pt;"> <h:outputText value="#{registerBean.getSearchResultText(rowIndex,2)}" /> </p:column> 

I used h:outputText for each column. I am not saving h:outputText , any component that I can use with Primefaces may be ok.

Thanks in advance.

Answer 1

I could find a solution. The CSS addition shown below in <p:column/> worked for me. The ellipsis does not work, but there is no feed line, without increasing the height of the line.

 <style type="text/css"> .singleLine { text-wrap:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } </style> 

And do like this:

 <p:column headerText="Something" width="100" styleClass="singleLine" style="height: 10px; font-size: 8pt;"> <h:outputText value="#{something.value}" /> </p:column> 

I hope this helps a few people on this globe.