CODEWITHSUNDEEP
jsfprimefaces
omarbr
omarbr

Reputation: 77

primefaces datatable vertical scroll

How to fit height datatable to container? i want datatable at 100% of layoutUnit container and vertical scroll only rows, not header. With this code, table fit, but vertical scroll all table (rows and header).

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:of="http://omnifaces.org/functions">
<h:head>
</h:head>
<h:body>
    <p:layout id="fullPage" fullPage="true" widgetVar="mainLayout">
        <p:layoutUnit position="north" size="300" closable="false"
            collapsible="true" gutter="0"
            style="padding: 0px; border:0px;border-bottom: 1px solid #EF7C00;border-radius: 0px;">
        </p:layoutUnit>
        <p:layoutUnit position="center" gutter="0"
            style="padding: 5px; border:0px;border-radius: 0px;background: #e9eaed;min-width:900px;"
            id="centerID">
            <p:layout id="layoutCorpoId" style="padding: 0px; border:0px;"
                widgetVar="layoutCorpo">
                <p:layoutUnit id="layoutCorpoWest" position="west" gutter="5"
                    resizable="true" size="30%" collapsible="true" closable="false"
                    styleClass="layoutCorpoWest panelBox">
                    <h:form id="validateFormId">
                        <p:dataTable var="elementVal" value="#{testController.players}"
                            id="dataTableId" rowKey="#{elementVal.playerId}"
                            rowIndexVar="idx" scrollable="true" resizableColumns="true" scrollHeight="100%">
                            <p:column headerText="Name">
                                <h:outputText value="#{elementVal.playerName}" />
                            </p:column>
                            <p:column headerText="Position">
                                <h:outputText value="#{elementVal.playerPosition}" />
                            </p:column>
                            <p:column headerText="Age">
                                <h:outputText value="#{elementVal.playerAge}" />
                            </p:column>
                        </p:dataTable>
                    </h:form>
                </p:layoutUnit>

                <p:layoutUnit id="layoutCorpoCenter" position="center" gutter="0"
                    collapsible="true" styleClass="layoutCorpoCenter panelBox">
                </p:layoutUnit>
            </p:layout>
        </p:layoutUnit>
        <p:layoutUnit gutter="0" id="bottom" position="south" size="300"
            collapsible="true" styleClass="">
        </p:layoutUnit>
    </p:layout>
</h:body>
</html>

I add an immage that represents this: enter image description here

after scroll: enter image description here

pf 5.3

Upvotes: 0

Views: 2311

Answers (1)

Vasil Lukach
Vasil Lukach

Reputation: 3728

You can use stickyHeader attribute of p:dataTable for that purpose. See showcase example:

<p:dataTable var="car" value="#{dtStickyView.cars}" stickyHeader="true">
...
</p:dataTable>

Upvotes: 2

Related Questions