Page 3 of 5
Primefaces dataTable with details popup
If all of your tabular data does not fit in the rows, then you should provide a Master-Detail view of your data. The simplest way to achieve this is by means of a detail popup.
Creating a details popup requires just two tags: a <p:rowExpansion> containing the panel to be displayed and a <p:rowToggler /> which fires the popup. That's all!
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h2>Expandable Datatable</h2>
<h:body>
<h:form id="jsfexample">
<p:panelGrid columns="2">
<f:facet name="header">
Basic PanelGrid
</f:facet>
<h:outputLabel for="key" value="Enter key" />
<p:inputText id="key" value="#{manager.key}" />
<h:outputLabel for="value" value="Enter value" />
<p:inputText id="value" value="#{manager.value}" />
<p:commandButton action="#{manager.save}" update="mydata"
value="Save" icon="ui-icon-check" style="margin:0" />
<h:messages />
</p:panelGrid>
<p:dataTable value="#{manager.cacheList}" var="item" id="mydata">
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:column style="width:150px">
<f:facet name="header">Key</f:facet>
<h:outputText value="#{item.key}" />
</p:column>
<p:column style="width:150px">
<f:facet name="header">Value</f:facet>
<h:outputText value="#{item.value}" />
</p:column>
<p:rowExpansion>
<h:panelGrid id="display" columns="2" cellpadding="4"
style="width:300px;" styleClass="ui-widget-content"
columnClasses="label, value">
<h:outputText value="Extra data:" />
<h:outputText id="extra" value="#{item.random}" />
<h:outputText value="Date:" />
<h:outputText id="date" value="#{item.date}" />
</h:panelGrid>
</p:rowExpansion>
</p:dataTable>
</h:form>
</h:body>
</html>
Here's a snaphost of it:
