DataTable - Scrollable

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

Documentation

Vertical

IdYearBrandColor
f4c7ad401991JaguarBlack
4363a2a81999JaguarRed
ee33f1171972AudiYellow
988234bf1974HondaSilver
cddc08c61992AudiBrown
ea67338e1963VolkswagenRed
3d8b51d62005MercedesYellow
457043691996JaguarRed
9f61db981966HondaYellow
9e7f101a1966VolkswagenRed
2a4bfcfd2001RenaultBlue
35df33ed2005FordOrange
c9a95b6b2000FiatMaroon
8d74223a1999HondaSilver
0edc57c71972RenaultBlack
bc6be3d31964MercedesOrange
13d6d8872007RenaultYellow
936324f61971FordMaroon
b52e781c1965FiatBlack
559719651998FordBrown
8e759a011982AudiBrown
9d4f74581973VolkswagenBlack
e50f7d0c1962AudiWhite
b8aaf4131977VolkswagenBlack
ef1f2c8d1984HondaBlue
ea0677741990HondaMaroon
2a498bb61986FiatBlack
349567f22005FordOrange
65490f9e2000BMWYellow
6a09484c1976FiatOrange
825c95ea1977AudiWhite
e2f6ca682008FordYellow
2076b1212001BMWMaroon
0fac35c61998MercedesWhite
44db9b9c2009AudiSilver
a519e0f71976BMWRed
30649d331985HondaBlue
ba3403af1989HondaGreen
8461cb381974FordBlack
9928eed21997JaguarBlue
215f77e61973VolvoGreen
a1dd473c1982HondaRed
f147c9e61988BMWRed
f1015b7b2003AudiOrange
131550a11993FordGreen
c32465851989FiatBrown
1d9595411984VolvoYellow
26d43b432002HondaBrown
0f154c362003RenaultOrange
f44a05341976VolkswagenMaroon

Horizontal

IdYearBrandColor
6059390b1974FiatOrange
488e6c6b1993MercedesSilver
48a6e7ed1998VolkswagenBlack
e131655d2001VolkswagenRed
7408df5b1967RenaultYellow
aa05cf851982VolvoOrange
8b9395361981FiatBlack
dc259a141998AudiBlue
f6915da01963FiatOrange
e80b298c1987FordOrange

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
b287d5591970RenaultBlueb287d5591970RenaultBlueb287d5591970RenaultBlueb287d5591970RenaultBlueb287d5591970RenaultBlue
f4b4a0b41991VolvoWhitef4b4a0b41991VolvoWhitef4b4a0b41991VolvoWhitef4b4a0b41991VolvoWhitef4b4a0b41991VolvoWhite
315aa48e1984RenaultMaroon315aa48e1984RenaultMaroon315aa48e1984RenaultMaroon315aa48e1984RenaultMaroon315aa48e1984RenaultMaroon
fe350d7c1966JaguarMaroonfe350d7c1966JaguarMaroonfe350d7c1966JaguarMaroonfe350d7c1966JaguarMaroonfe350d7c1966JaguarMaroon
e6496a6f1991VolkswagenMaroone6496a6f1991VolkswagenMaroone6496a6f1991VolkswagenMaroone6496a6f1991VolkswagenMaroone6496a6f1991VolkswagenMaroon
d82e81751990FiatBrownd82e81751990FiatBrownd82e81751990FiatBrownd82e81751990FiatBrownd82e81751990FiatBrown
2b2a76be1980HondaWhite2b2a76be1980HondaWhite2b2a76be1980HondaWhite2b2a76be1980HondaWhite2b2a76be1980HondaWhite
93cb03a62000FiatGreen93cb03a62000FiatGreen93cb03a62000FiatGreen93cb03a62000FiatGreen93cb03a62000FiatGreen
ae1be3cd1997FiatBlackae1be3cd1997FiatBlackae1be3cd1997FiatBlackae1be3cd1997FiatBlackae1be3cd1997FiatBlack
467c174c1995MercedesRed467c174c1995MercedesRed467c174c1995MercedesRed467c174c1995MercedesRed467c174c1995MercedesRed
4e262db71963HondaBrown4e262db71963HondaBrown4e262db71963HondaBrown4e262db71963HondaBrown4e262db71963HondaBrown
094a9b5b2005JaguarRed094a9b5b2005JaguarRed094a9b5b2005JaguarRed094a9b5b2005JaguarRed094a9b5b2005JaguarRed
cb0d32e41992RenaultWhitecb0d32e41992RenaultWhitecb0d32e41992RenaultWhitecb0d32e41992RenaultWhitecb0d32e41992RenaultWhite
b21446be1966VolvoRedb21446be1966VolvoRedb21446be1966VolvoRedb21446be1966VolvoRedb21446be1966VolvoRed
337059782008RenaultBlue337059782008RenaultBlue337059782008RenaultBlue337059782008RenaultBlue337059782008RenaultBlue
b07d2c5a1975FiatMaroonb07d2c5a1975FiatMaroonb07d2c5a1975FiatMaroonb07d2c5a1975FiatMaroonb07d2c5a1975FiatMaroon
30d7eb281963VolkswagenWhite30d7eb281963VolkswagenWhite30d7eb281963VolkswagenWhite30d7eb281963VolkswagenWhite30d7eb281963VolkswagenWhite
49b402851967JaguarGreen49b402851967JaguarGreen49b402851967JaguarGreen49b402851967JaguarGreen49b402851967JaguarGreen
8555b22a1969HondaOrange8555b22a1969HondaOrange8555b22a1969HondaOrange8555b22a1969HondaOrange8555b22a1969HondaOrange
d43fbb431993VolvoMaroond43fbb431993VolvoMaroond43fbb431993VolvoMaroond43fbb431993VolvoMaroond43fbb431993VolvoMaroon
5d235ef32006VolkswagenGreen5d235ef32006VolkswagenGreen5d235ef32006VolkswagenGreen5d235ef32006VolkswagenGreen5d235ef32006VolkswagenGreen
8d015dad2006FordWhite8d015dad2006FordWhite8d015dad2006FordWhite8d015dad2006FordWhite8d015dad2006FordWhite
005762422003FiatBrown005762422003FiatBrown005762422003FiatBrown005762422003FiatBrown005762422003FiatBrown
24f788e31991AudiMaroon24f788e31991AudiMaroon24f788e31991AudiMaroon24f788e31991AudiMaroon24f788e31991AudiMaroon
a018e0e11990BMWBlacka018e0e11990BMWBlacka018e0e11990BMWBlacka018e0e11990BMWBlacka018e0e11990BMWBlack
5f24f3102008VolkswagenMaroon5f24f3102008VolkswagenMaroon5f24f3102008VolkswagenMaroon5f24f3102008VolkswagenMaroon5f24f3102008VolkswagenMaroon
9c00e5631983MercedesYellow9c00e5631983MercedesYellow9c00e5631983MercedesYellow9c00e5631983MercedesYellow9c00e5631983MercedesYellow
7487db981970MercedesSilver7487db981970MercedesSilver7487db981970MercedesSilver7487db981970MercedesSilver7487db981970MercedesSilver
275b28112000HondaSilver275b28112000HondaSilver275b28112000HondaSilver275b28112000HondaSilver275b28112000HondaSilver
fbf076522001VolvoGreenfbf076522001VolvoGreenfbf076522001VolvoGreenfbf076522001VolvoGreenfbf076522001VolvoGreen
c8592bec1962HondaBluec8592bec1962HondaBluec8592bec1962HondaBluec8592bec1962HondaBluec8592bec1962HondaBlue
970af2b62009RenaultRed970af2b62009RenaultRed970af2b62009RenaultRed970af2b62009RenaultRed970af2b62009RenaultRed
165cfc662001JaguarBlue165cfc662001JaguarBlue165cfc662001JaguarBlue165cfc662001JaguarBlue165cfc662001JaguarBlue
44f1d9e01980BMWBlack44f1d9e01980BMWBlack44f1d9e01980BMWBlack44f1d9e01980BMWBlack44f1d9e01980BMWBlack
6131fd7f1969HondaRed6131fd7f1969HondaRed6131fd7f1969HondaRed6131fd7f1969HondaRed6131fd7f1969HondaRed
cea3ad201966MercedesSilvercea3ad201966MercedesSilvercea3ad201966MercedesSilvercea3ad201966MercedesSilvercea3ad201966MercedesSilver
be0d067d2009VolvoOrangebe0d067d2009VolvoOrangebe0d067d2009VolvoOrangebe0d067d2009VolvoOrangebe0d067d2009VolvoOrange
919f148b1988BMWGreen919f148b1988BMWGreen919f148b1988BMWGreen919f148b1988BMWGreen919f148b1988BMWGreen
71d063c61997VolvoYellow71d063c61997VolvoYellow71d063c61997VolvoYellow71d063c61997VolvoYellow71d063c61997VolvoYellow
1e052c411999RenaultBrown1e052c411999RenaultBrown1e052c411999RenaultBrown1e052c411999RenaultBrown1e052c411999RenaultBrown
f37de7302006MercedesBluef37de7302006MercedesBluef37de7302006MercedesBluef37de7302006MercedesBluef37de7302006MercedesBlue
c4c247f11998MercedesBlackc4c247f11998MercedesBlackc4c247f11998MercedesBlackc4c247f11998MercedesBlackc4c247f11998MercedesBlack
2e9099552005RenaultWhite2e9099552005RenaultWhite2e9099552005RenaultWhite2e9099552005RenaultWhite2e9099552005RenaultWhite
7ebb889a1989MercedesBlack7ebb889a1989MercedesBlack7ebb889a1989MercedesBlack7ebb889a1989MercedesBlack7ebb889a1989MercedesBlack
475b0d271983VolvoOrange475b0d271983VolvoOrange475b0d271983VolvoOrange475b0d271983VolvoOrange475b0d271983VolvoOrange
4b75bb6f1996AudiGreen4b75bb6f1996AudiGreen4b75bb6f1996AudiGreen4b75bb6f1996AudiGreen4b75bb6f1996AudiGreen
d0b343961973VolvoMaroond0b343961973VolvoMaroond0b343961973VolvoMaroond0b343961973VolvoMaroond0b343961973VolvoMaroon
5f35863c1981AudiSilver5f35863c1981AudiSilver5f35863c1981AudiSilver5f35863c1981AudiSilver5f35863c1981AudiSilver
a62fe1251997FiatOrangea62fe1251997FiatOrangea62fe1251997FiatOrangea62fe1251997FiatOrangea62fe1251997FiatOrange
78f7a0e61982BMWGreen78f7a0e61982BMWGreen78f7a0e61982BMWGreen78f7a0e61982BMWGreen78f7a0e61982BMWGreen

Frozen Rows

IdYearBrandColor
1a9780021996BMWGreen
bed4bd161975BMWBlack
e0bf6b882005FordSilver
1969585d2006VolvoBlue
101ddf392001VolvoWhite
7d7eb89d1977HondaBlack
a88160d31966BMWBlack
d6bf0dc21978FiatOrange
439c3aef1967FiatMaroon
4886de021982VolvoBlue
7ed3448a1961AudiSilver
f24339e31983BMWYellow
9544de811973FiatGreen
3a81710b1999RenaultBlack
642e910f2006FiatRed
8e0229f91962VolkswagenBlack
ffe197282009JaguarOrange
3197a1261976JaguarOrange
f3a744ba1965VolkswagenBlue
155964731963JaguarWhite
29e6f3cf2000VolvoRed
c2fd41cf1985MercedesOrange
0b0c470b2000JaguarBrown
a04b650b1960MercedesMaroon
2e3491e21979FiatYellow
3b07b6c31962AudiWhite
8e8037961961BMWBlack
9f0f3a411962VolkswagenYellow
407cc6511965VolvoOrange
9a505ecf1981FiatBlack
383574541966BMWOrange
3596189b1966FiatWhite
45d982891987MercedesWhite
8fd0f3301989JaguarBlue
3dd6c42c1966HondaSilver
d53dbdf11973FiatBlue
33c2a57a1975AudiRed
bcfc73761971HondaGreen
a7b0c2411998JaguarBrown
d375bbde1976AudiGreen
03fa76a61993BMWBlack
fedb0af51991HondaRed
d86617c31962FiatMaroon
4cde2a371999JaguarBlue
ceff3ef71961BMWBrown
d181d2892000VolkswagenBrown
a45ae3cf1997VolvoRed
1ad3cb6e1994FiatBrown
88f132331983AudiRed
8729e6691989AudiBrown

Frozen Columns

Id
2936b0bb
cba694b0
aecca235
bc29288d
21e3f2d4
a290dfdf
5e9bc79b
a29567ea
7ca68aff
1bf32517
36a6dfcd
a520899b
98b5928e
c06dc109
5da2f1eb
98977938
b11503ff
93f963cd
736cfe0d
440fa0fd
dc12c1d0
80eec05c
43fb9fa0
74cacd7c
a5cc6293
5100b05c
b5edeb52
ca0e884c
09703faa
18cd3bd0
292b1e36
76331af7
cabbb676
c96027d7
7fc3edfb
5ae7a1a1
1c7d784e
aa6393d6
4afef9a1
5688364d
0fc95805
bb57c71a
de31c9ef
9430c25b
8e857db8
26d04d7f
1fb9f17f
2c614ee3
551a1c4d
9337f4f6
YearBrandColor
1972VolvoYellow
2004RenaultGreen
1963JaguarSilver
2006BMWBlue
1995MercedesBlue
1993VolkswagenBrown
1962AudiBlue
1978HondaOrange
1997HondaRed
2006FiatWhite
1995VolvoMaroon
1994FordGreen
2002VolkswagenBlue
1973MercedesRed
1971MercedesOrange
1996JaguarRed
1988VolvoSilver
1972RenaultRed
1996HondaBlue
1961RenaultBlack
2004FiatBlue
1964VolkswagenBrown
1969BMWSilver
1994MercedesOrange
1986FiatBrown
1971FiatBrown
1977VolvoWhite
1985VolkswagenYellow
1964VolvoRed
2009MercedesWhite
1985VolkswagenWhite
1998VolkswagenYellow
2004BMWWhite
2001VolkswagenYellow
2008FiatBlack
1992AudiYellow
1973JaguarSilver
1975MercedesOrange
1995RenaultWhite
1983RenaultGreen
1978FiatOrange
1984JaguarRed
1974RenaultSilver
1964FiatOrange
1991BMWSilver
1967VolkswagenBlack
2001BMWGreen
1970RenaultBrown
1964BMWBlue
1978HondaWhite

On-Demand Data

IdYearBrandColor
a0efb78e1969HondaGreen
5291eafc2008VolkswagenRed
44e2bbf71990MercedesOrange
19a501ea1971VolvoOrange
0a2017782003MercedesRed
992a4b5e1981JaguarRed
28aab7a01969JaguarRed
f19c1a932006BMWOrange
f6e53ce21984VolkswagenBlack
16c637c71980BMWMaroon
1178ef261970AudiBlue
3815117c1971VolvoOrange
0cc4c43f2002FordSilver
bb15cae01989VolvoBlue
8eac78ca1969MercedesYellow
7266a1841984VolkswagenSilver
dedcaad91982FiatBlack
da429d062009FiatOrange
510dd6441974FiatYellow
0334d37b1983HondaBrown

Virtual Scrolling - 20000 Rows

IdYearBrandColor
95d94c542005MercedesBrown
228015641964FordBlue
3f9116f41975FordBlue
0cfdd4ea1988JaguarYellow
485948111961AudiGreen
424f358b2007FordSilver
541866171998AudiRed
690ba6661996JaguarOrange
e3ea546e1996BMWWhite
db57a73b2004FiatSilver
a8e333ea1979BMWBlue
5d1962471990MercedesMaroon
e790f6472000AudiBlue
faa2fb6d2006HondaYellow
5e89ecea1964AudiYellow
4fa437b92006MercedesYellow
d8f338352007MercedesGreen
63bcf50c2006JaguarYellow
34ddc6a92008VolvoBrown
d8ccaf251966MercedesSilver
0ed15e5b1982VolvoBlue
c2e7f21a1965VolkswagenMaroon
c0b138121979BMWSilver
ddc1b3ee1987BMWBlack
9bcb615c1981FordMaroon
88b26d111998JaguarBlack
0d4c89f02008RenaultBrown
9cdd54ca1967FordBlue
cc5895851993RenaultBlack
5b0fcc392009FordGreen
c56c96962007VolkswagenBlack
ad280fc52001HondaMaroon
4c99dae81963JaguarMaroon
2993c61a1961HondaBrown
7a52c26b1974BMWBlack
4fa7fc662003BMWWhite
99c6ec8a2004RenaultGreen
b3cf36261971JaguarYellow
2e6940ec1970VolvoBrown
da2d335b1994FiatSilver
<style type="text/css">   
  .ui-datatable {
      margin-bottom:20px;
  }

  .ui-datatable-frozenlayout-left {
      width:20%;
  }

  .ui-datatable-frozenlayout-right {
      width:80%;
  }
      </style>


<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>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.