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

Vertical

IdYearBrandColor
8eabf72a2007BMWSilver
df85aa361984BMWGreen
e20db48d1992FiatWhite
fda7a8971979FiatOrange
caaff9011988FiatOrange
95312d472002VolvoOrange
72dd1f9a2008FordGreen
3b5d88111990AudiYellow
412a35491989JaguarBrown
17efe7d41968BMWOrange
f56250812008BMWOrange
ba08de171980VolkswagenBlack
5b91cfce1985VolvoYellow
5d5647351978FiatSilver
3a7836a41989RenaultRed
c37dfc1b1977BMWSilver
d6967a4b1985MercedesRed
36f824012007BMWWhite
5a7b81731980FiatBlack
8d537ae71975RenaultRed
0f7300c41978RenaultGreen
6d3b90ad2007MercedesBlack
ce85d0fe1991MercedesBlack
a0d63bd62008VolkswagenGreen
69436a3b1995HondaWhite
2dc5a0981982VolvoSilver
be912fa71970VolkswagenYellow
d105cc4b1994JaguarYellow
3461e4592007BMWRed
c36a6a5e2008RenaultMaroon
43a579931980JaguarOrange
10a8b0601999AudiBrown
64438bd71988VolvoGreen
351e1ff71988RenaultBrown
f9ce5c3e1995AudiYellow
fac5f7171988RenaultBlack
f4b31d751969BMWMaroon
7d9a1c371990RenaultYellow
faf0d7531964HondaBrown
2c63020f2004VolvoGreen
0d037d002005HondaBrown
860a33bf1982HondaMaroon
369dbca62005MercedesRed
1db2f7101984MercedesWhite
bc6d77ee2008VolkswagenBlue
97af15da1971RenaultOrange
1bd158002005VolvoWhite
7d1b09441985RenaultSilver
37f4d5a52000FiatBrown
379225ce1999VolkswagenYellow

Horizontal

IdYearBrandColor
db5705f01963AudiWhite
83d653d82000VolkswagenOrange
f26672111964MercedesBlack
0cd3d4371975FordYellow
ae16bee91964VolkswagenWhite
1051748c1989FiatBrown
95b8d7981975HondaOrange
f6e3b02d1992VolkswagenMaroon
e34e9a551985VolkswagenWhite
8215361a1984HondaMaroon

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
5c90cd261964AudiBlack5c90cd261964AudiBlack5c90cd261964AudiBlack5c90cd261964AudiBlack5c90cd261964AudiBlack
600030661999JaguarGreen600030661999JaguarGreen600030661999JaguarGreen600030661999JaguarGreen600030661999JaguarGreen
1dc10b0f2004JaguarOrange1dc10b0f2004JaguarOrange1dc10b0f2004JaguarOrange1dc10b0f2004JaguarOrange1dc10b0f2004JaguarOrange
0a9680592000FordOrange0a9680592000FordOrange0a9680592000FordOrange0a9680592000FordOrange0a9680592000FordOrange
1a4250f21978MercedesWhite1a4250f21978MercedesWhite1a4250f21978MercedesWhite1a4250f21978MercedesWhite1a4250f21978MercedesWhite
77ec02ed1996AudiYellow77ec02ed1996AudiYellow77ec02ed1996AudiYellow77ec02ed1996AudiYellow77ec02ed1996AudiYellow
ebf791eb1964AudiBrownebf791eb1964AudiBrownebf791eb1964AudiBrownebf791eb1964AudiBrownebf791eb1964AudiBrown
a04fea981975JaguarWhitea04fea981975JaguarWhitea04fea981975JaguarWhitea04fea981975JaguarWhitea04fea981975JaguarWhite
e532662e2003MercedesOrangee532662e2003MercedesOrangee532662e2003MercedesOrangee532662e2003MercedesOrangee532662e2003MercedesOrange
e4bcaa9e1962VolvoGreene4bcaa9e1962VolvoGreene4bcaa9e1962VolvoGreene4bcaa9e1962VolvoGreene4bcaa9e1962VolvoGreen
c84957991995JaguarYellowc84957991995JaguarYellowc84957991995JaguarYellowc84957991995JaguarYellowc84957991995JaguarYellow
2f6060b61973FiatBlack2f6060b61973FiatBlack2f6060b61973FiatBlack2f6060b61973FiatBlack2f6060b61973FiatBlack
0f05d2632002VolvoMaroon0f05d2632002VolvoMaroon0f05d2632002VolvoMaroon0f05d2632002VolvoMaroon0f05d2632002VolvoMaroon
dadde00f1989FordOrangedadde00f1989FordOrangedadde00f1989FordOrangedadde00f1989FordOrangedadde00f1989FordOrange
b1a1da3d1973AudiGreenb1a1da3d1973AudiGreenb1a1da3d1973AudiGreenb1a1da3d1973AudiGreenb1a1da3d1973AudiGreen
a0655ec51964FiatReda0655ec51964FiatReda0655ec51964FiatReda0655ec51964FiatReda0655ec51964FiatRed
31a19e4a1984VolkswagenMaroon31a19e4a1984VolkswagenMaroon31a19e4a1984VolkswagenMaroon31a19e4a1984VolkswagenMaroon31a19e4a1984VolkswagenMaroon
eb5f04771962RenaultWhiteeb5f04771962RenaultWhiteeb5f04771962RenaultWhiteeb5f04771962RenaultWhiteeb5f04771962RenaultWhite
abfdbd481993JaguarSilverabfdbd481993JaguarSilverabfdbd481993JaguarSilverabfdbd481993JaguarSilverabfdbd481993JaguarSilver
6a23c5ba1987FiatRed6a23c5ba1987FiatRed6a23c5ba1987FiatRed6a23c5ba1987FiatRed6a23c5ba1987FiatRed
ab6631671995VolvoMaroonab6631671995VolvoMaroonab6631671995VolvoMaroonab6631671995VolvoMaroonab6631671995VolvoMaroon
0c3122ea1976VolvoWhite0c3122ea1976VolvoWhite0c3122ea1976VolvoWhite0c3122ea1976VolvoWhite0c3122ea1976VolvoWhite
efb2caec1992FiatSilverefb2caec1992FiatSilverefb2caec1992FiatSilverefb2caec1992FiatSilverefb2caec1992FiatSilver
9a715ae91984HondaGreen9a715ae91984HondaGreen9a715ae91984HondaGreen9a715ae91984HondaGreen9a715ae91984HondaGreen
e32bb6371964RenaultBlacke32bb6371964RenaultBlacke32bb6371964RenaultBlacke32bb6371964RenaultBlacke32bb6371964RenaultBlack
ada7ed1a1977RenaultGreenada7ed1a1977RenaultGreenada7ed1a1977RenaultGreenada7ed1a1977RenaultGreenada7ed1a1977RenaultGreen
6bd1eb161977JaguarSilver6bd1eb161977JaguarSilver6bd1eb161977JaguarSilver6bd1eb161977JaguarSilver6bd1eb161977JaguarSilver
0b5cd57d1989MercedesBlack0b5cd57d1989MercedesBlack0b5cd57d1989MercedesBlack0b5cd57d1989MercedesBlack0b5cd57d1989MercedesBlack
3f80a89a1962MercedesWhite3f80a89a1962MercedesWhite3f80a89a1962MercedesWhite3f80a89a1962MercedesWhite3f80a89a1962MercedesWhite
a47b675b1987VolkswagenOrangea47b675b1987VolkswagenOrangea47b675b1987VolkswagenOrangea47b675b1987VolkswagenOrangea47b675b1987VolkswagenOrange
fa64e4f81972FordWhitefa64e4f81972FordWhitefa64e4f81972FordWhitefa64e4f81972FordWhitefa64e4f81972FordWhite
33decb121981BMWBlue33decb121981BMWBlue33decb121981BMWBlue33decb121981BMWBlue33decb121981BMWBlue
304a17411964FiatOrange304a17411964FiatOrange304a17411964FiatOrange304a17411964FiatOrange304a17411964FiatOrange
7b971bac1964AudiBlack7b971bac1964AudiBlack7b971bac1964AudiBlack7b971bac1964AudiBlack7b971bac1964AudiBlack
f5ff901d1979VolvoRedf5ff901d1979VolvoRedf5ff901d1979VolvoRedf5ff901d1979VolvoRedf5ff901d1979VolvoRed
9c727f1d2009BMWGreen9c727f1d2009BMWGreen9c727f1d2009BMWGreen9c727f1d2009BMWGreen9c727f1d2009BMWGreen
1a3b00001966AudiOrange1a3b00001966AudiOrange1a3b00001966AudiOrange1a3b00001966AudiOrange1a3b00001966AudiOrange
b094a6f62004FiatBlackb094a6f62004FiatBlackb094a6f62004FiatBlackb094a6f62004FiatBlackb094a6f62004FiatBlack
3745376b1971RenaultMaroon3745376b1971RenaultMaroon3745376b1971RenaultMaroon3745376b1971RenaultMaroon3745376b1971RenaultMaroon
369771961962HondaYellow369771961962HondaYellow369771961962HondaYellow369771961962HondaYellow369771961962HondaYellow
274bb98e1978HondaRed274bb98e1978HondaRed274bb98e1978HondaRed274bb98e1978HondaRed274bb98e1978HondaRed
c0481e5e2008VolvoWhitec0481e5e2008VolvoWhitec0481e5e2008VolvoWhitec0481e5e2008VolvoWhitec0481e5e2008VolvoWhite
562e39891987MercedesBlack562e39891987MercedesBlack562e39891987MercedesBlack562e39891987MercedesBlack562e39891987MercedesBlack
a8dee4021979HondaSilvera8dee4021979HondaSilvera8dee4021979HondaSilvera8dee4021979HondaSilvera8dee4021979HondaSilver
bcc5df6d1990VolkswagenWhitebcc5df6d1990VolkswagenWhitebcc5df6d1990VolkswagenWhitebcc5df6d1990VolkswagenWhitebcc5df6d1990VolkswagenWhite
fd45279b1980RenaultRedfd45279b1980RenaultRedfd45279b1980RenaultRedfd45279b1980RenaultRedfd45279b1980RenaultRed
87b2bf541989RenaultGreen87b2bf541989RenaultGreen87b2bf541989RenaultGreen87b2bf541989RenaultGreen87b2bf541989RenaultGreen
4647130e1967JaguarSilver4647130e1967JaguarSilver4647130e1967JaguarSilver4647130e1967JaguarSilver4647130e1967JaguarSilver
c128bda91977JaguarSilverc128bda91977JaguarSilverc128bda91977JaguarSilverc128bda91977JaguarSilverc128bda91977JaguarSilver
908901692006AudiSilver908901692006AudiSilver908901692006AudiSilver908901692006AudiSilver908901692006AudiSilver

Frozen Rows

IdYearBrandColor
4e5812fd1960HondaOrange
bd3163731962FordBlack
0faa57001961MercedesBlack
4fe2f9b21970JaguarMaroon
f5dc44a71960RenaultBlack
4987ef711960FordWhite
177a2de42005MercedesWhite
95d1b1ea1963BMWBlue
2adb4e341966FiatBlack
060f6a5f1961VolvoBlue
d2c1446b1964RenaultYellow
0ad688eb1994FiatGreen
c7837f131960FiatBlue
a441471e1980AudiRed
5694f60d1985MercedesBrown
6b56a91f1964HondaRed
dc3873681966AudiOrange
965d708f1977FiatRed
1ef4ed2c1989VolvoSilver
1c4eee262004VolvoBlack
4d5e67ef1968HondaBlack
bb9b6ec11971VolvoWhite
b7440b1b1971FordGreen
5a11d2dd1962JaguarRed
5f30696b1969FiatWhite
8b443ad52006VolvoSilver
539dc1f81974MercedesYellow
bc446f092004VolvoWhite
1be649321993JaguarYellow
97921f241991RenaultRed
f07c876c1974AudiOrange
acb092351980MercedesBlack
cec581402006VolvoBrown
1ce60a631992AudiSilver
a360b45e1978RenaultGreen
037652631979MercedesSilver
fbda6f362007JaguarOrange
b40216321962FiatSilver
c9c854131981FordRed
773dbbd21998HondaMaroon
2317d3fd1984HondaMaroon
7d33a3351984JaguarRed
15188a8b1994HondaBlack
52c839da1998MercedesOrange
be7817c82004VolvoSilver
0329b7771982VolkswagenSilver
097a37e31974AudiYellow
e94ef3621977VolkswagenGreen
690402cb1985BMWSilver
4004eedb1975RenaultOrange

Frozen Columns

Id
76dc507a
e0ac12a1
e643680b
bc7f6a19
41c01f40
231c5d52
a83efb4a
6492ef0e
b07cff5a
0abc62fb
16456aa4
ccd49938
253e2bf6
e2a361c7
0789abc0
68ab035d
77bf3aaf
4e7a9461
dc7fdf02
928ebacd
1450872a
9084b96a
f53d7c55
c6f35665
159b44c2
18d8c600
ca01a861
531cde7a
468b7906
6deada8b
c68be3f1
598e4ba4
9fc0df26
245a2b6d
f949c6fd
87ff6b3b
864ccaa0
2c8caaff
444ddf95
48473851
75c15328
22604335
bc3a6e7b
5d0d08fc
48ce14a6
18d59408
72d5dc74
fcf7a415
b5b3b1a7
e8026168
YearBrandColor
1981JaguarMaroon
1972JaguarRed
2003HondaWhite
1976BMWRed
1981JaguarSilver
1992VolvoRed
1991FiatWhite
1982JaguarOrange
1994AudiBrown
1966VolkswagenBrown
1991MercedesOrange
1991RenaultYellow
2000VolvoRed
1978VolvoBlue
1987JaguarBlack
2000VolvoSilver
1967JaguarBrown
2009AudiSilver
1998JaguarGreen
1988FordBlack
2001HondaBlue
2006AudiYellow
1990VolvoYellow
1997MercedesWhite
2002VolkswagenRed
1985FiatMaroon
1988FordOrange
2006JaguarSilver
1973FordYellow
2003VolkswagenYellow
1981BMWWhite
1989VolvoBlack
1992JaguarWhite
1971MercedesRed
2005FiatGreen
1980VolvoBrown
1993MercedesGreen
2007VolvoMaroon
1969VolvoOrange
1977FiatSilver
1960FiatYellow
1976FordYellow
2009MercedesBrown
2008FordRed
1961VolvoBlack
1969RenaultWhite
1983HondaMaroon
2000VolkswagenBlue
1963HondaBlack
1983JaguarGreen

On-Demand Data

IdYearBrandColor
7d3b16632008JaguarBrown
ec8d47271978AudiGreen
550b66fb2002VolvoYellow
af78bb4c1986HondaBrown
67fec12c1994HondaWhite
f8bb7dba1961RenaultBlue
4463fe8f1976BMWBlack
1aa5d2832008AudiSilver
fe5c6bb51984HondaRed
10bab76e1973FordYellow
6c3816fa2008FiatBlack
937fac581971VolkswagenRed
534decbd2001JaguarBlue
3c8323801977HondaMaroon
e456d6aa1968VolkswagenMaroon
688db9381965MercedesGreen
13f9cbb51968VolkswagenSilver
8c64807f1998FiatMaroon
46b97f991988RenaultSilver
3e0007541975BMWBrown

Virtual Scrolling - 20000 Rows

IdYearBrandColor
db1a528d1981FiatRed
29e819852003MercedesWhite
60d88f6e1965AudiRed
e18823d21985VolvoOrange
388cc7691973MercedesBrown
151228822006VolkswagenBlue
63269c1f1968HondaWhite
da4ec0f61977JaguarBlue
6712cafe1988BMWWhite
44903b011985MercedesBrown
f33d19ff1973VolvoRed
b969f9602006RenaultSilver
e7028cc91980VolvoGreen
6e1fb2021974FiatMaroon
ce9982141998FiatGreen
74fc95221986BMWGreen
fef622141973VolvoMaroon
3f18b90f1968BMWWhite
91a465081980VolvoRed
db415d2e1967JaguarRed
8ab877a91970FordBlack
73826c781969BMWGreen
ef3a34062002RenaultSilver
9c76e5461969FiatOrange
6a1335c61990FordRed
c211ad922009BMWRed
9389c10b2003FordYellow
e2c91b8a1964BMWYellow
513a12c72007MercedesRed
90c93c491995FordBlue
623329471966VolvoMaroon
3005fa3b1980FordWhite
1ce978321973BMWRed
eac28ba31988BMWGreen
e8395ba91972HondaBlack
fd56e4b71961RenaultSilver
28ac47882009FiatRed
9c7f204f1999JaguarGreen
f042d13d2002HondaBlack
c56737df1960AudiYellow
<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.0.16 on Mojarra-2.2.8.