DataTable - Scrolling

DataTable supports client and live scrolling. In client mode, whole data is rendered, by enabling liveScroll option data is loaded during scrolling.

Y Scrolling

ModelYearManufacturerColor
124fa6ed1995AudiRed
1e1fe9ed1991AudiYellow
76ec6f5a1987OpelBrown
42ac128b2000OpelSilver
3bea66f11993BMWBlack
98d569ff2001RenaultSilver
d573f2532007AudiBrown
cc1502c31988RenaultBlack
044b53eb1967RenaultGreen
238dcc2e1965BMWWhite
ca5b11921993MercedesRed
43c19b641997ChryslerGreen
dacbefa31988BMWBlack
80b17fd41996BMWOrange
504db3971991FordSilver
63e0cc721991FerrariGreen
890b46a42005FerrariOrange
ed175ac11965AudiMaroon
119f99141998VolkswagenYellow
5497fee31981RenaultYellow
3eb106981980ChryslerSilver
fb298b591971VolkswagenWhite
cfd842081982FerrariGreen
763c52931978RenaultWhite
23c2e70d1971RenaultGreen
e12378491982MercedesWhite
5b344b322004FordRed
1091f62a1997VolkswagenOrange
649104221969RenaultBlue
7787df721998RenaultMaroon
4c2d74dd1978RenaultBrown
e29559fb1970MercedesWhite
dc9c660e1990OpelOrange
738d6f5d2006ChryslerOrange
cbd331e21999MercedesRed
ae9fbb6e1978FerrariBlue
abf539d71972BMWBrown
5bfe86ed1970VolvoWhite
2ce9c3631984FerrariYellow
4b13e74b1995RenaultOrange
0d1914a21961AudiYellow
6c919dc71988AudiBlue
3bf277141960ChryslerOrange
550bc0011985RenaultBrown
21a74f0a2002VolvoOrange
723073492005FerrariRed
0860e98e1981VolvoWhite
861ae1701968VolkswagenMaroon
161f5e5b1976VolkswagenOrange
d002ae471985MercedesOrange

X Scrolling

ModelYearManufacturerColor
3a0177031967BMWMaroon
76bd0c771974FordOrange
e2e9760f1967ChryslerBlue
027a61c31967OpelSilver
54fe99731967FerrariBlack
6b10bdfb1969OpelYellow
8cac2edb1997BMWRed
96b1bf361986ChryslerBrown
c4217fd41998FordRed

XY Scrolling

ModelYearManufacturerColor
124fa6ed1995AudiRed
1e1fe9ed1991AudiYellow
76ec6f5a1987OpelBrown
42ac128b2000OpelSilver
3bea66f11993BMWBlack
98d569ff2001RenaultSilver
d573f2532007AudiBrown
cc1502c31988RenaultBlack
044b53eb1967RenaultGreen
238dcc2e1965BMWWhite
ca5b11921993MercedesRed
43c19b641997ChryslerGreen
dacbefa31988BMWBlack
80b17fd41996BMWOrange
504db3971991FordSilver
63e0cc721991FerrariGreen
890b46a42005FerrariOrange
ed175ac11965AudiMaroon
119f99141998VolkswagenYellow
5497fee31981RenaultYellow
3eb106981980ChryslerSilver
fb298b591971VolkswagenWhite
cfd842081982FerrariGreen
763c52931978RenaultWhite
23c2e70d1971RenaultGreen
e12378491982MercedesWhite
5b344b322004FordRed
1091f62a1997VolkswagenOrange
649104221969RenaultBlue
7787df721998RenaultMaroon
4c2d74dd1978RenaultBrown
e29559fb1970MercedesWhite
dc9c660e1990OpelOrange
738d6f5d2006ChryslerOrange
cbd331e21999MercedesRed
ae9fbb6e1978FerrariBlue
abf539d71972BMWBrown
5bfe86ed1970VolvoWhite
2ce9c3631984FerrariYellow
4b13e74b1995RenaultOrange
0d1914a21961AudiYellow
6c919dc71988AudiBlue
3bf277141960ChryslerOrange
550bc0011985RenaultBrown
21a74f0a2002VolvoOrange
723073492005FerrariRed
0860e98e1981VolvoWhite
861ae1701968VolkswagenMaroon
161f5e5b1976VolkswagenOrange
d002ae471985MercedesOrange

Live Scrolling

ModelYearManufacturerColor
bcda35a01981OpelWhite
b430912d1988ChryslerWhite
51cb5e751996OpelBlue
9548e68c2007RenaultGreen
6f62d7272005VolkswagenRed
fe695b341998MercedesBlue
e5ec27092001OpelBlack
5119de3c2006AudiMaroon
f62dea5e1966FordRed
beb251b02007OpelBrown
17c242fb1992OpelWhite
74aef98e1974RenaultGreen
454c501b1966VolkswagenYellow
23eb86192001BMWMaroon
975b558f1980FordMaroon
b92386591970AudiBlue
cacffec21985OpelMaroon
62c25f8e1974OpelBlue
b73442d81980AudiSilver
bfdd2a222007FerrariYellow

Source

<h:form>

    <h3>Y Scrolling</h3>
    <p:dataTable var="car" value="#{tableBean.cars}" scrollable="true" scrollHeight="150" id="dataTable1">

        <p:column headerText="Model" footerText="Model">
            <h:outputText value="#{car.model}" />
        </p:column>

        <p:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Manufacturer" footerText="Manufacturer">
            <h:outputText value="#{car.manufacturer}" />
        </p:column>

        <p:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>

    </p:dataTable>

    <h3>X Scrolling</h3>
    <p:dataTable var="car" value="#{tableBean.carsSmall}" scrollable="true" scrollWidth="400" id="dataTable2">

        <p:column headerText="Model" footerText="Model">
            <h:outputText value="#{car.model}" />
        </p:column>

        <p:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Manufacturer" footerText="Manufacturer">
            <h:outputText value="#{car.manufacturer}" />
        </p:column>

        <p:column headerText="Color" footerText="Year">
            <h:outputText value="#{car.color}" />
        </p:column>

    </p:dataTable>

    <h3>XY Scrolling</h3>
    <p:dataTable var="car" value="#{tableBean.cars}" scrollable="true" scrollWidth="400" scrollHeight="150" id="dataTable3">

        <p:column headerText="Model" footerText="Model">
            <h:outputText value="#{car.model}" />
        </p:column>

        <p:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Manufacturer" footerText="Manufacturer">
            <h:outputText value="#{car.manufacturer}" />
        </p:column>

        <p:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>

    </p:dataTable>

    <h3>Live Scrolling</h3>
    <p:dataTable var="car" value="#{tableBean.carsLarge}" scrollRows="20"
                    scrollable="true" liveScroll="true" scrollHeight="150" id="dataTable4" >

        <p:column headerText="Model">
            <h:outputText value="#{car.model}" />
        </p:column>

        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Manufacturer">
            <h:outputText value="#{car.manufacturer}" />
        </p:column>

        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>

    </p:dataTable>

</h:form>