'Truncating big text value in p:dataTable and exporting the table with the full text

I am using Primefaces 3.5 with JSF 2 and have a dataTable:

<p:dataTable id="dataTable" var="refType"
        value="#{rtmUiController.listAllRefTypes()}" paginator="true"
        rows="10" filteredValue="#{rtmUiController.filteredRefTypes}"
        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink}
                           {PageLinks} {NextPageLink} {LastPageLink} 
                           {RowsPerPageDropdown}"
        rowsPerPageTemplate="10,25,50,100" resizableColumns="true"
        emptyMessage="No reference type found.">

The table contains the following column with a big text description which is currently truncated inline and displayed next to a link to popup a dialog with the full text:

<p:column filterBy="#{refType.description}" filterMatchMode="contains">
    <f:facet name="header">
        <h:outputText value="Description" />
    </f:facet>
    h:outputText value="#{refType.description.substring(30)}" />
    <p:commandLink id="descriptionLink" value="... (full text)"
                oncomplete="descriptionDialog.show()"
                update=":tabView:form1:descriptionPanel"
                rendered="#{not empty refType.description}">
                <f:setPropertyActionListener value="#{refType.description}"
                    target="#{flash.description}" />
    </p:commandLink>
</p:column>

<p:dialog widgetVar="descriptionDialog" resizable="false"
        header="Reference Type Description">
    <p:panelGrid id="descriptionPanel" columns="1">
        <h:outputText id="description" value="#{flash.description}" />
    </p:panelGrid>
</p:dialog>

The problem now is to export the table with the full text value to PDF or any other format using the standard Primefaces dataExporter functionality from the showcase as it exports only the exact content of the table:

<h:panelGrid>
    <p:panel header="Export Table Data">
        <h:commandLink>
            <p:graphicImage id="pdfImage" value="/resources/images/pdf.png" />
            <p:dataExporter type="pdf" target="dataTable" fileName="refTypes"
                    showEffect="fade" hideEffect="fade" />
            <p:tooltip for="pdfImage" value="Export table data to PDF file"
                    showEffect="fade" hideEffect="fade" />
        </h:commandLink>
    </p:panel>
</h:panelGrid>

Please could anybody advise me:

  1. What is the best approach to truncate the text to display it in dataTable?

  2. And how to export the same table but already with the full text value?

javacssdatatableprimefacesjsf-2


Solution 1:[1]

The pure CSS solution is here: http://ovaraksin.blogspot.com.ar/2012/12/elegant-truncated-text-with-ellipses-in.html

.truncate {
    max-width: 160px;
    width: 160 px\9;
}

.truncate > div {
    width: 160 px\9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    display: block;
    position: absolute;
}

So you need just to set the style on the page:

<p:column headerText="Description" sortBy="#{user.description}" styleClass="truncate">
    <h:outputText id="desc" value="#{user.description}"/>
    <pe:tooltip for="desc" value="#{user.description}"/>
</p:column>

It is not ideal in terms of fluid behavior but it is pretty simple and it works!

Solution 2:[2]

I ported Boris' answer to Primefaces 6.0 and worked out the following snippet

.truncate {
  max-width: 120px;
}

.truncate > span:nth-child(2):not(.ui-icon) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

The CSS selector is more complex, because we want to avoid to style the sort-icon of the column. The corresponding Primefaces example

<p:column headerText="Description" sortBy="#{user.description}" styleClass="truncate">
  <h:outputText id="desc" value="#{user.description}"/>
  <p:tooltip for="desc" value="#{user.description}"/>
</p:column>

Solution 3:[3]

I'm using Primefaces 5.3 and the inline solution for my <p:datatable> went:

<p:column headerText="Category" style="text-overflow: ellipsis; white-space: nowrap;">
    <p:outputLabel value="#{p.category.name}" style="display: inline;"/>
</p:column>

Solution 4:[4]

Try styling your description field, that way you can line-break its content:

<h:outputText id="description" value="#{flash.description}" 
    styleClass="text-word-wrap" />

.text-word-wrap {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Boris
Solution 2 Community
Solution 3
Solution 4 Aritz

Related Questions