Advertise with us

Search Mastertheboss

Our eBooks

Datatables with PrimeFaces

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:

primefaces datatable tutorial

© 2021 mastertheboss.com. All Rights Reserved.

Please publish modules in offcanvas position.