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

Vertical

IdYearBrandColor
66cac1e91972RenaultGreen
c42bf3ef1963BMWGreen
36c8ddae1994FordWhite
0003cb7e1971JaguarRed
1fb2dca92001VolkswagenWhite
2a7b86421969VolvoWhite
2c937cf01988VolvoYellow
a83bead41972BMWRed
6e8bd6ef1968JaguarWhite
84f471ce1984FordBlack
7502bb8f1961RenaultOrange
8c9672231979FiatBrown
0c6352201975HondaBlue
4f9502d01974BMWOrange
bb188f0e1977BMWBlack
dd1ef5a91985FiatSilver
295f44d71960AudiBlue
4511b9a91973AudiYellow
7f2c2d011966BMWSilver
fc2d6f812008FordYellow
9512d2da1962HondaBlack
baeb01c91997HondaSilver
72bdd8712005AudiYellow
25939d3c1967BMWYellow
5ba9f34d1989HondaMaroon
a171d62c1965JaguarBrown
bb7d1b662008MercedesBlue
bf8ffe461982VolvoWhite
206a2cc81967FiatGreen
b6563f9e1969JaguarBlue
dc95ac982002VolkswagenBlue
7b00fb0b1993MercedesGreen
28d0c1bd1983AudiBlue
21b176102005AudiSilver
19b531f21983HondaBlue
e9a1a0901960FordMaroon
34c148fc1975HondaYellow
f59b087d1972VolkswagenBrown
8e0fe0a51989VolkswagenRed
3794bb171987RenaultOrange
3bee78521966VolvoYellow
c3aefda81995VolkswagenBrown
519525091974FordSilver
cfd178ef2000BMWOrange
7a6687831967MercedesBrown
0cb4d5072000BMWMaroon
2004307b1978JaguarGreen
7b9867501986FordRed
b1a377221981VolvoGreen
bf0f98752003RenaultBlack

Horizontal

IdYearBrandColor
ea74fbf01995VolvoBlack
12c0cf711986FordYellow
0c40987d2005RenaultBlue
29dcccae1990FordBlue
27858fc52001VolkswagenBrown
78fac5d12003VolvoYellow
4d000da31996VolvoGreen
d73b50a31964MercedesRed
137585501974HondaGreen
23ea2f091983FiatMaroon

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
fd2a81112003RenaultGreenfd2a81112003RenaultGreenfd2a81112003RenaultGreenfd2a81112003RenaultGreenfd2a81112003RenaultGreen
84ab75971991JaguarYellow84ab75971991JaguarYellow84ab75971991JaguarYellow84ab75971991JaguarYellow84ab75971991JaguarYellow
5f13d4801967VolkswagenOrange5f13d4801967VolkswagenOrange5f13d4801967VolkswagenOrange5f13d4801967VolkswagenOrange5f13d4801967VolkswagenOrange
dc49e5011988MercedesOrangedc49e5011988MercedesOrangedc49e5011988MercedesOrangedc49e5011988MercedesOrangedc49e5011988MercedesOrange
da7f5f7d1976MercedesYellowda7f5f7d1976MercedesYellowda7f5f7d1976MercedesYellowda7f5f7d1976MercedesYellowda7f5f7d1976MercedesYellow
dc8b11b61962FordWhitedc8b11b61962FordWhitedc8b11b61962FordWhitedc8b11b61962FordWhitedc8b11b61962FordWhite
7e7dafc31992RenaultRed7e7dafc31992RenaultRed7e7dafc31992RenaultRed7e7dafc31992RenaultRed7e7dafc31992RenaultRed
caff9fd51967AudiGreencaff9fd51967AudiGreencaff9fd51967AudiGreencaff9fd51967AudiGreencaff9fd51967AudiGreen
d2624b411971JaguarWhited2624b411971JaguarWhited2624b411971JaguarWhited2624b411971JaguarWhited2624b411971JaguarWhite
a779fa6f1975JaguarBlacka779fa6f1975JaguarBlacka779fa6f1975JaguarBlacka779fa6f1975JaguarBlacka779fa6f1975JaguarBlack
0d80801e1977HondaWhite0d80801e1977HondaWhite0d80801e1977HondaWhite0d80801e1977HondaWhite0d80801e1977HondaWhite
a22672291968RenaultBrowna22672291968RenaultBrowna22672291968RenaultBrowna22672291968RenaultBrowna22672291968RenaultBrown
27a707531976VolvoBlack27a707531976VolvoBlack27a707531976VolvoBlack27a707531976VolvoBlack27a707531976VolvoBlack
360a7f9a1989AudiOrange360a7f9a1989AudiOrange360a7f9a1989AudiOrange360a7f9a1989AudiOrange360a7f9a1989AudiOrange
afe59a771987VolvoBlackafe59a771987VolvoBlackafe59a771987VolvoBlackafe59a771987VolvoBlackafe59a771987VolvoBlack
0969d0471987VolkswagenBrown0969d0471987VolkswagenBrown0969d0471987VolkswagenBrown0969d0471987VolkswagenBrown0969d0471987VolkswagenBrown
adfb109f1991FordYellowadfb109f1991FordYellowadfb109f1991FordYellowadfb109f1991FordYellowadfb109f1991FordYellow
b15430392009JaguarBlackb15430392009JaguarBlackb15430392009JaguarBlackb15430392009JaguarBlackb15430392009JaguarBlack
9799b80e1961AudiWhite9799b80e1961AudiWhite9799b80e1961AudiWhite9799b80e1961AudiWhite9799b80e1961AudiWhite
6dd0d1571997RenaultBlue6dd0d1571997RenaultBlue6dd0d1571997RenaultBlue6dd0d1571997RenaultBlue6dd0d1571997RenaultBlue
f6c942651992HondaMaroonf6c942651992HondaMaroonf6c942651992HondaMaroonf6c942651992HondaMaroonf6c942651992HondaMaroon
31cf7ef22006VolvoGreen31cf7ef22006VolvoGreen31cf7ef22006VolvoGreen31cf7ef22006VolvoGreen31cf7ef22006VolvoGreen
44c481ce1986VolkswagenOrange44c481ce1986VolkswagenOrange44c481ce1986VolkswagenOrange44c481ce1986VolkswagenOrange44c481ce1986VolkswagenOrange
ba2fb8271980AudiMaroonba2fb8271980AudiMaroonba2fb8271980AudiMaroonba2fb8271980AudiMaroonba2fb8271980AudiMaroon
0341c5d61982AudiMaroon0341c5d61982AudiMaroon0341c5d61982AudiMaroon0341c5d61982AudiMaroon0341c5d61982AudiMaroon
756ffcc31982BMWSilver756ffcc31982BMWSilver756ffcc31982BMWSilver756ffcc31982BMWSilver756ffcc31982BMWSilver
afb4df241989VolkswagenBlueafb4df241989VolkswagenBlueafb4df241989VolkswagenBlueafb4df241989VolkswagenBlueafb4df241989VolkswagenBlue
5b45b1911980RenaultBlue5b45b1911980RenaultBlue5b45b1911980RenaultBlue5b45b1911980RenaultBlue5b45b1911980RenaultBlue
7b5782c31960MercedesMaroon7b5782c31960MercedesMaroon7b5782c31960MercedesMaroon7b5782c31960MercedesMaroon7b5782c31960MercedesMaroon
3c708e7c1975MercedesMaroon3c708e7c1975MercedesMaroon3c708e7c1975MercedesMaroon3c708e7c1975MercedesMaroon3c708e7c1975MercedesMaroon
88d02b021977RenaultOrange88d02b021977RenaultOrange88d02b021977RenaultOrange88d02b021977RenaultOrange88d02b021977RenaultOrange
6c1dce961963AudiBrown6c1dce961963AudiBrown6c1dce961963AudiBrown6c1dce961963AudiBrown6c1dce961963AudiBrown
3bfc39b21972VolkswagenGreen3bfc39b21972VolkswagenGreen3bfc39b21972VolkswagenGreen3bfc39b21972VolkswagenGreen3bfc39b21972VolkswagenGreen
b11b97342003HondaWhiteb11b97342003HondaWhiteb11b97342003HondaWhiteb11b97342003HondaWhiteb11b97342003HondaWhite
8291d6d21960HondaMaroon8291d6d21960HondaMaroon8291d6d21960HondaMaroon8291d6d21960HondaMaroon8291d6d21960HondaMaroon
328f92242008VolvoSilver328f92242008VolvoSilver328f92242008VolvoSilver328f92242008VolvoSilver328f92242008VolvoSilver
e9a476bd1974JaguarSilvere9a476bd1974JaguarSilvere9a476bd1974JaguarSilvere9a476bd1974JaguarSilvere9a476bd1974JaguarSilver
f999f4751960VolkswagenBrownf999f4751960VolkswagenBrownf999f4751960VolkswagenBrownf999f4751960VolkswagenBrownf999f4751960VolkswagenBrown
52c9a6fd1968HondaSilver52c9a6fd1968HondaSilver52c9a6fd1968HondaSilver52c9a6fd1968HondaSilver52c9a6fd1968HondaSilver
08a223dc1999VolkswagenRed08a223dc1999VolkswagenRed08a223dc1999VolkswagenRed08a223dc1999VolkswagenRed08a223dc1999VolkswagenRed
8ca1b2fc1995FiatWhite8ca1b2fc1995FiatWhite8ca1b2fc1995FiatWhite8ca1b2fc1995FiatWhite8ca1b2fc1995FiatWhite
83282a331991MercedesRed83282a331991MercedesRed83282a331991MercedesRed83282a331991MercedesRed83282a331991MercedesRed
39d392ee1970HondaMaroon39d392ee1970HondaMaroon39d392ee1970HondaMaroon39d392ee1970HondaMaroon39d392ee1970HondaMaroon
19a7f7152004FordMaroon19a7f7152004FordMaroon19a7f7152004FordMaroon19a7f7152004FordMaroon19a7f7152004FordMaroon
617dd5ee1968FiatBlack617dd5ee1968FiatBlack617dd5ee1968FiatBlack617dd5ee1968FiatBlack617dd5ee1968FiatBlack
b97918d31992FordWhiteb97918d31992FordWhiteb97918d31992FordWhiteb97918d31992FordWhiteb97918d31992FordWhite
e2a596e61972VolvoBlacke2a596e61972VolvoBlacke2a596e61972VolvoBlacke2a596e61972VolvoBlacke2a596e61972VolvoBlack
f80671b81994BMWGreenf80671b81994BMWGreenf80671b81994BMWGreenf80671b81994BMWGreenf80671b81994BMWGreen
8fae280a1973AudiSilver8fae280a1973AudiSilver8fae280a1973AudiSilver8fae280a1973AudiSilver8fae280a1973AudiSilver
a271acda1982VolkswagenYellowa271acda1982VolkswagenYellowa271acda1982VolkswagenYellowa271acda1982VolkswagenYellowa271acda1982VolkswagenYellow

Frozen Rows

IdYearBrandColor
8bbccff41973HondaGreen
6db10ffb2001JaguarOrange
6f1558701974RenaultWhite
577602cb1965VolkswagenGreen
2bc3dcad1980AudiMaroon
120c1db11989VolvoYellow
69a98b951980FordBrown
c856ef2e1963BMWOrange
e2cbee8e1976HondaMaroon
cbc95bd02009HondaMaroon
62778a601975HondaWhite
4dfbd4d51998BMWGreen
52d596202004VolvoWhite
a31dafdb1983AudiGreen
89eb42f11995VolkswagenOrange
24ddee561976BMWBlue
18b2b72b1977JaguarBrown
e3200bf91977RenaultYellow
7345aaec1977VolvoSilver
1dc64b7c1989FordBrown
1f9f71be1960VolvoBrown
32c8bc151974BMWBlue
9ed2b42e1995AudiYellow
a326609a1982VolkswagenMaroon
a20a80541967VolkswagenOrange
267738c61977FordWhite
42969f5e1961VolkswagenBlack
0589ce4f1979RenaultRed
92d66f2f2001FiatRed
36695bbd1979JaguarOrange
1001f2c71975VolvoSilver
51e1958d1995MercedesSilver
2137edb02001VolvoRed
93bb1c3c2001MercedesBrown
8a4caf451999AudiBlack
7a1ff8271977VolkswagenRed
8728350e2006RenaultOrange
db5155742000JaguarMaroon
a221d7eb1973AudiYellow
6aa858251961HondaMaroon
f235b9821973VolvoSilver
46cecc3f1970BMWSilver
4b23376a1982HondaYellow
5ebed92d1984RenaultSilver
d53036731994VolkswagenSilver
1ac82acf1962BMWWhite
90bbf37f1963VolvoBlue
8c8207d21961MercedesSilver
ee21b3db2002VolkswagenYellow
ee18d4981996JaguarBlue

Frozen Columns

Id
410d7c87
29758ae6
ece043a6
4888f32b
44c66516
721c34c5
7a671d31
3d30f669
ad1c4b43
d92692bc
6b2f741b
ac020031
5b99a6a3
89328736
37f95996
78a1f6bc
2af80338
5439acd2
5691e9c8
79ea1275
f9ee7f14
80341050
f7f169de
fb6f8db6
6cc2f2d3
dd2d1270
b7dc8b03
fdd4d11d
d2687279
ec05efbb
0e176cf1
36ebfa2c
73637663
a45fe19a
858edbd6
b499fc83
a990cfc0
38634d12
eec8fa8c
a5215dd9
861df9a7
de5efbe1
85f98640
de3cb02c
ca2c785a
f495ab3b
14dd8eda
f95024f2
ac8f3462
5c9365f9
YearBrandColor
1966BMWGreen
2001VolvoGreen
1962VolvoRed
1973JaguarYellow
1971VolvoBlue
1986FordSilver
1979VolkswagenMaroon
1967FiatOrange
2001FordBrown
1977FiatWhite
1973FiatGreen
1961RenaultMaroon
1987BMWGreen
1995HondaYellow
1987JaguarBlack
1988JaguarBrown
1979BMWRed
2001HondaBlack
1974RenaultRed
1994VolkswagenWhite
1978MercedesWhite
1972FordOrange
1993FordBlue
1972MercedesBlue
2000VolkswagenSilver
1988HondaYellow
1961FordBlack
1986HondaBlue
1977FiatGreen
1974HondaBrown
1966AudiYellow
1960MercedesMaroon
2002VolkswagenBlue
1972HondaBlack
1968FordBlack
1961RenaultOrange
1990VolkswagenSilver
2005AudiSilver
1982BMWRed
1974JaguarGreen
1990JaguarBrown
1978AudiBlack
1991HondaRed
1990BMWWhite
1974BMWGreen
1991RenaultBrown
1999HondaBlack
2007FordYellow
1980BMWGreen
1985MercedesBrown

On-Demand Data

IdYearBrandColor
1b68bb1b1994AudiWhite
173cbdaa1975MercedesOrange
b801940b1986VolvoBrown
51e324c02003AudiRed
191894161999AudiBrown
725dd7b21988FiatOrange
1dac58a11963AudiGreen
57410c271997HondaWhite
3acf4cec1988VolkswagenMaroon
5a7b8a831993RenaultMaroon
3dc0e6c42003JaguarBlue
564323f61991VolkswagenBlue
e9c500fd1983HondaGreen
8a9e80381989RenaultBlack
b758bd791995VolvoGreen
b80bd73c1974FiatBlue
d3e2955a1996VolkswagenYellow
e442c94d1964VolvoBlack
dd0cc4b71976BMWSilver
506ce2132004AudiBrown

Virtual Scrolling - 20000 Rows

IdYearBrandColor
2a6636331987JaguarSilver
127912a71984FordRed
7c4a4e021976JaguarGreen
176ef8141976FiatWhite
a71b95272007HondaYellow
a92519991996AudiYellow
20dd75321980VolvoWhite
5018ab191964RenaultYellow
fe59932f1966BMWSilver
d1689db21998MercedesBlack
cc1e189f1983AudiBlue
58e6d56f1992FiatBlack
124448da1978VolvoOrange
8aa8c02f1960JaguarOrange
31cfc62c1961VolvoMaroon
ee9dfc391976JaguarYellow
c12ee05b1962MercedesOrange
87c8604b1995FordBlue
53bbb8042008HondaBlue
4234f5061980BMWSilver
f62166351981BMWSilver
bf49eade1994FordBlack
141082082007VolkswagenYellow
96d236cb1996VolvoBrown
3c40b1911966HondaBlack
819958d22000FordYellow
c053429c1989AudiBlack
a5dc8aee2003JaguarBlue
2f7038fa1975JaguarBrown
347fd5b62007RenaultYellow
90d240691972MercedesBlue
eccd24fe1983AudiBlue
fc4e40711985FiatRed
f7bc95eb1975VolkswagenWhite
517c03201961BMWRed
e4897ee41968BMWWhite
c640c2ce1967VolkswagenMaroon
b83b7c3a1965BMWRed
be6bc96f1998VolkswagenBlack
cfab7fb41987HondaGreen
<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.1.4 on Mojarra-2.2.10.