DataTable - Scrollable

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

Vertical

IdYearBrandColor
44eb42641991RenaultYellow
812c677b1984FiatSilver
ae930c251971RenaultBlack
a5153e2d1982VolvoGreen
632d79e11962MercedesSilver
9804c3a71995VolvoBlue
f16f540f1980FiatBlack
e58175072006JaguarYellow
7361237c1974MercedesWhite
2fa12a4a1991VolkswagenSilver
23bb194d1986VolvoBlack
a0cb76ad2004VolkswagenOrange
1a3b842e2009HondaBlack
c18ee7772002FordBrown
529730c61972MercedesMaroon
af1d2b8c1973FiatRed
b56cee041994HondaBlack
b2a33b042005VolvoYellow
e72aaa801986MercedesBrown
5cc4d51a1974VolvoBlue
4d52c9bf2006JaguarYellow
3489a2231981VolvoMaroon
806e31c42006JaguarBlue
8ebc5b911970FordWhite
34bcb4b51999JaguarGreen
803aab481964MercedesMaroon
1ecbb7611982RenaultMaroon
e588ba3e1974AudiBrown
dd7528fd1986HondaGreen
bf70c1a71970BMWBlue
6f9fe2ad1972HondaGreen
b60074c61996RenaultBrown
3b664d572005VolvoGreen
4da7c6461981AudiBlue
0e4b3dc91982VolkswagenBlack
aa00a1682009HondaSilver
ee435c1f1961BMWBlue
ef8068af1984VolvoGreen
237e42ec1996VolvoMaroon
7e1334731982MercedesWhite
fce60ccf1982VolkswagenSilver
0cd1787b1969FiatBlack
bf51fa3a2000FiatSilver
392668251989FordWhite
a4a7fd4d1977BMWOrange
57a0b0161998VolvoSilver
209e90a81999JaguarMaroon
5acb95f91961FordOrange
81b5584e1992FiatSilver
5ff2b7331994JaguarBlack

Horizontal

IdYearBrandColor
c44476ff2001FiatSilver
fc2a48061962FordMaroon
336a98d92002RenaultMaroon
2a4ebb6e1997RenaultGreen
b55a210a1999JaguarOrange
083739672006HondaBlue
5ab91f9b1987HondaYellow
94c0b0da1993HondaGreen
2f2747711979MercedesOrange
865669342004FiatWhite

Horizontal and Vertical

IdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColorIdYearBrandColor
3feb713c1973BMWBlack3feb713c1973BMWBlack3feb713c1973BMWBlack3feb713c1973BMWBlack3feb713c1973BMWBlack
15e21a1a1969BMWWhite15e21a1a1969BMWWhite15e21a1a1969BMWWhite15e21a1a1969BMWWhite15e21a1a1969BMWWhite
88b0223b1971MercedesWhite88b0223b1971MercedesWhite88b0223b1971MercedesWhite88b0223b1971MercedesWhite88b0223b1971MercedesWhite
a7369a991994BMWBluea7369a991994BMWBluea7369a991994BMWBluea7369a991994BMWBluea7369a991994BMWBlue
751b0c4e1991BMWSilver751b0c4e1991BMWSilver751b0c4e1991BMWSilver751b0c4e1991BMWSilver751b0c4e1991BMWSilver
089069191994MercedesGreen089069191994MercedesGreen089069191994MercedesGreen089069191994MercedesGreen089069191994MercedesGreen
1cba9bf41993MercedesGreen1cba9bf41993MercedesGreen1cba9bf41993MercedesGreen1cba9bf41993MercedesGreen1cba9bf41993MercedesGreen
7460710b1975BMWBlue7460710b1975BMWBlue7460710b1975BMWBlue7460710b1975BMWBlue7460710b1975BMWBlue
729665141983RenaultOrange729665141983RenaultOrange729665141983RenaultOrange729665141983RenaultOrange729665141983RenaultOrange
74613e461983RenaultOrange74613e461983RenaultOrange74613e461983RenaultOrange74613e461983RenaultOrange74613e461983RenaultOrange
8ba9a6761998BMWYellow8ba9a6761998BMWYellow8ba9a6761998BMWYellow8ba9a6761998BMWYellow8ba9a6761998BMWYellow
a272f7291961VolkswagenBlacka272f7291961VolkswagenBlacka272f7291961VolkswagenBlacka272f7291961VolkswagenBlacka272f7291961VolkswagenBlack
e1e0c9621993AudiBluee1e0c9621993AudiBluee1e0c9621993AudiBluee1e0c9621993AudiBluee1e0c9621993AudiBlue
9d312a1a2002JaguarSilver9d312a1a2002JaguarSilver9d312a1a2002JaguarSilver9d312a1a2002JaguarSilver9d312a1a2002JaguarSilver
73b327812004RenaultGreen73b327812004RenaultGreen73b327812004RenaultGreen73b327812004RenaultGreen73b327812004RenaultGreen
47d941d41990VolvoBlue47d941d41990VolvoBlue47d941d41990VolvoBlue47d941d41990VolvoBlue47d941d41990VolvoBlue
6113e2761984FiatRed6113e2761984FiatRed6113e2761984FiatRed6113e2761984FiatRed6113e2761984FiatRed
ad4fcff01992BMWRedad4fcff01992BMWRedad4fcff01992BMWRedad4fcff01992BMWRedad4fcff01992BMWRed
5a5f8d162002VolvoMaroon5a5f8d162002VolvoMaroon5a5f8d162002VolvoMaroon5a5f8d162002VolvoMaroon5a5f8d162002VolvoMaroon
26745dcf1962VolvoYellow26745dcf1962VolvoYellow26745dcf1962VolvoYellow26745dcf1962VolvoYellow26745dcf1962VolvoYellow
ccedc6fd2003FordYellowccedc6fd2003FordYellowccedc6fd2003FordYellowccedc6fd2003FordYellowccedc6fd2003FordYellow
ef0ded5d2002HondaBrownef0ded5d2002HondaBrownef0ded5d2002HondaBrownef0ded5d2002HondaBrownef0ded5d2002HondaBrown
bb3246e02008BMWMaroonbb3246e02008BMWMaroonbb3246e02008BMWMaroonbb3246e02008BMWMaroonbb3246e02008BMWMaroon
7e11fc051981HondaGreen7e11fc051981HondaGreen7e11fc051981HondaGreen7e11fc051981HondaGreen7e11fc051981HondaGreen
7ca1b6fc1970BMWGreen7ca1b6fc1970BMWGreen7ca1b6fc1970BMWGreen7ca1b6fc1970BMWGreen7ca1b6fc1970BMWGreen
a438e3b91983FordYellowa438e3b91983FordYellowa438e3b91983FordYellowa438e3b91983FordYellowa438e3b91983FordYellow
f4d135761968AudiBrownf4d135761968AudiBrownf4d135761968AudiBrownf4d135761968AudiBrownf4d135761968AudiBrown
ccac76c82002VolkswagenGreenccac76c82002VolkswagenGreenccac76c82002VolkswagenGreenccac76c82002VolkswagenGreenccac76c82002VolkswagenGreen
19235d171979FiatOrange19235d171979FiatOrange19235d171979FiatOrange19235d171979FiatOrange19235d171979FiatOrange
2e7d98911978RenaultGreen2e7d98911978RenaultGreen2e7d98911978RenaultGreen2e7d98911978RenaultGreen2e7d98911978RenaultGreen
799c4feb1971FiatGreen799c4feb1971FiatGreen799c4feb1971FiatGreen799c4feb1971FiatGreen799c4feb1971FiatGreen
e58caadf1977HondaSilvere58caadf1977HondaSilvere58caadf1977HondaSilvere58caadf1977HondaSilvere58caadf1977HondaSilver
1c37a2c02004JaguarYellow1c37a2c02004JaguarYellow1c37a2c02004JaguarYellow1c37a2c02004JaguarYellow1c37a2c02004JaguarYellow
fd7583011963VolkswagenWhitefd7583011963VolkswagenWhitefd7583011963VolkswagenWhitefd7583011963VolkswagenWhitefd7583011963VolkswagenWhite
1bbf7faf1969VolvoOrange1bbf7faf1969VolvoOrange1bbf7faf1969VolvoOrange1bbf7faf1969VolvoOrange1bbf7faf1969VolvoOrange
0fd427cf1989FiatSilver0fd427cf1989FiatSilver0fd427cf1989FiatSilver0fd427cf1989FiatSilver0fd427cf1989FiatSilver
97e723211995AudiBlack97e723211995AudiBlack97e723211995AudiBlack97e723211995AudiBlack97e723211995AudiBlack
2868abe21965HondaBlack2868abe21965HondaBlack2868abe21965HondaBlack2868abe21965HondaBlack2868abe21965HondaBlack
84b60cab1964RenaultOrange84b60cab1964RenaultOrange84b60cab1964RenaultOrange84b60cab1964RenaultOrange84b60cab1964RenaultOrange
4b8934ec2002RenaultRed4b8934ec2002RenaultRed4b8934ec2002RenaultRed4b8934ec2002RenaultRed4b8934ec2002RenaultRed
936e273d2009FiatMaroon936e273d2009FiatMaroon936e273d2009FiatMaroon936e273d2009FiatMaroon936e273d2009FiatMaroon
344c72611993RenaultGreen344c72611993RenaultGreen344c72611993RenaultGreen344c72611993RenaultGreen344c72611993RenaultGreen
4547e2b11987HondaSilver4547e2b11987HondaSilver4547e2b11987HondaSilver4547e2b11987HondaSilver4547e2b11987HondaSilver
3f8393eb2006FiatOrange3f8393eb2006FiatOrange3f8393eb2006FiatOrange3f8393eb2006FiatOrange3f8393eb2006FiatOrange
393fb7f21981HondaGreen393fb7f21981HondaGreen393fb7f21981HondaGreen393fb7f21981HondaGreen393fb7f21981HondaGreen
b9e5ffa91965JaguarBlackb9e5ffa91965JaguarBlackb9e5ffa91965JaguarBlackb9e5ffa91965JaguarBlackb9e5ffa91965JaguarBlack
555a4b971991BMWOrange555a4b971991BMWOrange555a4b971991BMWOrange555a4b971991BMWOrange555a4b971991BMWOrange
e4d26e691992RenaultWhitee4d26e691992RenaultWhitee4d26e691992RenaultWhitee4d26e691992RenaultWhitee4d26e691992RenaultWhite
84d3cb4a1973JaguarRed84d3cb4a1973JaguarRed84d3cb4a1973JaguarRed84d3cb4a1973JaguarRed84d3cb4a1973JaguarRed
faf8c5d11995FiatBluefaf8c5d11995FiatBluefaf8c5d11995FiatBluefaf8c5d11995FiatBluefaf8c5d11995FiatBlue

Frozen Rows

IdYearBrandColor
75ee624f2005HondaBrown
7f445fbf2004RenaultBlue
ad05c03b1992VolvoSilver
ebe5f2e21969FiatMaroon
bd5259011969VolkswagenSilver
5be8522b1960VolvoWhite
001f1eee1963MercedesYellow
805858401996MercedesRed
88b9f2871989JaguarWhite
5f0f0e251960MercedesBrown
ca5e07891998RenaultSilver
d56c7dcd1984HondaWhite
8646c6c62008FiatRed
97d456491969BMWBlack
91468cff1968RenaultGreen
c63f3c4a1965RenaultSilver
ab5192c91982VolvoWhite
d43632a51978FiatMaroon
7f31283c1982AudiYellow
7df83ef61991JaguarMaroon
31ca2efb1974VolvoYellow
fd3ac8252006JaguarGreen
d6340f411996BMWRed
6ba510402002RenaultSilver
1e5bcb851967FordBlue
e7458fa41986RenaultRed
c743a3b41973AudiWhite
4ad76b2b2003JaguarBrown
d649bf8c1968RenaultMaroon
d1ae35c91990VolkswagenBrown
78c78df21963VolkswagenMaroon
0f9062a91992HondaWhite
b52139d21977RenaultGreen
d60cb2ef1992AudiGreen
0ba00b352007MercedesBlue
b67b309f1971FiatBlack
1bddc0b91974VolkswagenBlue
87777f831969FordBlue
41212fca1980JaguarMaroon
97e1f5db1990HondaBrown
3e28254d1971FordGreen
e78c3aca1974VolkswagenGreen
d6a2d82f1980AudiSilver
3379a01a1988VolkswagenYellow
952dbbff1986HondaBlue
b23b26eb2005VolkswagenRed
e55df7822005VolvoGreen
fa544e291973AudiSilver
fb1edde41977MercedesSilver
a899e1ae2001AudiMaroon

Frozen Columns

Id
bea72cae
9815796d
be22d8b5
d79d756c
763f3032
204c6cfc
be48c534
fafcc196
feedae9b
6cf6b039
54ab2ac7
d309104c
378e2ce3
2556b839
e6fa217e
39909e2f
20d2612e
904b7341
6e1863dd
9cf4792a
fddedd63
558305d3
facd896d
ab2f1ed3
11f6b337
83cd4f07
5ba8d382
4e0c3e36
d3da3a75
6274fb35
5d58a70c
37aa60ee
b98d13f0
f97ebea7
7fffc7ec
a6f2ee8d
681756c3
ca75ef48
85325a99
4373fd73
315ffa15
743ff706
26750a67
62981448
882ae7cb
bb623564
a1b9bdda
f30f694a
e1a53ae7
e83e778a
YearBrandColor
1966VolvoGreen
1965FordGreen
1989VolvoBlue
1971HondaBlack
1982HondaBrown
1969RenaultSilver
2007FiatOrange
1967MercedesWhite
1977MercedesMaroon
1997BMWGreen
1976VolkswagenBrown
1990FordOrange
2008FiatBlack
1999JaguarMaroon
2006FiatYellow
1974JaguarWhite
1962JaguarBrown
1969HondaRed
2006JaguarBlue
2007MercedesGreen
1987VolvoYellow
1987HondaBlue
1976FiatSilver
1977VolkswagenRed
1966BMWRed
2007AudiMaroon
1973FordBlue
1968RenaultBlack
1975JaguarGreen
1987JaguarRed
2005MercedesOrange
1976MercedesSilver
2001BMWRed
1979VolkswagenBrown
1985AudiGreen
1996RenaultRed
2004BMWMaroon
2009BMWOrange
1971FordOrange
1972MercedesBlack
1978AudiOrange
1992JaguarBrown
1969MercedesBlack
1981RenaultYellow
1972JaguarOrange
1982BMWMaroon
1976MercedesBlack
1981AudiWhite
1991FiatBlack
1964MercedesSilver

On-Demand Data

IdYearBrandColor
e4d95ebd1981FiatBrown
948646da1995BMWYellow
32b5dee11993VolvoMaroon
909b0fd01987HondaRed
3257d7d62004AudiBlack
0438c9421996VolkswagenYellow
963aaa0e2005FiatWhite
9e66d4f21978FordYellow
5e6559911994RenaultGreen
47e817161972HondaSilver
07b176521990FordWhite
376d5b9b1984RenaultBrown
f82d81af1981AudiRed
8b46220e1980BMWBlue
a803c4661990VolvoRed
7fa524501986VolvoBlack
07dfc7091986VolkswagenBlack
830031a31990VolvoMaroon
0e558d941987AudiWhite
ed6c048f2005JaguarWhite

Virtual Scrolling - 20000 Rows

IdYearBrandColor
5e4b89e81978FordMaroon
868a98c62004VolkswagenBlue
cd1d80231974AudiSilver
e7207cd21978JaguarSilver
e09b859a1964FiatBlack
0e611cf62004FiatMaroon
014bbc532001MercedesMaroon
4b907dca1998BMWYellow
a2eefef61986FordMaroon
6d5705251987FordRed
899a846f1987MercedesBlack
37da074b1980MercedesBlack
40427cee1987AudiBrown
183616901981JaguarBlue
301d5b5f1964FiatBlack
2769f3a61976BMWBlue
0c3d01b11984AudiGreen
de38d45f1968FiatBlack
0ea21e8e1992FiatSilver
94ccd55a2002VolkswagenGreen
de874a731975VolkswagenWhite
d01bfbaa1980FordRed
b3e8dda11962MercedesRed
3ed1d8951998BMWYellow
8727bc031961VolvoWhite
501c6a9d2007FiatYellow
1793c2bb1967AudiMaroon
1e067e0b1978FiatOrange
831a236a1991VolvoYellow
c9e6a7c52003FordRed
c3efb7951974JaguarBlack
9be3796c1997VolkswagenBrown
5e36a9a71990JaguarBrown
1bb8bff71975FiatBlack
af006d661987BMWRed
482b19c21969JaguarOrange
0568796f2004FiatYellow
dc2bfecb1969AudiSilver
b5df69e51991BMWMaroon
de624a351980VolvoBrown
<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>