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
Jennifer AmigonItalyBernardo Dominic NEGOTIATION
Leja CaldareraAustraliaIoni Bowcher PROPOSAL
Leon OldroydIndiaIvan Magalhaes NEW
Cody SaylorsItalyOnyama Limba PROPOSAL
Adams MorascaSpainAnna Fali RENEWAL
Isabel BowleyIndiaIvan Magalhaes PROPOSAL
Claire TollnerCanadaOnyama Limba RENEWAL
Arvin AlbaresIndiaXuxue Feng QUALIFIED
Octavia MaletBrazilElwin Sharvill RENEWAL
Mayumi KolmetzBrazilStephen Shaw NEW
Aditya KuskoIndiaStephen Shaw NEW
David DarakjyAustraliaAsiya Javayant NEGOTIATION
Greenwood BologniaCanadaBernardo Dominic RENEWAL
Jennifer AmigonGermanyAmy Elsner NEW
Octavia MaletBrazilIvan Magalhaes NEW
Ashley DoeUnited KingdomOnyama Limba PROPOSAL
Cody SaylorsRussiaStephen Shaw PROPOSAL
Aditya KuskoUnited KingdomStephen Shaw NEW
Jefferson SchemmerGermanyStephen Shaw RENEWAL
Greenwood BologniaItalyElwin Sharvill NEGOTIATION
Deepesh ChuiFranceElwin Sharvill QUALIFIED
Ricardo GauchoCanadaAsiya Javayant QUALIFIED
Clifford RimUnited KingdomOnyama Limba NEW
Silvio SlusarskiUnited KingdomAnna Fali NEW
Jeanfrancois VenereUnited KingdomAnna Fali QUALIFIED
Clifford RimArgentinaIoni Bowcher NEGOTIATION
Izzy GarufiCanadaXuxue Feng QUALIFIED
Munro FerenczSpainBernardo Dominic QUALIFIED
Murillo MaletFranceIoni Bowcher NEGOTIATION
Aruna FigeroaAustraliaXuxue Feng NEGOTIATION
Jones VocelkaIndiaAsiya Javayant NEGOTIATION
Nicolas IturbideItalyIvan Magalhaes UNQUALIFIED
Leon OldroydArgentinaIoni Bowcher RENEWAL
Cody SaylorsItalyXuxue Feng RENEWAL
Aruna FigeroaUnited KingdomElwin Sharvill NEGOTIATION
Aruna FigeroaUnited KingdomBernardo Dominic NEW
Ashley DoeCanadaXuxue Feng PROPOSAL
Johnson SergiFranceElwin Sharvill PROPOSAL
Murillo MaletIndiaOnyama Limba PROPOSAL
David DarakjyArgentinaIoni Bowcher PROPOSAL
Nicolas IturbideRussiaBernardo Dominic RENEWAL
Aruna FigeroaIndiaAnna Fali UNQUALIFIED
Tony FollerRussiaIoni Bowcher NEW
Chavez BriddickFranceAsiya Javayant RENEWAL
Emily WhobreyArgentinaIvan Magalhaes RENEWAL
Greenwood BologniaAustraliaBernardo Dominic RENEWAL
Leon OldroydFranceIvan Magalhaes PROPOSAL
Isabel BowleyArgentinaAnna Fali NEGOTIATION
Faith GillianJapanOnyama Limba UNQUALIFIED
Morrow RutaCanadaBernardo Dominic UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Tony FollerBrazilAsiya Javayant RENEWAL
Alejandro PerinRussiaXuxue Feng NEGOTIATION
Octavia MaletUnited KingdomElwin Sharvill NEGOTIATION
Jones VocelkaSpainElwin Sharvill UNQUALIFIED
Arvin AlbaresIndiaAsiya Javayant NEW
Costa DilliardItalyOnyama Limba PROPOSAL
Costa DilliardArgentinaAmy Elsner QUALIFIED
Misaki RoysterCanadaAsiya Javayant NEW
Ricardo GauchoJapanAsiya Javayant UNQUALIFIED
Munro FerenczFranceElwin Sharvill QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Misaki RoysterArgentina2026-04-03Rousseaux, Michael Esq RENEWAL1Asiya Javayant
1001Octavia MaletUnited Kingdom2026-04-22Commercial Press QUALIFIED67Ivan Magalhaes
1002Aruna FigeroaArgentina2026-04-26Dorl, James J Esq RENEWAL3Asiya Javayant
1003Deepesh ChuiAustralia2026-04-25Feiner Bros NEW53Ioni Bowcher
1004Arvin AlbaresSpain2026-04-15Rangoni Of Florence RENEWAL3Anna Fali
1005Emily WhobreySpain2026-04-14Chanay, Jeffrey A Esq UNQUALIFIED79Ivan Magalhaes
1006Ashley DoeRussia2026-04-11Dorl, James J Esq QUALIFIED91Asiya Javayant
1007Munro FerenczIndia2026-04-01Printing Dimensions RENEWAL76Elwin Sharvill
1008Kaitlin OstroskyFrance2026-04-27Chanay, Jeffrey A Esq NEW51Asiya Javayant
1009Isabel BowleyUnited Kingdom2026-04-11Rousseaux, Michael Esq PROPOSAL24Elwin Sharvill
1010Cody SaylorsIndia2026-04-19Truhlar And Truhlar Attys QUALIFIED33Ioni Bowcher
1011Kadeem FlosiAustralia2026-04-02Rangoni Of Florence NEW96Bernardo Dominic
1012Aditya KuskoBrazil2026-04-28Chapman, Ross E Esq NEW25Anna Fali
1013Aditya KuskoSpain2026-04-01Benton, John B Jr PROPOSAL99Amy Elsner
1014Sinclair WaycottFrance2026-04-27Printing Dimensions PROPOSAL66Amy Elsner
1015Jennifer AmigonJapan2026-04-05Dorl, James J Esq QUALIFIED47Amy Elsner
1016Murillo MaletGermany2026-04-11Dorl, James J Esq NEW19Ivan Magalhaes
1017Deepesh ChuiSpain2026-04-23Dorl, James J Esq RENEWAL36Bernardo Dominic
1018Ashley DoeItaly2026-04-25Rousseaux, Michael Esq NEW13Stephen Shaw
1019Deepesh ChuiIndia2026-04-24Rousseaux, Michael Esq UNQUALIFIED72Onyama Limba
1020Emily WhobreyBrazil2026-04-09Truhlar And Truhlar Attys NEGOTIATION35Ivan Magalhaes
1021Kaitlin OstroskyRussia2026-04-23Dorl, James J Esq NEW31Xuxue Feng
1022Maisha RulapaughRussia2026-04-13Commercial Press QUALIFIED23Anna Fali
1023Silvio SlusarskiGermany2026-04-01Commercial Press RENEWAL74Stephen Shaw
1024Francesco ShinkoCanada2026-04-03Rangoni Of Florence NEGOTIATION78Elwin Sharvill
1025Kaitlin OstroskyGermany2026-04-08Chapman, Ross E Esq RENEWAL31Ivan Magalhaes
1026Isabel BowleyAustralia2026-04-05Feiner Bros PROPOSAL67Xuxue Feng
1027Aika InouyeSpain2026-04-25Printing Dimensions RENEWAL10Anna Fali
1028Greenwood BologniaGermany2026-04-19Rangoni Of Florence RENEWAL7Onyama Limba
1029Aruna FigeroaAustralia2026-04-23Commercial Press NEW0Amy Elsner
1030Antonio CaudyIndia2026-04-08Rousseaux, Michael Esq UNQUALIFIED39Xuxue Feng
1031Kaitlin OstroskyArgentina2026-04-04Rousseaux, Michael Esq NEGOTIATION4Asiya Javayant
1032Julie StensethItaly2026-04-27Chapman, Ross E Esq PROPOSAL21Amy Elsner
1033Octavia MaletSpain2026-04-17Commercial Press NEGOTIATION32Ioni Bowcher
1034David DarakjyIndia2026-04-19Chapman, Ross E Esq QUALIFIED4Anna Fali
1035James ButtSpain2026-04-18Dorl, James J Esq PROPOSAL96Ivan Magalhaes
1036Rodrigues CampainSpain2026-04-01Chanay, Jeffrey A Esq PROPOSAL7Onyama Limba
1037Misaki RoysterArgentina2026-04-12Chemel, James L Cpa RENEWAL34Amy Elsner
1038Mujtaba NickaFrance2026-04-27Morlong Associates UNQUALIFIED1Ivan Magalhaes
1039Aditya KuskoBrazil2026-04-10Feltz Printing Service QUALIFIED65Elwin Sharvill
1040Clifford RimFrance2026-04-21Benton, John B Jr PROPOSAL70Anna Fali
1041Izzy GarufiBrazil2026-04-08King, Christopher A Esq NEW81Stephen Shaw
1042Morrow RutaCanada2026-04-26Commercial Press RENEWAL45Stephen Shaw
1043Faith GillianBrazil2026-04-03Benton, John B Jr UNQUALIFIED43Onyama Limba
1044Munro FerenczSpain2026-04-20Feiner Bros UNQUALIFIED93Ivan Magalhaes
1045Stacey MacleadFrance2026-04-16Chapman, Ross E Esq QUALIFIED72Amy Elsner
1046Arvin AlbaresAustralia2026-04-14Rousseaux, Michael Esq NEW17Amy Elsner
1047Emily WhobreyBrazil2026-04-03Buckley Miller Wright PROPOSAL96Asiya Javayant
1048Kaitlin OstroskyItaly2026-04-10Morlong Associates PROPOSAL46Asiya Javayant
1049Maisha RulapaughBrazil2026-04-05Commercial Press UNQUALIFIED49Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
David DarakjyArgentinaAnna Fali NEGOTIATION
Claire TollnerCanadaXuxue Feng RENEWAL
Octavia MaletRussiaIoni Bowcher NEW
Mujtaba NickaGermanyStephen Shaw RENEWAL
Tony FollerGermanyAsiya Javayant RENEWAL
Wickens NestleCanadaAnna Fali QUALIFIED
Munro FerenczCanadaAsiya Javayant RENEWAL
Kadeem FlosiUnited KingdomBernardo Dominic PROPOSAL
Clifford RimGermanyOnyama Limba UNQUALIFIED
Jennifer AmigonJapanOnyama Limba PROPOSAL
Aika InouyeUnited KingdomXuxue Feng RENEWAL
Stacey MacleadItalyAmy Elsner RENEWAL
Jefferson SchemmerBrazilXuxue Feng NEGOTIATION
Stacey MacleadCanadaAsiya Javayant RENEWAL
Leja CaldareraJapanIoni Bowcher NEGOTIATION
Munro FerenczGermanyAsiya Javayant NEW
Sinclair WaycottFranceAsiya Javayant NEW
Aruna FigeroaAustraliaStephen Shaw PROPOSAL
Emily WhobreyRussiaBernardo Dominic RENEWAL
Jennifer AmigonIndiaOnyama Limba NEGOTIATION
Greenwood BologniaIndiaOnyama Limba RENEWAL
Jefferson SchemmerAustraliaXuxue Feng NEW
Silvio SlusarskiBrazilAmy Elsner PROPOSAL
Mayumi KolmetzFranceIoni Bowcher UNQUALIFIED
Jones VocelkaJapanIvan Magalhaes PROPOSAL
Salvatore StockhamCanadaAsiya Javayant QUALIFIED
David DarakjyJapanXuxue Feng PROPOSAL
Ashley DoeUnited KingdomXuxue Feng NEW
Emily WhobreyArgentinaXuxue Feng UNQUALIFIED
Ricardo GauchoJapanStephen Shaw RENEWAL
Leja CaldareraAustraliaIoni Bowcher PROPOSAL
Isabel BowleyIndiaAmy Elsner QUALIFIED
Misaki RoysterJapanAsiya Javayant NEGOTIATION
Claire TollnerGermanyStephen Shaw PROPOSAL
Alejandro PerinIndiaOnyama Limba NEW
Smith GlickGermanyXuxue Feng NEW
Octavia MaletItalyXuxue Feng PROPOSAL
Kaitlin OstroskyRussiaElwin Sharvill QUALIFIED
Maisha RulapaughIndiaBernardo Dominic UNQUALIFIED
Jefferson SchemmerBrazilAnna Fali NEGOTIATION
Tony FollerUnited KingdomBernardo Dominic PROPOSAL
Misaki RoysterCanadaXuxue Feng NEW
Ricardo GauchoGermanyAsiya Javayant UNQUALIFIED
Jefferson SchemmerUnited KingdomAnna Fali NEW
Clifford RimRussiaElwin Sharvill NEW
Julie StensethCanadaStephen Shaw UNQUALIFIED
Juan WieserItalyOnyama Limba RENEWAL
Johnson SergiBrazilOnyama Limba NEW
Maisha RulapaughCanadaAsiya Javayant UNQUALIFIED
Emily WhobreyFranceXuxue Feng NEGOTIATION
Frozen Columns
Name
Isabel Bowley
Silvio Slusarski
James Butt
Wickens Nestle
Stacey Maclead
Julie Stenseth
Mujtaba Nicka
Jones Vocelka
Adams Morasca
Claire Tollner
Rodrigues Campain
James Butt
Wickens Nestle
Mujtaba Nicka
Mujtaba Nicka
Aruna Figeroa
Leja Caldarera
Darci Poquette
Clifford Rim
Aditya Kusko
Sinclair Waycott
Cody Saylors
Rodrigues Campain
Arvin Albares
Ricardo Gaucho
Maria Marrier
Misaki Royster
Kadeem Flosi
Mujtaba Nicka
Aruna Figeroa
Greenwood Bolognia
Chavez Briddick
Mayumi Kolmetz
Francesco Shinko
Alejandro Perin
Claire Tollner
Smith Glick
Murillo Malet
Smith Glick
Ivar Paprocki
Francesco Shinko
Adams Morasca
Johnson Sergi
Alejandro Perin
Ashley Doe
Julie Stenseth
Arvin Albares
Misaki Royster
Maria Marrier
Mayumi Kolmetz
IdCountryDate
1000Argentina2026-04-20
1001Australia2026-04-27
1002India2026-04-09
1003Spain2026-04-25
1004Brazil2026-04-07
1005Canada2026-04-02
1006Italy2026-04-29
1007Italy2026-04-24
1008Russia2026-04-01
1009United Kingdom2026-04-15
1010Spain2026-04-14
1011Germany2026-04-25
1012Canada2026-03-31
1013Germany2026-04-03
1014Germany2026-04-09
1015Japan2026-03-31
1016Argentina2026-03-31
1017United Kingdom2026-04-24
1018Italy2026-04-03
1019India2026-03-31
1020Russia2026-04-11
1021Canada2026-04-23
1022Russia2026-04-06
1023Russia2026-04-07
1024India2026-04-22
1025Australia2026-04-05
1026Italy2026-04-28
1027India2026-04-03
1028India2026-04-05
1029India2026-04-29
1030Canada2026-04-15
1031France2026-04-04
1032United Kingdom2026-04-11
1033United Kingdom2026-04-03
1034Italy2026-04-05
1035Germany2026-04-03
1036Germany2026-04-18
1037Italy2026-04-24
1038France2026-03-31
1039France2026-03-31
1040Germany2026-04-03
1041Canada2026-04-22
1042United Kingdom2026-04-08
1043Brazil2026-04-28
1044Canada2026-04-09
1045Argentina2026-04-17
1046Japan2026-04-03
1047India2026-03-31
1048United Kingdom2026-04-03
1049Argentina2026-04-10

On-Demand Data

NameIdCountryDate
Leja Caldarera1000Brazil2026-04-17
Clifford Rim1001Japan2026-04-19
Munro Ferencz1002United Kingdom2026-04-25
Leja Caldarera1003Germany2026-04-22
Costa Dilliard1004Spain2026-04-02
Tony Foller1005India2026-04-14
David Darakjy1006Russia2026-04-09
Maria Marrier1007United Kingdom2026-04-02
Maisha Rulapaugh1008Russia2026-04-28
Aditya Kusko1009Canada2026-04-21
Clifford Rim1010Japan2026-04-10
Silvio Slusarski1011India2026-04-25
Sinclair Waycott1012Japan2026-04-16
Jeanfrancois Venere1013Japan2026-04-13
Aruna Figeroa1014Spain2026-04-24
Deepesh Chui1015Argentina2026-04-15
Aika Inouye1016Argentina2026-04-14
Emily Whobrey1017Russia2026-04-12
Emily Whobrey1018Germany2026-04-27
Jefferson Schemmer1019Japan2026-04-03
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Costa DilliardAustraliaElwin Sharvill NEW
Munro FerenczGermanyXuxue Feng NEW
Misaki RoysterItalyAnna Fali NEGOTIATION
Stacey MacleadFranceElwin Sharvill UNQUALIFIED
Costa DilliardArgentinaIoni Bowcher PROPOSAL
Antonio CaudyBrazilAmy Elsner NEGOTIATION
Costa DilliardUnited KingdomXuxue Feng UNQUALIFIED
Isabel BowleyIndiaXuxue Feng PROPOSAL
Faith GillianArgentinaAnna Fali NEW
Kaitlin OstroskyUnited KingdomOnyama Limba NEGOTIATION
Nicolas IturbideSpainBernardo Dominic UNQUALIFIED
Mujtaba NickaItalyAsiya Javayant QUALIFIED
Kadeem FlosiGermanyElwin Sharvill UNQUALIFIED
Arvin AlbaresArgentinaAnna Fali UNQUALIFIED
Ricardo GauchoItalyIvan Magalhaes NEW
Deepesh ChuiItalyAnna Fali PROPOSAL
Misaki RoysterBrazilXuxue Feng NEW
Arvin AlbaresUnited KingdomOnyama Limba NEGOTIATION
Adams MorascaRussiaAmy Elsner QUALIFIED
Kadeem FlosiArgentinaBernardo Dominic UNQUALIFIED
Aditya KuskoSpainBernardo Dominic NEW
Greenwood BologniaSpainStephen Shaw QUALIFIED
Jeanfrancois VenereIndiaElwin Sharvill UNQUALIFIED
Octavia MaletFranceElwin Sharvill PROPOSAL
Aika InouyeItalyXuxue Feng NEGOTIATION
Silvio SlusarskiJapanOnyama Limba RENEWAL
Mujtaba NickaUnited KingdomIoni Bowcher QUALIFIED
Cody SaylorsGermanyStephen Shaw NEW
Jeanfrancois VenereAustraliaIvan Magalhaes NEW
Aika InouyeGermanyXuxue Feng UNQUALIFIED
Stacey MacleadUnited KingdomIoni Bowcher RENEWAL
Kaitlin OstroskyCanadaIvan Magalhaes RENEWAL
Leja CaldareraFranceAnna Fali NEGOTIATION
Isabel BowleyJapanBernardo Dominic NEGOTIATION
Wickens NestleIndiaIoni Bowcher UNQUALIFIED
Faith GillianSpainStephen Shaw NEW
Murillo MaletBrazilXuxue Feng RENEWAL
Jones VocelkaCanadaIvan Magalhaes NEW
Darci PoquetteJapanIoni Bowcher UNQUALIFIED
Izzy GarufiIndiaXuxue Feng RENEWAL

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