TreeTable

TreeTable usage is similar to dataTable except data provided must be a root TreeNode instance referring to the root node.

Document Viewer
Name Size Type
Document Detail

Source

<h:form id="form">

    <p:treeTable id="treetable" value="#{documentsController.root}" var="document">
        <f:facet name="header">
            Document Viewer
        </f:facet>

        <p:column style="width:32%">
            <f:facet name="header">
                Name
            </f:facet>
            <h:outputText value="#{document.name}" />
        </p:column>

        <p:column style="width:32%">
            <f:facet name="header">
                Size
            </f:facet>
            <h:outputText value="#{document.size}" />
        </p:column>

        <p:column style="width:32%">
            <f:facet name="header">
                Type
            </f:facet>
            <h:outputText value="#{document.type}" />
        </p:column>

        <p:column style="width:4%">
            <p:commandLink update=":form:documentPanel" oncomplete="PF('documentDialog').show()" title="View Detail" styleClass="ui-icon ui-icon-search">
                <f:setPropertyActionListener value="#{document}" 
                    target="#{documentsController.selectedDocument}" />
            </p:commandLink>
        </p:column>
    </p:treeTable>

    <p:dialog id="dialog" header="Document Detail" showEffect="fade" widgetVar="documentDialog" modal="true">
        <p:outputPanel id="documentPanel">
            <h:panelGrid  columns="2" cellpadding="5" rendered="#{not empty documentsController.selectedDocument}">
                <h:outputLabel for="name" value="Name: " />
                <h:outputText id="name" value="#{documentsController.selectedDocument.name}" style="font-weight:bold" />

                <h:outputLabel for="size" value="Size: " />
                <h:outputText id="size" value="#{documentsController.selectedDocument.size}" style="font-weight:bold" />

                <h:outputLabel for="type" value="Type " />
                <h:outputText id="type" value="#{documentsController.selectedDocument.type}" style="font-weight:bold" />
            </h:panelGrid>
        </p:outputPanel>
    </p:dialog>

</h:form>