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

Vertical

IdYearBrandColor
fd5c13421984HondaBlue
72573c2e1977BMWBlue
211872672008HondaYellow
2b26f04e1981VolvoRed
828a4c1c1995HondaRed
200951d11989VolkswagenOrange
6a288b3f1981MercedesWhite
a7627b6a2003JaguarRed
03e920721999FordYellow
74f0c4d81964VolkswagenBlack
aaf8992f1995JaguarBlack
3c8080811994VolkswagenYellow
ae36d8a71965FordBlack
aced6e6f1990FordSilver
59484a162004MercedesMaroon
7b2798d81985VolkswagenRed
d0975a992004RenaultBlack
fa6ed1511979HondaBlue
d279ec721984JaguarMaroon
9d9375c31963HondaBrown
8a1d7bda1973VolkswagenMaroon
65f5e2201965MercedesBlue
229428061978AudiOrange
b66d73fb1973VolkswagenRed
bb288ba21988VolvoRed
bde9b1f91963RenaultOrange
5a9f9a641986BMWYellow
939f8d9c2006FordBlack
5354630a1977AudiSilver
3b0dbcee1978MercedesSilver
bab62d791989JaguarOrange
e82f85431966JaguarSilver
138fbe8d1984VolkswagenBrown
68f782961992MercedesOrange
d288cbb62006FiatBlue
6c4fec9a1997BMWRed
daed96961998FordWhite
dc4a88511996VolkswagenOrange
0009477f1983FiatBrown
bf88cf2a1971RenaultRed
3794c10f2002JaguarMaroon
8df813671980VolvoBlack
737f8edd1966RenaultRed
293c6cde1971FordBrown
37f0d6ba1987FiatSilver
288fb52b1987FiatWhite
e0bd16e31998VolkswagenMaroon
441a7b331972FiatYellow
c74883e72009MercedesSilver
5b503d631986RenaultBlack

Horizontal

IdYearBrandColor
9ac49cfc1982VolkswagenBlue
732ba8411981RenaultBlack
edb94eca1982VolvoYellow
b0202f472004FordBrown
c92d48d91970HondaBlack
628fe4081978FordGreen
06e822fa1988VolvoBrown
37211a221985AudiBlack
05e21fbb1989FiatOrange
790f9e0c1965MercedesYellow

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
edd7a7361980MercedesMaroonedd7a7361980MercedesMaroonedd7a7361980MercedesMaroonedd7a7361980MercedesMaroonedd7a7361980MercedesMaroon
1cea652f1985MercedesGreen1cea652f1985MercedesGreen1cea652f1985MercedesGreen1cea652f1985MercedesGreen1cea652f1985MercedesGreen
24c0911d1973VolvoMaroon24c0911d1973VolvoMaroon24c0911d1973VolvoMaroon24c0911d1973VolvoMaroon24c0911d1973VolvoMaroon
999168401993AudiBlack999168401993AudiBlack999168401993AudiBlack999168401993AudiBlack999168401993AudiBlack
5ef84d521967JaguarBlack5ef84d521967JaguarBlack5ef84d521967JaguarBlack5ef84d521967JaguarBlack5ef84d521967JaguarBlack
f51851031974HondaBluef51851031974HondaBluef51851031974HondaBluef51851031974HondaBluef51851031974HondaBlue
44e0c2d81997JaguarWhite44e0c2d81997JaguarWhite44e0c2d81997JaguarWhite44e0c2d81997JaguarWhite44e0c2d81997JaguarWhite
bf4a29132005MercedesYellowbf4a29132005MercedesYellowbf4a29132005MercedesYellowbf4a29132005MercedesYellowbf4a29132005MercedesYellow
05e9f2e51977RenaultRed05e9f2e51977RenaultRed05e9f2e51977RenaultRed05e9f2e51977RenaultRed05e9f2e51977RenaultRed
02e86f9a1985FordGreen02e86f9a1985FordGreen02e86f9a1985FordGreen02e86f9a1985FordGreen02e86f9a1985FordGreen
d68a4c0f1979FiatYellowd68a4c0f1979FiatYellowd68a4c0f1979FiatYellowd68a4c0f1979FiatYellowd68a4c0f1979FiatYellow
8f8cf6fb1970VolkswagenSilver8f8cf6fb1970VolkswagenSilver8f8cf6fb1970VolkswagenSilver8f8cf6fb1970VolkswagenSilver8f8cf6fb1970VolkswagenSilver
812886702007RenaultYellow812886702007RenaultYellow812886702007RenaultYellow812886702007RenaultYellow812886702007RenaultYellow
7e814d411991FordYellow7e814d411991FordYellow7e814d411991FordYellow7e814d411991FordYellow7e814d411991FordYellow
ed0cff231985RenaultMarooned0cff231985RenaultMarooned0cff231985RenaultMarooned0cff231985RenaultMarooned0cff231985RenaultMaroon
af25115e2009FiatBrownaf25115e2009FiatBrownaf25115e2009FiatBrownaf25115e2009FiatBrownaf25115e2009FiatBrown
03b68daf1974VolkswagenBlue03b68daf1974VolkswagenBlue03b68daf1974VolkswagenBlue03b68daf1974VolkswagenBlue03b68daf1974VolkswagenBlue
1e7fa5c91988VolkswagenBlue1e7fa5c91988VolkswagenBlue1e7fa5c91988VolkswagenBlue1e7fa5c91988VolkswagenBlue1e7fa5c91988VolkswagenBlue
2604813e1995HondaWhite2604813e1995HondaWhite2604813e1995HondaWhite2604813e1995HondaWhite2604813e1995HondaWhite
b181c3841962BMWSilverb181c3841962BMWSilverb181c3841962BMWSilverb181c3841962BMWSilverb181c3841962BMWSilver
9b64fb581973VolkswagenBrown9b64fb581973VolkswagenBrown9b64fb581973VolkswagenBrown9b64fb581973VolkswagenBrown9b64fb581973VolkswagenBrown
098b50cf2009HondaMaroon098b50cf2009HondaMaroon098b50cf2009HondaMaroon098b50cf2009HondaMaroon098b50cf2009HondaMaroon
d5e8d0981996MercedesOranged5e8d0981996MercedesOranged5e8d0981996MercedesOranged5e8d0981996MercedesOranged5e8d0981996MercedesOrange
decad0421969VolvoOrangedecad0421969VolvoOrangedecad0421969VolvoOrangedecad0421969VolvoOrangedecad0421969VolvoOrange
2716e3cc1986RenaultGreen2716e3cc1986RenaultGreen2716e3cc1986RenaultGreen2716e3cc1986RenaultGreen2716e3cc1986RenaultGreen
c52ac6461995AudiBrownc52ac6461995AudiBrownc52ac6461995AudiBrownc52ac6461995AudiBrownc52ac6461995AudiBrown
440bf8362005RenaultSilver440bf8362005RenaultSilver440bf8362005RenaultSilver440bf8362005RenaultSilver440bf8362005RenaultSilver
a46ad96a2002VolvoBrowna46ad96a2002VolvoBrowna46ad96a2002VolvoBrowna46ad96a2002VolvoBrowna46ad96a2002VolvoBrown
5e5fed8b1962MercedesBlue5e5fed8b1962MercedesBlue5e5fed8b1962MercedesBlue5e5fed8b1962MercedesBlue5e5fed8b1962MercedesBlue
5f70c6351990MercedesOrange5f70c6351990MercedesOrange5f70c6351990MercedesOrange5f70c6351990MercedesOrange5f70c6351990MercedesOrange
444232721972VolkswagenSilver444232721972VolkswagenSilver444232721972VolkswagenSilver444232721972VolkswagenSilver444232721972VolkswagenSilver
72f667342008RenaultBlack72f667342008RenaultBlack72f667342008RenaultBlack72f667342008RenaultBlack72f667342008RenaultBlack
a89809ef2008AudiWhitea89809ef2008AudiWhitea89809ef2008AudiWhitea89809ef2008AudiWhitea89809ef2008AudiWhite
c6f712561966VolkswagenMaroonc6f712561966VolkswagenMaroonc6f712561966VolkswagenMaroonc6f712561966VolkswagenMaroonc6f712561966VolkswagenMaroon
bffba93f2009JaguarMaroonbffba93f2009JaguarMaroonbffba93f2009JaguarMaroonbffba93f2009JaguarMaroonbffba93f2009JaguarMaroon
f56c26b92004VolkswagenGreenf56c26b92004VolkswagenGreenf56c26b92004VolkswagenGreenf56c26b92004VolkswagenGreenf56c26b92004VolkswagenGreen
ef566b881977RenaultWhiteef566b881977RenaultWhiteef566b881977RenaultWhiteef566b881977RenaultWhiteef566b881977RenaultWhite
976c38b11996BMWBlack976c38b11996BMWBlack976c38b11996BMWBlack976c38b11996BMWBlack976c38b11996BMWBlack
5ca451592004BMWBrown5ca451592004BMWBrown5ca451592004BMWBrown5ca451592004BMWBrown5ca451592004BMWBrown
91ae164d1984HondaWhite91ae164d1984HondaWhite91ae164d1984HondaWhite91ae164d1984HondaWhite91ae164d1984HondaWhite
ffc9a26b1965AudiBrownffc9a26b1965AudiBrownffc9a26b1965AudiBrownffc9a26b1965AudiBrownffc9a26b1965AudiBrown
ec4a0a161973HondaBlueec4a0a161973HondaBlueec4a0a161973HondaBlueec4a0a161973HondaBlueec4a0a161973HondaBlue
139ba3b51989FiatOrange139ba3b51989FiatOrange139ba3b51989FiatOrange139ba3b51989FiatOrange139ba3b51989FiatOrange
0f777c5b2002HondaMaroon0f777c5b2002HondaMaroon0f777c5b2002HondaMaroon0f777c5b2002HondaMaroon0f777c5b2002HondaMaroon
02fab5341987FiatRed02fab5341987FiatRed02fab5341987FiatRed02fab5341987FiatRed02fab5341987FiatRed
44c4d4691970MercedesBrown44c4d4691970MercedesBrown44c4d4691970MercedesBrown44c4d4691970MercedesBrown44c4d4691970MercedesBrown
d01854a81970VolkswagenSilverd01854a81970VolkswagenSilverd01854a81970VolkswagenSilverd01854a81970VolkswagenSilverd01854a81970VolkswagenSilver
32bc47b71996VolvoGreen32bc47b71996VolvoGreen32bc47b71996VolvoGreen32bc47b71996VolvoGreen32bc47b71996VolvoGreen
138537ff1977BMWRed138537ff1977BMWRed138537ff1977BMWRed138537ff1977BMWRed138537ff1977BMWRed
f11bf9a61973RenaultBluef11bf9a61973RenaultBluef11bf9a61973RenaultBluef11bf9a61973RenaultBluef11bf9a61973RenaultBlue

Frozen Rows

IdYearBrandColor
075f13991982BMWBlue
dc22ffd31965MercedesMaroon
46dcacc52009VolvoSilver
6409556a1993VolvoYellow
86b99ddd1960HondaRed
08f8d5b01982BMWBlack
bf3cd9051971HondaRed
09c171d81994FiatSilver
4db6f1731968AudiWhite
1f93c3281960VolkswagenMaroon
929c347d1964VolkswagenWhite
3447b5541980FordWhite
9788ca1a1986VolvoBrown
e51531ad1986JaguarOrange
b056f9c71979AudiRed
b432b2131997VolkswagenYellow
ee541a931967RenaultMaroon
1dbb7c261974JaguarBlack
bbdf7ef61963FiatMaroon
725cd9ee1972HondaMaroon
a9449e9b1994FordMaroon
424489f11996FiatBlack
bf7e1c611993VolvoBlack
d7f8160d2004AudiBlack
0173dbaa1990HondaGreen
1d59c0e01964BMWMaroon
6972e6351960AudiBrown
5833aaf81972HondaOrange
5479f9cc2009RenaultRed
9ebb151f1964RenaultMaroon
5e2202ab1965BMWSilver
c7479f841966HondaGreen
2460fcf02002RenaultWhite
fb3c4d141996FiatWhite
e387e8992006AudiOrange
a6716b3b1966MercedesGreen
231445c41960RenaultWhite
176b84bf1994BMWMaroon
4ec6690d1993JaguarSilver
ec54271c1985VolvoMaroon
664eae5f1976JaguarGreen
f5afcf1d1974BMWSilver
27900b4c1996MercedesBrown
1a353f151986MercedesBlue
6b44c36d1973BMWSilver
777a22362003RenaultRed
63d45fd71995BMWSilver
f51cf3831998MercedesOrange
d6b42bbf1965RenaultRed
2979d9cf1965VolvoBlack

Frozen Columns

Id
361d2a55
3fc1092e
e5a47a60
e6004dc5
0829cf3e
054f537c
4f3d8d78
54a22e67
b6e3e5f1
6db93cc0
eb2cebb6
9b476441
d47034f4
0822c920
a2af2f42
4898e0ef
673a9cc3
b40592b1
91665df1
3b905160
f9637bab
a727eff5
6b6ca696
77cdf6f3
a039670a
18585c73
30b73c89
e7f1f8de
b1e816d1
6bbc862e
a8c9de24
2bd5529e
e5419c7e
49f63edb
ea4d4d48
31e16bbe
8772dfaf
47f4036f
a3a6fb04
535e92f7
c096a2fc
e8aae240
2b345ecf
49e8cd33
1df3df98
89a4d889
2b0f690e
16aebb2f
8e5caf48
eba67b2c
YearBrandColor
1992VolvoBlack
1986FordBlue
1968JaguarRed
2001VolkswagenYellow
1964BMWYellow
2007AudiGreen
1999MercedesRed
1965BMWSilver
1976JaguarOrange
1971MercedesBlue
1977AudiSilver
2007VolvoGreen
1993BMWBlack
1991FiatMaroon
1962BMWBlack
1997HondaBlue
1992FiatOrange
1969VolvoOrange
1975VolvoBrown
1961VolkswagenRed
1962BMWGreen
2000RenaultRed
1965FiatBlue
1988JaguarSilver
2007VolkswagenGreen
2001BMWRed
1984BMWSilver
1986VolvoMaroon
1963FordBlack
2004RenaultBlue
1976FiatSilver
2002VolkswagenOrange
1977FordSilver
1989BMWWhite
1963VolkswagenWhite
1986FordRed
1996BMWWhite
1970HondaGreen
1960JaguarBlue
2006VolkswagenOrange
1974AudiBlack
1961HondaGreen
1964JaguarWhite
2006AudiWhite
2009RenaultMaroon
1997MercedesMaroon
1996FordBlue
1962HondaWhite
1974FiatRed
1962RenaultYellow

On-Demand Data

IdYearBrandColor
593f11d01989BMWYellow
49041bcb2007BMWYellow
0e032dee1991AudiBlack
6a05809c1988FordRed
a3a790651990FiatSilver
678d16d22005VolvoSilver
1a9c86a72006VolkswagenMaroon
99612d251991FiatMaroon
760962de1971HondaWhite
9c5aa4421970VolvoYellow
059108301960VolvoBrown
5d54273a1991VolkswagenBlue
f2c48de72007HondaSilver
eb990a111962JaguarSilver
2bf1f9371967FordYellow
9853a40f2005VolkswagenRed
b46fccb01967FiatSilver
5b680bfc2001VolkswagenRed
7e4f0ff81973HondaBrown
93b2dd971967VolvoBlue

Virtual Scrolling - 20000 Rows

IdYearBrandColor
abf1393a1993MercedesRed
b7130d901974HondaYellow
6ed1661c1963BMWRed
cd2443dd1980VolkswagenRed
fd592cd52003HondaSilver
2b3fb12a2003FordMaroon
2dd145782005FiatYellow
1191bb452009MercedesBlack
f8a0250f1968JaguarBlack
eb37ead71960RenaultBlue
1d01f4461985FordSilver
199992e21983MercedesOrange
58bde9442001BMWWhite
f86b12ed1994AudiWhite
93a4c90b1993HondaGreen
fa78009c1963RenaultBlue
a7e9f84c1996VolvoBrown
e82289481970HondaMaroon
7e0cbb821985VolvoMaroon
a3f432e52003FordBlack
ea425f861970FiatOrange
69c28adc1993VolkswagenBlue
efcbc3b21985RenaultBrown
1ad6ea5c2000MercedesYellow
41985dd41976BMWRed
d1f1587d1995RenaultSilver
aa3fdb1c1996VolkswagenBrown
1dab18d21977MercedesOrange
d2bccd791995JaguarMaroon
eb3f844a1991VolvoYellow
2ec9cbc21994BMWRed
c77b867c1979MercedesGreen
a834efc41973RenaultMaroon
bbf751cb1998JaguarWhite
dc12feb01964BMWYellow
f7a70b471963VolvoSilver
e114acf51981VolvoMaroon
9e1466971969VolkswagenRed
cc74d2631981VolkswagenSilver
03b58e5c1962MercedesGreen
<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 © 2017
All rights reserved.
Running PrimeFaces-6.2.RC1 on Mojarra-2.3.2.