DataTable - Scrollable Both vertical and horizontal scrolling of the data is supported with optional frozen rows-columns and on-demand loading features.

Vertical

IdYearBrandColor
29f47d5d1997VolvoBrown
345c10b21975VolvoYellow
e99600231994FiatBlack
f838caf41965FiatOrange
d41492622007FiatYellow
21d070381994FiatBlack
f2806fe41989FiatBlue
1ee07c9c1974MercedesBrown
c86457b51986HondaBlue
ba7fe1bd1974RenaultYellow
9f49c95d1976AudiOrange
f6bde27a1966JaguarBrown
3f98830a2005HondaBrown
dfd32f331983AudiWhite
4e21f7e52003VolvoSilver
8f9c50581995BMWOrange
7bc72c8c1982FiatBrown
c4894eca1974MercedesBlue
92eb9adc1978HondaOrange
b25914d71992RenaultBrown
0b7a73b01991FiatWhite
78bb28941991VolvoBlue
da3714aa1981BMWSilver
ec6bd3891993BMWBrown
de76a6121980AudiGreen
902de47a1987MercedesSilver
7d71593d1978VolvoRed
55c299721975BMWBlack
cc317bd21978JaguarMaroon
36137add1967VolvoGreen
9c6f8a701993AudiBlack
c84d30431988FordYellow
41ea48741973VolkswagenBlue
cd4421761993FordOrange
95e4f21b2005HondaRed
24e1acd91999FiatOrange
a3a67ec52000FiatOrange
cbbc80c31994JaguarBlack
d5c7b6ea1985HondaBlack
e09573582005MercedesYellow
9a497ba92005FiatBrown
7d631e732003HondaGreen
04679af62005VolvoOrange
b73c6f2c1972MercedesBlack
516339f52003JaguarBlack
6370ba221960FordBlack
0566c0041987RenaultSilver
45ca089b1988RenaultYellow
64f2be581973AudiBlack
4d5c74b71996JaguarBlue

Horizontal

IdYearBrandColor
7825094d2002AudiBlack
405126b71981JaguarBlack
0c3b84e61976VolkswagenSilver
a9ddac8f1989VolvoBlack
b5d473011972BMWWhite
115ab7d21989RenaultBlack
90130e761987MercedesRed
c2e2e5121983FiatWhite
a3d719aa1960VolkswagenGreen
6b965c0c2006VolvoRed

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
cf61851b1973JaguarSilvercf61851b1973JaguarSilvercf61851b1973JaguarSilvercf61851b1973JaguarSilvercf61851b1973JaguarSilver
fd5184a41972VolkswagenBrownfd5184a41972VolkswagenBrownfd5184a41972VolkswagenBrownfd5184a41972VolkswagenBrownfd5184a41972VolkswagenBrown
f9440a352008HondaOrangef9440a352008HondaOrangef9440a352008HondaOrangef9440a352008HondaOrangef9440a352008HondaOrange
7942fc8a1985JaguarBlue7942fc8a1985JaguarBlue7942fc8a1985JaguarBlue7942fc8a1985JaguarBlue7942fc8a1985JaguarBlue
c7fbe7cb1998FordWhitec7fbe7cb1998FordWhitec7fbe7cb1998FordWhitec7fbe7cb1998FordWhitec7fbe7cb1998FordWhite
9b7529f61965AudiYellow9b7529f61965AudiYellow9b7529f61965AudiYellow9b7529f61965AudiYellow9b7529f61965AudiYellow
e2e5b0852005VolkswagenBluee2e5b0852005VolkswagenBluee2e5b0852005VolkswagenBluee2e5b0852005VolkswagenBluee2e5b0852005VolkswagenBlue
779288972001HondaWhite779288972001HondaWhite779288972001HondaWhite779288972001HondaWhite779288972001HondaWhite
3c5bcd952000HondaOrange3c5bcd952000HondaOrange3c5bcd952000HondaOrange3c5bcd952000HondaOrange3c5bcd952000HondaOrange
2acfc9521991VolkswagenYellow2acfc9521991VolkswagenYellow2acfc9521991VolkswagenYellow2acfc9521991VolkswagenYellow2acfc9521991VolkswagenYellow
781384371995FordBlack781384371995FordBlack781384371995FordBlack781384371995FordBlack781384371995FordBlack
c9a53f671965MercedesOrangec9a53f671965MercedesOrangec9a53f671965MercedesOrangec9a53f671965MercedesOrangec9a53f671965MercedesOrange
cc61f1bf2008BMWYellowcc61f1bf2008BMWYellowcc61f1bf2008BMWYellowcc61f1bf2008BMWYellowcc61f1bf2008BMWYellow
ddf7b7dd1962RenaultSilverddf7b7dd1962RenaultSilverddf7b7dd1962RenaultSilverddf7b7dd1962RenaultSilverddf7b7dd1962RenaultSilver
0c2e91671989JaguarGreen0c2e91671989JaguarGreen0c2e91671989JaguarGreen0c2e91671989JaguarGreen0c2e91671989JaguarGreen
77fd86341981BMWMaroon77fd86341981BMWMaroon77fd86341981BMWMaroon77fd86341981BMWMaroon77fd86341981BMWMaroon
ec5f378b1993FordGreenec5f378b1993FordGreenec5f378b1993FordGreenec5f378b1993FordGreenec5f378b1993FordGreen
b1c84d0f1997VolkswagenYellowb1c84d0f1997VolkswagenYellowb1c84d0f1997VolkswagenYellowb1c84d0f1997VolkswagenYellowb1c84d0f1997VolkswagenYellow
370734bd2005FiatSilver370734bd2005FiatSilver370734bd2005FiatSilver370734bd2005FiatSilver370734bd2005FiatSilver
25d79cc21965RenaultOrange25d79cc21965RenaultOrange25d79cc21965RenaultOrange25d79cc21965RenaultOrange25d79cc21965RenaultOrange
ff5a562b2001JaguarOrangeff5a562b2001JaguarOrangeff5a562b2001JaguarOrangeff5a562b2001JaguarOrangeff5a562b2001JaguarOrange
c153ff0d1962RenaultGreenc153ff0d1962RenaultGreenc153ff0d1962RenaultGreenc153ff0d1962RenaultGreenc153ff0d1962RenaultGreen
3e3682511978MercedesBlack3e3682511978MercedesBlack3e3682511978MercedesBlack3e3682511978MercedesBlack3e3682511978MercedesBlack
e0e279561966VolkswagenWhitee0e279561966VolkswagenWhitee0e279561966VolkswagenWhitee0e279561966VolkswagenWhitee0e279561966VolkswagenWhite
7d73e62b1977JaguarYellow7d73e62b1977JaguarYellow7d73e62b1977JaguarYellow7d73e62b1977JaguarYellow7d73e62b1977JaguarYellow
f25882fe1976MercedesOrangef25882fe1976MercedesOrangef25882fe1976MercedesOrangef25882fe1976MercedesOrangef25882fe1976MercedesOrange
37c320741967RenaultBrown37c320741967RenaultBrown37c320741967RenaultBrown37c320741967RenaultBrown37c320741967RenaultBrown
07a5a1d31962MercedesGreen07a5a1d31962MercedesGreen07a5a1d31962MercedesGreen07a5a1d31962MercedesGreen07a5a1d31962MercedesGreen
9dce596d2004BMWBlack9dce596d2004BMWBlack9dce596d2004BMWBlack9dce596d2004BMWBlack9dce596d2004BMWBlack
660a650f1993FiatMaroon660a650f1993FiatMaroon660a650f1993FiatMaroon660a650f1993FiatMaroon660a650f1993FiatMaroon
53c99f7e1973FiatRed53c99f7e1973FiatRed53c99f7e1973FiatRed53c99f7e1973FiatRed53c99f7e1973FiatRed
a79207b51982JaguarBluea79207b51982JaguarBluea79207b51982JaguarBluea79207b51982JaguarBluea79207b51982JaguarBlue
7003a4f61962AudiBrown7003a4f61962AudiBrown7003a4f61962AudiBrown7003a4f61962AudiBrown7003a4f61962AudiBrown
ff5399811977MercedesYellowff5399811977MercedesYellowff5399811977MercedesYellowff5399811977MercedesYellowff5399811977MercedesYellow
2ede8c9d1970HondaRed2ede8c9d1970HondaRed2ede8c9d1970HondaRed2ede8c9d1970HondaRed2ede8c9d1970HondaRed
425383d31978MercedesBlack425383d31978MercedesBlack425383d31978MercedesBlack425383d31978MercedesBlack425383d31978MercedesBlack
9c4f14631967BMWWhite9c4f14631967BMWWhite9c4f14631967BMWWhite9c4f14631967BMWWhite9c4f14631967BMWWhite
bc8676eb1992BMWWhitebc8676eb1992BMWWhitebc8676eb1992BMWWhitebc8676eb1992BMWWhitebc8676eb1992BMWWhite
6bee08611963AudiOrange6bee08611963AudiOrange6bee08611963AudiOrange6bee08611963AudiOrange6bee08611963AudiOrange
1fd5ce981991FordSilver1fd5ce981991FordSilver1fd5ce981991FordSilver1fd5ce981991FordSilver1fd5ce981991FordSilver
a54926ac1993JaguarReda54926ac1993JaguarReda54926ac1993JaguarReda54926ac1993JaguarReda54926ac1993JaguarRed
433fdb8a1962HondaRed433fdb8a1962HondaRed433fdb8a1962HondaRed433fdb8a1962HondaRed433fdb8a1962HondaRed
e9b0647b1990VolkswagenGreene9b0647b1990VolkswagenGreene9b0647b1990VolkswagenGreene9b0647b1990VolkswagenGreene9b0647b1990VolkswagenGreen
fb08ec682001MercedesYellowfb08ec682001MercedesYellowfb08ec682001MercedesYellowfb08ec682001MercedesYellowfb08ec682001MercedesYellow
24590ee82006FiatMaroon24590ee82006FiatMaroon24590ee82006FiatMaroon24590ee82006FiatMaroon24590ee82006FiatMaroon
755fc4731984VolvoYellow755fc4731984VolvoYellow755fc4731984VolvoYellow755fc4731984VolvoYellow755fc4731984VolvoYellow
cdd099d52009VolvoMarooncdd099d52009VolvoMarooncdd099d52009VolvoMarooncdd099d52009VolvoMarooncdd099d52009VolvoMaroon
da3de5122000BMWSilverda3de5122000BMWSilverda3de5122000BMWSilverda3de5122000BMWSilverda3de5122000BMWSilver
97eacd5c1980AudiMaroon97eacd5c1980AudiMaroon97eacd5c1980AudiMaroon97eacd5c1980AudiMaroon97eacd5c1980AudiMaroon
40339c121982VolvoWhite40339c121982VolvoWhite40339c121982VolvoWhite40339c121982VolvoWhite40339c121982VolvoWhite

Frozen Rows

IdYearBrandColor
b5ae96ff1972VolkswagenSilver
2926eb491971RenaultMaroon
27fbf3a61977VolkswagenMaroon
0f37a2c41987MercedesOrange
1a8242521970VolvoGreen
9594dd391969JaguarBrown
122096b02007RenaultBlack
48fd1c551964HondaSilver
ed6cceef1976MercedesGreen
9b2aa90d1979FiatWhite
0084dea01997FiatBlue
4bc445991984VolkswagenGreen
78c17ee61998AudiOrange
6be14f501995VolvoBrown
5b84f0b81961BMWMaroon
7ad5435f1979JaguarBlue
1e613baa1978VolvoWhite
c2f166a71995RenaultGreen
c9dc45e72000VolkswagenYellow
3f7f72bf1988AudiWhite
44a9dc711996MercedesWhite
b74437741990RenaultRed
790942e31961JaguarBlack
b81942c01960MercedesOrange
e7d1afbc2009MercedesWhite
ee37d6c71962RenaultOrange
f9d6d5461973FordYellow
088ec3ea1967AudiGreen
94fd1e641974MercedesSilver
21b9e1161988RenaultYellow
cb57fe7a1964MercedesGreen
5cb464881968VolkswagenBlue
3d640aaf2001MercedesRed
4c86a27d1978AudiBrown
16074b341990BMWBlue
f783c3d31995FiatWhite
cd8834831994RenaultYellow
41c87c8a1964AudiOrange
0cb52eff1975HondaGreen
2bae7a1b1983VolvoBrown
ebf99cb01998HondaSilver
0ed6a5501982VolkswagenRed
0a8d54a61962VolkswagenBlack
c08b84ea1961BMWSilver
e7a700c11992FordBlue
85b658931998JaguarSilver
77eec6421990FiatMaroon
f086def91962AudiBlack
c85011f71980AudiSilver
505c90211962VolkswagenBrown

Frozen Columns

Id
7fe79b75
81fcb0d8
94967365
ffdc45bb
3b89c4bc
db2ceda6
fe1cdde3
62bc3752
b5815076
880bcf4f
39d49727
d21ca2a0
26589501
43f0a0c9
bc11c3f2
1a70962b
73c6bec3
6746e689
09a30599
4485b274
50b2f2b0
ccff3e32
754fd50d
6f04ba29
3f83fa52
ed09aa75
ca154028
8ec85ba6
203e2c70
f64b7dee
5481381b
da6d7826
5751eec9
848d0f9a
10d15a4c
de7a7c10
467b4c8b
2079d023
af8cb58b
6b65ad05
2b4bd3ff
dcaf020f
cc3fd031
f6701fec
7ac80fc3
7cd24173
7b48c509
ea932fb9
66b7bc6d
696d085e
YearBrandColor
1976MercedesGreen
1973AudiYellow
1960BMWYellow
1983RenaultWhite
1960JaguarOrange
1960VolvoSilver
1975AudiBlue
1993MercedesBlack
2003AudiWhite
1972MercedesMaroon
1997VolkswagenGreen
1970RenaultMaroon
1988JaguarBrown
1974BMWSilver
1987VolvoBlack
1973VolvoWhite
1997VolkswagenGreen
1966HondaBlue
1974MercedesSilver
2000FiatBlack
1965HondaSilver
1989VolvoWhite
1984HondaYellow
1981FiatBlue
1986RenaultYellow
1967HondaBrown
1966JaguarBlack
1975VolvoOrange
1979VolvoBlack
2006FordYellow
1967HondaBlue
1995BMWYellow
1979VolvoBlue
1978HondaMaroon
1961HondaSilver
1991HondaRed
1996HondaRed
1962VolvoBlue
1964VolkswagenBlack
1983RenaultWhite
1987VolvoBrown
1982VolvoGreen
1974VolvoBlue
1970AudiYellow
1999JaguarWhite
1993FiatRed
2006AudiSilver
1970FiatRed
1969VolkswagenBlue
2000MercedesBlack

On-Demand Data

IdYearBrandColor
db97120b2003AudiSilver
0005f6a61982VolvoGreen
4b7db0d21970FordMaroon
926d1b651971RenaultOrange
66e9f7961968MercedesBlack
2010bc2d1961MercedesSilver
c8ff4ce61980AudiBlack
e9eca96e2003FiatSilver
7db1e3421979AudiBlue
4dda7b6b1973FordMaroon
ed435d621989VolvoRed
354fd4a91998AudiWhite
d61982ec1980MercedesMaroon
7a2c80371967FordBlue
587625b72000HondaGreen
d74813dc1965VolkswagenOrange
265318831974RenaultOrange
c4dc821d1962BMWBlue
c2436e101980FiatGreen
589f36821964FiatBlue

Virtual Scrolling - 20000 Rows

IdYearBrandColor
77bdec5b1967FordOrange
36be05652004MercedesYellow
cd7dbe611965HondaMaroon
ec43f93c1977BMWWhite
743fa2dd1979BMWBrown
ff8ec24d1963AudiYellow
7a0b4d911977RenaultGreen
2c7b8f691971JaguarGreen
6777da2e1966FiatWhite
fa98cdfe1976BMWYellow
f03804761994FiatBrown
59ec94ac1960FiatGreen
24b15f351965JaguarRed
6a2f52fc1991FordSilver
ce9657e41970AudiWhite
74c4dbf21974MercedesBlack
c2f4a8a11981FiatBlue
5d094bc31969VolvoBlue
233804841973FordRed
1457e5b81983AudiMaroon
b08ea0901975VolkswagenMaroon
bbf3ec101985HondaOrange
959dd41c1961FiatBlack
61cb01cf1983MercedesBrown
fa88687b2001MercedesWhite
8ab9bc491988FordWhite
f7ec55d31965VolvoBrown
f5761c301975MercedesYellow
45ad9c8f1974AudiYellow
b640185b1989FiatBrown
645a63de1988VolvoOrange
85c40def1995RenaultBlue
e3535ead1981AudiBlack
33d87d5a1990VolkswagenBrown
cee0535c2008FordYellow
51faba8d1976VolvoSilver
c39720a31977VolkswagenSilver
52840fbb1984FiatRed
80f26e0f2007VolvoBrown
b4aada321960MercedesBlue
<h:form>
    <h3 style="margin-top:0">Vertical</h3>
    <p:dataTable var="car" value="#{dtScrollView.cars1}" scrollable="true" scrollHeight="150">
        <p:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

    <h3>Horizontal</h3>
    <p:dataTable var="car" value="#{dtScrollView.cars2}" scrollable="true" scrollWidth="400">
        <p:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

    <h3>Horizontal and Vertical</h3>
    <p:dataTable var="car" value="#{dtScrollView.cars3}" scrollable="true" scrollWidth="50%" scrollHeight="150">
        <p:column headerText="Id" footerText="Id" width="200">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year" width="200">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand" width="200">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color" width="200">
            <h:outputText value="#{car.color}" />
        </p:column>
        <p:column headerText="Id" footerText="Id" width="200">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year" width="200">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand" width="200">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color" width="200">
            <h:outputText value="#{car.color}" />
        </p:column>
        <p:column headerText="Id" footerText="Id" width="200">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year" width="200">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand" width="200">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color" width="200">
            <h:outputText value="#{car.color}" />
        </p:column>
        <p:column headerText="Id" footerText="Id" width="200">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year" width="200">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand" width="200">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color" width="200">
            <h:outputText value="#{car.color}" />
        </p:column>
        <p:column headerText="Id" footerText="Id" width="200">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year" width="200">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand" width="200">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color" width="200">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

    <h3>Frozen Rows</h3>
    <p:dataTable var="car" value="#{dtScrollView.cars4}" scrollable="true" scrollHeight="150" frozenRows="2">
        <p:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

    <h3>Frozen Columns</h3>
    <p:dataTable var="car" value="#{dtScrollView.cars5}" scrollable="true" scrollHeight="150" scrollWidth="300" frozenColumns="1">
        <p:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

    <h3>On-Demand Data</h3>
    <p:dataTable var="car" value="#{dtScrollView.cars6}" scrollRows="20" scrollable="true" liveScroll="true" scrollHeight="150">
        <p:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>

    <h3>Virtual Scrolling - 20000 Rows</h3>
    <p:dataTable var="car" value="#{dtScrollView.lazyModel}" scrollRows="20" scrollable="true" virtualScroll="true" scrollHeight="200" lazy="true" rows="40" style="margin-bottom:0">
        <p:column headerText="Id" footerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" footerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" footerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" footerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>
</h:form>
                
PrimeTek, Copyright © 2015
All rights reserved.
Running PrimeFaces-6.0.16 on Mojarra-2.2.8.