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

Vertical

IdYearBrandColor
0863880a1996HondaSilver
ca4c09951981BMWMaroon
1c4555e51965BMWBrown
3f62d4641980FordGreen
2cc67d551969JaguarBlue
520517731960VolvoMaroon
ff2807662000HondaBrown
853211641980VolkswagenRed
2c44a7b11995FiatBlack
be4da38c2003FiatBlue
5ac5efd91969HondaYellow
06ef15c11968VolvoSilver
92c3e6fe1983HondaBlack
f99335872007VolkswagenGreen
1b342e121961HondaBlue
12f186791973JaguarSilver
06a272c61961VolvoBlack
a2f16f5e1975VolvoSilver
e3f3e37a1997FiatBrown
7e1204f11986HondaBlue
e8bae4711985MercedesBlue
05ae6b7b1968BMWMaroon
0471e4e82007AudiRed
c2e74e851978RenaultMaroon
7fb9ccfd1995VolkswagenBrown
f64cb5e02006AudiYellow
a1eb2eea1994MercedesGreen
b07ef21a1997VolvoGreen
212b39b31970FiatBlack
4496c1631995RenaultWhite
54b893cc1989BMWYellow
aae02cc21963MercedesBlack
269208732005FiatMaroon
f986b6c31960VolkswagenBrown
c26442281970FiatSilver
c38d14b61963VolvoWhite
ad2ef2b52004RenaultGreen
efd870fe2002MercedesSilver
9e1079791997MercedesOrange
a9b268f61983FordBlack
69f549281999FordGreen
666a457c1985VolkswagenGreen
02675c3d1996FordBrown
096294f51977VolvoGreen
aea621aa2005VolvoGreen
bff675a42008FiatOrange
b2e7fa1f1991FordBlack
c3555d2e2003VolvoBlue
937f6d1f1986VolvoOrange
f774ad6c2007HondaYellow

Horizontal

IdYearBrandColor
4f806b5c1989FiatWhite
62c6f6be1989VolvoMaroon
e4e478611994FordBlue
2cabbf172009AudiYellow
00ae8fe22003MercedesWhite
890790271996VolvoWhite
dfb1df221967JaguarRed
9d94e3691992MercedesBrown
efb6bd841979FiatGreen
239151271984VolkswagenBlue

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
8ab2387d2000MercedesGreen8ab2387d2000MercedesGreen8ab2387d2000MercedesGreen8ab2387d2000MercedesGreen8ab2387d2000MercedesGreen
50957a2a1960VolkswagenMaroon50957a2a1960VolkswagenMaroon50957a2a1960VolkswagenMaroon50957a2a1960VolkswagenMaroon50957a2a1960VolkswagenMaroon
aa46e53f1967FordWhiteaa46e53f1967FordWhiteaa46e53f1967FordWhiteaa46e53f1967FordWhiteaa46e53f1967FordWhite
9676d3dd1963RenaultWhite9676d3dd1963RenaultWhite9676d3dd1963RenaultWhite9676d3dd1963RenaultWhite9676d3dd1963RenaultWhite
e277f2821986VolvoOrangee277f2821986VolvoOrangee277f2821986VolvoOrangee277f2821986VolvoOrangee277f2821986VolvoOrange
dc4f26f22008RenaultOrangedc4f26f22008RenaultOrangedc4f26f22008RenaultOrangedc4f26f22008RenaultOrangedc4f26f22008RenaultOrange
8edc2b6b1988VolkswagenWhite8edc2b6b1988VolkswagenWhite8edc2b6b1988VolkswagenWhite8edc2b6b1988VolkswagenWhite8edc2b6b1988VolkswagenWhite
242d5ba91960AudiBlack242d5ba91960AudiBlack242d5ba91960AudiBlack242d5ba91960AudiBlack242d5ba91960AudiBlack
237a9d421987MercedesBrown237a9d421987MercedesBrown237a9d421987MercedesBrown237a9d421987MercedesBrown237a9d421987MercedesBrown
4eaf42591996FiatWhite4eaf42591996FiatWhite4eaf42591996FiatWhite4eaf42591996FiatWhite4eaf42591996FiatWhite
637120cb1998JaguarSilver637120cb1998JaguarSilver637120cb1998JaguarSilver637120cb1998JaguarSilver637120cb1998JaguarSilver
953fcf261983BMWWhite953fcf261983BMWWhite953fcf261983BMWWhite953fcf261983BMWWhite953fcf261983BMWWhite
56782c151994FordBrown56782c151994FordBrown56782c151994FordBrown56782c151994FordBrown56782c151994FordBrown
9689a2fe1970HondaOrange9689a2fe1970HondaOrange9689a2fe1970HondaOrange9689a2fe1970HondaOrange9689a2fe1970HondaOrange
1c17466f2005MercedesWhite1c17466f2005MercedesWhite1c17466f2005MercedesWhite1c17466f2005MercedesWhite1c17466f2005MercedesWhite
785cb9fd1966BMWMaroon785cb9fd1966BMWMaroon785cb9fd1966BMWMaroon785cb9fd1966BMWMaroon785cb9fd1966BMWMaroon
e957b3f51981VolkswagenGreene957b3f51981VolkswagenGreene957b3f51981VolkswagenGreene957b3f51981VolkswagenGreene957b3f51981VolkswagenGreen
be64bc121996VolkswagenBrownbe64bc121996VolkswagenBrownbe64bc121996VolkswagenBrownbe64bc121996VolkswagenBrownbe64bc121996VolkswagenBrown
66e0c7fe1977FiatRed66e0c7fe1977FiatRed66e0c7fe1977FiatRed66e0c7fe1977FiatRed66e0c7fe1977FiatRed
a558c3281963JaguarYellowa558c3281963JaguarYellowa558c3281963JaguarYellowa558c3281963JaguarYellowa558c3281963JaguarYellow
6816a8cd1965HondaBlack6816a8cd1965HondaBlack6816a8cd1965HondaBlack6816a8cd1965HondaBlack6816a8cd1965HondaBlack
e7ae03b11971BMWBluee7ae03b11971BMWBluee7ae03b11971BMWBluee7ae03b11971BMWBluee7ae03b11971BMWBlue
397a08d91980BMWBrown397a08d91980BMWBrown397a08d91980BMWBrown397a08d91980BMWBrown397a08d91980BMWBrown
56a834c31991FordOrange56a834c31991FordOrange56a834c31991FordOrange56a834c31991FordOrange56a834c31991FordOrange
baf792b11977FordWhitebaf792b11977FordWhitebaf792b11977FordWhitebaf792b11977FordWhitebaf792b11977FordWhite
393c65931974VolkswagenWhite393c65931974VolkswagenWhite393c65931974VolkswagenWhite393c65931974VolkswagenWhite393c65931974VolkswagenWhite
27fe02a81963VolkswagenRed27fe02a81963VolkswagenRed27fe02a81963VolkswagenRed27fe02a81963VolkswagenRed27fe02a81963VolkswagenRed
859103041984MercedesBrown859103041984MercedesBrown859103041984MercedesBrown859103041984MercedesBrown859103041984MercedesBrown
2f52ad752009VolkswagenOrange2f52ad752009VolkswagenOrange2f52ad752009VolkswagenOrange2f52ad752009VolkswagenOrange2f52ad752009VolkswagenOrange
9a9933781970RenaultYellow9a9933781970RenaultYellow9a9933781970RenaultYellow9a9933781970RenaultYellow9a9933781970RenaultYellow
ea0b18192004VolvoYellowea0b18192004VolvoYellowea0b18192004VolvoYellowea0b18192004VolvoYellowea0b18192004VolvoYellow
2faee69a1989RenaultGreen2faee69a1989RenaultGreen2faee69a1989RenaultGreen2faee69a1989RenaultGreen2faee69a1989RenaultGreen
13e884321978JaguarOrange13e884321978JaguarOrange13e884321978JaguarOrange13e884321978JaguarOrange13e884321978JaguarOrange
d884d1fd1994FordRedd884d1fd1994FordRedd884d1fd1994FordRedd884d1fd1994FordRedd884d1fd1994FordRed
d96048ed2006RenaultSilverd96048ed2006RenaultSilverd96048ed2006RenaultSilverd96048ed2006RenaultSilverd96048ed2006RenaultSilver
2f0569741983BMWBrown2f0569741983BMWBrown2f0569741983BMWBrown2f0569741983BMWBrown2f0569741983BMWBrown
c27e7b401983RenaultBluec27e7b401983RenaultBluec27e7b401983RenaultBluec27e7b401983RenaultBluec27e7b401983RenaultBlue
d52795011994JaguarBlackd52795011994JaguarBlackd52795011994JaguarBlackd52795011994JaguarBlackd52795011994JaguarBlack
e58aa3712000VolkswagenMaroone58aa3712000VolkswagenMaroone58aa3712000VolkswagenMaroone58aa3712000VolkswagenMaroone58aa3712000VolkswagenMaroon
ea0acf591988RenaultSilverea0acf591988RenaultSilverea0acf591988RenaultSilverea0acf591988RenaultSilverea0acf591988RenaultSilver
05977e301986BMWSilver05977e301986BMWSilver05977e301986BMWSilver05977e301986BMWSilver05977e301986BMWSilver
5d7ccf181976FordBrown5d7ccf181976FordBrown5d7ccf181976FordBrown5d7ccf181976FordBrown5d7ccf181976FordBrown
a7faa5b11989FordOrangea7faa5b11989FordOrangea7faa5b11989FordOrangea7faa5b11989FordOrangea7faa5b11989FordOrange
356dbc291975HondaWhite356dbc291975HondaWhite356dbc291975HondaWhite356dbc291975HondaWhite356dbc291975HondaWhite
167e5a4b1971FordBlue167e5a4b1971FordBlue167e5a4b1971FordBlue167e5a4b1971FordBlue167e5a4b1971FordBlue
092c6c0c1968JaguarSilver092c6c0c1968JaguarSilver092c6c0c1968JaguarSilver092c6c0c1968JaguarSilver092c6c0c1968JaguarSilver
d9aeef3f1991FiatBrownd9aeef3f1991FiatBrownd9aeef3f1991FiatBrownd9aeef3f1991FiatBrownd9aeef3f1991FiatBrown
4db2a0dc1969MercedesRed4db2a0dc1969MercedesRed4db2a0dc1969MercedesRed4db2a0dc1969MercedesRed4db2a0dc1969MercedesRed
1d1236d71998AudiMaroon1d1236d71998AudiMaroon1d1236d71998AudiMaroon1d1236d71998AudiMaroon1d1236d71998AudiMaroon
40e20cae1984AudiYellow40e20cae1984AudiYellow40e20cae1984AudiYellow40e20cae1984AudiYellow40e20cae1984AudiYellow

Frozen Rows

IdYearBrandColor
9d80ce391979MercedesOrange
51add06c2007JaguarWhite
a47ef9dc2004RenaultBlack
8391c75b2000RenaultBlue
7558ad431978BMWWhite
ad7e9a551969VolvoSilver
513f0f5c1974RenaultOrange
28adc3d71969MercedesSilver
0124776e1972VolkswagenBlack
31362b6a1960JaguarYellow
de25e88c1988HondaGreen
d25fe2382003VolvoRed
c4e992cc1975RenaultYellow
4d5ad7f81971AudiOrange
1c16cd381997AudiBlack
86ba84051973FiatBlue
363b759f1985BMWOrange
365f0b4c2006RenaultBlue
9f233c7d1962BMWYellow
e083b3151964HondaGreen
79858d521962MercedesSilver
1158093c1971MercedesBlue
b16233c31960RenaultOrange
7e2951ee1978FordBlue
efdd3abc2007MercedesRed
a5b8fd931979VolvoWhite
7af7c5561982JaguarOrange
7a1681491965MercedesOrange
cd6918771975FordBlue
e1937a3c1997FordOrange
933ed7311987FiatYellow
266948dc2006FordBrown
0ac7f1b32002BMWYellow
8606a1d21988MercedesYellow
a1950e062000MercedesBlack
7a9e0f3f1993VolkswagenMaroon
de1537f41966RenaultRed
4caea7ad2002VolkswagenGreen
a92779b41988FiatRed
897092e12006VolvoBlack
b4960bd31975BMWRed
116a8b401990VolvoBlue
756bf9a61977VolvoBlue
ef5da02c2009FordBrown
6d80bb261980AudiSilver
023dd3101985VolvoWhite
271c80501989VolkswagenSilver
98295e631975BMWOrange
f83427541989HondaRed
48adaca02000VolkswagenSilver

Frozen Columns

Id
931bcfdb
bf0b7f3b
030e5679
a4852389
d77490c8
9baafb10
52fced42
e30ee001
5dd61b95
d18ae397
d1045d6a
e6de488c
6474e563
22d3b4f1
cc0ef17a
44e7af87
a7422739
ee7bd30f
e3937b70
cdb8bf02
4f594e95
38f3a8bf
f505349a
7b727d92
dbdc4b09
1f318f85
0ff04ed3
96d39419
ba97d45d
c89bc763
51cca5fa
3f82ab1e
a1c02b53
1300eb6b
832b3ce9
dbc6109d
aecaee7e
5868656a
206620dc
1fce93a6
a3a504f6
5a186381
e67b4206
ac44791f
e1506f9f
6c44bcb6
0dfcdab8
8d4f23d7
de516b6f
4ec8b057
YearBrandColor
1993FiatOrange
2000HondaSilver
1963BMWGreen
1973VolvoBlack
2004BMWYellow
1969AudiBrown
1967MercedesRed
1966RenaultMaroon
1979AudiGreen
1960VolkswagenRed
1963VolvoYellow
2003FiatBlue
1969RenaultYellow
1964MercedesGreen
1974AudiBlack
2002AudiBlack
1975MercedesBlue
1984HondaRed
1963VolkswagenBrown
1975JaguarMaroon
1978RenaultSilver
1977AudiRed
1965RenaultWhite
1969FiatSilver
1991AudiGreen
2005FordGreen
1995VolkswagenYellow
2002BMWOrange
1973FordBlack
1995AudiBlack
2003HondaOrange
1976AudiBlue
2002FiatGreen
1995JaguarYellow
1984FordYellow
1995JaguarYellow
1990AudiOrange
1979VolkswagenBrown
2002AudiSilver
1991MercedesBrown
2008MercedesGreen
1966AudiRed
2009FordGreen
1961FordGreen
1998HondaMaroon
2001AudiBlue
1994FordRed
1966JaguarGreen
1980HondaSilver
1969AudiWhite

On-Demand Data

IdYearBrandColor
87499f041998MercedesGreen
06e568d41974AudiWhite
3b2d38d32007RenaultBlack
5ecda34a2002MercedesGreen
960fd48b1981VolkswagenSilver
fcf241271966HondaOrange
e693f9051998VolvoYellow
92e9a05f1966FordYellow
ddc9639b1962FiatBrown
fca409e11994HondaYellow
51cfc0ca2007BMWBlue
0f6737c81964VolkswagenGreen
c8a6ef2b2004RenaultBlack
8c6fe75c2008MercedesGreen
2a0a45c11972FordMaroon
09672ef31987MercedesYellow
12ec49691981MercedesYellow
d77661491993JaguarGreen
2d7ec7581979VolvoMaroon
4b38093f2007JaguarOrange

Virtual Scrolling - 20000 Rows

IdYearBrandColor
813594021974RenaultRed
ace66b392000RenaultOrange
4060c6962001JaguarMaroon
01f153902004JaguarOrange
4dab2ba31999VolvoOrange
92e5c4b22007VolvoYellow
131c22be1965JaguarBrown
46dcc2671965JaguarOrange
7f98ff4c1993VolkswagenSilver
bcfe9ef71965VolkswagenMaroon
4f6846061960VolvoGreen
e385f0571968AudiBrown
1fec3caf1979FordBlue
8c0aec391977JaguarYellow
ec392f981970RenaultGreen
3d12f0b02000RenaultWhite
34db165c1992FordYellow
e24cbf291986BMWBrown
193a5af72004AudiWhite
e622e40b1999RenaultGreen
1d320bff1995MercedesGreen
85788adc1982RenaultMaroon
f31145dc1987VolvoBlack
f94c021b1965AudiGreen
a6605bc21991AudiWhite
0128258f2001RenaultBrown
7668cd581983MercedesRed
d2b03fea1969JaguarRed
0a84e4301985MercedesBrown
dc94ced31991FiatOrange
3f9372a51973JaguarGreen
4e17f7d61987HondaBrown
62142d101972RenaultWhite
6c7be1332006JaguarRed
1bdecbc71961RenaultMaroon
941410d01969BMWYellow
66be3edb1975FiatBlack
1861307f1968FiatBlue
37fe28ae1968MercedesWhite
174b8cc41987JaguarBlue
<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.