DataTable - Scrollable

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

Vertical

IdYearBrandColor
e9c64c9a1994HondaBlue
7551f8a61976FiatWhite
3e8992761985VolkswagenRed
2c8e0e431990FordWhite
e6b0cca72001BMWWhite
7e381e612000AudiSilver
a172d62b1974BMWSilver
6a86028a1964HondaSilver
439c032f1965JaguarBlue
97db31052006JaguarWhite
1647df3b1997MercedesBrown
077331f51973BMWBlue
2b042fd91992JaguarBlue
e58c66b21975FordBlack
0ffc8d151987MercedesYellow
1cc7250f1971AudiOrange
334cbc601960BMWBlack
6c87b0651960BMWMaroon
63514d361966JaguarBlue
2cca051f1996FordOrange
6e71b5651963VolkswagenBlue
6f2862542000FiatOrange
aed0e9de1980BMWRed
0f2adb032009AudiGreen
a2f82dc71985FordGreen
df2733171960AudiYellow
e21b80471974MercedesYellow
991b708d1966FordOrange
ba33dcae1973FordSilver
a33feadd1994FordGreen
16da26921969JaguarBlue
8bf6ade51985MercedesYellow
17b604191968FiatOrange
7804640a2008BMWRed
691e6d8b1998RenaultGreen
22bfff261968RenaultBrown
03ccdaeb1971VolvoBlue
5cb57a811973AudiWhite
c6c7cb8a1977BMWRed
783fe8221989AudiYellow
23c019fc1966BMWMaroon
abc54ee91978VolvoBrown
674200a41990FordBlack
9e9de8261962VolvoSilver
9d98861e1986JaguarYellow
c35a82082007FiatWhite
d85a68d02003RenaultYellow
163a2ef71980MercedesGreen
7c54ba251962AudiBrown
7bf88abe1996FiatOrange

Horizontal

IdYearBrandColor
5ccaa0bd2001VolkswagenOrange
a8bc50d51999MercedesMaroon
11ae7d851961BMWRed
e3a658981979VolkswagenMaroon
eb0226131960BMWOrange
43af8e391970RenaultWhite
45ad6afe1989VolvoBlack
90187f3d1984VolvoBrown
cd0514241987VolvoSilver
05391e4c1989BMWMaroon

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
1574bfbe2000AudiBrown1574bfbe2000AudiBrown1574bfbe2000AudiBrown1574bfbe2000AudiBrown1574bfbe2000AudiBrown
a9e540691977VolkswagenGreena9e540691977VolkswagenGreena9e540691977VolkswagenGreena9e540691977VolkswagenGreena9e540691977VolkswagenGreen
799c51d42007FordOrange799c51d42007FordOrange799c51d42007FordOrange799c51d42007FordOrange799c51d42007FordOrange
e92153201986HondaOrangee92153201986HondaOrangee92153201986HondaOrangee92153201986HondaOrangee92153201986HondaOrange
267f68ad1977BMWBlue267f68ad1977BMWBlue267f68ad1977BMWBlue267f68ad1977BMWBlue267f68ad1977BMWBlue
6d5355e11999MercedesYellow6d5355e11999MercedesYellow6d5355e11999MercedesYellow6d5355e11999MercedesYellow6d5355e11999MercedesYellow
ceffa50d2002BMWYellowceffa50d2002BMWYellowceffa50d2002BMWYellowceffa50d2002BMWYellowceffa50d2002BMWYellow
a74f76231972AudiWhitea74f76231972AudiWhitea74f76231972AudiWhitea74f76231972AudiWhitea74f76231972AudiWhite
4e78d4752005HondaBlack4e78d4752005HondaBlack4e78d4752005HondaBlack4e78d4752005HondaBlack4e78d4752005HondaBlack
b073d42c2004JaguarGreenb073d42c2004JaguarGreenb073d42c2004JaguarGreenb073d42c2004JaguarGreenb073d42c2004JaguarGreen
5e529f551968FordRed5e529f551968FordRed5e529f551968FordRed5e529f551968FordRed5e529f551968FordRed
2171e2821965FiatRed2171e2821965FiatRed2171e2821965FiatRed2171e2821965FiatRed2171e2821965FiatRed
899091211960FiatBlack899091211960FiatBlack899091211960FiatBlack899091211960FiatBlack899091211960FiatBlack
e7c04f0f2005BMWSilvere7c04f0f2005BMWSilvere7c04f0f2005BMWSilvere7c04f0f2005BMWSilvere7c04f0f2005BMWSilver
f09937ac1976VolkswagenBlackf09937ac1976VolkswagenBlackf09937ac1976VolkswagenBlackf09937ac1976VolkswagenBlackf09937ac1976VolkswagenBlack
091679401997RenaultRed091679401997RenaultRed091679401997RenaultRed091679401997RenaultRed091679401997RenaultRed
b206ea791982MercedesOrangeb206ea791982MercedesOrangeb206ea791982MercedesOrangeb206ea791982MercedesOrangeb206ea791982MercedesOrange
5a85cc9f1961BMWRed5a85cc9f1961BMWRed5a85cc9f1961BMWRed5a85cc9f1961BMWRed5a85cc9f1961BMWRed
5cb740c71978FiatSilver5cb740c71978FiatSilver5cb740c71978FiatSilver5cb740c71978FiatSilver5cb740c71978FiatSilver
516e67bd1963VolvoGreen516e67bd1963VolvoGreen516e67bd1963VolvoGreen516e67bd1963VolvoGreen516e67bd1963VolvoGreen
c52669a91981HondaBlackc52669a91981HondaBlackc52669a91981HondaBlackc52669a91981HondaBlackc52669a91981HondaBlack
5bd556ec1987FiatYellow5bd556ec1987FiatYellow5bd556ec1987FiatYellow5bd556ec1987FiatYellow5bd556ec1987FiatYellow
80f9a2fc2008RenaultBlue80f9a2fc2008RenaultBlue80f9a2fc2008RenaultBlue80f9a2fc2008RenaultBlue80f9a2fc2008RenaultBlue
e6d9af591990FordYellowe6d9af591990FordYellowe6d9af591990FordYellowe6d9af591990FordYellowe6d9af591990FordYellow
8e74497a1975MercedesYellow8e74497a1975MercedesYellow8e74497a1975MercedesYellow8e74497a1975MercedesYellow8e74497a1975MercedesYellow
4fc1c8832007AudiMaroon4fc1c8832007AudiMaroon4fc1c8832007AudiMaroon4fc1c8832007AudiMaroon4fc1c8832007AudiMaroon
7e1749981990VolvoYellow7e1749981990VolvoYellow7e1749981990VolvoYellow7e1749981990VolvoYellow7e1749981990VolvoYellow
e8eee0d91975FiatGreene8eee0d91975FiatGreene8eee0d91975FiatGreene8eee0d91975FiatGreene8eee0d91975FiatGreen
af270f6d1964RenaultSilveraf270f6d1964RenaultSilveraf270f6d1964RenaultSilveraf270f6d1964RenaultSilveraf270f6d1964RenaultSilver
135f1a611988FordSilver135f1a611988FordSilver135f1a611988FordSilver135f1a611988FordSilver135f1a611988FordSilver
e3e2526d1986HondaBrowne3e2526d1986HondaBrowne3e2526d1986HondaBrowne3e2526d1986HondaBrowne3e2526d1986HondaBrown
fd81a5b21980HondaSilverfd81a5b21980HondaSilverfd81a5b21980HondaSilverfd81a5b21980HondaSilverfd81a5b21980HondaSilver
fdf993761969VolkswagenSilverfdf993761969VolkswagenSilverfdf993761969VolkswagenSilverfdf993761969VolkswagenSilverfdf993761969VolkswagenSilver
06acb7901989AudiBrown06acb7901989AudiBrown06acb7901989AudiBrown06acb7901989AudiBrown06acb7901989AudiBrown
00dc61f21993FiatRed00dc61f21993FiatRed00dc61f21993FiatRed00dc61f21993FiatRed00dc61f21993FiatRed
15cea65e1991VolvoMaroon15cea65e1991VolvoMaroon15cea65e1991VolvoMaroon15cea65e1991VolvoMaroon15cea65e1991VolvoMaroon
388ae8361992FiatRed388ae8361992FiatRed388ae8361992FiatRed388ae8361992FiatRed388ae8361992FiatRed
7568ca391975VolvoMaroon7568ca391975VolvoMaroon7568ca391975VolvoMaroon7568ca391975VolvoMaroon7568ca391975VolvoMaroon
d860cdb11978VolvoBlackd860cdb11978VolvoBlackd860cdb11978VolvoBlackd860cdb11978VolvoBlackd860cdb11978VolvoBlack
6337c3d12000FiatBlack6337c3d12000FiatBlack6337c3d12000FiatBlack6337c3d12000FiatBlack6337c3d12000FiatBlack
44f778141967MercedesWhite44f778141967MercedesWhite44f778141967MercedesWhite44f778141967MercedesWhite44f778141967MercedesWhite
789de85e1998AudiMaroon789de85e1998AudiMaroon789de85e1998AudiMaroon789de85e1998AudiMaroon789de85e1998AudiMaroon
9e0002c41966VolvoMaroon9e0002c41966VolvoMaroon9e0002c41966VolvoMaroon9e0002c41966VolvoMaroon9e0002c41966VolvoMaroon
8905aa391974VolkswagenOrange8905aa391974VolkswagenOrange8905aa391974VolkswagenOrange8905aa391974VolkswagenOrange8905aa391974VolkswagenOrange
ac11d6051965VolvoGreenac11d6051965VolvoGreenac11d6051965VolvoGreenac11d6051965VolvoGreenac11d6051965VolvoGreen
a553a9522003VolvoBluea553a9522003VolvoBluea553a9522003VolvoBluea553a9522003VolvoBluea553a9522003VolvoBlue
8457fc021966AudiYellow8457fc021966AudiYellow8457fc021966AudiYellow8457fc021966AudiYellow8457fc021966AudiYellow
2e47bcf12005FiatWhite2e47bcf12005FiatWhite2e47bcf12005FiatWhite2e47bcf12005FiatWhite2e47bcf12005FiatWhite
30e5f2f61992VolvoBlack30e5f2f61992VolvoBlack30e5f2f61992VolvoBlack30e5f2f61992VolvoBlack30e5f2f61992VolvoBlack
de6ea8111989BMWBlackde6ea8111989BMWBlackde6ea8111989BMWBlackde6ea8111989BMWBlackde6ea8111989BMWBlack

Frozen Rows

IdYearBrandColor
f2915ecb1975AudiBlack
ba9196111964AudiBlue
3c0f67281974RenaultBlack
d71dc7881968RenaultWhite
8d0e88311966JaguarGreen
e8b744851985VolvoYellow
460e83781994HondaBlue
76fecb9a2003RenaultYellow
e5cfc95c1974BMWMaroon
0e0cc2a71974FiatBrown
db0e47012002RenaultSilver
5a41a8e01980RenaultGreen
c98c53021966HondaSilver
dffbb6721970MercedesBlack
f23ccc1b1999MercedesWhite
dfa71ce31963VolvoBlack
251624d91998MercedesYellow
40e9322b1970VolvoSilver
2929be221972RenaultRed
3ee0b0e61968MercedesBlue
f6ea94bf2005BMWWhite
dbaf8ece1994AudiGreen
64675b2b1985VolkswagenRed
5a42ea8c2009FordMaroon
3662d42f1962RenaultBrown
04ec1d171982VolkswagenBlack
72ea2bd11968RenaultYellow
98162aef1990VolkswagenBlack
16e18f191992BMWSilver
6f358d9d1967FordSilver
0f3ad7441977FordOrange
c1206b3c1988RenaultWhite
296c53b52007RenaultYellow
58982fac1984AudiYellow
2cab966b1967RenaultMaroon
e256cf921969JaguarMaroon
e68013071974HondaGreen
22b0d3c41989BMWMaroon
8ebe68131994FiatMaroon
da1af1061992MercedesBlue
e2b1edf71960VolkswagenYellow
012138be1981FordBrown
d6c78ddd1994HondaOrange
d4d324621963VolkswagenSilver
b93837b61979VolkswagenSilver
9aba38501972FordGreen
43b00f4c1972HondaBrown
33bd84611992VolvoYellow
35b1dc871982BMWGreen
c7f764a31998FiatWhite

Frozen Columns

Id
e055a0cf
0e43c4e1
8d34a28e
73d482b3
70fd71d1
94304e0e
4ae095d9
0009747b
7e7b80db
0d642898
fa6714f1
63285a4c
19ab50bc
d89f751a
d6ac6987
6e01a16f
acb5e358
c224bb6c
c115eb1d
9c041d17
3570e20f
edb889b7
e666959d
45399915
4dde1855
4386539c
e68427ec
af829846
df03722b
78cb3ba3
8241bc29
b05058bb
41b52edf
3f69f868
a66b6312
e97840b9
ecf8cac7
9ea68057
d68fcff2
d6ff8e4c
c77fec67
c2c97cc7
9168561b
dbb16fae
175f5ffd
e8c7c6d8
5abfb83e
576fe0ee
a829b391
6751503d
YearBrandColor
1971FiatGreen
1962RenaultOrange
1998BMWRed
1990BMWSilver
1980VolvoMaroon
1976VolkswagenYellow
1998AudiWhite
1960FiatSilver
1970VolkswagenGreen
1990FordBlue
1982MercedesBlack
1992AudiWhite
1966FordBlue
1990FiatMaroon
2009FiatSilver
2004FordOrange
1995FordRed
1988AudiOrange
1977RenaultGreen
1977FordWhite
1990AudiYellow
1974BMWOrange
1998AudiRed
1966VolvoBrown
2007AudiGreen
1976AudiOrange
1999FordBlue
1986AudiGreen
1988HondaYellow
1998RenaultBlack
2002FordBlack
1972FordMaroon
2005AudiYellow
1996VolvoBrown
2009JaguarRed
1990JaguarBlack
2007AudiGreen
1961JaguarYellow
1965VolkswagenYellow
2003FordSilver
2000BMWBlack
1961RenaultGreen
1999VolkswagenBlack
1999FordGreen
1991JaguarYellow
1967FiatSilver
1977FordOrange
1979HondaOrange
2003AudiWhite
1988FiatRed

On-Demand Data

IdYearBrandColor
8597365b1985AudiBrown
005fc82f1996VolvoGreen
ff3fcf931962FiatBlue
e3a45bde1986HondaBlue
e55e27211966MercedesGreen
ef00a59f2008FordBlack
d3b215631973FiatYellow
921fdd302003MercedesBlue
524ef3f71990FiatRed
0d0dadc01962RenaultWhite
3713e84d1967FiatYellow
4a509be21975FordMaroon
a1c3dc571977MercedesYellow
d99fc5a81981MercedesBrown
70c597341990FordBlack
ebf1ef901988BMWBlue
92b0ada71983FiatBlack
5ef5820c1992RenaultGreen
7e86fb282004FordMaroon
b35982b02001MercedesBlue

Virtual Scrolling - 20000 Rows

IdYearBrandColor
25404f971960HondaBlack
dd8d69821977RenaultGreen
a293e8bb1969RenaultBrown
eb64e79f2008FiatGreen
5e43505d1971JaguarGreen
ff7caf0c1973JaguarYellow
346b7cdd2005FiatYellow
cca2ffb81973JaguarBlue
fa59cf051976FordBlack
c7fb48b41991VolkswagenGreen
6295f6a52005VolkswagenBlack
d05064ca1973RenaultSilver
ae004ba81998FiatGreen
447adb7f1977VolkswagenRed
fcd0bf331995FordOrange
10eb8bb81982AudiBlack
c24475301992FiatSilver
67be8e9c1986BMWBlue
e82032941975FiatMaroon
b8346f2d1990AudiMaroon
6f5e2de01977AudiSilver
d560f0272008VolkswagenBlue
8ea8db0f1976JaguarSilver
12caf81e1997VolkswagenBlack
9949c7331999FordBlue
8e66647e1969MercedesBlue
e358f87f1968HondaYellow
415a98b31999FiatGreen
0364a8941960FiatOrange
32d6b5ab1971VolkswagenBrown
68345d0f1966AudiBlue
4be790401982HondaBrown
66f957e21983FiatBlack
19ea65791999FordBlue
a9f5fc541973VolkswagenGreen
afeeadb62001FiatSilver
81749c932007BMWRed
f48be3ac1976JaguarBlue
a5f0286a1971BMWYellow
0af0c1181975AudiGreen
<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>