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

Vertical

IdYearBrandColor
050f82631984RenaultBlue
fbb7f8861987VolkswagenBlue
6ab06a5a1974FiatWhite
25b51adf1978FordRed
633bbb531969JaguarBrown
012b980a1992HondaYellow
24865e2f1973BMWOrange
29de07591990JaguarYellow
30cb5bc71977JaguarGreen
cf920d9f2005RenaultMaroon
63bcb8b81979HondaOrange
6441de371965VolkswagenBlack
832076541993AudiBlue
0878af5f2006VolvoOrange
9638face1964FordSilver
12a6735c1973BMWMaroon
df887d181964VolvoGreen
805b7b001974HondaOrange
327b37fc2002AudiWhite
b96574421963AudiBlack
8e9ed5231972FiatRed
f146597b1974JaguarWhite
a217802c1975FiatOrange
e5c8f66a1961BMWWhite
d99430e71997HondaBlack
3bcd35691966RenaultBlack
925f8cc12004VolkswagenOrange
386fdcbb1979FiatBlack
5e8029d91987JaguarBlue
df61d3101978FordOrange
398b908c1963VolvoOrange
763804c11984AudiSilver
5f634e8d1990JaguarBrown
c59bdc0e1999FiatRed
3078817d1986FiatRed
f343ddf31984HondaWhite
1fb892811982JaguarSilver
c741fba31973BMWRed
2b5854312004VolkswagenSilver
a199ad711964VolvoMaroon
bc864f301972RenaultMaroon
97f9c81b1982AudiGreen
17008d3c1985FordSilver
e418ab441997AudiGreen
78f21be11985HondaGreen
4f1e75731989FiatWhite
3e40f08f2003AudiOrange
5f000dba1979JaguarGreen
b27e53881994HondaMaroon
90e78de31991RenaultBlack

Horizontal

IdYearBrandColor
dc06e4a22007HondaMaroon
3269f5461968RenaultRed
932cf4171987AudiSilver
79eca34d1998FiatRed
7e8517d01997HondaSilver
fd23ae362001VolvoBlue
5568113c1967BMWWhite
06f14e381969MercedesSilver
b0a5ab712003RenaultOrange
8fccbd901984AudiYellow

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
31c3f10b1967FiatBrown31c3f10b1967FiatBrown31c3f10b1967FiatBrown31c3f10b1967FiatBrown31c3f10b1967FiatBrown
83af4f0f1964MercedesYellow83af4f0f1964MercedesYellow83af4f0f1964MercedesYellow83af4f0f1964MercedesYellow83af4f0f1964MercedesYellow
506e39f61996VolkswagenOrange506e39f61996VolkswagenOrange506e39f61996VolkswagenOrange506e39f61996VolkswagenOrange506e39f61996VolkswagenOrange
1c3883d51968VolvoRed1c3883d51968VolvoRed1c3883d51968VolvoRed1c3883d51968VolvoRed1c3883d51968VolvoRed
e3b9b3a41968FordBlacke3b9b3a41968FordBlacke3b9b3a41968FordBlacke3b9b3a41968FordBlacke3b9b3a41968FordBlack
9a98f7a01974VolkswagenSilver9a98f7a01974VolkswagenSilver9a98f7a01974VolkswagenSilver9a98f7a01974VolkswagenSilver9a98f7a01974VolkswagenSilver
6046a46b1974VolkswagenYellow6046a46b1974VolkswagenYellow6046a46b1974VolkswagenYellow6046a46b1974VolkswagenYellow6046a46b1974VolkswagenYellow
2819a1481999VolvoOrange2819a1481999VolvoOrange2819a1481999VolvoOrange2819a1481999VolvoOrange2819a1481999VolvoOrange
3f0a6f5d2000RenaultRed3f0a6f5d2000RenaultRed3f0a6f5d2000RenaultRed3f0a6f5d2000RenaultRed3f0a6f5d2000RenaultRed
3533bf2a1961AudiRed3533bf2a1961AudiRed3533bf2a1961AudiRed3533bf2a1961AudiRed3533bf2a1961AudiRed
048efa631971FiatRed048efa631971FiatRed048efa631971FiatRed048efa631971FiatRed048efa631971FiatRed
ecc3ef561989MercedesBlackecc3ef561989MercedesBlackecc3ef561989MercedesBlackecc3ef561989MercedesBlackecc3ef561989MercedesBlack
a13929851963VolvoWhitea13929851963VolvoWhitea13929851963VolvoWhitea13929851963VolvoWhitea13929851963VolvoWhite
8a4b3d511981HondaBlack8a4b3d511981HondaBlack8a4b3d511981HondaBlack8a4b3d511981HondaBlack8a4b3d511981HondaBlack
4162572a1978AudiSilver4162572a1978AudiSilver4162572a1978AudiSilver4162572a1978AudiSilver4162572a1978AudiSilver
a3536ebc1978FordYellowa3536ebc1978FordYellowa3536ebc1978FordYellowa3536ebc1978FordYellowa3536ebc1978FordYellow
aaee64791998HondaYellowaaee64791998HondaYellowaaee64791998HondaYellowaaee64791998HondaYellowaaee64791998HondaYellow
9316107c1998FiatMaroon9316107c1998FiatMaroon9316107c1998FiatMaroon9316107c1998FiatMaroon9316107c1998FiatMaroon
79a72a391962JaguarMaroon79a72a391962JaguarMaroon79a72a391962JaguarMaroon79a72a391962JaguarMaroon79a72a391962JaguarMaroon
5e2298a71994BMWSilver5e2298a71994BMWSilver5e2298a71994BMWSilver5e2298a71994BMWSilver5e2298a71994BMWSilver
6dcb1f422000HondaOrange6dcb1f422000HondaOrange6dcb1f422000HondaOrange6dcb1f422000HondaOrange6dcb1f422000HondaOrange
f266918a1970JaguarBrownf266918a1970JaguarBrownf266918a1970JaguarBrownf266918a1970JaguarBrownf266918a1970JaguarBrown
b15061b81967VolvoBlueb15061b81967VolvoBlueb15061b81967VolvoBlueb15061b81967VolvoBlueb15061b81967VolvoBlue
35bb13871980FordBrown35bb13871980FordBrown35bb13871980FordBrown35bb13871980FordBrown35bb13871980FordBrown
9b507aa61963AudiBlack9b507aa61963AudiBlack9b507aa61963AudiBlack9b507aa61963AudiBlack9b507aa61963AudiBlack
ee4e1f3c1963RenaultGreenee4e1f3c1963RenaultGreenee4e1f3c1963RenaultGreenee4e1f3c1963RenaultGreenee4e1f3c1963RenaultGreen
f7ce22e91988RenaultBlackf7ce22e91988RenaultBlackf7ce22e91988RenaultBlackf7ce22e91988RenaultBlackf7ce22e91988RenaultBlack
7f2dd6d71967MercedesRed7f2dd6d71967MercedesRed7f2dd6d71967MercedesRed7f2dd6d71967MercedesRed7f2dd6d71967MercedesRed
393cd4f31960FordGreen393cd4f31960FordGreen393cd4f31960FordGreen393cd4f31960FordGreen393cd4f31960FordGreen
aaee38821968RenaultGreenaaee38821968RenaultGreenaaee38821968RenaultGreenaaee38821968RenaultGreenaaee38821968RenaultGreen
49c6cdda1984MercedesSilver49c6cdda1984MercedesSilver49c6cdda1984MercedesSilver49c6cdda1984MercedesSilver49c6cdda1984MercedesSilver
261a637f1962VolvoOrange261a637f1962VolvoOrange261a637f1962VolvoOrange261a637f1962VolvoOrange261a637f1962VolvoOrange
2fedb8431969RenaultWhite2fedb8431969RenaultWhite2fedb8431969RenaultWhite2fedb8431969RenaultWhite2fedb8431969RenaultWhite
ee8ba8e41996HondaGreenee8ba8e41996HondaGreenee8ba8e41996HondaGreenee8ba8e41996HondaGreenee8ba8e41996HondaGreen
49cbe5d21996MercedesMaroon49cbe5d21996MercedesMaroon49cbe5d21996MercedesMaroon49cbe5d21996MercedesMaroon49cbe5d21996MercedesMaroon
c4a1eded2004RenaultOrangec4a1eded2004RenaultOrangec4a1eded2004RenaultOrangec4a1eded2004RenaultOrangec4a1eded2004RenaultOrange
f24fc08a1991HondaGreenf24fc08a1991HondaGreenf24fc08a1991HondaGreenf24fc08a1991HondaGreenf24fc08a1991HondaGreen
043234541975FiatWhite043234541975FiatWhite043234541975FiatWhite043234541975FiatWhite043234541975FiatWhite
ac97bb0f1980BMWWhiteac97bb0f1980BMWWhiteac97bb0f1980BMWWhiteac97bb0f1980BMWWhiteac97bb0f1980BMWWhite
fe0963561978RenaultBrownfe0963561978RenaultBrownfe0963561978RenaultBrownfe0963561978RenaultBrownfe0963561978RenaultBrown
5d4e228b1979AudiBlue5d4e228b1979AudiBlue5d4e228b1979AudiBlue5d4e228b1979AudiBlue5d4e228b1979AudiBlue
8c4b51ac1990RenaultGreen8c4b51ac1990RenaultGreen8c4b51ac1990RenaultGreen8c4b51ac1990RenaultGreen8c4b51ac1990RenaultGreen
0abbdcd51977VolkswagenMaroon0abbdcd51977VolkswagenMaroon0abbdcd51977VolkswagenMaroon0abbdcd51977VolkswagenMaroon0abbdcd51977VolkswagenMaroon
74bed81b2001RenaultBlack74bed81b2001RenaultBlack74bed81b2001RenaultBlack74bed81b2001RenaultBlack74bed81b2001RenaultBlack
d0d93fa91975VolvoOranged0d93fa91975VolvoOranged0d93fa91975VolvoOranged0d93fa91975VolvoOranged0d93fa91975VolvoOrange
e812b7032007MercedesYellowe812b7032007MercedesYellowe812b7032007MercedesYellowe812b7032007MercedesYellowe812b7032007MercedesYellow
302286521963VolvoBrown302286521963VolvoBrown302286521963VolvoBrown302286521963VolvoBrown302286521963VolvoBrown
9079423c1997HondaBrown9079423c1997HondaBrown9079423c1997HondaBrown9079423c1997HondaBrown9079423c1997HondaBrown
c4ee1f231991RenaultMaroonc4ee1f231991RenaultMaroonc4ee1f231991RenaultMaroonc4ee1f231991RenaultMaroonc4ee1f231991RenaultMaroon
af33dad41987MercedesOrangeaf33dad41987MercedesOrangeaf33dad41987MercedesOrangeaf33dad41987MercedesOrangeaf33dad41987MercedesOrange

Frozen Rows

IdYearBrandColor
6336a5961992AudiWhite
80f4bc771977FordRed
faea47701994AudiMaroon
3109a1d22006VolkswagenGreen
278e5c1a1960JaguarBlue
b6dc66751988BMWBrown
b9d769551981JaguarOrange
c5ea7f8d2005BMWBrown
93adbd9f1972VolkswagenBlue
6dd3f1941995VolkswagenSilver
6efb2f681964RenaultSilver
57e30b711980VolkswagenRed
41e424261967FiatBlue
0b45e8861966VolkswagenMaroon
174229821980FordGreen
69de66c21990FordYellow
f57ec6302005RenaultOrange
27d762c81987MercedesBrown
09ca5f881978MercedesBrown
c18b60442006RenaultBlue
8905ec2b2008VolkswagenYellow
38dc05451975RenaultOrange
a13f47251974FordSilver
52856a5b1995FordOrange
9f7395501999MercedesBrown
abed5d152000FiatOrange
025da5de1998BMWBrown
0367233d1967HondaYellow
0ecbfd9f2003RenaultSilver
5247835f1972FiatMaroon
4a9b3fb11979AudiRed
865fe9172008MercedesBlue
73dc88931965MercedesBrown
c1465f032009MercedesRed
bb6dec231965MercedesBlue
73cafb281989AudiSilver
cea02a8c1978AudiOrange
d4b494441978RenaultBrown
3a066b361961VolvoGreen
34d7634a1961BMWSilver
04dc2a091978VolkswagenRed
ba2124801984AudiBlue
3cb8e3e52006MercedesYellow
e33ff8821987VolvoGreen
23eecf152006MercedesSilver
b4bdb3031960BMWOrange
ba25d4bc1981BMWBrown
6087d5ce1965BMWMaroon
a0479f581984BMWSilver
96a1ae861968JaguarBrown

Frozen Columns

Id
83db6d32
a0dc673c
676ce524
bf90f8cb
37b02c28
5956a22d
d45204fd
7a670e7b
3cc3a5db
860edc5b
0d40bbb9
3ea27f84
3f17eb0e
4529973c
57d0e6be
69b968ec
62fa7d4a
908e287d
952ca7d3
4d5f8aa2
a28f99ee
bb2c80ac
8f8dcdd8
0c664e4f
0c54aa3c
7530e409
9ee67d53
feb85adf
9da4b886
29132ecd
14010b57
449cc71a
18ee6a9f
aaf80d10
686b646e
2e6a924f
86f6a7c5
76d12344
953baf40
9eb0af37
ddbc3fbc
45343b23
e1427f94
680157f6
78ca6abc
000912e7
2d51c46f
5f0e768f
c4c7acf6
af115035
YearBrandColor
1997BMWRed
1983BMWBlue
1976BMWMaroon
2005FiatRed
2006MercedesBlue
1972BMWOrange
1985RenaultOrange
2005VolvoGreen
1975HondaOrange
2008BMWRed
1963JaguarBlack
1978AudiRed
1993RenaultBrown
1984FiatGreen
1961RenaultWhite
1980MercedesRed
1963AudiBlack
1960VolvoYellow
1967FiatWhite
1978HondaOrange
1961AudiYellow
2003FiatRed
1966HondaSilver
1987JaguarSilver
1971JaguarGreen
2004MercedesBlue
1965JaguarBlack
1974MercedesBlack
1985AudiBlack
1996RenaultGreen
1983AudiMaroon
1975FiatMaroon
1974VolkswagenWhite
1973HondaYellow
1979HondaBrown
1970AudiGreen
1996FiatBrown
1994BMWWhite
1967FordOrange
1995HondaMaroon
2007MercedesSilver
1974VolkswagenRed
1965VolkswagenGreen
1981VolvoYellow
2001BMWBrown
1995VolvoBrown
1973VolvoBrown
1983HondaYellow
1987RenaultGreen
1976VolvoBlue

On-Demand Data

IdYearBrandColor
3f7175b21968AudiSilver
449637fb2007HondaGreen
a32191fa1988VolvoBlack
069e10b31990HondaBlack
1b0e12c21970HondaMaroon
88e029871978VolvoBlack
3a6854881991VolvoSilver
d43aea1b1968AudiWhite
4d40a7402007FiatOrange
ac062fa91976VolvoGreen
18f0da271990AudiWhite
18c322ce1978MercedesMaroon
eeb8ca0e1978JaguarGreen
bdce57811984VolvoSilver
d335420f1973JaguarGreen
92f843381997VolkswagenSilver
8a2924341971FordSilver
a8a2df111991FordSilver
6388aaf92009FordBrown
3d34faed1998JaguarGreen

Virtual Scrolling - 20000 Rows

IdYearBrandColor
ba4589e61984RenaultSilver
46d9deb31975AudiBlack
6588faf21962VolvoMaroon
a8998ecd1985FordGreen
0ddc2ee52008VolkswagenOrange
f6d470c41965BMWWhite
dac46be11994RenaultBrown
bf8b1e381990RenaultRed
505752bf1977VolvoBrown
8a7b1bcc1966HondaRed
615c28721992JaguarBlue
53757bc31996VolkswagenOrange
a6fef83d2008VolvoRed
bfb491c91967FiatRed
be558e592009JaguarYellow
22aacf052000FiatYellow
98776f0e1983HondaBlack
01ce1f971975VolvoMaroon
d943e9921966FiatBlue
0a9c6c8d1982MercedesMaroon
956448131996BMWBrown
466409381990HondaWhite
4cb1ba2c1969VolvoBrown
c4b6fd021969HondaMaroon
74421ea71971FiatGreen
8e4bb5591997FordYellow
84b00d8a1974BMWSilver
611d03502001HondaWhite
c02e1d4f1988AudiBlack
0587e3501985HondaBlack
5ed233f42007BMWBlack
53490d8e2000JaguarWhite
7d1e7f6c1989JaguarBlue
630f6d4a1992JaguarRed
bb29c5871963FordWhite
214bd88e1995AudiBrown
015870b42006RenaultMaroon
432497211996BMWBrown
30f3f1e61976FiatRed
6bbdbf6b2004VolkswagenOrange
<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-SNAPSHOT on Mojarra-2.3.2.