TreeTable - ContextMenu

ContextMenu has special integration with TreeTable. Even different menus can be assigned to different node types by matching node types.

Document Viewer
NameSizeType
Document Detail
<style type="text/css">
    .ui-treetable table {
        table-layout: fixed
    }
    
    .value {
        font-weight: bold
    }
</style>


<h:form id="form">            
    <p:treeTable id="docs" value="#{ttContextMenuView.root}" var="document" selectionMode="single" selection="#{ttContextMenuView.selectedNode}">
        <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:treeTable>
    
    <p:contextMenu for="docs">
        <p:menuitem value="View" update="documentPanel" icon="pi pi-search" oncomplete="PF('documentDialog').show()"/>
        <p:menuitem value="Delete" action="#{ttContextMenuView.deleteNode}" update="docs" icon="pi pi-times"/>
    </p:contextMenu>
    
    <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 ttContextMenuView.selectedNode}">
                <h:outputLabel for="name" value="Name: " />
                <h:outputText id="name" value="#{ttContextMenuView.selectedNode.data.name}" style="font-weight:bold" />

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

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