TreeTable - Basic

TreeTable displays hierachical data in tabular format.

Documentation
Document Viewer
NameSizeType
Document Detail
<style type="text/css">
    .ui-treetable table {
        table-layout: fixed
    }
    
    .value {
        font-weight: bold
    }
    
    .ui-dialog table {
        margin-left:auto; 
        margin-right:auto;
    }
</style>


<h:form id="form">
    <p:treeTable value="#{ttBasicView.root}" var="document">
        <f:facet name="header">
            Document Viewer
        </f:facet>
        <p:column headerText="Name">
            <h:outputText value="#{document.name}" />
        </p:column>
        <p:column headerText="Size">
            <h:outputText value="#{document.size}" />
        </p:column>
        <p:column headerText="Type">
            <h:outputText value="#{document.type}" />
        </p:column>
        <p:column style="width:24px">
            <p:commandLink update=":form:documentPanel" oncomplete="PF('documentDialog').show()" title="View Detail" styleClass="ui-icon pi pi-search">
                <f:setPropertyActionListener value="#{document}" target="#{ttBasicView.selectedDocument}" />
            </p:commandLink>
        </p:column>
    </p:treeTable>
    
    <p:dialog id="dialog" header="Document Detail" showEffect="fade" widgetVar="documentDialog" modal="true" resizable="false">
        <p:outputPanel id="documentPanel">
            <p:panelGrid  columns="2" columnClasses="label,value" rendered="#{not empty ttBasicView.selectedDocument}">
                <h:outputLabel for="name" value="Name: " />
                <h:outputText id="name" value="#{ttBasicView.selectedDocument.name}" style="font-weight:bold" />

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

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

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.