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
abd078121966RenaultGreen
33bb55201978VolkswagenYellow
94c4f7971984VolkswagenSilver
fc4ed4d02005FiatWhite
3e3a17d61971VolvoWhite
2a1e0e0f1960VolvoMaroon
2696ef051978FordRed
b033d0fd1990HondaRed
833d91e31984RenaultBlue
c66444561964MercedesSilver
3eea9c111990BMWBlue
89f81f5e1996RenaultBlue
30be65cf1964FordBrown
1fc330ca1991HondaBlack
476d6bf41992VolvoBrown
abdbddcd2004VolvoBlue
f3c716cd1974MercedesBlue
05771a632004VolkswagenOrange
9254bcd21970FiatGreen
2a3067ce1975HondaBlue
9f228b0e1992MercedesOrange
8ab5724d1995JaguarBlue
220c29ab1987JaguarBrown
69df9ce12009MercedesRed
51969de91971AudiBlack
9c75c6142006BMWOrange
828ab68b1982VolvoOrange
2ca67c3f1964BMWMaroon
e163d8511986MercedesBlue
1c9e89922009VolkswagenBrown
cb9e0a721965AudiWhite
f0cc23da2006RenaultOrange
2d5a20d31989MercedesBrown
efbeeea61987AudiBrown
dcdc78941965FordMaroon
d23b640a1998JaguarMaroon
17c060031996BMWSilver
86ded4341968AudiYellow
f0c168052005FordYellow
a672e42e1979VolvoBlack
a4bab7ec1979MercedesWhite
43e1a02d1984VolvoGreen
8daab0691966BMWOrange
182ecf1f2007RenaultRed
3d1453451969RenaultBlack
2c8d06ae1999VolvoBlack
8a0130971987BMWMaroon
f82ce8811976VolkswagenBrown
19d560cd1966VolvoBlue
890cfdfa1971VolkswagenRed

Horizontal

IdYearBrandColor
4d9d7e771988JaguarBlue
e3389ea32008VolvoSilver
519b22521983FiatOrange
046cd3031975HondaSilver
ad2865b91980MercedesBlack
ff60a2722002FiatSilver
6cc1ee6c1970BMWOrange
8e6ba62e1989AudiMaroon
c9bd9ba41961AudiYellow
62565a411982FordBrown

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
9ef56cfe1999MercedesBrown9ef56cfe1999MercedesBrown9ef56cfe1999MercedesBrown9ef56cfe1999MercedesBrown9ef56cfe1999MercedesBrown
ffdb5d5d2005VolvoMaroonffdb5d5d2005VolvoMaroonffdb5d5d2005VolvoMaroonffdb5d5d2005VolvoMaroonffdb5d5d2005VolvoMaroon
2a6dc38c1994VolvoSilver2a6dc38c1994VolvoSilver2a6dc38c1994VolvoSilver2a6dc38c1994VolvoSilver2a6dc38c1994VolvoSilver
2542f5942008FiatBlue2542f5942008FiatBlue2542f5942008FiatBlue2542f5942008FiatBlue2542f5942008FiatBlue
b71a04d31986FiatYellowb71a04d31986FiatYellowb71a04d31986FiatYellowb71a04d31986FiatYellowb71a04d31986FiatYellow
3a8c1b192008VolkswagenRed3a8c1b192008VolkswagenRed3a8c1b192008VolkswagenRed3a8c1b192008VolkswagenRed3a8c1b192008VolkswagenRed
d12e3def1969FiatSilverd12e3def1969FiatSilverd12e3def1969FiatSilverd12e3def1969FiatSilverd12e3def1969FiatSilver
55c233dc1968BMWWhite55c233dc1968BMWWhite55c233dc1968BMWWhite55c233dc1968BMWWhite55c233dc1968BMWWhite
33c50e491967FordMaroon33c50e491967FordMaroon33c50e491967FordMaroon33c50e491967FordMaroon33c50e491967FordMaroon
929248922006FiatOrange929248922006FiatOrange929248922006FiatOrange929248922006FiatOrange929248922006FiatOrange
a0b992821965FordBrowna0b992821965FordBrowna0b992821965FordBrowna0b992821965FordBrowna0b992821965FordBrown
3cdab7b71989RenaultMaroon3cdab7b71989RenaultMaroon3cdab7b71989RenaultMaroon3cdab7b71989RenaultMaroon3cdab7b71989RenaultMaroon
9ef117c91962HondaYellow9ef117c91962HondaYellow9ef117c91962HondaYellow9ef117c91962HondaYellow9ef117c91962HondaYellow
a200c5f71988VolkswagenBrowna200c5f71988VolkswagenBrowna200c5f71988VolkswagenBrowna200c5f71988VolkswagenBrowna200c5f71988VolkswagenBrown
10764eab1969FordWhite10764eab1969FordWhite10764eab1969FordWhite10764eab1969FordWhite10764eab1969FordWhite
94bb7a4d1979JaguarWhite94bb7a4d1979JaguarWhite94bb7a4d1979JaguarWhite94bb7a4d1979JaguarWhite94bb7a4d1979JaguarWhite
4033d2f31969AudiYellow4033d2f31969AudiYellow4033d2f31969AudiYellow4033d2f31969AudiYellow4033d2f31969AudiYellow
4dc6a16d1993JaguarMaroon4dc6a16d1993JaguarMaroon4dc6a16d1993JaguarMaroon4dc6a16d1993JaguarMaroon4dc6a16d1993JaguarMaroon
a8a5da601963BMWYellowa8a5da601963BMWYellowa8a5da601963BMWYellowa8a5da601963BMWYellowa8a5da601963BMWYellow
37253a1e1983VolkswagenYellow37253a1e1983VolkswagenYellow37253a1e1983VolkswagenYellow37253a1e1983VolkswagenYellow37253a1e1983VolkswagenYellow
deaf7b821961AudiYellowdeaf7b821961AudiYellowdeaf7b821961AudiYellowdeaf7b821961AudiYellowdeaf7b821961AudiYellow
e678bc571973AudiWhitee678bc571973AudiWhitee678bc571973AudiWhitee678bc571973AudiWhitee678bc571973AudiWhite
9c91f9fb2004RenaultBlue9c91f9fb2004RenaultBlue9c91f9fb2004RenaultBlue9c91f9fb2004RenaultBlue9c91f9fb2004RenaultBlue
51d0eef71978BMWWhite51d0eef71978BMWWhite51d0eef71978BMWWhite51d0eef71978BMWWhite51d0eef71978BMWWhite
3eda0dc31962MercedesBrown3eda0dc31962MercedesBrown3eda0dc31962MercedesBrown3eda0dc31962MercedesBrown3eda0dc31962MercedesBrown
80c91ed91963FordYellow80c91ed91963FordYellow80c91ed91963FordYellow80c91ed91963FordYellow80c91ed91963FordYellow
02842f651991FordBlack02842f651991FordBlack02842f651991FordBlack02842f651991FordBlack02842f651991FordBlack
ab97e33f1999JaguarWhiteab97e33f1999JaguarWhiteab97e33f1999JaguarWhiteab97e33f1999JaguarWhiteab97e33f1999JaguarWhite
16b8405a1981VolkswagenMaroon16b8405a1981VolkswagenMaroon16b8405a1981VolkswagenMaroon16b8405a1981VolkswagenMaroon16b8405a1981VolkswagenMaroon
7835d8fa1998JaguarGreen7835d8fa1998JaguarGreen7835d8fa1998JaguarGreen7835d8fa1998JaguarGreen7835d8fa1998JaguarGreen
9277c29f1966FiatRed9277c29f1966FiatRed9277c29f1966FiatRed9277c29f1966FiatRed9277c29f1966FiatRed
d47aafd51964BMWSilverd47aafd51964BMWSilverd47aafd51964BMWSilverd47aafd51964BMWSilverd47aafd51964BMWSilver
af1902e51977HondaMaroonaf1902e51977HondaMaroonaf1902e51977HondaMaroonaf1902e51977HondaMaroonaf1902e51977HondaMaroon
b549369f1982AudiMaroonb549369f1982AudiMaroonb549369f1982AudiMaroonb549369f1982AudiMaroonb549369f1982AudiMaroon
bda628f01987HondaBlackbda628f01987HondaBlackbda628f01987HondaBlackbda628f01987HondaBlackbda628f01987HondaBlack
1abe40221972FiatBlack1abe40221972FiatBlack1abe40221972FiatBlack1abe40221972FiatBlack1abe40221972FiatBlack
a46acdc92004JaguarBlacka46acdc92004JaguarBlacka46acdc92004JaguarBlacka46acdc92004JaguarBlacka46acdc92004JaguarBlack
637539191987VolvoRed637539191987VolvoRed637539191987VolvoRed637539191987VolvoRed637539191987VolvoRed
b0c36a702009FordBrownb0c36a702009FordBrownb0c36a702009FordBrownb0c36a702009FordBrownb0c36a702009FordBrown
fee83eba1972FordWhitefee83eba1972FordWhitefee83eba1972FordWhitefee83eba1972FordWhitefee83eba1972FordWhite
f66897311969VolkswagenRedf66897311969VolkswagenRedf66897311969VolkswagenRedf66897311969VolkswagenRedf66897311969VolkswagenRed
35edd8521977BMWMaroon35edd8521977BMWMaroon35edd8521977BMWMaroon35edd8521977BMWMaroon35edd8521977BMWMaroon
c2323efa1967RenaultGreenc2323efa1967RenaultGreenc2323efa1967RenaultGreenc2323efa1967RenaultGreenc2323efa1967RenaultGreen
4783c7f31987JaguarBlue4783c7f31987JaguarBlue4783c7f31987JaguarBlue4783c7f31987JaguarBlue4783c7f31987JaguarBlue
0c593d881992VolkswagenRed0c593d881992VolkswagenRed0c593d881992VolkswagenRed0c593d881992VolkswagenRed0c593d881992VolkswagenRed
c5d589091984FordOrangec5d589091984FordOrangec5d589091984FordOrangec5d589091984FordOrangec5d589091984FordOrange
f3edc7511960RenaultYellowf3edc7511960RenaultYellowf3edc7511960RenaultYellowf3edc7511960RenaultYellowf3edc7511960RenaultYellow
d4e864c02005VolkswagenBlackd4e864c02005VolkswagenBlackd4e864c02005VolkswagenBlackd4e864c02005VolkswagenBlackd4e864c02005VolkswagenBlack
b6a462f81985FiatRedb6a462f81985FiatRedb6a462f81985FiatRedb6a462f81985FiatRedb6a462f81985FiatRed
221421031970VolkswagenRed221421031970VolkswagenRed221421031970VolkswagenRed221421031970VolkswagenRed221421031970VolkswagenRed

Frozen Rows

IdYearBrandColor
52fa63241999RenaultWhite
f03187fe2006HondaRed
67cf5a232007RenaultGreen
b135773d1973JaguarWhite
a8c177301974BMWBlue
25fb20432001MercedesOrange
1f0a75341987BMWSilver
08df96801980HondaBlack
2c6e88091962VolvoGreen
e0287ccc1985JaguarGreen
e6139fe51987HondaRed
8960b2d02006MercedesRed
6cc343ac2008FiatRed
ce7567a32000RenaultGreen
793972751965BMWOrange
fc32f4681995VolvoBlack
78f313ea1979FordWhite
5830bd931994AudiOrange
773478381974MercedesSilver
c71651741971JaguarGreen
047de6001968AudiOrange
c56b0a182004HondaRed
5d5fe3c51985RenaultGreen
3d1373771981FordBlack
9a34616a1971VolvoBrown
15a7b2e11984BMWOrange
55f1ba771961FordOrange
d047d1cb1987HondaWhite
56560d901999VolvoBlue
65dd7bf61963HondaBrown
cea018381966HondaBlue
0743dff31995RenaultOrange
d89e24ad1969AudiOrange
a81188312006VolkswagenBrown
ce4d2b391965FiatGreen
2cee09051991RenaultSilver
776ee9bc1982BMWBrown
9652838d1970VolvoOrange
160be53e1984RenaultMaroon
704b6b4f1997RenaultBrown
0a7222d52001RenaultYellow
ef654a8f1998VolkswagenYellow
c4dc33ca1991MercedesMaroon
cd9e61e71977RenaultSilver
b98a8f751991HondaBlue
1c9016892003AudiMaroon
edc14b671966AudiBrown
0f49f5ae2000BMWBrown
1bbec5a42009VolkswagenWhite
b1a844742006VolkswagenSilver

Frozen Columns

Id
a6fadd9e
efbaf02c
a92b7f1a
48b3b4a0
4a30a22b
3aa545bc
eb982bb9
af0e2454
4ccf4bbf
3402602b
a3f42549
2f925ca0
a0b821b2
c6ce5f96
96c09cf2
08c5b006
76001042
c45d2c9f
a2a5134a
7df5a63f
6ab543c1
d86b1e0d
41aa7103
b1bf68b2
1613e191
d58a73f9
93b1d304
93e40a23
8f50bebd
e6990bf9
233e43ae
7bf0564c
004bbe25
a112a360
9fb1f8fb
696ed666
a0ed9c83
0c55f48b
d005fc1c
e58e55c2
c481f819
76e8f388
158eadcc
b6ed3683
0b976951
14dc9ade
1954b29d
a5bf9a8a
b63ab8a0
9c48053c
YearBrandColor
1995VolvoOrange
1971FiatOrange
1990JaguarBrown
1980RenaultWhite
1962HondaBlue
1981HondaOrange
1998FiatMaroon
1994FiatWhite
2000FordGreen
1990FiatMaroon
1967VolkswagenWhite
2001VolvoBlue
1985AudiBlue
1973MercedesRed
1986FordGreen
1993JaguarYellow
1993VolkswagenRed
1975HondaYellow
1986AudiMaroon
1997HondaBlue
1966HondaYellow
1964VolkswagenSilver
1993JaguarWhite
1990FordBrown
1982RenaultWhite
1990JaguarSilver
1994VolvoGreen
2003JaguarSilver
1998JaguarSilver
1982VolvoOrange
2008RenaultMaroon
2001FiatRed
1971AudiYellow
1994JaguarBlue
1989HondaYellow
1985FiatSilver
1992FordGreen
1986MercedesYellow
1992MercedesWhite
1965AudiYellow
2001MercedesOrange
1994AudiSilver
2000FordBlue
1987FordGreen
1997RenaultWhite
1977FiatSilver
1988HondaBrown
2002AudiGreen
1993AudiBrown
1985VolkswagenSilver

On-Demand Data

IdYearBrandColor
acf946871980FiatBrown
a7b40d831970FordSilver
46c639271976BMWBrown
004648531993VolkswagenGreen
e27f2dae1976RenaultOrange
92e0c8282007VolvoYellow
0e72ec511961RenaultBlue
eccdb02b1979AudiWhite
9b1441bd2008FordBrown
9626c2332008RenaultBrown
5b896c612008FordYellow
d7ea1d891992FordWhite
4d6d3d0a2002FordOrange
dfaf9f721965JaguarWhite
8056ec271966VolkswagenOrange
754b3be01976FordBlue
656619392008FiatRed
9771ada71985FiatBlack
838c63492004FiatMaroon
e64622861983FordGreen

Virtual Scrolling - 20000 Rows

IdYearBrandColor
cd1e2bdf2007VolvoRed
9f03e7441963VolkswagenOrange
c34b65271968HondaWhite
6afe6cb51976FiatWhite
e58092172001JaguarMaroon
123229471972VolvoBlack
628432072000FiatMaroon
9224e7ba1987RenaultGreen
4d5a7b221961FordBlack
e205fa111971MercedesWhite
cd0bdc921974FiatSilver
13d3b49e1997MercedesWhite
7dff2c7b1998HondaMaroon
64875a601969FordGreen
419df0562002AudiBlack
3d016c8b1989VolvoYellow
5998d3e61983HondaBlack
61df9df22006HondaGreen
4a0b4ea11966FordGreen
f19c305a2007JaguarSilver
4626ca041993FiatBlack
386e0e691991BMWGreen
83c582322004MercedesGreen
6c02473c2002MercedesYellow
7664a2fa1987VolvoMaroon
e8a25ab61964HondaBlue
4a7a9e862001JaguarOrange
cd68037c2001BMWSilver
603e9f8f1978FordBlack
a7eba5a92005MercedesBrown
da4f96a02002HondaYellow
f8d29c671980MercedesMaroon
950bc50a2003FordBlue
bc194c4b1977FordRed
a88ae23e1976JaguarSilver
c501e20f1996RenaultWhite
dc16950a1973MercedesOrange
442f62be1968FordYellow
35b022811979RenaultMaroon
709292501968FiatYellow
<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.