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

Vertical

IdYearBrandColor
431f7b461966VolvoWhite
334107d21982VolvoYellow
6e1db9511991VolkswagenYellow
d10ceba62001FordOrange
ef1829421970AudiYellow
790853e01993VolvoMaroon
04132d7c2009BMWWhite
bc9fc4851978JaguarYellow
c48ef5971974FiatRed
74633f851968RenaultYellow
b4b3851a1969FordBlue
adbbf3891966FiatBrown
1d9a6a431980VolkswagenBlue
65df18351989JaguarSilver
12a71cc22007BMWWhite
5ffe30071970BMWBrown
cf9b45952003HondaWhite
cb2519341965MercedesBlue
3e47e6b21962MercedesBlue
e266bc352006BMWWhite
5a79b1ac1961BMWMaroon
01ff13de1987VolvoRed
a970ef061980AudiYellow
7714eb371980FordYellow
f05eaae01986VolkswagenYellow
dfeedb4f1963VolvoOrange
9c7c952d1988VolkswagenOrange
9b0fac552000RenaultWhite
345812082009VolkswagenGreen
8583b78d1976BMWMaroon
1f82d7901983BMWMaroon
3272beac1997HondaWhite
c53be6f91996FiatBlue
0365851b2008HondaYellow
7b8080121966HondaYellow
598933651971BMWMaroon
5a52e6891987FiatGreen
6c2390b11961HondaGreen
8bc8b6b52000HondaBlue
1b01a2751969RenaultSilver
a01caf8a1963VolvoBlue
9a27c7101968MercedesBrown
efd81bf01984VolvoWhite
c413ca251982FiatSilver
69f21b231996VolvoMaroon
8451d3721987MercedesWhite
ca71262c1992RenaultSilver
6fb539f21971VolkswagenBrown
1f2bf13b1987FiatWhite
576ef1031981JaguarSilver

Horizontal

IdYearBrandColor
5b907d611967AudiRed
e9ceca6a1991BMWRed
9a9a20d72000AudiYellow
4d8f78e51990FordYellow
7ca8e7f81965AudiOrange
86e7fc731998MercedesGreen
43cad97d1994FordBlue
acd0c3a31996FiatYellow
44b860db1963RenaultBlue
9eaf40a71986MercedesBrown

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
9d8e8aa11988FordSilver9d8e8aa11988FordSilver9d8e8aa11988FordSilver9d8e8aa11988FordSilver9d8e8aa11988FordSilver
7a3517b81960RenaultBlue7a3517b81960RenaultBlue7a3517b81960RenaultBlue7a3517b81960RenaultBlue7a3517b81960RenaultBlue
a20fe2d71978HondaSilvera20fe2d71978HondaSilvera20fe2d71978HondaSilvera20fe2d71978HondaSilvera20fe2d71978HondaSilver
6846309a2007VolkswagenOrange6846309a2007VolkswagenOrange6846309a2007VolkswagenOrange6846309a2007VolkswagenOrange6846309a2007VolkswagenOrange
5d4a74141965FordBlue5d4a74141965FordBlue5d4a74141965FordBlue5d4a74141965FordBlue5d4a74141965FordBlue
01a599c11969RenaultBrown01a599c11969RenaultBrown01a599c11969RenaultBrown01a599c11969RenaultBrown01a599c11969RenaultBrown
9332abcc1988VolkswagenBrown9332abcc1988VolkswagenBrown9332abcc1988VolkswagenBrown9332abcc1988VolkswagenBrown9332abcc1988VolkswagenBrown
e4f6b7791997FiatMaroone4f6b7791997FiatMaroone4f6b7791997FiatMaroone4f6b7791997FiatMaroone4f6b7791997FiatMaroon
09ce69711986HondaRed09ce69711986HondaRed09ce69711986HondaRed09ce69711986HondaRed09ce69711986HondaRed
07de6cba1991FiatRed07de6cba1991FiatRed07de6cba1991FiatRed07de6cba1991FiatRed07de6cba1991FiatRed
7eb610e01981MercedesBrown7eb610e01981MercedesBrown7eb610e01981MercedesBrown7eb610e01981MercedesBrown7eb610e01981MercedesBrown
9eb339991969BMWBlue9eb339991969BMWBlue9eb339991969BMWBlue9eb339991969BMWBlue9eb339991969BMWBlue
18192f941999RenaultMaroon18192f941999RenaultMaroon18192f941999RenaultMaroon18192f941999RenaultMaroon18192f941999RenaultMaroon
5982fa521978VolkswagenRed5982fa521978VolkswagenRed5982fa521978VolkswagenRed5982fa521978VolkswagenRed5982fa521978VolkswagenRed
ed29c2051966AudiYellowed29c2051966AudiYellowed29c2051966AudiYellowed29c2051966AudiYellowed29c2051966AudiYellow
588cf8bb1995HondaBrown588cf8bb1995HondaBrown588cf8bb1995HondaBrown588cf8bb1995HondaBrown588cf8bb1995HondaBrown
dbd0ecc41967FiatYellowdbd0ecc41967FiatYellowdbd0ecc41967FiatYellowdbd0ecc41967FiatYellowdbd0ecc41967FiatYellow
585849281960RenaultSilver585849281960RenaultSilver585849281960RenaultSilver585849281960RenaultSilver585849281960RenaultSilver
ea476a261960RenaultOrangeea476a261960RenaultOrangeea476a261960RenaultOrangeea476a261960RenaultOrangeea476a261960RenaultOrange
aa2317741971HondaBrownaa2317741971HondaBrownaa2317741971HondaBrownaa2317741971HondaBrownaa2317741971HondaBrown
ba2c2a1e1978JaguarBrownba2c2a1e1978JaguarBrownba2c2a1e1978JaguarBrownba2c2a1e1978JaguarBrownba2c2a1e1978JaguarBrown
f246b1d01968VolvoSilverf246b1d01968VolvoSilverf246b1d01968VolvoSilverf246b1d01968VolvoSilverf246b1d01968VolvoSilver
0fb79d3e2001MercedesBlue0fb79d3e2001MercedesBlue0fb79d3e2001MercedesBlue0fb79d3e2001MercedesBlue0fb79d3e2001MercedesBlue
17a2342f1981FiatGreen17a2342f1981FiatGreen17a2342f1981FiatGreen17a2342f1981FiatGreen17a2342f1981FiatGreen
59a20bbc1987VolvoMaroon59a20bbc1987VolvoMaroon59a20bbc1987VolvoMaroon59a20bbc1987VolvoMaroon59a20bbc1987VolvoMaroon
16208b901962FordOrange16208b901962FordOrange16208b901962FordOrange16208b901962FordOrange16208b901962FordOrange
6025552c1989RenaultRed6025552c1989RenaultRed6025552c1989RenaultRed6025552c1989RenaultRed6025552c1989RenaultRed
8a644b501965FiatYellow8a644b501965FiatYellow8a644b501965FiatYellow8a644b501965FiatYellow8a644b501965FiatYellow
87015a0c1960HondaSilver87015a0c1960HondaSilver87015a0c1960HondaSilver87015a0c1960HondaSilver87015a0c1960HondaSilver
78bbd6642004FordWhite78bbd6642004FordWhite78bbd6642004FordWhite78bbd6642004FordWhite78bbd6642004FordWhite
438ca3a31990RenaultOrange438ca3a31990RenaultOrange438ca3a31990RenaultOrange438ca3a31990RenaultOrange438ca3a31990RenaultOrange
907af3ea2006VolkswagenGreen907af3ea2006VolkswagenGreen907af3ea2006VolkswagenGreen907af3ea2006VolkswagenGreen907af3ea2006VolkswagenGreen
eb368f8c1988JaguarBlackeb368f8c1988JaguarBlackeb368f8c1988JaguarBlackeb368f8c1988JaguarBlackeb368f8c1988JaguarBlack
593e63331980RenaultYellow593e63331980RenaultYellow593e63331980RenaultYellow593e63331980RenaultYellow593e63331980RenaultYellow
d0eb24531976JaguarOranged0eb24531976JaguarOranged0eb24531976JaguarOranged0eb24531976JaguarOranged0eb24531976JaguarOrange
e2155cf71982FordWhitee2155cf71982FordWhitee2155cf71982FordWhitee2155cf71982FordWhitee2155cf71982FordWhite
dce25ec92007FiatMaroondce25ec92007FiatMaroondce25ec92007FiatMaroondce25ec92007FiatMaroondce25ec92007FiatMaroon
c8babdda2009MercedesBlackc8babdda2009MercedesBlackc8babdda2009MercedesBlackc8babdda2009MercedesBlackc8babdda2009MercedesBlack
4321b8661963JaguarWhite4321b8661963JaguarWhite4321b8661963JaguarWhite4321b8661963JaguarWhite4321b8661963JaguarWhite
558a108e2003MercedesOrange558a108e2003MercedesOrange558a108e2003MercedesOrange558a108e2003MercedesOrange558a108e2003MercedesOrange
ab8150461966FordBrownab8150461966FordBrownab8150461966FordBrownab8150461966FordBrownab8150461966FordBrown
cbfaf3251983JaguarBluecbfaf3251983JaguarBluecbfaf3251983JaguarBluecbfaf3251983JaguarBluecbfaf3251983JaguarBlue
3d59c81f2002BMWSilver3d59c81f2002BMWSilver3d59c81f2002BMWSilver3d59c81f2002BMWSilver3d59c81f2002BMWSilver
52741cde1965FordGreen52741cde1965FordGreen52741cde1965FordGreen52741cde1965FordGreen52741cde1965FordGreen
8817c9281978HondaYellow8817c9281978HondaYellow8817c9281978HondaYellow8817c9281978HondaYellow8817c9281978HondaYellow
e16f1b5b2009FordOrangee16f1b5b2009FordOrangee16f1b5b2009FordOrangee16f1b5b2009FordOrangee16f1b5b2009FordOrange
5f614d151961MercedesMaroon5f614d151961MercedesMaroon5f614d151961MercedesMaroon5f614d151961MercedesMaroon5f614d151961MercedesMaroon
fec9a5d52001VolvoRedfec9a5d52001VolvoRedfec9a5d52001VolvoRedfec9a5d52001VolvoRedfec9a5d52001VolvoRed
27d0079b1964AudiMaroon27d0079b1964AudiMaroon27d0079b1964AudiMaroon27d0079b1964AudiMaroon27d0079b1964AudiMaroon
43d88f1b1965MercedesGreen43d88f1b1965MercedesGreen43d88f1b1965MercedesGreen43d88f1b1965MercedesGreen43d88f1b1965MercedesGreen

Frozen Rows

IdYearBrandColor
df1bc91d1963VolkswagenYellow
c51654971982FiatYellow
7c9db4a01991HondaMaroon
79e0dab11973VolvoYellow
68666e491967VolvoMaroon
b6beed6d1969FordYellow
7175a8701962VolvoWhite
ca355dd41988JaguarBlue
03d5a7252005FiatYellow
9dffc2d81989FordSilver
6386cd061993VolkswagenYellow
27fdd1a42003VolkswagenBrown
9dce83ea1988JaguarYellow
f21bda031981RenaultYellow
c17443eb1960JaguarRed
86023eeb1968HondaYellow
dd3506571984VolvoGreen
50dc6f611982JaguarGreen
ec2ec0271973VolkswagenMaroon
fe4fe1301982RenaultGreen
a67cb4ce1970HondaWhite
d039f1db1989AudiMaroon
411294b81990MercedesBlack
1dd7dee01994VolkswagenSilver
d6078a5c2002JaguarWhite
da3b4aed1983RenaultBlack
32be6fee1988FiatRed
1b5ea2a52007FiatRed
fd542d151961VolkswagenGreen
4c6d02e21966FordOrange
9f1f4f551986FiatBrown
f32d0e8b1985VolkswagenBlack
cf6469631992FordMaroon
cad5ae9a1969AudiMaroon
da216c781994AudiSilver
150709b11998JaguarBrown
ed8019231996JaguarOrange
4f5b49901965HondaGreen
f90d512e1969VolvoSilver
74d7c0671966RenaultBrown
0899c4b81971BMWMaroon
658e067d1975AudiOrange
4343664b2004BMWMaroon
353285c01984FiatBrown
986cbc8a1977RenaultBlue
6e6d98902004MercedesGreen
e1e8d9d21996FordMaroon
caaa04d11976AudiBlack
cb86547e2004AudiGreen
1372dc9d1994HondaBrown

Frozen Columns

Id
c5fe5c7e
bac22273
5614944d
ca11ba7f
c7ad7776
9ec90efe
e30ba5f7
3777a3ca
f8dfcbcf
95c69f90
3b6a2a96
437e4c32
73111b4e
63affcd5
38883094
c875219e
ea2d2e7b
75f517f0
3b9d7bea
e454493a
047436aa
76aa0bda
dcc6897e
b545746f
ba1abb55
ca120760
b78a4bb5
8ebf56c3
0e824f36
a1e42b85
f42034b8
b533ae7d
cd01c457
7502b461
49462ce7
78fb95d9
469a19ad
3b02a1aa
c4641593
1e9aabbd
ae2c89e8
30308fd6
f226c5c8
78aceaaa
1df3dac7
0ce7ed9e
56ba94d8
ca59aab1
c32d80c7
c4891ac0
YearBrandColor
2009JaguarBrown
1978VolkswagenOrange
1965VolkswagenBlack
1992JaguarMaroon
1964MercedesBlue
1979AudiBrown
1986JaguarOrange
1982HondaMaroon
1987VolvoRed
1964FiatOrange
1964RenaultYellow
2008FiatMaroon
1991RenaultBlue
2004AudiYellow
1999RenaultSilver
1972JaguarMaroon
1997FiatBlack
1994RenaultGreen
1997BMWBlack
2009VolvoMaroon
1990MercedesSilver
1964AudiMaroon
1978FiatBrown
1978FordRed
1999HondaOrange
1981FordBrown
1986VolkswagenBrown
1984FordGreen
1972JaguarBlack
1965FordBrown
1975MercedesBlue
1961VolkswagenMaroon
1999FiatBlack
1969MercedesSilver
1993MercedesBrown
2002FordMaroon
1985FiatWhite
2007RenaultWhite
1969AudiYellow
1967HondaMaroon
2007AudiBlue
1990BMWGreen
1986FordBrown
2002FordBlue
1999RenaultBrown
1990VolvoBlue
1993MercedesBlack
1998RenaultRed
1997FordRed
2009MercedesMaroon

On-Demand Data

IdYearBrandColor
4838d39b1983HondaSilver
61262a4d2002BMWBlack
ecaf6c532001JaguarRed
285d54d81981AudiGreen
d75157f02000FiatWhite
8f97ba1f1970RenaultWhite
e23c576f1985FordRed
e1f1110c2000HondaBlue
425025fb1974AudiGreen
37a957a62000JaguarRed
dfa189582002JaguarSilver
c0e6c1b01987VolvoBrown
cc806d861966AudiWhite
2e400a4c1975JaguarYellow
335b0f051971MercedesYellow
b9693a781968RenaultBlack
995822cd1964RenaultBrown
0acbe38e2000JaguarBlue
e7bf0fe82000VolvoSilver
7fc264cf1978VolkswagenSilver

Virtual Scrolling - 20000 Rows

IdYearBrandColor
5bd39aac1964RenaultBlack
a9e7c1411966HondaSilver
3f4252351985AudiMaroon
d386812d1983FiatYellow
583084051996JaguarMaroon
a58d003d1998FiatRed
e5932e281976AudiMaroon
822624cd2002JaguarMaroon
b843dcf71979FiatBrown
67cd00901996AudiMaroon
d7e312fd1985JaguarYellow
9a5586591973MercedesWhite
e54324f91986FordMaroon
3957916e1971AudiBlack
30824f091964BMWYellow
03df2b7d1970BMWYellow
5981ab0c1972JaguarRed
565c44841988VolkswagenBrown
65d387f51969MercedesBrown
8b0e455c1978RenaultOrange
282bf81f1962FordWhite
9ae8c4371972BMWBrown
308b9c631981JaguarBlack
a146846b1996BMWMaroon
cd3584b11985VolvoMaroon
762e99a12004AudiGreen
bf0c31741990MercedesWhite
25b94ba92007BMWGreen
f1fa0a542008RenaultGreen
b477663f1971FordWhite
8a39e3102003AudiBlue
334970691972RenaultWhite
b6b085791967BMWMaroon
ddd5734c1960JaguarGreen
8db9bda51984RenaultGreen
f46bbe1d1990VolkswagenBlack
ba4a87631964MercedesGreen
50c7e8b32000HondaMaroon
65dc8c571991HondaBrown
301c73aa2001JaguarYellow
<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.3-SNAPSHOT on Mojarra-2.3.2.