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

Vertical

IdYearBrandColor
d046beb91986FordMaroon
6c2846581992VolvoMaroon
68b9f0631983RenaultOrange
5a6e3a891993RenaultMaroon
4a5dfe331997VolkswagenYellow
b1bb26a61995VolkswagenBlue
8150702b1974MercedesBrown
8070bfa81964RenaultGreen
56fb3a201979HondaRed
e342315e1968VolvoOrange
4a43e5f01974AudiMaroon
a82dbc072002FordRed
d11ac0cc2005HondaMaroon
4c4bbb022007MercedesSilver
bdea3e871987AudiOrange
f86022201993VolkswagenSilver
99ef561b2009AudiRed
7e57e3672004AudiWhite
562556f51965FordBlack
3010a0fd2007AudiBlack
1181fd1d2007MercedesWhite
bbf54e201987VolvoRed
4fd6dec31968VolkswagenGreen
17466a7a1982VolvoBrown
858f7dbe1970HondaMaroon
2970f9d71999FiatMaroon
8a21f3591979HondaOrange
7767a2d01965FiatBrown
d11f95db1973FordMaroon
0bee03c61969MercedesOrange
5afa21651968FiatBrown
4cb091de1986JaguarMaroon
6c7c970b1981VolvoYellow
195e469c1975JaguarGreen
8c96b8c41972BMWYellow
99613fb01962MercedesSilver
002840711963RenaultBrown
3c7fc04c2001FiatMaroon
a9f8c39d2002HondaYellow
688196541998FordRed
6e405f111979JaguarYellow
c786552a1981JaguarGreen
026f1b022005MercedesYellow
f178e14c1985HondaMaroon
6f95a2d32001FiatOrange
acc3eb421978VolkswagenYellow
8da4f5382005BMWRed
c77942da1998MercedesYellow
247bf6b71996AudiRed
60857afc2009VolvoOrange

Horizontal

IdYearBrandColor
b0e851ad1965VolvoWhite
c99ce82c1984HondaBrown
6d5ed7ca1961FiatBrown
843043401961BMWYellow
f18c5e151989AudiYellow
0dc2d7b81969BMWSilver
656d21731979VolkswagenBlack
0ee6ef611974VolvoBrown
019d2de22003VolkswagenWhite
37edd8982000VolkswagenSilver

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
1e4021821980MercedesSilver1e4021821980MercedesSilver1e4021821980MercedesSilver1e4021821980MercedesSilver1e4021821980MercedesSilver
89b6fb592003JaguarBlue89b6fb592003JaguarBlue89b6fb592003JaguarBlue89b6fb592003JaguarBlue89b6fb592003JaguarBlue
7aa1b8601975JaguarSilver7aa1b8601975JaguarSilver7aa1b8601975JaguarSilver7aa1b8601975JaguarSilver7aa1b8601975JaguarSilver
27ad55c11981BMWOrange27ad55c11981BMWOrange27ad55c11981BMWOrange27ad55c11981BMWOrange27ad55c11981BMWOrange
d322779c2005VolvoMaroond322779c2005VolvoMaroond322779c2005VolvoMaroond322779c2005VolvoMaroond322779c2005VolvoMaroon
f00dcb992003FiatSilverf00dcb992003FiatSilverf00dcb992003FiatSilverf00dcb992003FiatSilverf00dcb992003FiatSilver
6ec913772007AudiRed6ec913772007AudiRed6ec913772007AudiRed6ec913772007AudiRed6ec913772007AudiRed
49a51e121961FiatBlue49a51e121961FiatBlue49a51e121961FiatBlue49a51e121961FiatBlue49a51e121961FiatBlue
9588cf152009VolkswagenBlack9588cf152009VolkswagenBlack9588cf152009VolkswagenBlack9588cf152009VolkswagenBlack9588cf152009VolkswagenBlack
71be9ce82001BMWGreen71be9ce82001BMWGreen71be9ce82001BMWGreen71be9ce82001BMWGreen71be9ce82001BMWGreen
66e226571969FordMaroon66e226571969FordMaroon66e226571969FordMaroon66e226571969FordMaroon66e226571969FordMaroon
b10464b71968BMWGreenb10464b71968BMWGreenb10464b71968BMWGreenb10464b71968BMWGreenb10464b71968BMWGreen
133190581965VolkswagenRed133190581965VolkswagenRed133190581965VolkswagenRed133190581965VolkswagenRed133190581965VolkswagenRed
a1366a902009MercedesBlacka1366a902009MercedesBlacka1366a902009MercedesBlacka1366a902009MercedesBlacka1366a902009MercedesBlack
0267f4bf1967VolvoGreen0267f4bf1967VolvoGreen0267f4bf1967VolvoGreen0267f4bf1967VolvoGreen0267f4bf1967VolvoGreen
0abb60d11990BMWGreen0abb60d11990BMWGreen0abb60d11990BMWGreen0abb60d11990BMWGreen0abb60d11990BMWGreen
c23ed05e1981JaguarBrownc23ed05e1981JaguarBrownc23ed05e1981JaguarBrownc23ed05e1981JaguarBrownc23ed05e1981JaguarBrown
3a3f0cc91985FiatSilver3a3f0cc91985FiatSilver3a3f0cc91985FiatSilver3a3f0cc91985FiatSilver3a3f0cc91985FiatSilver
10c39c291996RenaultBlue10c39c291996RenaultBlue10c39c291996RenaultBlue10c39c291996RenaultBlue10c39c291996RenaultBlue
0534406e1985VolkswagenBlue0534406e1985VolkswagenBlue0534406e1985VolkswagenBlue0534406e1985VolkswagenBlue0534406e1985VolkswagenBlue
1e6c8c541962RenaultBlue1e6c8c541962RenaultBlue1e6c8c541962RenaultBlue1e6c8c541962RenaultBlue1e6c8c541962RenaultBlue
4f1f87df1990VolvoOrange4f1f87df1990VolvoOrange4f1f87df1990VolvoOrange4f1f87df1990VolvoOrange4f1f87df1990VolvoOrange
736de8ce1963BMWBlue736de8ce1963BMWBlue736de8ce1963BMWBlue736de8ce1963BMWBlue736de8ce1963BMWBlue
e76c2c7b1990VolvoMaroone76c2c7b1990VolvoMaroone76c2c7b1990VolvoMaroone76c2c7b1990VolvoMaroone76c2c7b1990VolvoMaroon
1ba6d86a1992BMWBlack1ba6d86a1992BMWBlack1ba6d86a1992BMWBlack1ba6d86a1992BMWBlack1ba6d86a1992BMWBlack
ec3573571984AudiOrangeec3573571984AudiOrangeec3573571984AudiOrangeec3573571984AudiOrangeec3573571984AudiOrange
6ec6301c1988HondaRed6ec6301c1988HondaRed6ec6301c1988HondaRed6ec6301c1988HondaRed6ec6301c1988HondaRed
004cf3061982BMWMaroon004cf3061982BMWMaroon004cf3061982BMWMaroon004cf3061982BMWMaroon004cf3061982BMWMaroon
8c012fc01962FiatOrange8c012fc01962FiatOrange8c012fc01962FiatOrange8c012fc01962FiatOrange8c012fc01962FiatOrange
9614bdab1992MercedesRed9614bdab1992MercedesRed9614bdab1992MercedesRed9614bdab1992MercedesRed9614bdab1992MercedesRed
6bf65f5f2006RenaultBlack6bf65f5f2006RenaultBlack6bf65f5f2006RenaultBlack6bf65f5f2006RenaultBlack6bf65f5f2006RenaultBlack
71aa02c31993BMWYellow71aa02c31993BMWYellow71aa02c31993BMWYellow71aa02c31993BMWYellow71aa02c31993BMWYellow
e505be382003RenaultSilvere505be382003RenaultSilvere505be382003RenaultSilvere505be382003RenaultSilvere505be382003RenaultSilver
602c4f022006VolkswagenMaroon602c4f022006VolkswagenMaroon602c4f022006VolkswagenMaroon602c4f022006VolkswagenMaroon602c4f022006VolkswagenMaroon
9c65c0ac1996VolkswagenBlack9c65c0ac1996VolkswagenBlack9c65c0ac1996VolkswagenBlack9c65c0ac1996VolkswagenBlack9c65c0ac1996VolkswagenBlack
455f4b4e1971AudiYellow455f4b4e1971AudiYellow455f4b4e1971AudiYellow455f4b4e1971AudiYellow455f4b4e1971AudiYellow
ff8a75202007FiatBrownff8a75202007FiatBrownff8a75202007FiatBrownff8a75202007FiatBrownff8a75202007FiatBrown
072510aa1987FordOrange072510aa1987FordOrange072510aa1987FordOrange072510aa1987FordOrange072510aa1987FordOrange
bac059781999VolkswagenBrownbac059781999VolkswagenBrownbac059781999VolkswagenBrownbac059781999VolkswagenBrownbac059781999VolkswagenBrown
f9add53f2007MercedesRedf9add53f2007MercedesRedf9add53f2007MercedesRedf9add53f2007MercedesRedf9add53f2007MercedesRed
909b83801966FordGreen909b83801966FordGreen909b83801966FordGreen909b83801966FordGreen909b83801966FordGreen
b5a891161988AudiBlueb5a891161988AudiBlueb5a891161988AudiBlueb5a891161988AudiBlueb5a891161988AudiBlue
57b417d21973MercedesBlack57b417d21973MercedesBlack57b417d21973MercedesBlack57b417d21973MercedesBlack57b417d21973MercedesBlack
9f2f55371990FiatBlue9f2f55371990FiatBlue9f2f55371990FiatBlue9f2f55371990FiatBlue9f2f55371990FiatBlue
0eea048a1984VolkswagenGreen0eea048a1984VolkswagenGreen0eea048a1984VolkswagenGreen0eea048a1984VolkswagenGreen0eea048a1984VolkswagenGreen
6ce134961966FordBlack6ce134961966FordBlack6ce134961966FordBlack6ce134961966FordBlack6ce134961966FordBlack
900dec321966RenaultMaroon900dec321966RenaultMaroon900dec321966RenaultMaroon900dec321966RenaultMaroon900dec321966RenaultMaroon
8583072f1963FiatOrange8583072f1963FiatOrange8583072f1963FiatOrange8583072f1963FiatOrange8583072f1963FiatOrange
faada8c81979FiatOrangefaada8c81979FiatOrangefaada8c81979FiatOrangefaada8c81979FiatOrangefaada8c81979FiatOrange
0b98d31d1992FiatYellow0b98d31d1992FiatYellow0b98d31d1992FiatYellow0b98d31d1992FiatYellow0b98d31d1992FiatYellow

Frozen Rows

IdYearBrandColor
46fb0d632001JaguarWhite
5d1e1abd1968RenaultGreen
d986a7b02004BMWWhite
db768e1c1990FordBrown
7edd88a31989RenaultBlue
b180a8131986VolvoMaroon
53759bd61979FordBlue
adaa81881973FordWhite
b956b98d1988BMWSilver
858091da1967BMWBrown
32ea346e1968VolkswagenGreen
db6f9bf41972FiatGreen
403223d61984JaguarWhite
fd6a4caa2005MercedesBrown
0c8df48c1965MercedesBrown
73a42f441962HondaWhite
c66500732004VolvoWhite
c28b23bf1974BMWMaroon
d11afbf11970HondaMaroon
f87057742004VolkswagenMaroon
c26ca8161968AudiBlack
ef0ed3f41963VolvoBlack
584a8dda1981HondaGreen
d66b39d71972VolvoBlack
ed30eb931972BMWOrange
02e986221972MercedesWhite
e70a48312004FordRed
dce78a031976HondaBlack
0efe35e91990JaguarOrange
a4e4dbce2004RenaultYellow
bf4f9e001978AudiYellow
aab12fec2002HondaSilver
4ccc511a1990AudiBlue
8164b9ca1996AudiBrown
c11010a81973MercedesMaroon
37c88db41976RenaultOrange
8b6101201992RenaultYellow
0a2b652a1979RenaultBlack
8dfe81242004FiatBrown
082136782008VolvoSilver
aa6bbea82008VolkswagenRed
f88f6ab11960FordBrown
05e498bd1993VolvoOrange
192de8cb1998JaguarRed
5cdb35ff1992RenaultBlue
23a42d1a1980FordOrange
d4b7e0ad1974AudiBrown
3e6d95791996FiatWhite
733edb702003HondaWhite
4a8992681978MercedesBlue

Frozen Columns

Id
c7b4c56b
3d3afff0
945bde82
593f3a24
ad0ee265
c2e7a585
c14b4bf5
18026365
10768668
866523cd
1a31001e
1cb70f37
bf4dce92
fd3da296
b47b375b
a68535f2
2d087467
d324f43a
ceeb5434
863afe7b
69a6b6a6
18488a05
e7e1e4fa
533375bf
0ea3cd75
56e1cb16
482f3cca
dba06df9
afd1b391
aa57015e
a4b17ae1
3d32f3cc
9e5dbe11
1aeffbdb
e8a93c82
7d121a69
47575799
0582c1f3
a55d91f7
9e2d752c
0c6d7933
fe2a4dfe
fe51d2ed
caf8fdf3
88929bc7
f67ef7d4
d0e79a7a
3ec8ff08
d78073bd
432eda24
YearBrandColor
2003VolvoYellow
1971RenaultMaroon
1998JaguarBlack
2002AudiMaroon
1986AudiGreen
1987AudiBrown
1984FiatWhite
1980FiatWhite
2003VolvoWhite
2004BMWSilver
2006RenaultYellow
1989RenaultOrange
1971HondaBlack
1976FordSilver
2008VolkswagenRed
1984BMWBlack
1964AudiSilver
1990VolkswagenMaroon
1970HondaBlack
1964FordGreen
2008AudiGreen
1969FordWhite
1980VolkswagenMaroon
1992MercedesGreen
1998RenaultBlack
1995JaguarOrange
1971FordYellow
1997AudiBrown
1964HondaSilver
1980AudiBlack
2001VolvoMaroon
2002JaguarGreen
2005JaguarWhite
1987VolkswagenWhite
2001JaguarGreen
1978HondaYellow
1981AudiRed
1961RenaultBrown
1995VolkswagenOrange
1972MercedesBrown
1971VolkswagenOrange
1966AudiOrange
1961MercedesBlue
2006VolvoRed
1983AudiSilver
1975VolkswagenMaroon
1969JaguarMaroon
1961VolvoMaroon
2003AudiSilver
1973FiatGreen

On-Demand Data

IdYearBrandColor
0726472a1967AudiBlack
85a9395c1973MercedesBlack
c6b0d7431998RenaultWhite
70bdf1531991VolvoRed
08d217d92001FiatWhite
9fd0df701994FordBlack
8f0471f51995HondaBlack
621d85251960MercedesYellow
0f34b5421981RenaultRed
b18dbd131995JaguarBrown
c5a0b84d1997MercedesSilver
8c2909121998JaguarGreen
d63b21041989AudiGreen
f3a0778f1972JaguarGreen
525799941992BMWYellow
774d59e31978MercedesBlue
bf8318601995JaguarBrown
4f52a9ea2008BMWYellow
d61146941978VolkswagenBlue
9f9a1cdc2000MercedesRed

Virtual Scrolling - 20000 Rows

IdYearBrandColor
66a146341963JaguarYellow
9c518dce2004FiatYellow
169d73711977FiatYellow
378489241974RenaultWhite
0306167c1968JaguarBrown
68f910202006FiatSilver
273fce0c1991FiatYellow
6e3b93191979AudiBlack
0c071f731990FordMaroon
a7845b291986MercedesSilver
5b7fdb1d1994FordBrown
1f65d8271969HondaBlue
ac9199381964HondaOrange
874a806b1975RenaultYellow
3573c8432002AudiBrown
c3b370db1986HondaMaroon
9a02376f1984BMWOrange
dcffe2531997MercedesYellow
b7bafc312009FiatGreen
d897c1f91961RenaultBlack
488e0bfb1990VolvoMaroon
257b1fbf2001HondaWhite
2679fc2a1969MercedesBrown
8eccf5642002VolvoOrange
f7c14bac1993RenaultBlue
67d84ebe1988VolvoBlue
3d9178712004MercedesOrange
c331fbc51972HondaWhite
bdd1d81c1993VolvoMaroon
7fbb2fc41966AudiBlue
308548891988RenaultOrange
bea966a62004FordBlack
4204d4b82001RenaultSilver
b9807e8a1982JaguarYellow
7550b2f21960VolkswagenGreen
07b56dac1979HondaGreen
884cb1701998BMWBlue
38877d2d1968VolkswagenSilver
85d24b8b2006FiatBrown
f072fc0c1997RenaultBlack
<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.