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
a94ee02c1979FordMaroon
8019e2581974VolvoSilver
e254fd1a1960MercedesSilver
ff2236ad1963AudiSilver
279402621986ChryslerMaroon
c44a08672000VolkswagenOrange
57cab6be1967VolkswagenOrange
35216e691998OpelYellow
e0091c601983BMWBlue
32eff1bc1990MercedesYellow
c5b881ae1989FordBlue
f35ac6311997RenaultOrange
20b9f4031999FerrariBlack
8d87bc321984OpelSilver
28f5af231965ChryslerOrange
d78006cb1988BMWGreen
83990bb41989OpelRed
9b296aab1972FordBlue
9e0826ad1990FerrariOrange
8730bf7a1964VolvoGreen
fc91bba71968VolkswagenGreen
2a7982261996BMWOrange
3423be3c2005FerrariBrown
fa59cf1e1963MercedesGreen
ca3a60091965VolkswagenOrange
829a09461974RenaultBlue
02d22b9f2001OpelRed
dc432ad11960VolvoYellow
c797cffc1975FerrariBlack
dd5f677b1988FordMaroon
00a51c401997OpelGreen
fb098ae11970FerrariBrown
ee8ed3481967VolvoMaroon
a755188d1969VolkswagenSilver
05bb56331979RenaultRed
a2ddc3bb1968RenaultMaroon
d7ee26d61965MercedesBlue
f55639641990FordWhite
c2f5062f1975ChryslerYellow
95a0f15f2001RenaultBlack
e53181591973VolkswagenMaroon
b2b132741991AudiWhite
d2579f951966RenaultRed
cc3317882002FordBlue
d5fb9e452005FordMaroon
7c8d7dd01981VolvoGreen
456e643b1999FerrariBrown
e1811ee52009OpelBlack
6286ddf11995AudiBlue
d0a239522009VolvoMaroon

X Scrolling

ModelYearManufacturerColor
46e9d5341985FerrariSilver
254384011971VolvoWhite
32d5a84c1988BMWBlue
a1460cdb1995FerrariBlack
9fa729162000FerrariYellow
8797fdcf2001FerrariYellow
54c205f51977ChryslerWhite
989ba44f2001BMWGreen
589bebab1979VolvoMaroon

XY Scrolling

ModelYearManufacturerColor
a94ee02c1979FordMaroon
8019e2581974VolvoSilver
e254fd1a1960MercedesSilver
ff2236ad1963AudiSilver
279402621986ChryslerMaroon
c44a08672000VolkswagenOrange
57cab6be1967VolkswagenOrange
35216e691998OpelYellow
e0091c601983BMWBlue
32eff1bc1990MercedesYellow
c5b881ae1989FordBlue
f35ac6311997RenaultOrange
20b9f4031999FerrariBlack
8d87bc321984OpelSilver
28f5af231965ChryslerOrange
d78006cb1988BMWGreen
83990bb41989OpelRed
9b296aab1972FordBlue
9e0826ad1990FerrariOrange
8730bf7a1964VolvoGreen
fc91bba71968VolkswagenGreen
2a7982261996BMWOrange
3423be3c2005FerrariBrown
fa59cf1e1963MercedesGreen
ca3a60091965VolkswagenOrange
829a09461974RenaultBlue
02d22b9f2001OpelRed
dc432ad11960VolvoYellow
c797cffc1975FerrariBlack
dd5f677b1988FordMaroon
00a51c401997OpelGreen
fb098ae11970FerrariBrown
ee8ed3481967VolvoMaroon
a755188d1969VolkswagenSilver
05bb56331979RenaultRed
a2ddc3bb1968RenaultMaroon
d7ee26d61965MercedesBlue
f55639641990FordWhite
c2f5062f1975ChryslerYellow
95a0f15f2001RenaultBlack
e53181591973VolkswagenMaroon
b2b132741991AudiWhite
d2579f951966RenaultRed
cc3317882002FordBlue
d5fb9e452005FordMaroon
7c8d7dd01981VolvoGreen
456e643b1999FerrariBrown
e1811ee52009OpelBlack
6286ddf11995AudiBlue
d0a239522009VolvoMaroon

Live Scrolling

ModelYearManufacturerColor
a915e9721997FordBlack
3de104731991VolkswagenYellow
6faaacd71996ChryslerBlue
a2e9f5ae1987FordMaroon
d75182a81969FordGreen
0ad83f491994MercedesYellow
72d3df462006VolvoOrange
97b5c17a2001RenaultRed
264a2c881985ChryslerGreen
eaa3f3f92003VolvoSilver
4b45ce301988RenaultWhite
7996da431992FerrariGreen
6592e8521992VolkswagenBrown
b91e08521973OpelRed
8551f38c1986OpelMaroon
23e29e581963BMWBrown
0c2deddc1975VolvoBrown
397de89e1977AudiSilver
8ddc83c71968VolvoGreen
df78c4901989ChryslerBlack

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>