DataTable - Scrollable

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

Vertical

IdYearBrandColor
c061bdf51964JaguarOrange
04ef610f1971JaguarBlack
636b992d1998JaguarBlack
2ffce6ae1965VolkswagenWhite
4da8d8e92007HondaRed
234256831971JaguarBlue
5ceb84d01965FordBrown
8970a5b81981JaguarBlue
f49d23ef2009RenaultSilver
fe44a6ec2009AudiBlack
5b83ab532007FiatBrown
e542f1f41990AudiOrange
4a7b734f1960BMWMaroon
5ae8e36b1985VolvoBlue
2651c3022008HondaSilver
c3d200db2008FordSilver
74e7941f1982HondaRed
2b2815b41996BMWYellow
78828e141982RenaultBlack
970fcc761989HondaBrown
b178bacc2009VolvoSilver
101184201980BMWBlack
265306891965AudiWhite
1ad5c2dc1981MercedesBrown
07c39a501999FiatSilver
a01c672d1974MercedesBrown
852376a01965MercedesWhite
22e910371974BMWRed
f3dd543b1987HondaYellow
d5278bbd2003HondaYellow
6c2eb2741971RenaultGreen
1adfd7372009FordWhite
9a872b6e1987AudiYellow
5acbbe871981HondaMaroon
e595f8f21979AudiMaroon
492947e01990FordYellow
2348be001978MercedesRed
9468c7b21996FordYellow
fc4a16be1982FordBlue
6a382f571997MercedesBlue
725462d01994MercedesWhite
b7a912202002VolvoBlue
7887f4452005RenaultBlack
ee5eb6f11972JaguarBlack
3af2e1e51968VolkswagenMaroon
0e6c386c1998RenaultOrange
e0b67c3b2007HondaMaroon
56e4aadf1990BMWSilver
c415cb8c1992RenaultOrange
d593f0901964VolkswagenMaroon

Horizontal

IdYearBrandColor
19dabfe81998FiatWhite
67ad62131977VolvoRed
2dc2a6a01968VolvoSilver
2540610f1997BMWOrange
bbef6c621967FiatRed
c625a61e1976BMWBlack
ca82fa9e1973VolkswagenOrange
7d63a5b41972HondaBlue
eaf43a782009VolkswagenBrown
5397ebaf1988VolkswagenSilver

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
37a20ecf1973BMWGreen37a20ecf1973BMWGreen37a20ecf1973BMWGreen37a20ecf1973BMWGreen37a20ecf1973BMWGreen
5c48d7971998VolkswagenBrown5c48d7971998VolkswagenBrown5c48d7971998VolkswagenBrown5c48d7971998VolkswagenBrown5c48d7971998VolkswagenBrown
53453d5e1971JaguarRed53453d5e1971JaguarRed53453d5e1971JaguarRed53453d5e1971JaguarRed53453d5e1971JaguarRed
db5ef6291968VolvoGreendb5ef6291968VolvoGreendb5ef6291968VolvoGreendb5ef6291968VolvoGreendb5ef6291968VolvoGreen
259ea7e21997AudiGreen259ea7e21997AudiGreen259ea7e21997AudiGreen259ea7e21997AudiGreen259ea7e21997AudiGreen
d557b1281987AudiRedd557b1281987AudiRedd557b1281987AudiRedd557b1281987AudiRedd557b1281987AudiRed
b9a8cb151979RenaultMaroonb9a8cb151979RenaultMaroonb9a8cb151979RenaultMaroonb9a8cb151979RenaultMaroonb9a8cb151979RenaultMaroon
88b660a42004FiatOrange88b660a42004FiatOrange88b660a42004FiatOrange88b660a42004FiatOrange88b660a42004FiatOrange
2a3b02c41970HondaWhite2a3b02c41970HondaWhite2a3b02c41970HondaWhite2a3b02c41970HondaWhite2a3b02c41970HondaWhite
e21647ec2000FiatRede21647ec2000FiatRede21647ec2000FiatRede21647ec2000FiatRede21647ec2000FiatRed
c9d69c991988FiatRedc9d69c991988FiatRedc9d69c991988FiatRedc9d69c991988FiatRedc9d69c991988FiatRed
cd2b496f1982VolvoBluecd2b496f1982VolvoBluecd2b496f1982VolvoBluecd2b496f1982VolvoBluecd2b496f1982VolvoBlue
533330881988VolvoRed533330881988VolvoRed533330881988VolvoRed533330881988VolvoRed533330881988VolvoRed
b06140212003MercedesBlueb06140212003MercedesBlueb06140212003MercedesBlueb06140212003MercedesBlueb06140212003MercedesBlue
b2f87b9c1974BMWGreenb2f87b9c1974BMWGreenb2f87b9c1974BMWGreenb2f87b9c1974BMWGreenb2f87b9c1974BMWGreen
382fc9361961AudiRed382fc9361961AudiRed382fc9361961AudiRed382fc9361961AudiRed382fc9361961AudiRed
a528a69e1973AudiYellowa528a69e1973AudiYellowa528a69e1973AudiYellowa528a69e1973AudiYellowa528a69e1973AudiYellow
0ea2d4841966VolkswagenBlue0ea2d4841966VolkswagenBlue0ea2d4841966VolkswagenBlue0ea2d4841966VolkswagenBlue0ea2d4841966VolkswagenBlue
c8d64d391962HondaOrangec8d64d391962HondaOrangec8d64d391962HondaOrangec8d64d391962HondaOrangec8d64d391962HondaOrange
3bbad5102008VolkswagenBrown3bbad5102008VolkswagenBrown3bbad5102008VolkswagenBrown3bbad5102008VolkswagenBrown3bbad5102008VolkswagenBrown
0ff1fa261988JaguarBlack0ff1fa261988JaguarBlack0ff1fa261988JaguarBlack0ff1fa261988JaguarBlack0ff1fa261988JaguarBlack
2ce89e5e1972JaguarYellow2ce89e5e1972JaguarYellow2ce89e5e1972JaguarYellow2ce89e5e1972JaguarYellow2ce89e5e1972JaguarYellow
a2ee221b1988MercedesGreena2ee221b1988MercedesGreena2ee221b1988MercedesGreena2ee221b1988MercedesGreena2ee221b1988MercedesGreen
b49f69721969RenaultBrownb49f69721969RenaultBrownb49f69721969RenaultBrownb49f69721969RenaultBrownb49f69721969RenaultBrown
fd95a6542001RenaultBlackfd95a6542001RenaultBlackfd95a6542001RenaultBlackfd95a6542001RenaultBlackfd95a6542001RenaultBlack
00f47db81962BMWWhite00f47db81962BMWWhite00f47db81962BMWWhite00f47db81962BMWWhite00f47db81962BMWWhite
f5535bff1988RenaultYellowf5535bff1988RenaultYellowf5535bff1988RenaultYellowf5535bff1988RenaultYellowf5535bff1988RenaultYellow
8eff27352008AudiBrown8eff27352008AudiBrown8eff27352008AudiBrown8eff27352008AudiBrown8eff27352008AudiBrown
5fd454d31997RenaultRed5fd454d31997RenaultRed5fd454d31997RenaultRed5fd454d31997RenaultRed5fd454d31997RenaultRed
f9f1d27d1997MercedesGreenf9f1d27d1997MercedesGreenf9f1d27d1997MercedesGreenf9f1d27d1997MercedesGreenf9f1d27d1997MercedesGreen
53c3f18c2003RenaultRed53c3f18c2003RenaultRed53c3f18c2003RenaultRed53c3f18c2003RenaultRed53c3f18c2003RenaultRed
60b4b2be1970AudiRed60b4b2be1970AudiRed60b4b2be1970AudiRed60b4b2be1970AudiRed60b4b2be1970AudiRed
781d0e911977FordMaroon781d0e911977FordMaroon781d0e911977FordMaroon781d0e911977FordMaroon781d0e911977FordMaroon
c385d3d11973AudiMaroonc385d3d11973AudiMaroonc385d3d11973AudiMaroonc385d3d11973AudiMaroonc385d3d11973AudiMaroon
f4b23ccc2009AudiYellowf4b23ccc2009AudiYellowf4b23ccc2009AudiYellowf4b23ccc2009AudiYellowf4b23ccc2009AudiYellow
07bfeeff1986JaguarMaroon07bfeeff1986JaguarMaroon07bfeeff1986JaguarMaroon07bfeeff1986JaguarMaroon07bfeeff1986JaguarMaroon
83b7f12c2000AudiRed83b7f12c2000AudiRed83b7f12c2000AudiRed83b7f12c2000AudiRed83b7f12c2000AudiRed
0a9743b32001BMWYellow0a9743b32001BMWYellow0a9743b32001BMWYellow0a9743b32001BMWYellow0a9743b32001BMWYellow
3ca363fe1972BMWGreen3ca363fe1972BMWGreen3ca363fe1972BMWGreen3ca363fe1972BMWGreen3ca363fe1972BMWGreen
3aaf5d261993HondaYellow3aaf5d261993HondaYellow3aaf5d261993HondaYellow3aaf5d261993HondaYellow3aaf5d261993HondaYellow
652229221998FordBrown652229221998FordBrown652229221998FordBrown652229221998FordBrown652229221998FordBrown
e6518c8c1985VolkswagenGreene6518c8c1985VolkswagenGreene6518c8c1985VolkswagenGreene6518c8c1985VolkswagenGreene6518c8c1985VolkswagenGreen
6cc45c6c1995HondaBrown6cc45c6c1995HondaBrown6cc45c6c1995HondaBrown6cc45c6c1995HondaBrown6cc45c6c1995HondaBrown
ccf635d62008FordBlueccf635d62008FordBlueccf635d62008FordBlueccf635d62008FordBlueccf635d62008FordBlue
7adbc1db2007FiatBrown7adbc1db2007FiatBrown7adbc1db2007FiatBrown7adbc1db2007FiatBrown7adbc1db2007FiatBrown
d4cca79f2004VolkswagenBlackd4cca79f2004VolkswagenBlackd4cca79f2004VolkswagenBlackd4cca79f2004VolkswagenBlackd4cca79f2004VolkswagenBlack
c86d3d871975MercedesOrangec86d3d871975MercedesOrangec86d3d871975MercedesOrangec86d3d871975MercedesOrangec86d3d871975MercedesOrange
327039dd1985JaguarGreen327039dd1985JaguarGreen327039dd1985JaguarGreen327039dd1985JaguarGreen327039dd1985JaguarGreen
6e2f87181989FordBlack6e2f87181989FordBlack6e2f87181989FordBlack6e2f87181989FordBlack6e2f87181989FordBlack
07db7cb91990MercedesRed07db7cb91990MercedesRed07db7cb91990MercedesRed07db7cb91990MercedesRed07db7cb91990MercedesRed

Frozen Rows

IdYearBrandColor
16984b501970JaguarBrown
055792662009VolvoBrown
354c11b52005VolvoRed
7d75482a1960MercedesOrange
5f3acc611996JaguarBrown
a640ec852003BMWOrange
182003e21996AudiWhite
ccf67d8a2001VolkswagenYellow
5eaa9ef71979BMWRed
327e825f1997FordYellow
0f6f2abb1960FiatMaroon
85cba6aa1967VolvoOrange
95bec3302001JaguarGreen
6d5064161987FordWhite
509e321d1968BMWBlack
4e74353e1974AudiSilver
0fae9cac1993AudiBlack
341e06ad1997VolkswagenYellow
277b8d791999JaguarBrown
d2be56111991BMWGreen
42f09f771978JaguarGreen
3919251f1980RenaultOrange
1c7b56281966VolvoOrange
a94dfb2c2007HondaYellow
9a1d50901963JaguarGreen
47f000241981FiatGreen
908b75de1982JaguarBlack
4a38ff191976BMWYellow
705caad42002HondaBrown
d81083d81963JaguarBlack
d6a675332003HondaRed
cc0e199b1964FiatBlue
ca45854d1992FordSilver
aaf5a47e2008RenaultRed
8b652a941969VolvoRed
199a57b91962HondaMaroon
4edbbfb91963BMWBlack
6d1da3c11972FiatWhite
a95a99ab1990VolvoMaroon
216be1971988RenaultGreen
3870cafc1973VolkswagenSilver
e97e0afc1985VolkswagenBlue
2ab88d231973FiatYellow
da8fa4431960VolkswagenOrange
8fd0abc91982JaguarWhite
6da90fab1977BMWBlack
d53c30ca1980VolvoGreen
4f00abcc1973FiatOrange
078714941976AudiBlue
09c4f1891991HondaGreen

Frozen Columns

Id
169b205b
9955be53
e02529a1
047d5a60
ffc47bff
20d66869
2ebd0069
8c8c0cf1
589ce2f9
f435d2a6
0e926dd1
31434051
cf93c524
3f312097
9c57d34a
6ff72126
ff8a977d
fb3dbc4a
4dc92493
63ae9546
fea7a033
1bd5dc49
174ab4f5
68566e24
04b73d3d
6ad7a2ed
df19e41f
b2a53584
2242fc17
c5bb7a29
47fd5656
7404f8d1
13fb244a
19593d8b
82822029
848f4c82
5b3e382c
a402c6c7
de3cf5c7
bba1ec51
d7c117b3
ba79517c
a00db6a3
7f18e4b1
757fef4f
170bb7d2
38f9501c
5ce92cb5
40e99fcc
20d60532
YearBrandColor
1965FiatBlue
1982MercedesGreen
1999MercedesWhite
1971HondaBrown
1984RenaultMaroon
1982MercedesWhite
2005VolkswagenGreen
1977VolvoOrange
1963RenaultOrange
1989FordBlue
1963JaguarMaroon
1972BMWMaroon
1985BMWYellow
1999HondaBlack
2002RenaultGreen
1977JaguarMaroon
1992FiatBlue
1994FiatRed
1991BMWOrange
2001VolvoYellow
1968VolkswagenSilver
1987AudiBlue
1970JaguarOrange
1990FordRed
2009FordBlack
2007AudiBlue
1965HondaBlue
1988HondaBlue
1988FiatBrown
1969JaguarWhite
1979JaguarRed
1990MercedesSilver
1967MercedesWhite
1966AudiSilver
1969RenaultMaroon
1971FiatSilver
1987FiatRed
1960MercedesMaroon
2007AudiWhite
1981FiatRed
1998AudiYellow
1986HondaOrange
1961HondaYellow
1971RenaultMaroon
2006AudiGreen
1960JaguarWhite
1993VolvoOrange
2008FiatYellow
1988FordBrown
1996HondaOrange

On-Demand Data

IdYearBrandColor
690a8da31974VolkswagenMaroon
7ee46a761991RenaultOrange
fe6260881968MercedesOrange
975551d22005RenaultRed
03f559031984BMWGreen
d9c049c11992MercedesMaroon
3c5f49de2008BMWWhite
afab297c2001VolvoOrange
bd95f6971967AudiOrange
7c102aa21989BMWOrange
9d1ada1b1962RenaultBrown
977b97172005HondaWhite
422284861985VolvoMaroon
1acf61de1987HondaOrange
cbb4e5751968AudiBlack
3cd3c7c61980AudiRed
6d46e5ef1964VolvoMaroon
7eb93cfd2003VolkswagenSilver
3c9382a91983VolvoWhite
c8aea4182007VolkswagenBrown

Virtual Scrolling - 20000 Rows

IdYearBrandColor
bf45d03d1963BMWYellow
bb6d2d291979FordSilver
1ed701961967VolvoBlack
dd4a18631988JaguarMaroon
67dd476a1965BMWGreen
f79243652006AudiBrown
c2ffdfd11966FordBlue
33b8489d1980FordBrown
f58d4ac71974FiatBlue
14747b792003FordWhite
45f01e0f1964FordRed
6d4d71712001RenaultBlue
fd03c65b1991FordRed
36d596ed1970BMWGreen
cf8992b71963MercedesSilver
82376a321973JaguarSilver
161d4f361990HondaWhite
251e8f162009JaguarMaroon
5e545a912000BMWWhite
e503fa401973BMWBrown
2dbf20762003FiatSilver
2b66f1b81992AudiOrange
bec484231977VolvoYellow
c4478a211973AudiBlue
b0e1dfeb2007VolvoRed
7d0970a91980FiatGreen
49c81e6e2004RenaultBlack
6af7db562005JaguarBrown
6569468d2009FiatOrange
d4350ed21990BMWBlack
744a63401961MercedesYellow
344d75581961RenaultBlue
09fe4d9f1983JaguarMaroon
1a11cbc91989AudiBrown
27fd80261967HondaOrange
016d4c151987HondaBlack
d6356dbc1989JaguarBlue
7f6612961989BMWRed
10ffbe1f2001RenaultOrange
e21ba8a51975VolkswagenMaroon
<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>