DataTable - Scrollable

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

Vertical

IdYearBrandColor
0b1c5a991993VolvoWhite
e494257d1972HondaRed
935318851995VolkswagenSilver
1e99a6051998VolvoYellow
5da4ae011977MercedesRed
98979aa81977RenaultBrown
e31aab5c1963VolvoOrange
aae22b761962RenaultOrange
bdc952ea1998FordSilver
bcf62cea1967FiatSilver
5f9fc2792001VolvoBlue
e9b4c80d1990VolvoBlack
c3c364521963RenaultOrange
25fc5e2d1982JaguarYellow
4bd4afbd1998FordBrown
afb8018e2001FordGreen
958a727b1970RenaultSilver
5be39fd41999FordBlack
1af81e5c1976JaguarWhite
0e0eb01d1964VolvoOrange
bdc438131983HondaYellow
4f0e3b072005MercedesOrange
cc42e8b72001HondaWhite
f466a22c1987VolkswagenWhite
844d47a41967FordGreen
6f9840d11984FiatBlack
b76ca6e42007VolkswagenBlue
ed894d841968JaguarSilver
eba2cacb2002AudiBrown
0e5ce3521971VolvoYellow
0960f01c1996RenaultRed
1b4be14e1966HondaSilver
45c2d6452009FiatWhite
c1eb06ec1978VolvoBlack
1e2cfc192004AudiBlack
12039f1b1988RenaultSilver
7480f6b92008VolvoRed
2cb750fd1995FiatYellow
9105c6ae1994BMWBrown
ecb99adf1994BMWBlack
7866c41a1992VolkswagenSilver
735881531985VolkswagenBrown
ce9117101976RenaultGreen
acf376871991FordBrown
7a17cfb31969RenaultBlue
8af5897e1993FiatBrown
9baab4481994VolvoBlue
0b21125d1995RenaultMaroon
15bd1c1e2002HondaBrown
d8524cd01979MercedesWhite

Horizontal

IdYearBrandColor
dd147ccc1971JaguarOrange
f67c2b0e1963AudiSilver
f2581b021987FiatBlue
a98ede821983MercedesGreen
f44483d32003FordMaroon
a691c5ca1986FordMaroon
c3a0f75e1992FiatWhite
1b3e194a1988JaguarBlack
fa9497a01987VolvoSilver
3a08b9f72006VolvoBrown

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
fc6ae9d82007VolvoBlackfc6ae9d82007VolvoBlackfc6ae9d82007VolvoBlackfc6ae9d82007VolvoBlackfc6ae9d82007VolvoBlack
d04093441972JaguarBlackd04093441972JaguarBlackd04093441972JaguarBlackd04093441972JaguarBlackd04093441972JaguarBlack
01411be71974FordGreen01411be71974FordGreen01411be71974FordGreen01411be71974FordGreen01411be71974FordGreen
162909492009HondaBrown162909492009HondaBrown162909492009HondaBrown162909492009HondaBrown162909492009HondaBrown
026bf96d1975AudiBrown026bf96d1975AudiBrown026bf96d1975AudiBrown026bf96d1975AudiBrown026bf96d1975AudiBrown
ef4d52e51969MercedesSilveref4d52e51969MercedesSilveref4d52e51969MercedesSilveref4d52e51969MercedesSilveref4d52e51969MercedesSilver
9c2968c51990AudiMaroon9c2968c51990AudiMaroon9c2968c51990AudiMaroon9c2968c51990AudiMaroon9c2968c51990AudiMaroon
4147f4281967VolkswagenBrown4147f4281967VolkswagenBrown4147f4281967VolkswagenBrown4147f4281967VolkswagenBrown4147f4281967VolkswagenBrown
f32820442005MercedesMaroonf32820442005MercedesMaroonf32820442005MercedesMaroonf32820442005MercedesMaroonf32820442005MercedesMaroon
01ebb7e02001JaguarSilver01ebb7e02001JaguarSilver01ebb7e02001JaguarSilver01ebb7e02001JaguarSilver01ebb7e02001JaguarSilver
84ff53731973VolvoWhite84ff53731973VolvoWhite84ff53731973VolvoWhite84ff53731973VolvoWhite84ff53731973VolvoWhite
f27e91921998RenaultYellowf27e91921998RenaultYellowf27e91921998RenaultYellowf27e91921998RenaultYellowf27e91921998RenaultYellow
5125a5d21961FiatRed5125a5d21961FiatRed5125a5d21961FiatRed5125a5d21961FiatRed5125a5d21961FiatRed
29e5fc3f1974BMWRed29e5fc3f1974BMWRed29e5fc3f1974BMWRed29e5fc3f1974BMWRed29e5fc3f1974BMWRed
60e0aa0d1978FordGreen60e0aa0d1978FordGreen60e0aa0d1978FordGreen60e0aa0d1978FordGreen60e0aa0d1978FordGreen
77d7c3ef1999BMWBlack77d7c3ef1999BMWBlack77d7c3ef1999BMWBlack77d7c3ef1999BMWBlack77d7c3ef1999BMWBlack
d58b040a1970BMWMaroond58b040a1970BMWMaroond58b040a1970BMWMaroond58b040a1970BMWMaroond58b040a1970BMWMaroon
4f250e5e1991BMWGreen4f250e5e1991BMWGreen4f250e5e1991BMWGreen4f250e5e1991BMWGreen4f250e5e1991BMWGreen
e6f182602003VolvoSilvere6f182602003VolvoSilvere6f182602003VolvoSilvere6f182602003VolvoSilvere6f182602003VolvoSilver
0513ac2b1985MercedesOrange0513ac2b1985MercedesOrange0513ac2b1985MercedesOrange0513ac2b1985MercedesOrange0513ac2b1985MercedesOrange
78b80a4f1979JaguarWhite78b80a4f1979JaguarWhite78b80a4f1979JaguarWhite78b80a4f1979JaguarWhite78b80a4f1979JaguarWhite
f8a451151975MercedesSilverf8a451151975MercedesSilverf8a451151975MercedesSilverf8a451151975MercedesSilverf8a451151975MercedesSilver
b372b4761988FiatBlueb372b4761988FiatBlueb372b4761988FiatBlueb372b4761988FiatBlueb372b4761988FiatBlue
a5bcccba1961JaguarWhitea5bcccba1961JaguarWhitea5bcccba1961JaguarWhitea5bcccba1961JaguarWhitea5bcccba1961JaguarWhite
3079c2732001HondaRed3079c2732001HondaRed3079c2732001HondaRed3079c2732001HondaRed3079c2732001HondaRed
5043451b1968AudiMaroon5043451b1968AudiMaroon5043451b1968AudiMaroon5043451b1968AudiMaroon5043451b1968AudiMaroon
1712bf582007RenaultBrown1712bf582007RenaultBrown1712bf582007RenaultBrown1712bf582007RenaultBrown1712bf582007RenaultBrown
275c55df2002AudiMaroon275c55df2002AudiMaroon275c55df2002AudiMaroon275c55df2002AudiMaroon275c55df2002AudiMaroon
905fd8031977VolvoGreen905fd8031977VolvoGreen905fd8031977VolvoGreen905fd8031977VolvoGreen905fd8031977VolvoGreen
a3cb9c6d1978RenaultBrowna3cb9c6d1978RenaultBrowna3cb9c6d1978RenaultBrowna3cb9c6d1978RenaultBrowna3cb9c6d1978RenaultBrown
76e051e51976MercedesBrown76e051e51976MercedesBrown76e051e51976MercedesBrown76e051e51976MercedesBrown76e051e51976MercedesBrown
86f21e372007VolvoGreen86f21e372007VolvoGreen86f21e372007VolvoGreen86f21e372007VolvoGreen86f21e372007VolvoGreen
226a6b431992AudiBlack226a6b431992AudiBlack226a6b431992AudiBlack226a6b431992AudiBlack226a6b431992AudiBlack
7ad51bfc1997RenaultRed7ad51bfc1997RenaultRed7ad51bfc1997RenaultRed7ad51bfc1997RenaultRed7ad51bfc1997RenaultRed
538e34cb2004HondaYellow538e34cb2004HondaYellow538e34cb2004HondaYellow538e34cb2004HondaYellow538e34cb2004HondaYellow
b3e965982008MercedesWhiteb3e965982008MercedesWhiteb3e965982008MercedesWhiteb3e965982008MercedesWhiteb3e965982008MercedesWhite
bebd29b21972FiatRedbebd29b21972FiatRedbebd29b21972FiatRedbebd29b21972FiatRedbebd29b21972FiatRed
b792f38e2008AudiOrangeb792f38e2008AudiOrangeb792f38e2008AudiOrangeb792f38e2008AudiOrangeb792f38e2008AudiOrange
a3feaa691981FordWhitea3feaa691981FordWhitea3feaa691981FordWhitea3feaa691981FordWhitea3feaa691981FordWhite
8c8409ea1972JaguarWhite8c8409ea1972JaguarWhite8c8409ea1972JaguarWhite8c8409ea1972JaguarWhite8c8409ea1972JaguarWhite
2573df9c1963RenaultBlack2573df9c1963RenaultBlack2573df9c1963RenaultBlack2573df9c1963RenaultBlack2573df9c1963RenaultBlack
ff7f18d41970HondaRedff7f18d41970HondaRedff7f18d41970HondaRedff7f18d41970HondaRedff7f18d41970HondaRed
a3d2b8971975FordReda3d2b8971975FordReda3d2b8971975FordReda3d2b8971975FordReda3d2b8971975FordRed
88c2b8fd1962BMWYellow88c2b8fd1962BMWYellow88c2b8fd1962BMWYellow88c2b8fd1962BMWYellow88c2b8fd1962BMWYellow
66b8d1931968RenaultSilver66b8d1931968RenaultSilver66b8d1931968RenaultSilver66b8d1931968RenaultSilver66b8d1931968RenaultSilver
463a949b1973BMWBlack463a949b1973BMWBlack463a949b1973BMWBlack463a949b1973BMWBlack463a949b1973BMWBlack
4cb448661973JaguarYellow4cb448661973JaguarYellow4cb448661973JaguarYellow4cb448661973JaguarYellow4cb448661973JaguarYellow
6ea6b6a91972BMWOrange6ea6b6a91972BMWOrange6ea6b6a91972BMWOrange6ea6b6a91972BMWOrange6ea6b6a91972BMWOrange
7af1fc0d1973BMWMaroon7af1fc0d1973BMWMaroon7af1fc0d1973BMWMaroon7af1fc0d1973BMWMaroon7af1fc0d1973BMWMaroon
75bdd42b2006AudiOrange75bdd42b2006AudiOrange75bdd42b2006AudiOrange75bdd42b2006AudiOrange75bdd42b2006AudiOrange

Frozen Rows

IdYearBrandColor
f6b4be6a2003AudiWhite
1f09c1091973VolkswagenWhite
531aa01a1980VolkswagenYellow
593946b71960VolkswagenGreen
0153088b1992AudiBlack
5b6d3cc41982VolkswagenSilver
f23073db1960FiatYellow
5a8b71a31990VolkswagenMaroon
e7088d901972VolvoMaroon
678a16331991AudiGreen
d7c5e2a51968VolkswagenBrown
d809c1591964MercedesOrange
2a4bd2e21990FordOrange
737299ec1969VolvoRed
6354d7b72007MercedesGreen
bc4d17281971VolkswagenGreen
52a36f552004RenaultSilver
e34464ea1963MercedesBlack
64a0fa9a1994BMWSilver
ebc032a22008HondaGreen
7f95b2981995HondaOrange
218c970b1992FiatMaroon
246abe3b1968FordBlue
2fff82aa1979BMWGreen
1eb66a602007VolkswagenGreen
5b2c75911998VolkswagenSilver
3177c8ee1969AudiYellow
fd3eb24a1979VolkswagenRed
9ddb36a32005FiatMaroon
f640c2721972VolvoSilver
3e50b3bb1965JaguarWhite
c0cbe2532005AudiBlue
846f5b972001JaguarBrown
a6c2af0b1971AudiSilver
539224511990FiatBlue
884aed1f1986VolvoWhite
d1fd055c2002VolvoWhite
1af298901993VolvoGreen
aa6819031973FiatWhite
03ad13fc1981HondaGreen
aa498d762000JaguarGreen
30d4ab722001VolvoBlack
d4d5bc771960JaguarBrown
987720e61965RenaultGreen
0c11c75c1962JaguarGreen
8e6cc9751985FordGreen
356a622a1975JaguarBlack
5e6cc9d61971AudiWhite
717d08201961FordWhite
dec7dbec2003VolkswagenBlue

Frozen Columns

Id
6dcf141a
e43a7c9b
b3c2a0a1
f478ee5e
d8131678
09237aa8
2f487e3f
9e3e9bf7
bb214d16
192fbb11
34545653
3bedb381
28e02fda
6a6207c5
874729db
9a9df6c6
27cb7b59
669eafe3
81dae991
2d3ae95f
0d53a420
786146d2
ace8e6da
42bdbe27
01858ea8
9e23bdde
4d24cd62
9ada7182
956e93e9
dcef554c
90567ea7
56dedfa4
cdd6a443
70ab33f3
9f2f88ae
2f77823e
925e4aaa
48fa21bb
bcc8a696
10c92f3b
ddada415
c9717246
191305cd
f1aeac00
6a8d7db3
8c2eebae
0b99aaff
41ef3160
d65b6e6c
b6583aca
YearBrandColor
1997BMWYellow
1977MercedesBlue
1977MercedesRed
1978AudiWhite
1978VolkswagenYellow
1996BMWRed
1999MercedesSilver
1972RenaultYellow
1977FiatOrange
1987FiatBlack
1991FordMaroon
1976MercedesBlack
2009VolvoSilver
1971FiatRed
1991FordRed
1977FordBlue
1977HondaGreen
1961RenaultGreen
1998RenaultBlue
1992AudiWhite
1983VolkswagenRed
2000FordBlue
1960AudiWhite
1995FiatMaroon
1981JaguarBlue
1980FiatRed
1970FiatYellow
1972MercedesBrown
1964MercedesMaroon
1999HondaMaroon
1977HondaBrown
1995VolvoRed
2009BMWBlue
1987RenaultBlue
1989HondaOrange
1980VolvoBrown
1965MercedesOrange
1994MercedesBrown
2002VolvoYellow
1963FordSilver
1991MercedesMaroon
1996AudiOrange
1982FiatSilver
1996RenaultBrown
2001RenaultYellow
2003HondaGreen
1968HondaBlack
1968RenaultRed
1982FiatOrange
1999VolkswagenSilver

On-Demand Data

IdYearBrandColor
32f18a7e2002FordSilver
9aecf9601975AudiSilver
b0920f961991FiatYellow
ca4c65791974VolvoSilver
e82e37f41967RenaultRed
a4e56ad11982JaguarBlue
4f719be72005VolkswagenBlack
ed1e88911971HondaGreen
c0fcfe851979MercedesBlack
45dfa9151979MercedesBrown
c9b09f621977JaguarBlue
b1796b302006VolvoSilver
83c8bf981964AudiBrown
88c3a2601963BMWYellow
a9fa29c41997VolvoWhite
658093ed1994JaguarBlue
44ec926a1969MercedesBlue
c6a302431981JaguarBlack
76381dbc1969VolkswagenBlue
77120ecf1967MercedesYellow

Virtual Scrolling - 20000 Rows

IdYearBrandColor
2eb144eb1971BMWWhite
6df2d13e1998MercedesBrown
0d5bfa032008FordWhite
6db205aa2001FiatBrown
d80913a32004BMWGreen
b7986e611968MercedesRed
866d27b91984JaguarYellow
ba33ccb91972BMWOrange
002efb071994MercedesRed
82a0dde61993MercedesSilver
67c6bad21962HondaBlack
3ed5af9f2009VolvoOrange
3d58939d1978JaguarRed
73ad86d21998BMWMaroon
f734c8c51968AudiMaroon
28a26c0f1992MercedesYellow
c1cad7422007HondaBrown
636496061962BMWGreen
7421e8681981FordBrown
898fa97a1967VolkswagenGreen
8ca2abfd1981FiatSilver
7dc6ed4a1999VolvoOrange
8d2f5c341989MercedesBlack
f1ac44a72001FiatSilver
67513ea31964VolvoYellow
89acacf31983MercedesGreen
51a72e421986MercedesSilver
85fcdd2b1999JaguarYellow
b15f52351977FiatRed
7e101b291979MercedesMaroon
030335101988FordGreen
489e289d1989RenaultMaroon
cab06e7d1973FiatSilver
1e46f17c1972MercedesBlue
5ca056be1974RenaultGreen
b842b66b1982BMWBlue
857a58d51985AudiYellow
9cc72d532001BMWMaroon
c8579cce1983AudiGreen
a1db742d2003BMWRed
<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>