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=""


<h2>Expandable Datatable</h2>
    <h:form id="jsfexample">
        <p:panelGrid columns="2">
            <f:facet name="header">  
                Basic PanelGrid  
            <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="#{}" update="mydata"
                value="Save" icon="ui-icon-check" style="margin:0" />

            <h:messages />


        <p:dataTable value="#{manager.cacheList}" var="item" id="mydata">
            <p:column style="width:16px">
                <p:rowToggler />
            <p:column style="width:150px">

                <f:facet name="header">Key</f:facet>
                <h:outputText value="#{item.key}" />

            <p:column style="width:150px">

                <f:facet name="header">Value</f:facet>
                <h:outputText value="#{item.value}" />

                <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="#{}" />


Here's a snaphost of it:

primefaces datatable tutorial

© 2020 All Rights Reserved.

Please publish modules in offcanvas position.