Locale

Language
English
English
English
French
German
German
German
Italian
Korean
Spanish
Catalan
Dutch
Portuguese
Portuguese
Arabic
Arabic
Bulgarian
Bangla
Bosnian
Czech
Greek
Estonian
Persian
Finnish
Danish
Hindi
Indonesian
Icelandic
Croatian
Japanese
Hungarian
Hebrew
Georgian
Central Kurdish
Khmer
Kyrgyz
Kazakh
Lithuanian
Latvian
Malay
Norwegian
Polish
Romanian
Russian
Slovak
Slovenian
Serbian
Serbian
Swedish
Thai
Turkish
Ukrainian
Uzbek
Vietnamese
Chinese
Chinese

Input Style

Free Themes

Built-in component themes created by the PrimeFaces Theme Designer.

Saga Saga
Vela Vela
Arya Arya

Legacy Free Themes

Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink
Nova Nova
Nova Nova Alt
Nova Nova Accent

DataTable Scroll

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

Vertical
NameCountryRepresentativeStatus
Sinclair WaycottArgentinaAmy Elsner NEW
Leja CaldareraAustraliaStephen Shaw PROPOSAL
Darci PoquetteFranceIoni Bowcher NEW
Octavia MaletSpainBernardo Dominic PROPOSAL
Juan WieserArgentinaOnyama Limba RENEWAL
Clifford RimArgentinaXuxue Feng UNQUALIFIED
Clifford RimAustraliaAsiya Javayant PROPOSAL
Silvio SlusarskiGermanyXuxue Feng PROPOSAL
David DarakjyBrazilOnyama Limba PROPOSAL
Aditya KuskoItalyOnyama Limba NEGOTIATION
Salvatore StockhamJapanXuxue Feng UNQUALIFIED
Julie StensethGermanyStephen Shaw UNQUALIFIED
Tony FollerSpainAnna Fali UNQUALIFIED
Jeanfrancois VenereBrazilIoni Bowcher UNQUALIFIED
Costa DilliardIndiaIvan Magalhaes UNQUALIFIED
Costa DilliardRussiaElwin Sharvill QUALIFIED
Silvio SlusarskiItalyBernardo Dominic NEGOTIATION
Aika InouyeRussiaBernardo Dominic UNQUALIFIED
Antonio CaudyFranceOnyama Limba RENEWAL
Isabel BowleyRussiaOnyama Limba PROPOSAL
Leja CaldareraSpainXuxue Feng NEW
Octavia MaletBrazilOnyama Limba NEGOTIATION
Aika InouyeIndiaElwin Sharvill NEW
Emily WhobreyFranceOnyama Limba UNQUALIFIED
Kadeem FlosiJapanAnna Fali RENEWAL
David DarakjyArgentinaXuxue Feng NEGOTIATION
Ivar PaprockiArgentinaAsiya Javayant QUALIFIED
Juan WieserItalyXuxue Feng NEGOTIATION
Costa DilliardArgentinaAnna Fali NEW
Octavia MaletAustraliaStephen Shaw QUALIFIED
Costa DilliardGermanyAnna Fali NEGOTIATION
Jennifer AmigonSpainBernardo Dominic NEGOTIATION
Jefferson SchemmerAustraliaIvan Magalhaes NEW
Nicolas IturbideGermanyAmy Elsner UNQUALIFIED
Deepesh ChuiItalyAsiya Javayant QUALIFIED
Arvin AlbaresSpainElwin Sharvill QUALIFIED
Wickens NestleIndiaIoni Bowcher RENEWAL
Morrow RutaCanadaStephen Shaw PROPOSAL
Kaitlin OstroskyGermanyIoni Bowcher NEGOTIATION
Sinclair WaycottCanadaOnyama Limba PROPOSAL
Arvin AlbaresRussiaAnna Fali UNQUALIFIED
Ivar PaprockiAustraliaIoni Bowcher RENEWAL
Juan WieserIndiaStephen Shaw PROPOSAL
Juan WieserSpainAsiya Javayant UNQUALIFIED
Rodrigues CampainGermanyAnna Fali RENEWAL
Deepesh ChuiItalyAnna Fali NEW
Antonio CaudyUnited KingdomAmy Elsner QUALIFIED
Smith GlickCanadaAsiya Javayant QUALIFIED
Aika InouyeItalyIoni Bowcher RENEWAL
Arvin AlbaresFranceOnyama Limba PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Adams MorascaIndiaIvan Magalhaes UNQUALIFIED
Aika InouyeArgentinaAsiya Javayant UNQUALIFIED
Izzy GarufiBrazilOnyama Limba NEW
Jeanfrancois VenereUnited KingdomElwin Sharvill NEW
Johnson SergiIndiaAnna Fali PROPOSAL
Kadeem FlosiCanadaXuxue Feng UNQUALIFIED
Adams MorascaBrazilAnna Fali NEGOTIATION
James ButtItalyAmy Elsner UNQUALIFIED
Johnson SergiItalyStephen Shaw NEW
Kadeem FlosiFranceElwin Sharvill RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aruna FigeroaBrazil2026-04-30Rousseaux, Michael Esq RENEWAL25Anna Fali
1001David DarakjyRussia2026-04-23Dorl, James J Esq NEW13Amy Elsner
1002David DarakjyAustralia2026-04-30Chanay, Jeffrey A Esq QUALIFIED38Anna Fali
1003Kaitlin OstroskyCanada2026-04-28Chapman, Ross E Esq NEW27Amy Elsner
1004Kaitlin OstroskyCanada2026-04-20Rangoni Of Florence NEW62Elwin Sharvill
1005Arvin AlbaresItaly2026-05-06Chanay, Jeffrey A Esq PROPOSAL37Asiya Javayant
1006Leon OldroydArgentina2026-04-30Buckley Miller Wright PROPOSAL12Ioni Bowcher
1007Greenwood BologniaUnited Kingdom2026-05-09Buckley Miller Wright QUALIFIED2Ioni Bowcher
1008Faith GillianBrazil2026-05-08Buckley Miller Wright UNQUALIFIED47Ioni Bowcher
1009Kaitlin OstroskyBrazil2026-04-29Chapman, Ross E Esq UNQUALIFIED32Ioni Bowcher
1010Julie StensethSpain2026-05-10Chemel, James L Cpa RENEWAL77Amy Elsner
1011Jennifer AmigonItaly2026-05-03Chapman, Ross E Esq QUALIFIED53Onyama Limba
1012Jeanfrancois VenereAustralia2026-05-08Chanay, Jeffrey A Esq PROPOSAL58Amy Elsner
1013Stacey MacleadUnited Kingdom2026-04-25Morlong Associates NEW91Ioni Bowcher
1014Ricardo GauchoItaly2026-05-04Chapman, Ross E Esq QUALIFIED36Elwin Sharvill
1015Aditya KuskoSpain2026-04-18Printing Dimensions QUALIFIED16Asiya Javayant
1016Morrow RutaUnited Kingdom2026-05-15Printing Dimensions PROPOSAL14Ivan Magalhaes
1017Chavez BriddickRussia2026-05-14Truhlar And Truhlar Attys QUALIFIED67Stephen Shaw
1018Antonio CaudyFrance2026-05-09Printing Dimensions PROPOSAL45Elwin Sharvill
1019Ashley DoeItaly2026-05-09Buckley Miller Wright UNQUALIFIED54Ioni Bowcher
1020David DarakjyJapan2026-05-12Feltz Printing Service QUALIFIED49Ioni Bowcher
1021Costa DilliardFrance2026-04-28Printing Dimensions QUALIFIED53Amy Elsner
1022Kadeem FlosiItaly2026-05-10Buckley Miller Wright QUALIFIED39Onyama Limba
1023Cody SaylorsIndia2026-04-25Benton, John B Jr NEGOTIATION48Bernardo Dominic
1024Salvatore StockhamUnited Kingdom2026-05-13Feiner Bros UNQUALIFIED93Ioni Bowcher
1025Maria MarrierJapan2026-05-03Rangoni Of Florence NEGOTIATION49Stephen Shaw
1026Leja CaldareraAustralia2026-05-11Chapman, Ross E Esq QUALIFIED56Elwin Sharvill
1027Emily WhobreyItaly2026-04-28Feiner Bros NEW63Bernardo Dominic
1028Julie StensethJapan2026-04-18Printing Dimensions QUALIFIED3Asiya Javayant
1029Tony FollerJapan2026-04-21Benton, John B Jr NEGOTIATION16Ivan Magalhaes
1030Juan WieserUnited Kingdom2026-05-06Dorl, James J Esq RENEWAL4Ivan Magalhaes
1031Salvatore StockhamJapan2026-05-04Chanay, Jeffrey A Esq QUALIFIED66Onyama Limba
1032Faith GillianRussia2026-04-22Truhlar And Truhlar Attys NEW78Bernardo Dominic
1033Jennifer AmigonItaly2026-04-18Buckley Miller Wright PROPOSAL77Asiya Javayant
1034Maria MarrierIndia2026-05-11Truhlar And Truhlar Attys RENEWAL81Ioni Bowcher
1035Darci PoquetteRussia2026-05-11Truhlar And Truhlar Attys PROPOSAL48Amy Elsner
1036Aditya KuskoIndia2026-05-06Feiner Bros NEW91Ioni Bowcher
1037Ivar PaprockiRussia2026-04-16Dorl, James J Esq NEGOTIATION53Onyama Limba
1038Sinclair WaycottSpain2026-04-22Dorl, James J Esq UNQUALIFIED50Asiya Javayant
1039Chavez BriddickFrance2026-05-09Feltz Printing Service NEGOTIATION16Ivan Magalhaes
1040David DarakjyJapan2026-05-09Morlong Associates NEGOTIATION62Ivan Magalhaes
1041Tony FollerUnited Kingdom2026-04-30Feltz Printing Service NEW67Bernardo Dominic
1042Claire TollnerItaly2026-05-03Chapman, Ross E Esq PROPOSAL98Anna Fali
1043Leon OldroydItaly2026-04-28Truhlar And Truhlar Attys NEW59Anna Fali
1044Leja CaldareraBrazil2026-05-14Chemel, James L Cpa NEGOTIATION96Ivan Magalhaes
1045Octavia MaletGermany2026-05-11Truhlar And Truhlar Attys UNQUALIFIED6Anna Fali
1046Aruna FigeroaGermany2026-05-11Dorl, James J Esq PROPOSAL81Ioni Bowcher
1047Octavia MaletCanada2026-05-01Rousseaux, Michael Esq NEW44Elwin Sharvill
1048Leja CaldareraJapan2026-04-22Feltz Printing Service NEGOTIATION48Xuxue Feng
1049Silvio SlusarskiFrance2026-04-19Chapman, Ross E Esq QUALIFIED82Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Aruna FigeroaUnited KingdomIoni Bowcher RENEWAL
Juan WieserRussiaElwin Sharvill QUALIFIED
David DarakjyUnited KingdomAnna Fali NEW
Antonio CaudyUnited KingdomAsiya Javayant QUALIFIED
Izzy GarufiGermanyOnyama Limba UNQUALIFIED
Jeanfrancois VenereIndiaAmy Elsner QUALIFIED
David DarakjyCanadaElwin Sharvill QUALIFIED
Isabel BowleyItalyAnna Fali QUALIFIED
Greenwood BologniaRussiaBernardo Dominic UNQUALIFIED
Misaki RoysterIndiaXuxue Feng QUALIFIED
Johnson SergiArgentinaIoni Bowcher NEW
Julie StensethArgentinaAsiya Javayant QUALIFIED
Jones VocelkaUnited KingdomBernardo Dominic NEW
Francesco ShinkoUnited KingdomXuxue Feng QUALIFIED
Arvin AlbaresArgentinaAnna Fali RENEWAL
Kaitlin OstroskyCanadaXuxue Feng QUALIFIED
Maria MarrierArgentinaIoni Bowcher UNQUALIFIED
Wickens NestleBrazilElwin Sharvill UNQUALIFIED
Leon OldroydFranceAmy Elsner QUALIFIED
Alejandro PerinUnited KingdomBernardo Dominic NEGOTIATION
Wickens NestleIndiaXuxue Feng NEGOTIATION
Aditya KuskoIndiaAsiya Javayant NEGOTIATION
Aika InouyeJapanAsiya Javayant PROPOSAL
Aika InouyeUnited KingdomAmy Elsner NEW
Isabel BowleyJapanAmy Elsner NEW
Arvin AlbaresJapanIvan Magalhaes QUALIFIED
Aika InouyeCanadaXuxue Feng RENEWAL
Leja CaldareraGermanyElwin Sharvill RENEWAL
Ashley DoeSpainBernardo Dominic PROPOSAL
Leja CaldareraFranceAmy Elsner RENEWAL
Chavez BriddickItalyIoni Bowcher NEW
Ashley DoeItalyAmy Elsner RENEWAL
Jones VocelkaItalyXuxue Feng PROPOSAL
Deepesh ChuiItalyBernardo Dominic NEW
Munro FerenczSpainElwin Sharvill NEW
Greenwood BologniaItalyAsiya Javayant QUALIFIED
David DarakjyArgentinaOnyama Limba NEW
Izzy GarufiCanadaAmy Elsner RENEWAL
Greenwood BologniaArgentinaIvan Magalhaes QUALIFIED
Nicolas IturbideRussiaIoni Bowcher RENEWAL
Mayumi KolmetzArgentinaXuxue Feng PROPOSAL
Kaitlin OstroskySpainAnna Fali RENEWAL
Juan WieserFranceIoni Bowcher PROPOSAL
Arvin AlbaresJapanXuxue Feng PROPOSAL
Deepesh ChuiSpainBernardo Dominic QUALIFIED
Faith GillianCanadaStephen Shaw NEW
Johnson SergiItalyIoni Bowcher QUALIFIED
Rodrigues CampainCanadaAmy Elsner RENEWAL
Darci PoquetteAustraliaStephen Shaw PROPOSAL
David DarakjyFranceStephen Shaw NEW
Frozen Columns
Name
Izzy Garufi
Kadeem Flosi
Tony Foller
Juan Wieser
Juan Wieser
Alejandro Perin
Silvio Slusarski
Ivar Paprocki
Munro Ferencz
James Butt
James Butt
Mayumi Kolmetz
Stacey Maclead
Juan Wieser
Ivar Paprocki
Alejandro Perin
James Butt
David Darakjy
Izzy Garufi
Chavez Briddick
Misaki Royster
Tony Foller
Greenwood Bolognia
Wickens Nestle
Munro Ferencz
Clifford Rim
Misaki Royster
Johnson Sergi
Ricardo Gaucho
Costa Dilliard
David Darakjy
Emily Whobrey
Octavia Malet
Juan Wieser
Kadeem Flosi
Misaki Royster
Misaki Royster
Leja Caldarera
Kaitlin Ostrosky
Wickens Nestle
Maria Marrier
Alejandro Perin
Leja Caldarera
Maisha Rulapaugh
Izzy Garufi
Alejandro Perin
Morrow Ruta
Ivar Paprocki
Izzy Garufi
Julie Stenseth
IdCountryDate
1000France2026-04-20
1001India2026-04-22
1002Australia2026-04-29
1003Argentina2026-04-21
1004India2026-04-16
1005Brazil2026-05-09
1006Germany2026-05-02
1007Brazil2026-04-27
1008Argentina2026-05-03
1009Brazil2026-05-15
1010Italy2026-05-05
1011Russia2026-05-12
1012France2026-05-05
1013Italy2026-04-19
1014Japan2026-04-27
1015United Kingdom2026-04-30
1016Brazil2026-05-07
1017Argentina2026-04-24
1018Argentina2026-04-18
1019Canada2026-05-14
1020France2026-05-08
1021Spain2026-05-06
1022Australia2026-05-13
1023United Kingdom2026-04-16
1024Australia2026-04-22
1025France2026-05-11
1026Russia2026-05-03
1027Russia2026-05-06
1028India2026-04-26
1029Spain2026-05-07
1030Australia2026-04-27
1031Germany2026-05-14
1032Brazil2026-04-23
1033Japan2026-04-24
1034Germany2026-04-17
1035India2026-05-02
1036Spain2026-04-26
1037Australia2026-04-16
1038Argentina2026-05-10
1039Canada2026-05-12
1040France2026-05-15
1041Spain2026-04-16
1042Canada2026-05-06
1043United Kingdom2026-05-05
1044Russia2026-05-07
1045United Kingdom2026-05-11
1046Australia2026-05-03
1047France2026-05-11
1048Argentina2026-05-08
1049Germany2026-05-12

On-Demand Data

NameIdCountryDate
Jennifer Amigon1000Russia2026-05-15
Aditya Kusko1001India2026-05-12
Maisha Rulapaugh1002Brazil2026-05-02
James Butt1003Japan2026-05-14
Smith Glick1004France2026-05-15
Antonio Caudy1005Italy2026-05-01
Deepesh Chui1006Canada2026-04-21
Jennifer Amigon1007Canada2026-05-12
Juan Wieser1008Italy2026-04-20
Maisha Rulapaugh1009Brazil2026-05-15
Mujtaba Nicka1010Germany2026-05-05
Jones Vocelka1011Canada2026-05-15
Ivar Paprocki1012Brazil2026-05-13
Stacey Maclead1013France2026-04-20
Aditya Kusko1014Spain2026-05-06
Munro Ferencz1015Canada2026-04-24
Darci Poquette1016Germany2026-04-30
Jeanfrancois Venere1017Canada2026-04-28
Faith Gillian1018Canada2026-05-04
Aruna Figeroa1019Australia2026-04-24
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Darci PoquetteCanadaIvan Magalhaes NEW
Aika InouyeFranceXuxue Feng QUALIFIED
Deepesh ChuiItalyOnyama Limba UNQUALIFIED
Arvin AlbaresUnited KingdomOnyama Limba NEGOTIATION
Deepesh ChuiGermanyXuxue Feng PROPOSAL
Nicolas IturbideCanadaIvan Magalhaes PROPOSAL
Faith GillianFranceIoni Bowcher NEW
Francesco ShinkoRussiaIvan Magalhaes PROPOSAL
Ivar PaprockiJapanXuxue Feng NEW
Maria MarrierAustraliaAsiya Javayant QUALIFIED
Salvatore StockhamItalyAsiya Javayant PROPOSAL
Aika InouyeBrazilStephen Shaw NEW
Ricardo GauchoGermanyBernardo Dominic QUALIFIED
Leja CaldareraSpainXuxue Feng UNQUALIFIED
Murillo MaletFranceStephen Shaw NEGOTIATION
Adams MorascaSpainAnna Fali NEW
Jennifer AmigonRussiaAsiya Javayant RENEWAL
Silvio SlusarskiAustraliaStephen Shaw NEGOTIATION
Stacey MacleadUnited KingdomElwin Sharvill NEW
Faith GillianJapanElwin Sharvill QUALIFIED
Stacey MacleadRussiaIoni Bowcher NEGOTIATION
Greenwood BologniaFranceElwin Sharvill UNQUALIFIED
Claire TollnerAustraliaXuxue Feng NEW
Arvin AlbaresGermanyIvan Magalhaes PROPOSAL
Kaitlin OstroskyIndiaOnyama Limba RENEWAL
Chavez BriddickIndiaStephen Shaw NEGOTIATION
Maisha RulapaughAustraliaStephen Shaw RENEWAL
Clifford RimCanadaIvan Magalhaes UNQUALIFIED
Juan WieserCanadaIoni Bowcher PROPOSAL
Sinclair WaycottFranceAnna Fali QUALIFIED
Chavez BriddickGermanyBernardo Dominic PROPOSAL
Jeanfrancois VenereIndiaStephen Shaw NEGOTIATION
Cody SaylorsSpainStephen Shaw NEGOTIATION
Emily WhobreyRussiaIoni Bowcher NEGOTIATION
Jeanfrancois VenereRussiaAnna Fali NEW
Silvio SlusarskiIndiaAnna Fali RENEWAL
Francesco ShinkoRussiaOnyama Limba PROPOSAL
Faith GillianFranceAsiya Javayant QUALIFIED
Greenwood BologniaGermanyOnyama Limba RENEWAL
Maria MarrierItalyXuxue Feng QUALIFIED

<style>
    .ui-datatable-frozenlayout-left {
        width: 20%;
    }

    .ui-datatable-frozenlayout-right {
        width: 80%;
    }
</style>


<h:form>
    <div class="card">
        <h5 style="margin-top:0">Vertical</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers1}" scrollable="true" scrollHeight="250">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.statusName}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Horizontal</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers2}" scrollable="true" scrollWidth="600">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.statusName}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Horizontal and Vertical</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers3}" scrollable="true" scrollWidth="50%" scrollHeight="250">
            <p:column headerText="Id" footerText="Id">
                <h:outputText value="#{customer.id}"/>
            </p:column>
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Date" footerText="Date">
                <h:outputText value="#{customer.date}"/>
            </p:column>
            <p:column headerText="Company" footerText="Company">
                <h:outputText value="#{customer.company}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.statusName}">#{customer.status}</span>
            </p:column>
            <p:column headerText="Activity" footerText="Activity">
                <h:outputText value="#{customer.activity}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Frozen Rows</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers4}" scrollable="true" scrollHeight="250"
                     frozenRows="2">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.statusName}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Frozen Columns</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers5}" scrollable="true" scrollHeight="250"
                     scrollWidth="300" frozenColumns="1">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Id" footerText="Id">
                <h:outputText value="#{customer.id}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Date" footerText="Date">
                <h:outputText value="#{customer.date}"/>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h3>On-Demand Data</h3>
        <p:dataTable var="customer" value="#{dtScrollView.customers6}" scrollRows="20" scrollable="true" liveScroll="true" scrollHeight="150">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Id" footerText="Id">
                <h:outputText value="#{customer.id}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Date" footerText="Date">
                <h:outputText value="#{customer.date}"/>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Virtual Scrolling - 20000 Rows</h5>
        <p:dataTable var="customer" value="#{dtScrollView.lazyModel}" scrollRows="20" scrollable="true"
                     virtualScroll="true" scrollHeight="200" rows="40" style="margin-bottom:0">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.statusName}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

</h:form>