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
Tony FollerIndiaElwin Sharvill RENEWAL
Morrow RutaBrazilAmy Elsner UNQUALIFIED
Tony FollerCanadaIoni Bowcher UNQUALIFIED
Claire TollnerIndiaXuxue Feng RENEWAL
David DarakjyGermanyStephen Shaw NEW
Juan WieserBrazilIvan Magalhaes PROPOSAL
Jeanfrancois VenereJapanElwin Sharvill NEW
Leon OldroydFranceBernardo Dominic NEW
Sinclair WaycottIndiaIvan Magalhaes NEGOTIATION
Jennifer AmigonFranceAnna Fali QUALIFIED
Francesco ShinkoIndiaIvan Magalhaes UNQUALIFIED
Faith GillianCanadaIvan Magalhaes PROPOSAL
Smith GlickFranceStephen Shaw NEGOTIATION
Deepesh ChuiFranceAnna Fali RENEWAL
Alejandro PerinRussiaElwin Sharvill PROPOSAL
Sinclair WaycottBrazilAmy Elsner QUALIFIED
Ashley DoeJapanIoni Bowcher RENEWAL
Alejandro PerinGermanyAmy Elsner PROPOSAL
Emily WhobreyUnited KingdomOnyama Limba RENEWAL
Chavez BriddickCanadaAmy Elsner NEGOTIATION
Izzy GarufiCanadaOnyama Limba UNQUALIFIED
Deepesh ChuiSpainXuxue Feng QUALIFIED
Greenwood BologniaItalyBernardo Dominic UNQUALIFIED
Jeanfrancois VenereAustraliaStephen Shaw QUALIFIED
Ashley DoeAustraliaXuxue Feng PROPOSAL
David DarakjyGermanyStephen Shaw QUALIFIED
Salvatore StockhamGermanyIvan Magalhaes UNQUALIFIED
Rodrigues CampainAustraliaElwin Sharvill NEGOTIATION
Adams MorascaJapanIvan Magalhaes UNQUALIFIED
Faith GillianItalyStephen Shaw UNQUALIFIED
Isabel BowleyJapanElwin Sharvill RENEWAL
Jennifer AmigonBrazilAsiya Javayant UNQUALIFIED
Silvio SlusarskiIndiaAsiya Javayant RENEWAL
Aika InouyeArgentinaElwin Sharvill RENEWAL
Emily WhobreyArgentinaAsiya Javayant RENEWAL
Chavez BriddickItalyAsiya Javayant UNQUALIFIED
Adams MorascaBrazilAnna Fali RENEWAL
Alejandro PerinCanadaOnyama Limba UNQUALIFIED
Cody SaylorsBrazilIvan Magalhaes NEGOTIATION
Maisha RulapaughUnited KingdomIoni Bowcher NEGOTIATION
Maisha RulapaughBrazilIoni Bowcher NEW
Faith GillianItalyElwin Sharvill UNQUALIFIED
Ricardo GauchoSpainXuxue Feng PROPOSAL
Jefferson SchemmerIndiaOnyama Limba NEGOTIATION
Deepesh ChuiBrazilAmy Elsner QUALIFIED
David DarakjyAustraliaAsiya Javayant UNQUALIFIED
Julie StensethItalyOnyama Limba UNQUALIFIED
Johnson SergiUnited KingdomXuxue Feng UNQUALIFIED
Isabel BowleyAustraliaAmy Elsner NEGOTIATION
Jennifer AmigonArgentinaXuxue Feng QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Tony FollerGermanyIvan Magalhaes QUALIFIED
Silvio SlusarskiSpainIoni Bowcher QUALIFIED
Misaki RoysterRussiaAsiya Javayant NEW
Deepesh ChuiRussiaBernardo Dominic NEW
Antonio CaudyUnited KingdomIoni Bowcher PROPOSAL
Sinclair WaycottItalyIoni Bowcher UNQUALIFIED
Isabel BowleyJapanXuxue Feng RENEWAL
Greenwood BologniaBrazilXuxue Feng PROPOSAL
Tony FollerAustraliaIvan Magalhaes RENEWAL
Smith GlickRussiaStephen Shaw RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Sinclair WaycottArgentina2026-05-23Printing Dimensions NEGOTIATION60Stephen Shaw
1001Alejandro PerinItaly2026-05-30Buckley Miller Wright RENEWAL6Elwin Sharvill
1002Munro FerenczSpain2026-05-27Rousseaux, Michael Esq NEGOTIATION23Stephen Shaw
1003Cody SaylorsJapan2026-05-13Chemel, James L Cpa NEGOTIATION30Asiya Javayant
1004Morrow RutaGermany2026-05-05Truhlar And Truhlar Attys UNQUALIFIED96Bernardo Dominic
1005Clifford RimUnited Kingdom2026-05-08Buckley Miller Wright NEW90Elwin Sharvill
1006Smith GlickUnited Kingdom2026-05-26Chapman, Ross E Esq PROPOSAL91Ioni Bowcher
1007Antonio CaudyJapan2026-05-05Chemel, James L Cpa PROPOSAL49Ioni Bowcher
1008Leja CaldareraItaly2026-06-01Chanay, Jeffrey A Esq QUALIFIED10Onyama Limba
1009Sinclair WaycottRussia2026-05-11Rousseaux, Michael Esq QUALIFIED56Amy Elsner
1010Salvatore StockhamRussia2026-05-15Printing Dimensions NEGOTIATION66Ioni Bowcher
1011Morrow RutaAustralia2026-05-26King, Christopher A Esq QUALIFIED78Amy Elsner
1012Silvio SlusarskiAustralia2026-05-24Rangoni Of Florence RENEWAL72Bernardo Dominic
1013Darci PoquetteUnited Kingdom2026-05-15Buckley Miller Wright PROPOSAL25Xuxue Feng
1014Leja CaldareraFrance2026-05-12Chapman, Ross E Esq NEW82Anna Fali
1015Tony FollerFrance2026-05-31Truhlar And Truhlar Attys UNQUALIFIED63Stephen Shaw
1016Izzy GarufiRussia2026-05-18Buckley Miller Wright QUALIFIED76Bernardo Dominic
1017Julie StensethCanada2026-05-23Benton, John B Jr QUALIFIED44Elwin Sharvill
1018Adams MorascaSpain2026-05-06Truhlar And Truhlar Attys RENEWAL48Amy Elsner
1019Murillo MaletRussia2026-05-06King, Christopher A Esq NEGOTIATION82Asiya Javayant
1020Leon OldroydGermany2026-05-10Feiner Bros QUALIFIED6Onyama Limba
1021Morrow RutaBrazil2026-05-06Commercial Press NEW32Xuxue Feng
1022Aditya KuskoAustralia2026-05-24Truhlar And Truhlar Attys PROPOSAL60Ivan Magalhaes
1023Rodrigues CampainBrazil2026-05-05Chemel, James L Cpa QUALIFIED28Elwin Sharvill
1024Ricardo GauchoGermany2026-05-08Printing Dimensions NEGOTIATION79Ivan Magalhaes
1025Johnson SergiAustralia2026-05-31Chapman, Ross E Esq RENEWAL94Onyama Limba
1026Isabel BowleyAustralia2026-05-05Commercial Press RENEWAL28Ioni Bowcher
1027Deepesh ChuiCanada2026-05-07Dorl, James J Esq UNQUALIFIED50Asiya Javayant
1028Stacey MacleadRussia2026-05-27King, Christopher A Esq UNQUALIFIED80Bernardo Dominic
1029Isabel BowleyBrazil2026-05-19King, Christopher A Esq NEGOTIATION54Amy Elsner
1030Maria MarrierRussia2026-05-09Feltz Printing Service RENEWAL42Ioni Bowcher
1031Maisha RulapaughSpain2026-05-17Dorl, James J Esq QUALIFIED25Xuxue Feng
1032Aditya KuskoArgentina2026-05-13Rangoni Of Florence PROPOSAL36Amy Elsner
1033Mayumi KolmetzCanada2026-05-10Benton, John B Jr NEW88Anna Fali
1034Emily WhobreyIndia2026-05-08Feltz Printing Service UNQUALIFIED34Stephen Shaw
1035Jefferson SchemmerItaly2026-05-12Truhlar And Truhlar Attys RENEWAL59Anna Fali
1036Johnson SergiBrazil2026-05-31Feltz Printing Service QUALIFIED89Amy Elsner
1037James ButtBrazil2026-05-29Feiner Bros PROPOSAL0Bernardo Dominic
1038Costa DilliardIndia2026-05-12Buckley Miller Wright UNQUALIFIED36Amy Elsner
1039Jeanfrancois VenereFrance2026-05-30Dorl, James J Esq UNQUALIFIED30Stephen Shaw
1040Misaki RoysterIndia2026-05-15Rousseaux, Michael Esq NEGOTIATION81Elwin Sharvill
1041Rodrigues CampainIndia2026-05-09Rangoni Of Florence NEGOTIATION62Amy Elsner
1042Maria MarrierGermany2026-05-10Printing Dimensions NEW92Ioni Bowcher
1043David DarakjyIndia2026-05-30Dorl, James J Esq NEW62Anna Fali
1044Leon OldroydFrance2026-05-16Chemel, James L Cpa NEGOTIATION71Amy Elsner
1045Octavia MaletJapan2026-05-22Morlong Associates NEW52Anna Fali
1046Kaitlin OstroskyArgentina2026-05-21Chanay, Jeffrey A Esq NEGOTIATION99Amy Elsner
1047Chavez BriddickIndia2026-05-14Commercial Press PROPOSAL97Stephen Shaw
1048Murillo MaletUnited Kingdom2026-06-03Printing Dimensions NEGOTIATION49Bernardo Dominic
1049Smith GlickRussia2026-05-31Chemel, James L Cpa UNQUALIFIED74Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Jefferson SchemmerRussiaAmy Elsner PROPOSAL
Morrow RutaCanadaIvan Magalhaes RENEWAL
Aditya KuskoIndiaOnyama Limba RENEWAL
Kaitlin OstroskyGermanyStephen Shaw NEW
Chavez BriddickFranceIoni Bowcher RENEWAL
Alejandro PerinFranceAmy Elsner PROPOSAL
Nicolas IturbideGermanyAnna Fali NEW
Isabel BowleySpainElwin Sharvill NEGOTIATION
Juan WieserGermanyIoni Bowcher NEGOTIATION
Aditya KuskoSpainAnna Fali NEW
Julie StensethAustraliaXuxue Feng QUALIFIED
Munro FerenczSpainOnyama Limba RENEWAL
Jefferson SchemmerIndiaAnna Fali NEW
Nicolas IturbideBrazilBernardo Dominic NEW
Antonio CaudyItalyIvan Magalhaes QUALIFIED
Jeanfrancois VenereAustraliaAmy Elsner RENEWAL
Juan WieserRussiaStephen Shaw NEW
Chavez BriddickIndiaOnyama Limba RENEWAL
Darci PoquetteBrazilAmy Elsner UNQUALIFIED
Ashley DoeArgentinaIvan Magalhaes RENEWAL
Smith GlickAustraliaAnna Fali RENEWAL
Salvatore StockhamItalyIoni Bowcher NEW
Emily WhobreyFranceOnyama Limba QUALIFIED
Costa DilliardAustraliaIoni Bowcher UNQUALIFIED
Claire TollnerFranceOnyama Limba NEGOTIATION
Faith GillianSpainBernardo Dominic NEGOTIATION
Smith GlickUnited KingdomAmy Elsner RENEWAL
Silvio SlusarskiItalyStephen Shaw NEW
Izzy GarufiCanadaStephen Shaw QUALIFIED
Jeanfrancois VenereIndiaBernardo Dominic NEW
Johnson SergiJapanBernardo Dominic PROPOSAL
Greenwood BologniaGermanyXuxue Feng QUALIFIED
Cody SaylorsSpainAmy Elsner PROPOSAL
Sinclair WaycottJapanIvan Magalhaes NEW
Arvin AlbaresArgentinaAmy Elsner PROPOSAL
Munro FerenczItalyXuxue Feng RENEWAL
Morrow RutaCanadaStephen Shaw QUALIFIED
Aruna FigeroaRussiaOnyama Limba NEGOTIATION
Faith GillianRussiaXuxue Feng NEW
Morrow RutaItalyOnyama Limba UNQUALIFIED
Mujtaba NickaIndiaAnna Fali NEGOTIATION
Ricardo GauchoItalyAnna Fali QUALIFIED
Mayumi KolmetzGermanyIoni Bowcher QUALIFIED
Ricardo GauchoAustraliaXuxue Feng QUALIFIED
Smith GlickArgentinaElwin Sharvill UNQUALIFIED
Stacey MacleadJapanAsiya Javayant UNQUALIFIED
Rodrigues CampainUnited KingdomAmy Elsner QUALIFIED
Jennifer AmigonBrazilBernardo Dominic NEGOTIATION
Leon OldroydGermanyIoni Bowcher NEW
James ButtCanadaAmy Elsner PROPOSAL
Frozen Columns
Name
Greenwood Bolognia
Juan Wieser
Munro Ferencz
Arvin Albares
Rodrigues Campain
Isabel Bowley
Salvatore Stockham
Izzy Garufi
Clifford Rim
Juan Wieser
Kaitlin Ostrosky
Antonio Caudy
Cody Saylors
David Darakjy
James Butt
Sinclair Waycott
Izzy Garufi
Cody Saylors
Maria Marrier
Claire Tollner
Clifford Rim
Morrow Ruta
Salvatore Stockham
Jefferson Schemmer
Maria Marrier
Greenwood Bolognia
Jeanfrancois Venere
Wickens Nestle
Jones Vocelka
Stacey Maclead
Cody Saylors
Smith Glick
Leja Caldarera
Salvatore Stockham
Arvin Albares
Chavez Briddick
Maisha Rulapaugh
Leon Oldroyd
Rodrigues Campain
Silvio Slusarski
Julie Stenseth
Mujtaba Nicka
Faith Gillian
Aditya Kusko
Aditya Kusko
Ashley Doe
Wickens Nestle
Nicolas Iturbide
Leon Oldroyd
Misaki Royster
IdCountryDate
1000France2026-05-08
1001Russia2026-05-13
1002Germany2026-05-24
1003Italy2026-05-05
1004Germany2026-05-19
1005India2026-05-09
1006United Kingdom2026-05-22
1007Brazil2026-05-31
1008Japan2026-05-19
1009Germany2026-06-03
1010Australia2026-05-29
1011Japan2026-05-31
1012Italy2026-05-14
1013Brazil2026-05-30
1014Japan2026-06-01
1015Germany2026-05-23
1016Italy2026-05-22
1017United Kingdom2026-05-16
1018Japan2026-06-02
1019Japan2026-05-26
1020Japan2026-06-01
1021Canada2026-05-15
1022Australia2026-05-26
1023Italy2026-05-19
1024Argentina2026-05-23
1025Italy2026-05-30
1026Argentina2026-05-23
1027Australia2026-05-09
1028France2026-05-17
1029Spain2026-06-01
1030Argentina2026-05-12
1031Spain2026-05-11
1032Brazil2026-05-23
1033Canada2026-05-09
1034Canada2026-05-12
1035Italy2026-05-20
1036France2026-05-24
1037India2026-06-02
1038Brazil2026-05-05
1039Russia2026-05-26
1040Russia2026-05-30
1041Italy2026-05-07
1042Spain2026-05-06
1043Germany2026-05-31
1044Russia2026-05-23
1045Russia2026-05-31
1046France2026-05-24
1047France2026-05-27
1048Russia2026-05-11
1049Spain2026-05-24

On-Demand Data

NameIdCountryDate
Maisha Rulapaugh1000Japan2026-05-05
Maisha Rulapaugh1001Germany2026-05-08
Octavia Malet1002India2026-05-27
Stacey Maclead1003Argentina2026-05-22
James Butt1004Canada2026-05-14
Deepesh Chui1005Japan2026-05-17
Ricardo Gaucho1006Spain2026-05-26
Antonio Caudy1007Italy2026-05-22
Aditya Kusko1008Argentina2026-05-20
Francesco Shinko1009Italy2026-05-16
Arvin Albares1010India2026-05-22
James Butt1011India2026-05-18
Mayumi Kolmetz1012Argentina2026-06-02
Smith Glick1013Japan2026-05-23
Smith Glick1014India2026-05-21
Izzy Garufi1015Japan2026-05-25
Darci Poquette1016France2026-05-27
Jones Vocelka1017Canada2026-05-09
Kaitlin Ostrosky1018India2026-05-09
Octavia Malet1019Brazil2026-05-20
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Rodrigues CampainIndiaIvan Magalhaes NEW
Stacey MacleadSpainElwin Sharvill NEGOTIATION
Aruna FigeroaFranceAnna Fali QUALIFIED
Jeanfrancois VenereAustraliaBernardo Dominic QUALIFIED
Julie StensethCanadaIoni Bowcher PROPOSAL
Arvin AlbaresGermanyBernardo Dominic NEGOTIATION
Julie StensethBrazilOnyama Limba NEGOTIATION
Ricardo GauchoArgentinaAnna Fali NEW
Wickens NestleArgentinaAnna Fali UNQUALIFIED
Izzy GarufiJapanStephen Shaw NEW
Darci PoquetteArgentinaIoni Bowcher NEW
Sinclair WaycottGermanyStephen Shaw UNQUALIFIED
Francesco ShinkoAustraliaIvan Magalhaes NEW
Ricardo GauchoSpainAmy Elsner UNQUALIFIED
Maria MarrierJapanIvan Magalhaes QUALIFIED
Munro FerenczBrazilBernardo Dominic NEW
Arvin AlbaresBrazilXuxue Feng UNQUALIFIED
Kaitlin OstroskyUnited KingdomIvan Magalhaes RENEWAL
Leja CaldareraFranceBernardo Dominic QUALIFIED
Jones VocelkaGermanyElwin Sharvill NEW
Leon OldroydAustraliaAsiya Javayant PROPOSAL
James ButtJapanAnna Fali NEGOTIATION
Kadeem FlosiBrazilAsiya Javayant UNQUALIFIED
Jennifer AmigonIndiaElwin Sharvill UNQUALIFIED
Claire TollnerFranceStephen Shaw NEW
Jennifer AmigonCanadaAsiya Javayant NEW
Cody SaylorsIndiaXuxue Feng RENEWAL
Cody SaylorsItalyAnna Fali UNQUALIFIED
Clifford RimFranceOnyama Limba NEW
Misaki RoysterCanadaBernardo Dominic PROPOSAL
Munro FerenczCanadaAsiya Javayant QUALIFIED
Mujtaba NickaUnited KingdomAsiya Javayant RENEWAL
Alejandro PerinSpainAmy Elsner RENEWAL
Greenwood BologniaGermanyElwin Sharvill NEW
Clifford RimAustraliaAmy Elsner NEGOTIATION
Izzy GarufiIndiaBernardo Dominic UNQUALIFIED
Kadeem FlosiSpainElwin Sharvill UNQUALIFIED
Salvatore StockhamArgentinaElwin Sharvill PROPOSAL
Leja CaldareraCanadaBernardo Dominic QUALIFIED
Johnson SergiJapanIvan Magalhaes UNQUALIFIED

<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>