TreeTable - Scroll

Both vertical and horizontal scrolling of the data is supported.

Documentation
Vertical
NameSizeType
Documents-Folder
Pictures-Folder
Horizontal
NameSizeType
Vertical and Horizontal
NameSizeType
<style type="text/css">
    .ui-treetable {
        margin-top: 40px
    }
    .ui-treetable table {
        table-layout: fixed
    }
</style>


<h:form>
    <p:treeTable value="#{ttScrollableView.root1}" var="document" style="margin-top:0" scrollable="true" scrollHeight="150">
        <f:facet name="header">
            Vertical
        </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:treeTable value="#{ttScrollableView.root2}" var="document" scrollable="true" scrollWidth="400">
        <f:facet name="header">
            Horizontal
        </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:treeTable value="#{ttScrollableView.root3}" var="document" scrollable="true" scrollHeight="150" scrollWidth="400">
        <f:facet name="header">
            Vertical and Horizontal
        </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>
</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.