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
Maria MarrierRussiaXuxue Feng NEW
Mayumi KolmetzIndiaBernardo Dominic PROPOSAL
Darci PoquetteJapanAmy Elsner UNQUALIFIED
Leja CaldareraGermanyStephen Shaw RENEWAL
Greenwood BologniaAustraliaAmy Elsner PROPOSAL
Leon OldroydArgentinaIvan Magalhaes NEW
Smith GlickBrazilElwin Sharvill QUALIFIED
Isabel BowleyIndiaStephen Shaw NEW
Costa DilliardJapanStephen Shaw RENEWAL
Misaki RoysterSpainStephen Shaw RENEWAL
Mayumi KolmetzGermanyIvan Magalhaes NEW
Costa DilliardCanadaElwin Sharvill RENEWAL
Ricardo GauchoBrazilStephen Shaw QUALIFIED
Mujtaba NickaCanadaXuxue Feng UNQUALIFIED
Nicolas IturbideBrazilElwin Sharvill NEW
Johnson SergiArgentinaAmy Elsner PROPOSAL
James ButtIndiaXuxue Feng UNQUALIFIED
Jefferson SchemmerJapanBernardo Dominic PROPOSAL
Deepesh ChuiFranceIvan Magalhaes RENEWAL
Faith GillianIndiaAnna Fali PROPOSAL
Arvin AlbaresArgentinaXuxue Feng RENEWAL
Leja CaldareraAustraliaStephen Shaw QUALIFIED
Munro FerenczRussiaStephen Shaw QUALIFIED
Ricardo GauchoFranceIvan Magalhaes QUALIFIED
Deepesh ChuiRussiaXuxue Feng PROPOSAL
Francesco ShinkoBrazilAmy Elsner UNQUALIFIED
Greenwood BologniaUnited KingdomOnyama Limba PROPOSAL
Adams MorascaUnited KingdomAmy Elsner RENEWAL
Aruna FigeroaJapanAnna Fali UNQUALIFIED
Claire TollnerUnited KingdomAsiya Javayant NEGOTIATION
Juan WieserUnited KingdomXuxue Feng UNQUALIFIED
Kaitlin OstroskySpainStephen Shaw QUALIFIED
Deepesh ChuiBrazilAnna Fali UNQUALIFIED
Cody SaylorsJapanIoni Bowcher UNQUALIFIED
Tony FollerAustraliaXuxue Feng PROPOSAL
Jennifer AmigonUnited KingdomElwin Sharvill PROPOSAL
Cody SaylorsFranceXuxue Feng NEW
Murillo MaletRussiaAnna Fali QUALIFIED
Jones VocelkaSpainStephen Shaw UNQUALIFIED
Smith GlickGermanyElwin Sharvill UNQUALIFIED
Ashley DoeJapanOnyama Limba UNQUALIFIED
Faith GillianSpainStephen Shaw PROPOSAL
Emily WhobreyCanadaOnyama Limba PROPOSAL
Faith GillianFranceElwin Sharvill PROPOSAL
Maria MarrierCanadaStephen Shaw PROPOSAL
Silvio SlusarskiSpainXuxue Feng UNQUALIFIED
Ivar PaprockiBrazilAmy Elsner RENEWAL
Clifford RimGermanyAnna Fali NEW
Murillo MaletIndiaIvan Magalhaes UNQUALIFIED
Jones VocelkaBrazilOnyama Limba PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Tony FollerCanadaIvan Magalhaes UNQUALIFIED
Jefferson SchemmerSpainAmy Elsner NEGOTIATION
Maisha RulapaughCanadaAsiya Javayant NEGOTIATION
Mujtaba NickaFranceAnna Fali PROPOSAL
Rodrigues CampainArgentinaAnna Fali PROPOSAL
Mayumi KolmetzGermanyElwin Sharvill UNQUALIFIED
Morrow RutaFranceAmy Elsner NEW
Wickens NestleCanadaIoni Bowcher QUALIFIED
Jones VocelkaAustraliaBernardo Dominic NEGOTIATION
Faith GillianBrazilStephen Shaw PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Mujtaba NickaIndia2026-04-13Feiner Bros NEGOTIATION82Asiya Javayant
1001Isabel BowleyCanada2026-04-19Rousseaux, Michael Esq NEGOTIATION22Anna Fali
1002Morrow RutaSpain2026-04-29Benton, John B Jr NEW14Stephen Shaw
1003Julie StensethGermany2026-05-07Printing Dimensions RENEWAL86Anna Fali
1004Antonio CaudyJapan2026-04-19Rangoni Of Florence PROPOSAL16Asiya Javayant
1005Chavez BriddickAustralia2026-04-14Dorl, James J Esq NEW76Ioni Bowcher
1006Greenwood BologniaItaly2026-04-19Rangoni Of Florence NEGOTIATION60Ioni Bowcher
1007Jefferson SchemmerJapan2026-05-06Feltz Printing Service UNQUALIFIED99Elwin Sharvill
1008Rodrigues CampainBrazil2026-04-20Dorl, James J Esq NEGOTIATION9Stephen Shaw
1009Rodrigues CampainBrazil2026-04-27Feiner Bros UNQUALIFIED35Amy Elsner
1010Kadeem FlosiIndia2026-04-14Chanay, Jeffrey A Esq NEW84Ioni Bowcher
1011Kadeem FlosiGermany2026-05-07Printing Dimensions QUALIFIED63Ivan Magalhaes
1012Izzy GarufiGermany2026-05-02Rangoni Of Florence NEW93Anna Fali
1013Rodrigues CampainJapan2026-04-14Chapman, Ross E Esq RENEWAL80Bernardo Dominic
1014Aika InouyeBrazil2026-04-30Benton, John B Jr QUALIFIED25Stephen Shaw
1015Maisha RulapaughAustralia2026-05-09Chanay, Jeffrey A Esq PROPOSAL61Onyama Limba
1016Juan WieserFrance2026-04-27Truhlar And Truhlar Attys RENEWAL73Anna Fali
1017Tony FollerFrance2026-04-23Feiner Bros RENEWAL62Stephen Shaw
1018Octavia MaletAustralia2026-04-24Feiner Bros NEGOTIATION77Onyama Limba
1019David DarakjyAustralia2026-04-17Printing Dimensions NEW48Asiya Javayant
1020Maisha RulapaughRussia2026-05-04Dorl, James J Esq PROPOSAL30Amy Elsner
1021Tony FollerAustralia2026-04-24Printing Dimensions NEW42Anna Fali
1022Costa DilliardJapan2026-05-05Chemel, James L Cpa RENEWAL28Stephen Shaw
1023Smith GlickRussia2026-04-29Chapman, Ross E Esq NEGOTIATION10Stephen Shaw
1024Costa DilliardRussia2026-04-25Morlong Associates UNQUALIFIED36Elwin Sharvill
1025Leon OldroydSpain2026-05-11Rousseaux, Michael Esq UNQUALIFIED47Ioni Bowcher
1026Munro FerenczBrazil2026-04-27Rousseaux, Michael Esq NEGOTIATION14Stephen Shaw
1027Aditya KuskoAustralia2026-04-18Chemel, James L Cpa NEW65Stephen Shaw
1028Ashley DoeItaly2026-05-02Chemel, James L Cpa QUALIFIED50Onyama Limba
1029Julie StensethUnited Kingdom2026-04-27Printing Dimensions QUALIFIED29Bernardo Dominic
1030Kaitlin OstroskyBrazil2026-04-20Commercial Press PROPOSAL50Anna Fali
1031Salvatore StockhamIndia2026-05-07Commercial Press UNQUALIFIED17Onyama Limba
1032Claire TollnerGermany2026-04-30King, Christopher A Esq NEGOTIATION96Onyama Limba
1033Alejandro PerinJapan2026-05-06Truhlar And Truhlar Attys UNQUALIFIED58Elwin Sharvill
1034Aika InouyeFrance2026-04-19Printing Dimensions PROPOSAL57Onyama Limba
1035Mujtaba NickaAustralia2026-05-01Morlong Associates NEGOTIATION67Elwin Sharvill
1036Kadeem FlosiSpain2026-04-24Feltz Printing Service NEW64Anna Fali
1037Chavez BriddickRussia2026-05-07Commercial Press NEW18Stephen Shaw
1038Cody SaylorsFrance2026-04-24Feiner Bros QUALIFIED77Onyama Limba
1039Isabel BowleyGermany2026-05-10King, Christopher A Esq NEGOTIATION36Ivan Magalhaes
1040Greenwood BologniaBrazil2026-05-08Chanay, Jeffrey A Esq RENEWAL62Asiya Javayant
1041Jefferson SchemmerUnited Kingdom2026-04-28Benton, John B Jr RENEWAL58Stephen Shaw
1042Aruna FigeroaCanada2026-05-04Feltz Printing Service PROPOSAL12Amy Elsner
1043Kadeem FlosiAustralia2026-05-05Chapman, Ross E Esq RENEWAL96Ioni Bowcher
1044Munro FerenczUnited Kingdom2026-04-23Feiner Bros UNQUALIFIED42Amy Elsner
1045Mujtaba NickaFrance2026-04-13Truhlar And Truhlar Attys NEW76Anna Fali
1046Emily WhobreyArgentina2026-04-12Morlong Associates NEW29Asiya Javayant
1047Johnson SergiGermany2026-04-28King, Christopher A Esq PROPOSAL92Elwin Sharvill
1048Jennifer AmigonArgentina2026-05-03Chemel, James L Cpa NEW60Anna Fali
1049Salvatore StockhamJapan2026-04-30Truhlar And Truhlar Attys PROPOSAL24Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Adams MorascaFranceAsiya Javayant RENEWAL
Isabel BowleyItalyElwin Sharvill RENEWAL
Leja CaldareraIndiaIvan Magalhaes UNQUALIFIED
Deepesh ChuiAustraliaIvan Magalhaes NEGOTIATION
Johnson SergiSpainElwin Sharvill QUALIFIED
Costa DilliardBrazilStephen Shaw QUALIFIED
Isabel BowleyItalyStephen Shaw PROPOSAL
David DarakjyArgentinaIvan Magalhaes QUALIFIED
Mayumi KolmetzJapanElwin Sharvill NEW
Emily WhobreyCanadaElwin Sharvill NEW
Faith GillianIndiaOnyama Limba RENEWAL
Arvin AlbaresRussiaOnyama Limba NEW
Octavia MaletJapanAsiya Javayant NEW
Munro FerenczUnited KingdomOnyama Limba RENEWAL
Ivar PaprockiCanadaXuxue Feng UNQUALIFIED
Munro FerenczSpainStephen Shaw UNQUALIFIED
Faith GillianJapanOnyama Limba NEW
Aruna FigeroaCanadaAmy Elsner NEGOTIATION
Greenwood BologniaRussiaAnna Fali NEGOTIATION
Jefferson SchemmerItalyStephen Shaw QUALIFIED
Cody SaylorsArgentinaAsiya Javayant UNQUALIFIED
Jeanfrancois VenereUnited KingdomBernardo Dominic QUALIFIED
Munro FerenczBrazilStephen Shaw QUALIFIED
Jennifer AmigonSpainAnna Fali QUALIFIED
Juan WieserJapanAmy Elsner QUALIFIED
Arvin AlbaresItalyBernardo Dominic NEW
David DarakjyJapanAsiya Javayant PROPOSAL
Mayumi KolmetzJapanIoni Bowcher NEGOTIATION
Isabel BowleyArgentinaOnyama Limba PROPOSAL
Adams MorascaSpainXuxue Feng QUALIFIED
Maria MarrierGermanyElwin Sharvill NEGOTIATION
Maria MarrierArgentinaAnna Fali NEGOTIATION
Jefferson SchemmerAustraliaAmy Elsner NEGOTIATION
Emily WhobreyItalyBernardo Dominic UNQUALIFIED
Misaki RoysterAustraliaAsiya Javayant NEW
Ivar PaprockiGermanyIoni Bowcher NEGOTIATION
Jeanfrancois VenereIndiaIvan Magalhaes UNQUALIFIED
Misaki RoysterSpainAmy Elsner NEW
Jeanfrancois VenereItalyElwin Sharvill NEGOTIATION
Misaki RoysterSpainIoni Bowcher UNQUALIFIED
Cody SaylorsFranceBernardo Dominic NEW
Arvin AlbaresAustraliaIvan Magalhaes UNQUALIFIED
Misaki RoysterRussiaOnyama Limba NEGOTIATION
Jennifer AmigonJapanElwin Sharvill NEW
Silvio SlusarskiSpainElwin Sharvill NEGOTIATION
Aditya KuskoSpainAmy Elsner PROPOSAL
Aditya KuskoGermanyIvan Magalhaes PROPOSAL
Ashley DoeFranceIoni Bowcher UNQUALIFIED
Aditya KuskoRussiaAnna Fali UNQUALIFIED
Antonio CaudySpainIoni Bowcher QUALIFIED
Frozen Columns
Name
Kadeem Flosi
Nicolas Iturbide
Leja Caldarera
Smith Glick
David Darakjy
Emily Whobrey
Mujtaba Nicka
Aditya Kusko
Maria Marrier
Mayumi Kolmetz
Morrow Ruta
Aditya Kusko
Leja Caldarera
Munro Ferencz
Ivar Paprocki
Mujtaba Nicka
Adams Morasca
Greenwood Bolognia
Tony Foller
Izzy Garufi
Julie Stenseth
Kadeem Flosi
Arvin Albares
Francesco Shinko
Wickens Nestle
Adams Morasca
Stacey Maclead
Greenwood Bolognia
Jones Vocelka
Jefferson Schemmer
Silvio Slusarski
Faith Gillian
Greenwood Bolognia
Wickens Nestle
Sinclair Waycott
Adams Morasca
Misaki Royster
Faith Gillian
Maisha Rulapaugh
Deepesh Chui
Antonio Caudy
Jennifer Amigon
Maisha Rulapaugh
Sinclair Waycott
David Darakjy
Jennifer Amigon
Johnson Sergi
Morrow Ruta
Sinclair Waycott
David Darakjy
IdCountryDate
1000Argentina2026-04-22
1001India2026-04-26
1002Japan2026-05-02
1003Russia2026-05-09
1004Spain2026-05-07
1005Italy2026-04-18
1006Japan2026-04-14
1007Italy2026-04-25
1008Australia2026-04-13
1009India2026-04-15
1010Italy2026-04-29
1011India2026-04-27
1012Australia2026-04-30
1013India2026-05-07
1014Brazil2026-04-20
1015United Kingdom2026-05-11
1016United Kingdom2026-05-05
1017Brazil2026-04-27
1018Canada2026-05-02
1019Italy2026-05-02
1020Spain2026-04-17
1021Brazil2026-05-07
1022Argentina2026-04-21
1023Australia2026-05-09
1024Brazil2026-04-17
1025Spain2026-04-30
1026Australia2026-04-14
1027Australia2026-04-13
1028Germany2026-04-26
1029Argentina2026-04-23
1030Spain2026-05-05
1031United Kingdom2026-04-12
1032Argentina2026-04-13
1033India2026-04-28
1034Argentina2026-04-15
1035Russia2026-04-16
1036Russia2026-04-30
1037Germany2026-04-17
1038Russia2026-05-06
1039United Kingdom2026-05-10
1040Germany2026-04-23
1041India2026-05-06
1042Japan2026-04-24
1043Spain2026-04-24
1044Canada2026-04-30
1045Russia2026-05-08
1046Australia2026-04-27
1047Germany2026-04-12
1048Australia2026-05-07
1049Brazil2026-05-11

On-Demand Data

NameIdCountryDate
Salvatore Stockham1000Germany2026-05-06
Johnson Sergi1001India2026-04-13
Ricardo Gaucho1002Spain2026-04-26
Leja Caldarera1003France2026-05-09
Kaitlin Ostrosky1004India2026-05-09
Arvin Albares1005Germany2026-04-14
Jones Vocelka1006Germany2026-04-28
Johnson Sergi1007Canada2026-05-03
Isabel Bowley1008Germany2026-04-15
Darci Poquette1009Brazil2026-05-03
Isabel Bowley1010India2026-05-07
Faith Gillian1011India2026-05-02
Adams Morasca1012Brazil2026-05-02
Isabel Bowley1013Canada2026-05-10
Izzy Garufi1014India2026-05-07
Maria Marrier1015Japan2026-05-02
Sinclair Waycott1016Japan2026-05-10
Ivar Paprocki1017Japan2026-04-25
Silvio Slusarski1018Germany2026-04-20
Aika Inouye1019Canada2026-04-22
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Juan WieserFranceIvan Magalhaes RENEWAL
Jeanfrancois VenereCanadaAmy Elsner NEGOTIATION
Aruna FigeroaFranceXuxue Feng NEW
Darci PoquetteIndiaXuxue Feng QUALIFIED
Emily WhobreyUnited KingdomXuxue Feng QUALIFIED
Francesco ShinkoIndiaAsiya Javayant QUALIFIED
Stacey MacleadItalyBernardo Dominic RENEWAL
Jones VocelkaAustraliaBernardo Dominic QUALIFIED
Izzy GarufiAustraliaAmy Elsner NEGOTIATION
Leja CaldareraArgentinaBernardo Dominic PROPOSAL
Smith GlickItalyAmy Elsner RENEWAL
Wickens NestleGermanyAnna Fali RENEWAL
Leon OldroydItalyOnyama Limba PROPOSAL
Darci PoquetteUnited KingdomBernardo Dominic UNQUALIFIED
Munro FerenczArgentinaXuxue Feng NEGOTIATION
Jeanfrancois VenereBrazilOnyama Limba NEGOTIATION
James ButtRussiaOnyama Limba PROPOSAL
David DarakjyBrazilAsiya Javayant UNQUALIFIED
Morrow RutaFranceElwin Sharvill QUALIFIED
Mayumi KolmetzAustraliaAmy Elsner RENEWAL
Morrow RutaCanadaAsiya Javayant QUALIFIED
Smith GlickItalyStephen Shaw PROPOSAL
Jefferson SchemmerSpainElwin Sharvill PROPOSAL
Antonio CaudyBrazilAsiya Javayant RENEWAL
Mayumi KolmetzRussiaStephen Shaw NEW
Leon OldroydBrazilStephen Shaw NEW
Chavez BriddickBrazilAsiya Javayant UNQUALIFIED
Alejandro PerinRussiaStephen Shaw NEGOTIATION
Francesco ShinkoIndiaStephen Shaw PROPOSAL
Jones VocelkaUnited KingdomAmy Elsner NEW
Johnson SergiFranceXuxue Feng RENEWAL
Alejandro PerinRussiaBernardo Dominic UNQUALIFIED
Stacey MacleadIndiaIvan Magalhaes UNQUALIFIED
Faith GillianArgentinaElwin Sharvill UNQUALIFIED
James ButtUnited KingdomAmy Elsner NEGOTIATION
Isabel BowleyFranceStephen Shaw PROPOSAL
Faith GillianUnited KingdomAmy Elsner QUALIFIED
Kadeem FlosiItalyXuxue Feng NEW
Aditya KuskoUnited KingdomXuxue Feng QUALIFIED
David DarakjyUnited KingdomElwin Sharvill 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>