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

Vertical

IdYearBrandColor
32d163dd1971FiatBrown
f4ee19c81977VolkswagenSilver
82b7b64a2005FiatYellow
63881a421984FordOrange
70cb359d1967JaguarGreen
2aac74161986AudiBrown
dc7254721987JaguarWhite
27973ae31984FordOrange
7b6b32041993RenaultMaroon
91b4058a1980FiatSilver
ad7b16061962JaguarBrown
edf905861975FordMaroon
fc78653d1979HondaMaroon
871e67801970JaguarSilver
e0e04c221993MercedesMaroon
33884d151975RenaultBrown
9690276d1966FiatGreen
76e39cb02004RenaultBrown
f44b45841965AudiYellow
4df199b81972RenaultOrange
c19973471980BMWSilver
80df7fb41982BMWBlack
c624e97a2000AudiGreen
2a6393121985VolvoBlue
dcffc0131989BMWOrange
e9abfefe1988AudiYellow
e9ae72f71964FordYellow
fb78fb621988FiatGreen
543135ba1991FordBlue
d007041a2003FordBrown
7ba4552e1964AudiOrange
7f4fb5ad1976HondaBrown
c0bed0091961VolvoBlue
b6a7c0d51994HondaWhite
267606541992AudiYellow
da4b7bb81999FiatSilver
752df4331990JaguarOrange
a2cfe3b41996HondaSilver
ff914cb61999AudiWhite
40be56731962AudiRed
ca27ec491987FordBlue
654f7a9b1996FiatMaroon
a6bb6cc21991BMWSilver
e23138141961BMWBlack
702b32ce1974RenaultBrown
ef37b0ed2008VolkswagenGreen
cf2596002000VolvoBrown
ce57af261982BMWBlue
6afc5fef1986MercedesGreen
2fcae0521982JaguarGreen

Horizontal

IdYearBrandColor
8b37785c1980FiatWhite
65d758c91996VolkswagenOrange
77ee12641975BMWWhite
1a91ab291999BMWBlack
3d7499d12006HondaBlue
01fce7111996FiatBlack
29c984951967AudiBlue
288230f81973MercedesYellow
25429dc31979FordRed
b4082d341973AudiRed

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
95e0b4df1991HondaGreen95e0b4df1991HondaGreen95e0b4df1991HondaGreen95e0b4df1991HondaGreen95e0b4df1991HondaGreen
ae81f51a1970FordMaroonae81f51a1970FordMaroonae81f51a1970FordMaroonae81f51a1970FordMaroonae81f51a1970FordMaroon
b7dc80821965RenaultGreenb7dc80821965RenaultGreenb7dc80821965RenaultGreenb7dc80821965RenaultGreenb7dc80821965RenaultGreen
2191f2381972HondaOrange2191f2381972HondaOrange2191f2381972HondaOrange2191f2381972HondaOrange2191f2381972HondaOrange
331074f91987HondaBlack331074f91987HondaBlack331074f91987HondaBlack331074f91987HondaBlack331074f91987HondaBlack
174f8d531976HondaBrown174f8d531976HondaBrown174f8d531976HondaBrown174f8d531976HondaBrown174f8d531976HondaBrown
6052c08c2000MercedesBlue6052c08c2000MercedesBlue6052c08c2000MercedesBlue6052c08c2000MercedesBlue6052c08c2000MercedesBlue
82d967431993AudiRed82d967431993AudiRed82d967431993AudiRed82d967431993AudiRed82d967431993AudiRed
8b7d38fe1973JaguarMaroon8b7d38fe1973JaguarMaroon8b7d38fe1973JaguarMaroon8b7d38fe1973JaguarMaroon8b7d38fe1973JaguarMaroon
b859b33c1999HondaBlueb859b33c1999HondaBlueb859b33c1999HondaBlueb859b33c1999HondaBlueb859b33c1999HondaBlue
be96150d1977JaguarOrangebe96150d1977JaguarOrangebe96150d1977JaguarOrangebe96150d1977JaguarOrangebe96150d1977JaguarOrange
8ef7c12d2009HondaMaroon8ef7c12d2009HondaMaroon8ef7c12d2009HondaMaroon8ef7c12d2009HondaMaroon8ef7c12d2009HondaMaroon
8b49a3fc2000AudiBrown8b49a3fc2000AudiBrown8b49a3fc2000AudiBrown8b49a3fc2000AudiBrown8b49a3fc2000AudiBrown
e5802d211996HondaMaroone5802d211996HondaMaroone5802d211996HondaMaroone5802d211996HondaMaroone5802d211996HondaMaroon
8caa287f1982VolkswagenMaroon8caa287f1982VolkswagenMaroon8caa287f1982VolkswagenMaroon8caa287f1982VolkswagenMaroon8caa287f1982VolkswagenMaroon
9b86d92b1997RenaultBlue9b86d92b1997RenaultBlue9b86d92b1997RenaultBlue9b86d92b1997RenaultBlue9b86d92b1997RenaultBlue
013ea0121998VolkswagenBlack013ea0121998VolkswagenBlack013ea0121998VolkswagenBlack013ea0121998VolkswagenBlack013ea0121998VolkswagenBlack
31778ad81974RenaultRed31778ad81974RenaultRed31778ad81974RenaultRed31778ad81974RenaultRed31778ad81974RenaultRed
b2ef16011993BMWGreenb2ef16011993BMWGreenb2ef16011993BMWGreenb2ef16011993BMWGreenb2ef16011993BMWGreen
7187d20d1974RenaultBlack7187d20d1974RenaultBlack7187d20d1974RenaultBlack7187d20d1974RenaultBlack7187d20d1974RenaultBlack
fd4754c92008VolkswagenBrownfd4754c92008VolkswagenBrownfd4754c92008VolkswagenBrownfd4754c92008VolkswagenBrownfd4754c92008VolkswagenBrown
fd093f691994FordYellowfd093f691994FordYellowfd093f691994FordYellowfd093f691994FordYellowfd093f691994FordYellow
2e6f11a52008FordOrange2e6f11a52008FordOrange2e6f11a52008FordOrange2e6f11a52008FordOrange2e6f11a52008FordOrange
98501d221972RenaultBlue98501d221972RenaultBlue98501d221972RenaultBlue98501d221972RenaultBlue98501d221972RenaultBlue
a41acfa71990MercedesReda41acfa71990MercedesReda41acfa71990MercedesReda41acfa71990MercedesReda41acfa71990MercedesRed
ed64f7352002FiatMarooned64f7352002FiatMarooned64f7352002FiatMarooned64f7352002FiatMarooned64f7352002FiatMaroon
54e565e22004AudiMaroon54e565e22004AudiMaroon54e565e22004AudiMaroon54e565e22004AudiMaroon54e565e22004AudiMaroon
4d45c12b1993JaguarGreen4d45c12b1993JaguarGreen4d45c12b1993JaguarGreen4d45c12b1993JaguarGreen4d45c12b1993JaguarGreen
18614f2b1970HondaBrown18614f2b1970HondaBrown18614f2b1970HondaBrown18614f2b1970HondaBrown18614f2b1970HondaBrown
2050d1eb1977BMWOrange2050d1eb1977BMWOrange2050d1eb1977BMWOrange2050d1eb1977BMWOrange2050d1eb1977BMWOrange
9c2837721965RenaultWhite9c2837721965RenaultWhite9c2837721965RenaultWhite9c2837721965RenaultWhite9c2837721965RenaultWhite
33de54391989RenaultRed33de54391989RenaultRed33de54391989RenaultRed33de54391989RenaultRed33de54391989RenaultRed
30543b361960BMWOrange30543b361960BMWOrange30543b361960BMWOrange30543b361960BMWOrange30543b361960BMWOrange
0b526be41981HondaMaroon0b526be41981HondaMaroon0b526be41981HondaMaroon0b526be41981HondaMaroon0b526be41981HondaMaroon
d17528442009BMWYellowd17528442009BMWYellowd17528442009BMWYellowd17528442009BMWYellowd17528442009BMWYellow
058fab1f1980HondaBlack058fab1f1980HondaBlack058fab1f1980HondaBlack058fab1f1980HondaBlack058fab1f1980HondaBlack
89689e852000VolvoGreen89689e852000VolvoGreen89689e852000VolvoGreen89689e852000VolvoGreen89689e852000VolvoGreen
52f527651965VolkswagenRed52f527651965VolkswagenRed52f527651965VolkswagenRed52f527651965VolkswagenRed52f527651965VolkswagenRed
3e6c9e2d1987RenaultYellow3e6c9e2d1987RenaultYellow3e6c9e2d1987RenaultYellow3e6c9e2d1987RenaultYellow3e6c9e2d1987RenaultYellow
2e391d691997VolkswagenMaroon2e391d691997VolkswagenMaroon2e391d691997VolkswagenMaroon2e391d691997VolkswagenMaroon2e391d691997VolkswagenMaroon
5aae03e61984HondaMaroon5aae03e61984HondaMaroon5aae03e61984HondaMaroon5aae03e61984HondaMaroon5aae03e61984HondaMaroon
e2eba2e81962VolkswagenMaroone2eba2e81962VolkswagenMaroone2eba2e81962VolkswagenMaroone2eba2e81962VolkswagenMaroone2eba2e81962VolkswagenMaroon
a7009ff91994RenaultReda7009ff91994RenaultReda7009ff91994RenaultReda7009ff91994RenaultReda7009ff91994RenaultRed
96ac22a41976FiatBrown96ac22a41976FiatBrown96ac22a41976FiatBrown96ac22a41976FiatBrown96ac22a41976FiatBrown
7754004a1976FiatBlue7754004a1976FiatBlue7754004a1976FiatBlue7754004a1976FiatBlue7754004a1976FiatBlue
6cd29c951976BMWGreen6cd29c951976BMWGreen6cd29c951976BMWGreen6cd29c951976BMWGreen6cd29c951976BMWGreen
27d4b49f1997VolvoYellow27d4b49f1997VolvoYellow27d4b49f1997VolvoYellow27d4b49f1997VolvoYellow27d4b49f1997VolvoYellow
cfed09462007AudiWhitecfed09462007AudiWhitecfed09462007AudiWhitecfed09462007AudiWhitecfed09462007AudiWhite
6016ef5a1968VolvoWhite6016ef5a1968VolvoWhite6016ef5a1968VolvoWhite6016ef5a1968VolvoWhite6016ef5a1968VolvoWhite
1ec69dc11974FordGreen1ec69dc11974FordGreen1ec69dc11974FordGreen1ec69dc11974FordGreen1ec69dc11974FordGreen

Frozen Rows

IdYearBrandColor
92ac819f1985MercedesSilver
bc14146d1963HondaGreen
e1f634361980FiatOrange
e41d44b91987FiatOrange
8939203c1990AudiBlack
bb7f4d3f1986VolkswagenRed
f67d31a71961FiatSilver
0324612c1970VolvoBlue
0e038ee02008AudiYellow
eda3293f1988VolvoBrown
417205842001FordYellow
5b1c3ee91966BMWBlue
10b804e82004HondaBlack
52b25aa31999HondaRed
55cd91641965BMWRed
8697499b1984FordBrown
e2a6e0a81965JaguarBlue
1de8f0e82000RenaultRed
58d2025d1963RenaultYellow
2ea835001984FordBlue
6631a8002008VolkswagenWhite
aebd72071962AudiOrange
c27a10141998FordBlue
b44f3ac81984RenaultBlue
a1783c141992FiatWhite
f79e39852003AudiWhite
7e55bb7b1967BMWBlack
45a53de11992VolvoBlue
32a179102008VolkswagenSilver
be0900b11968JaguarBrown
fd7638ed1972FiatYellow
baaa768c1987FordYellow
1d7140791996VolkswagenWhite
e1cb1d3f1996HondaGreen
c29a005d1995FordSilver
b190d0c61984FordMaroon
76b140e01993BMWBlack
ef34d33f2001JaguarSilver
dc9ff13f1971HondaBlack
aa7c1fcc1994HondaYellow
f1a3e5222003BMWBlack
80aef7761993FiatRed
e68111691996FordSilver
1631a03f1967BMWMaroon
1d4696a41988HondaYellow
f20f68982007AudiMaroon
a11942fe1976BMWRed
9c1e03b01987FordYellow
a0fe3fdc1976JaguarYellow
595855801964HondaMaroon

Frozen Columns

Id
a266b927
1c4d0bcf
339a99ee
e290c8a5
e3f22f87
5195519d
b3a29532
85d639a0
562ff4f5
3713019f
a2cdcba8
856d467d
fd49aed1
0bfe8a97
9293ac59
b03890f9
07a3cf25
65c34a96
79de44ed
658b7825
7ce1842b
bb6b99d3
c3721c09
57ac5147
90415aa6
db9d0c38
ffe1a8c7
f486a3ec
7f6a9d33
a0e5dd6f
0474b770
873e0847
5d13e09f
4f6712b7
bef59180
e01409d2
fce1f3f3
11577d95
3e4e5c56
a5d59aa4
1ad81434
4658113c
541de005
734fcc17
797db667
90700331
8a1c6b7e
4ba2393f
e23a400e
6e75c8bb
YearBrandColor
2006MercedesRed
1985VolvoOrange
1960FiatBlack
1995HondaSilver
1968VolkswagenSilver
1977MercedesMaroon
1982BMWGreen
2004VolvoBlack
1968JaguarBlack
1977VolkswagenWhite
1979HondaSilver
2008BMWYellow
1969JaguarBrown
2009VolkswagenGreen
1989FiatGreen
2009MercedesGreen
1969JaguarOrange
2004HondaBrown
1989MercedesMaroon
1975RenaultSilver
2000BMWBrown
1992VolkswagenYellow
1977FiatWhite
1990FordWhite
1985FiatYellow
1961FordWhite
1983FordRed
1994VolvoWhite
1998FordSilver
1988JaguarSilver
1982JaguarBlue
1968VolvoBlack
1980VolkswagenBlue
2005VolvoBrown
2003VolvoSilver
1997JaguarMaroon
2002FordOrange
2009FordBlue
2000RenaultMaroon
1972VolvoWhite
1970VolvoYellow
1960VolvoBlue
1976BMWRed
1970BMWOrange
1963VolkswagenBlue
1963VolvoYellow
1964VolvoRed
1995JaguarWhite
1982MercedesYellow
2008VolkswagenGreen

On-Demand Data

IdYearBrandColor
2603b4f02003FiatMaroon
a0cd13a51983HondaBlack
da7990661981FiatYellow
b5148fb41982RenaultSilver
c1ad59d42004BMWSilver
14dcc8a72009RenaultWhite
f94e1e4a1982FordSilver
15088d471987BMWWhite
4a2a998f1971AudiGreen
b84ff4c92005FiatOrange
d462060d1980BMWOrange
b4c0536b1963HondaSilver
04f8708b1998VolvoMaroon
df0a6f321970FiatOrange
80335fce1978FordOrange
11d3d0181989FordBlue
ad5dc5e01978VolkswagenWhite
9896d2571977BMWBlack
1e88bc502003HondaRed
c89122c82006VolkswagenBlack

Virtual Scrolling - 20000 Rows

IdYearBrandColor
f39f63be1966VolkswagenYellow
ffe4da9c1977VolkswagenWhite
e750d90f1987BMWBlack
ba7c39561990FiatBlack
17f013f41983VolvoRed
9a917d782009AudiOrange
97e6f62e1980BMWYellow
5c4a50971990HondaGreen
c74d0da92000HondaBrown
3bae3eea1968VolvoBlack
39a30e201967AudiBrown
8695803f1981HondaSilver
55a442341964FiatRed
3068e43e1991VolvoWhite
b0ba9dd71983HondaYellow
83bef0bb1983MercedesOrange
cc7e7a941975VolvoBlue
b3ad2cf71967FiatOrange
425174232007JaguarBlack
1956d98b1972RenaultRed
6fc0412d1984FordBlack
7ffbdc061982BMWBlack
1b43fc5d1976HondaMaroon
4819dd702000FiatGreen
e76a079f1964FiatBlack
5faeb6691972JaguarBrown
7d64e3381974RenaultYellow
ee0b271a2004BMWRed
643a95841996FordMaroon
6159b0032002VolvoRed
f198cf261972MercedesSilver
df9f7f091973FiatOrange
66fb3fde2001HondaBlack
173102bb1989AudiMaroon
72c37b402009VolkswagenWhite
c52bd55c2007AudiYellow
452770411964RenaultMaroon
cdd8d0e31992BMWRed
211b11961992FiatMaroon
0eeac8441992FordBlue
<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.1-SNAPSHOT on Mojarra-2.2.8.