DataTable - Scrollable

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

Vertical

IdYearBrandColor
e3172e431994VolkswagenSilver
de7ba4d81977FordBlack
8f79c42f1988VolvoYellow
54d51a291977MercedesGreen
bd0ea8e01998VolvoBlack
406104721980RenaultMaroon
c267d0792000HondaGreen
2d5c642a1969VolkswagenOrange
0d3e771a1990HondaBlue
63128d261965BMWSilver
f24987591963AudiBlue
ec0acbb11968JaguarWhite
95e5fb5c1968VolvoRed
0fb322151981FiatWhite
d519718f2005VolvoRed
aec4d6ab1999VolkswagenWhite
f385f07c1989FiatWhite
68b336891977RenaultRed
485ccc341986AudiRed
21178f9c1995FiatBrown
61e5bfe81963FordBrown
4a9c557a1986VolkswagenSilver
11447bc42006AudiMaroon
6f7c6f022005RenaultOrange
a504f2371961BMWBlue
5b59d24d2009RenaultYellow
d91ac51a2003BMWWhite
84e4876b2003VolkswagenMaroon
55b4f6ea1966MercedesBlack
ed79844f2002VolkswagenSilver
590194af2009RenaultGreen
2edf77e42009JaguarWhite
8d18feb41975FiatOrange
22213e481984FordBlack
eea58f911992VolkswagenRed
f85478222004VolvoGreen
3a2b01bb1984AudiRed
a83bb3c81986BMWBlue
c5368eff1966AudiSilver
82ac686a1960MercedesBrown
44e515d41979RenaultSilver
b96eb20b1999MercedesOrange
10ed5e181963VolkswagenBlack
41a308231964BMWOrange
0ea1e9a11984MercedesYellow
b18db8601971AudiGreen
38c2a61c2009RenaultBrown
1c3363431992VolkswagenYellow
55a6a9af1975VolkswagenGreen
05a80b971988BMWWhite

Horizontal

IdYearBrandColor
1ee2b9f41994HondaBlue
c0277aa81968FiatGreen
c01f6af21998JaguarSilver
8ae74ae71995VolkswagenYellow
3c0cb06b1977RenaultBlue
3116d2041970HondaOrange
54f4a3291974MercedesMaroon
0db10d631975VolkswagenGreen
a108620c1970FiatGreen
0deafb8f1978BMWBlack

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
0da40fc81977FordRed0da40fc81977FordRed0da40fc81977FordRed0da40fc81977FordRed0da40fc81977FordRed
860fd1471973HondaRed860fd1471973HondaRed860fd1471973HondaRed860fd1471973HondaRed860fd1471973HondaRed
2fc6bc1a2008JaguarWhite2fc6bc1a2008JaguarWhite2fc6bc1a2008JaguarWhite2fc6bc1a2008JaguarWhite2fc6bc1a2008JaguarWhite
4e91d7921961VolvoYellow4e91d7921961VolvoYellow4e91d7921961VolvoYellow4e91d7921961VolvoYellow4e91d7921961VolvoYellow
a0d19c1b1971FordOrangea0d19c1b1971FordOrangea0d19c1b1971FordOrangea0d19c1b1971FordOrangea0d19c1b1971FordOrange
473049f31965BMWRed473049f31965BMWRed473049f31965BMWRed473049f31965BMWRed473049f31965BMWRed
a33f468b1986VolvoSilvera33f468b1986VolvoSilvera33f468b1986VolvoSilvera33f468b1986VolvoSilvera33f468b1986VolvoSilver
dc8303eb1991HondaYellowdc8303eb1991HondaYellowdc8303eb1991HondaYellowdc8303eb1991HondaYellowdc8303eb1991HondaYellow
dc9822531963JaguarYellowdc9822531963JaguarYellowdc9822531963JaguarYellowdc9822531963JaguarYellowdc9822531963JaguarYellow
40dfb0921984FiatYellow40dfb0921984FiatYellow40dfb0921984FiatYellow40dfb0921984FiatYellow40dfb0921984FiatYellow
7b4dcbf31969HondaYellow7b4dcbf31969HondaYellow7b4dcbf31969HondaYellow7b4dcbf31969HondaYellow7b4dcbf31969HondaYellow
f107791b1988VolkswagenBluef107791b1988VolkswagenBluef107791b1988VolkswagenBluef107791b1988VolkswagenBluef107791b1988VolkswagenBlue
7db763181962VolvoOrange7db763181962VolvoOrange7db763181962VolvoOrange7db763181962VolvoOrange7db763181962VolvoOrange
fef7945c2004MercedesYellowfef7945c2004MercedesYellowfef7945c2004MercedesYellowfef7945c2004MercedesYellowfef7945c2004MercedesYellow
0fa1c31a1992RenaultYellow0fa1c31a1992RenaultYellow0fa1c31a1992RenaultYellow0fa1c31a1992RenaultYellow0fa1c31a1992RenaultYellow
8ed073a71984MercedesYellow8ed073a71984MercedesYellow8ed073a71984MercedesYellow8ed073a71984MercedesYellow8ed073a71984MercedesYellow
d6f81fe51989JaguarBrownd6f81fe51989JaguarBrownd6f81fe51989JaguarBrownd6f81fe51989JaguarBrownd6f81fe51989JaguarBrown
2c389ced1977FiatBlack2c389ced1977FiatBlack2c389ced1977FiatBlack2c389ced1977FiatBlack2c389ced1977FiatBlack
8293dbb01994BMWGreen8293dbb01994BMWGreen8293dbb01994BMWGreen8293dbb01994BMWGreen8293dbb01994BMWGreen
06e686122007MercedesRed06e686122007MercedesRed06e686122007MercedesRed06e686122007MercedesRed06e686122007MercedesRed
a3536d101978BMWOrangea3536d101978BMWOrangea3536d101978BMWOrangea3536d101978BMWOrangea3536d101978BMWOrange
04abbf501969JaguarGreen04abbf501969JaguarGreen04abbf501969JaguarGreen04abbf501969JaguarGreen04abbf501969JaguarGreen
46cf2dd61968VolvoRed46cf2dd61968VolvoRed46cf2dd61968VolvoRed46cf2dd61968VolvoRed46cf2dd61968VolvoRed
8088aed11988MercedesOrange8088aed11988MercedesOrange8088aed11988MercedesOrange8088aed11988MercedesOrange8088aed11988MercedesOrange
cd35c6d51998HondaMarooncd35c6d51998HondaMarooncd35c6d51998HondaMarooncd35c6d51998HondaMarooncd35c6d51998HondaMaroon
54417beb1996BMWBlack54417beb1996BMWBlack54417beb1996BMWBlack54417beb1996BMWBlack54417beb1996BMWBlack
13a2e33e1997AudiBlack13a2e33e1997AudiBlack13a2e33e1997AudiBlack13a2e33e1997AudiBlack13a2e33e1997AudiBlack
336193fa2009VolvoOrange336193fa2009VolvoOrange336193fa2009VolvoOrange336193fa2009VolvoOrange336193fa2009VolvoOrange
0de2ff6d1965VolvoBlue0de2ff6d1965VolvoBlue0de2ff6d1965VolvoBlue0de2ff6d1965VolvoBlue0de2ff6d1965VolvoBlue
1d244ad01986VolvoGreen1d244ad01986VolvoGreen1d244ad01986VolvoGreen1d244ad01986VolvoGreen1d244ad01986VolvoGreen
e12748841997FiatWhitee12748841997FiatWhitee12748841997FiatWhitee12748841997FiatWhitee12748841997FiatWhite
0c9a9ab41994BMWBlack0c9a9ab41994BMWBlack0c9a9ab41994BMWBlack0c9a9ab41994BMWBlack0c9a9ab41994BMWBlack
dab54f462008FordBrowndab54f462008FordBrowndab54f462008FordBrowndab54f462008FordBrowndab54f462008FordBrown
beb3f7a12000MercedesMaroonbeb3f7a12000MercedesMaroonbeb3f7a12000MercedesMaroonbeb3f7a12000MercedesMaroonbeb3f7a12000MercedesMaroon
fd1072782004BMWMaroonfd1072782004BMWMaroonfd1072782004BMWMaroonfd1072782004BMWMaroonfd1072782004BMWMaroon
e2a10fcf1999VolkswagenBrowne2a10fcf1999VolkswagenBrowne2a10fcf1999VolkswagenBrowne2a10fcf1999VolkswagenBrowne2a10fcf1999VolkswagenBrown
c4c4214b1974RenaultRedc4c4214b1974RenaultRedc4c4214b1974RenaultRedc4c4214b1974RenaultRedc4c4214b1974RenaultRed
f7296c321972RenaultRedf7296c321972RenaultRedf7296c321972RenaultRedf7296c321972RenaultRedf7296c321972RenaultRed
001f4f861975VolkswagenBlue001f4f861975VolkswagenBlue001f4f861975VolkswagenBlue001f4f861975VolkswagenBlue001f4f861975VolkswagenBlue
253f01d22003JaguarBlue253f01d22003JaguarBlue253f01d22003JaguarBlue253f01d22003JaguarBlue253f01d22003JaguarBlue
f79907ad2001RenaultOrangef79907ad2001RenaultOrangef79907ad2001RenaultOrangef79907ad2001RenaultOrangef79907ad2001RenaultOrange
6fc476981962JaguarRed6fc476981962JaguarRed6fc476981962JaguarRed6fc476981962JaguarRed6fc476981962JaguarRed
bb85761f1979RenaultBluebb85761f1979RenaultBluebb85761f1979RenaultBluebb85761f1979RenaultBluebb85761f1979RenaultBlue
6209dffe1991JaguarWhite6209dffe1991JaguarWhite6209dffe1991JaguarWhite6209dffe1991JaguarWhite6209dffe1991JaguarWhite
d328cbcb2006VolkswagenBrownd328cbcb2006VolkswagenBrownd328cbcb2006VolkswagenBrownd328cbcb2006VolkswagenBrownd328cbcb2006VolkswagenBrown
b7fbf76f1970VolvoMaroonb7fbf76f1970VolvoMaroonb7fbf76f1970VolvoMaroonb7fbf76f1970VolvoMaroonb7fbf76f1970VolvoMaroon
c9b04da81969VolvoMaroonc9b04da81969VolvoMaroonc9b04da81969VolvoMaroonc9b04da81969VolvoMaroonc9b04da81969VolvoMaroon
4fe0d57d1966VolkswagenBlack4fe0d57d1966VolkswagenBlack4fe0d57d1966VolkswagenBlack4fe0d57d1966VolkswagenBlack4fe0d57d1966VolkswagenBlack
4f538ce11987BMWBrown4f538ce11987BMWBrown4f538ce11987BMWBrown4f538ce11987BMWBrown4f538ce11987BMWBrown
d21afd671983HondaBlackd21afd671983HondaBlackd21afd671983HondaBlackd21afd671983HondaBlackd21afd671983HondaBlack

Frozen Rows

IdYearBrandColor
599257f21990VolkswagenOrange
a020e68d1988RenaultYellow
22d1d9452009FiatBlack
d780edb32005RenaultMaroon
dbcbb5a31980AudiRed
dfdd24761984AudiBlue
49f995961989VolkswagenMaroon
52719d461994FiatWhite
6e82ff3b1993FiatWhite
137c30052005HondaYellow
6a3f8fef1992VolkswagenOrange
cccb8e0f1991AudiYellow
cd54a4871994HondaBlack
c91890302000VolvoSilver
af23eca61975VolvoWhite
b772cbe11998FordSilver
3873b3b21963MercedesBlue
d06af2ca2000VolvoGreen
11cba8731976FordYellow
060cf47a2003VolkswagenGreen
0ea780bb1968HondaBlue
1bb209a51965BMWMaroon
3b1d58ec1966FiatBlack
b64cfc4f1961RenaultGreen
a0cee9011974AudiMaroon
4bd907071976FiatMaroon
2c6e37b21975FiatGreen
af96bf821967HondaYellow
3cb301411987RenaultBrown
727e18331999FiatOrange
56629d151967MercedesOrange
158297161963JaguarBlue
44ecfaf71988RenaultBrown
27a1dd7b1995FordBlack
b56a50df2007HondaBrown
64435e6d2006JaguarMaroon
17d2a9a11980MercedesOrange
d9e3395d2004MercedesYellow
281a5a7c1970VolkswagenGreen
6a8e2efd2002AudiRed
b83ed3201972JaguarBlue
6502d43f2008FordOrange
8e7259871997FiatGreen
d4f75c821969VolkswagenSilver
0386e1b12002JaguarBlue
009603af2004RenaultBrown
f52f01e52009FiatBrown
d95b61ae1995AudiWhite
fd4bf81f1969MercedesRed
dd432f852004FiatMaroon

Frozen Columns

Id
8b4e83e1
d36a1699
9654ec0a
e1a1c2d3
f92b603c
1d97bb4a
78744242
7516c92f
653ddd19
4eb59f2e
4b6e0112
bc6fca6a
aec09e2a
6123b403
31d7d5c0
8b5c471f
ccf52336
a31526dd
ea30bb67
c537ed1b
b7ff0485
3884b59e
4e9f2050
583da3d0
b29a83c5
2e938ae5
1fb0ca79
f57b87ba
5d3afc36
d1a6191e
969322f2
95ffc18d
5c0f7030
0ef2506f
a867267d
2b72904c
26003528
90be8e4f
76d6ac0f
d50a12d1
dc082be7
cafc323d
2f2ce949
28d02c93
dc6a9343
ddef3cb8
4a457af8
064ed5bc
a1fe88f9
a14f99ac
YearBrandColor
1988JaguarOrange
2005VolvoBlack
1989FordBlue
1974FiatWhite
1987MercedesSilver
1973VolkswagenSilver
2003JaguarOrange
2004BMWRed
1968VolvoYellow
1993JaguarBlue
1982VolkswagenBlue
1987MercedesGreen
1977AudiRed
1966MercedesWhite
1973BMWBlue
1988VolvoOrange
1991VolvoBlack
1999RenaultMaroon
1986VolvoMaroon
1967AudiRed
2002RenaultBlue
1972MercedesBlack
1969FiatYellow
2006FordWhite
1975JaguarGreen
1962JaguarRed
1991AudiBlue
1971HondaRed
2009FiatBlue
2001HondaWhite
1993FiatBlack
1976FordBlack
1980FiatBlack
1994VolkswagenWhite
2002JaguarOrange
1988FiatBlue
1970AudiSilver
2007JaguarBrown
1967VolkswagenBlack
1996VolvoBlack
1974JaguarMaroon
1978VolkswagenRed
1978VolvoWhite
1965MercedesMaroon
1961HondaBlue
1972HondaRed
1966JaguarMaroon
1968FiatBlack
1981HondaYellow
1968HondaSilver

On-Demand Data

IdYearBrandColor
e969d70e1990AudiMaroon
102831cf1977RenaultMaroon
e9d5fa6d1961RenaultGreen
15966f371985AudiWhite
56eab5fb1964VolkswagenYellow
3a2ac92e2008VolkswagenRed
f17a2d8f1964BMWSilver
b8bb018d2005MercedesBrown
33799f3d1985MercedesBlack
00097d571969FordRed
35a010191961RenaultYellow
14c2733e1993HondaSilver
9e9346fa1962RenaultMaroon
d8fc9e821978AudiRed
151a43881979FordBlack
b85300b01976JaguarGreen
8ac5147e1993HondaSilver
9f1c30a81964RenaultOrange
9edd63471986BMWOrange
56c769bd2005RenaultYellow

Virtual Scrolling - 20000 Rows

IdYearBrandColor
92a079391965FiatSilver
736962e91973HondaSilver
3a69a1441994AudiYellow
2e312cec1975FiatSilver
73c83e171988FiatMaroon
2693d6eb1975JaguarGreen
9c6cf9501986VolvoSilver
7516d5741993FordOrange
2be4b27b1982AudiMaroon
c32547ce1969JaguarBlue
9370423d2006VolvoBlue
fe72a7901983MercedesSilver
1cfdbbd91990JaguarOrange
3ae5ff611998BMWWhite
9c98bd141995VolvoMaroon
672b1ab71982AudiGreen
a0294f351963AudiMaroon
9b5883491971AudiOrange
f615b4f51991HondaBlack
ca38d3932002BMWSilver
2c19dc1c1997VolkswagenSilver
81869bac1964MercedesBlack
222e2a3e1964HondaSilver
2fd208501976RenaultRed
5555427b1980FordBlue
ac0c43061963AudiWhite
07a95e891967JaguarBlue
712b91401995JaguarWhite
b71eff011982BMWYellow
749e62f71984JaguarWhite
d5ac79c31978MercedesBlue
8835634c1974BMWMaroon
e8be2c711965BMWSilver
37db84c81986VolvoOrange
bd93664d2002RenaultGreen
371425b81961VolvoSilver
ca849ad81999VolvoBrown
bb9c7a642009FordRed
ba08fe521963AudiBrown
f311c13e1960VolvoGreen
<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>