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
Leja CaldareraArgentinaAsiya Javayant RENEWAL
Leon OldroydCanadaOnyama Limba QUALIFIED
Sinclair WaycottRussiaOnyama Limba UNQUALIFIED
Munro FerenczArgentinaAsiya Javayant QUALIFIED
Maisha RulapaughGermanyIvan Magalhaes UNQUALIFIED
Jefferson SchemmerItalyBernardo Dominic PROPOSAL
David DarakjyGermanyXuxue Feng NEGOTIATION
Kadeem FlosiItalyElwin Sharvill RENEWAL
Maria MarrierUnited KingdomAsiya Javayant NEW
Adams MorascaRussiaBernardo Dominic RENEWAL
Johnson SergiCanadaOnyama Limba RENEWAL
Arvin AlbaresArgentinaAnna Fali QUALIFIED
Ashley DoeGermanyAmy Elsner NEW
Tony FollerRussiaOnyama Limba UNQUALIFIED
Chavez BriddickAustraliaIvan Magalhaes NEGOTIATION
Arvin AlbaresGermanyElwin Sharvill NEW
Leja CaldareraArgentinaElwin Sharvill PROPOSAL
Greenwood BologniaGermanyAsiya Javayant QUALIFIED
Murillo MaletAustraliaBernardo Dominic RENEWAL
Adams MorascaItalyAnna Fali NEGOTIATION
Emily WhobreyFranceAmy Elsner NEW
Darci PoquetteCanadaBernardo Dominic UNQUALIFIED
Kaitlin OstroskyAustraliaXuxue Feng RENEWAL
Julie StensethSpainAnna Fali UNQUALIFIED
Aruna FigeroaUnited KingdomBernardo Dominic NEGOTIATION
Mayumi KolmetzGermanyIoni Bowcher NEGOTIATION
Leon OldroydIndiaAmy Elsner NEGOTIATION
Leon OldroydFranceAnna Fali PROPOSAL
Misaki RoysterCanadaStephen Shaw RENEWAL
Jennifer AmigonAustraliaAnna Fali RENEWAL
Darci PoquetteItalyStephen Shaw QUALIFIED
Cody SaylorsRussiaXuxue Feng UNQUALIFIED
Costa DilliardUnited KingdomIvan Magalhaes QUALIFIED
Emily WhobreyItalyAmy Elsner QUALIFIED
Jeanfrancois VenereJapanAnna Fali NEW
Cody SaylorsUnited KingdomStephen Shaw NEW
Maria MarrierGermanyStephen Shaw RENEWAL
Wickens NestleFranceIvan Magalhaes QUALIFIED
Jeanfrancois VenereArgentinaStephen Shaw NEGOTIATION
Mujtaba NickaBrazilAnna Fali NEGOTIATION
Clifford RimRussiaAmy Elsner QUALIFIED
Ashley DoeArgentinaXuxue Feng QUALIFIED
James ButtCanadaOnyama Limba RENEWAL
Morrow RutaRussiaIoni Bowcher RENEWAL
Jefferson SchemmerBrazilElwin Sharvill UNQUALIFIED
Adams MorascaItalyXuxue Feng UNQUALIFIED
Octavia MaletCanadaAmy Elsner NEGOTIATION
Costa DilliardArgentinaAmy Elsner NEW
Deepesh ChuiJapanAsiya Javayant NEW
Jennifer AmigonRussiaOnyama Limba QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Antonio CaudyJapanAsiya Javayant RENEWAL
Leja CaldareraUnited KingdomIvan Magalhaes RENEWAL
Tony FollerSpainAsiya Javayant QUALIFIED
Deepesh ChuiGermanyIvan Magalhaes NEGOTIATION
Aika InouyeIndiaElwin Sharvill QUALIFIED
Jeanfrancois VenereCanadaBernardo Dominic UNQUALIFIED
Jennifer AmigonSpainStephen Shaw PROPOSAL
Leja CaldareraUnited KingdomIvan Magalhaes UNQUALIFIED
Jefferson SchemmerCanadaXuxue Feng QUALIFIED
Stacey MacleadJapanAnna Fali QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Nicolas IturbideItaly2025-09-10Rousseaux, Michael Esq QUALIFIED61Anna Fali
1001Costa DilliardRussia2025-09-11Rousseaux, Michael Esq PROPOSAL19Stephen Shaw
1002Emily WhobreySpain2025-09-11Commercial Press RENEWAL36Elwin Sharvill
1003Johnson SergiFrance2025-09-09Chanay, Jeffrey A Esq RENEWAL65Elwin Sharvill
1004Darci PoquetteCanada2025-09-12Commercial Press UNQUALIFIED66Onyama Limba
1005Stacey MacleadGermany2025-09-22Commercial Press UNQUALIFIED18Ioni Bowcher
1006Johnson SergiRussia2025-08-27Feiner Bros NEGOTIATION1Xuxue Feng
1007Costa DilliardArgentina2025-08-26Benton, John B Jr NEGOTIATION2Ioni Bowcher
1008Mayumi KolmetzCanada2025-09-15King, Christopher A Esq NEW44Anna Fali
1009Julie StensethAustralia2025-09-22Buckley Miller Wright NEGOTIATION95Ioni Bowcher
1010Isabel BowleyJapan2025-08-31Commercial Press QUALIFIED65Xuxue Feng
1011Silvio SlusarskiCanada2025-09-09Rangoni Of Florence QUALIFIED75Xuxue Feng
1012Sinclair WaycottJapan2025-09-09Chapman, Ross E Esq NEGOTIATION73Anna Fali
1013Wickens NestleGermany2025-09-12Feltz Printing Service RENEWAL43Stephen Shaw
1014Jeanfrancois VenereBrazil2025-08-26Feltz Printing Service RENEWAL68Ivan Magalhaes
1015Silvio SlusarskiSpain2025-09-11Feiner Bros PROPOSAL31Xuxue Feng
1016Faith GillianFrance2025-09-09Chemel, James L Cpa RENEWAL17Stephen Shaw
1017Sinclair WaycottItaly2025-08-31Chemel, James L Cpa NEW89Amy Elsner
1018Cody SaylorsArgentina2025-09-16Rangoni Of Florence NEW28Asiya Javayant
1019Maria MarrierAustralia2025-09-11Rangoni Of Florence RENEWAL85Onyama Limba
1020Emily WhobreyJapan2025-09-21Feltz Printing Service PROPOSAL5Ivan Magalhaes
1021Ashley DoeIndia2025-09-08Feltz Printing Service NEGOTIATION8Ioni Bowcher
1022Mayumi KolmetzBrazil2025-09-03Chapman, Ross E Esq QUALIFIED39Xuxue Feng
1023Izzy GarufiGermany2025-09-23Feltz Printing Service NEW25Bernardo Dominic
1024Wickens NestleItaly2025-09-22Rangoni Of Florence PROPOSAL52Xuxue Feng
1025Kaitlin OstroskyBrazil2025-09-02Commercial Press RENEWAL21Elwin Sharvill
1026Nicolas IturbideGermany2025-09-12Chanay, Jeffrey A Esq UNQUALIFIED15Elwin Sharvill
1027Alejandro PerinGermany2025-09-08Commercial Press NEW93Ioni Bowcher
1028Julie StensethGermany2025-09-19Buckley Miller Wright UNQUALIFIED37Onyama Limba
1029Aditya KuskoGermany2025-08-31Commercial Press RENEWAL9Elwin Sharvill
1030Wickens NestleJapan2025-09-05Rangoni Of Florence RENEWAL13Elwin Sharvill
1031Leon OldroydIndia2025-08-28Dorl, James J Esq NEGOTIATION38Asiya Javayant
1032Leon OldroydAustralia2025-08-30Feltz Printing Service UNQUALIFIED71Stephen Shaw
1033Smith GlickItaly2025-09-23Chanay, Jeffrey A Esq RENEWAL32Anna Fali
1034Izzy GarufiIndia2025-08-29Benton, John B Jr UNQUALIFIED57Asiya Javayant
1035Mayumi KolmetzJapan2025-09-03Chapman, Ross E Esq RENEWAL87Asiya Javayant
1036Greenwood BologniaUnited Kingdom2025-09-13Chapman, Ross E Esq UNQUALIFIED43Ioni Bowcher
1037Stacey MacleadItaly2025-09-17Feltz Printing Service PROPOSAL45Elwin Sharvill
1038Cody SaylorsAustralia2025-09-13Feltz Printing Service NEGOTIATION11Xuxue Feng
1039Aruna FigeroaAustralia2025-09-13Rangoni Of Florence UNQUALIFIED33Asiya Javayant
1040Silvio SlusarskiCanada2025-09-17Chanay, Jeffrey A Esq UNQUALIFIED36Onyama Limba
1041Johnson SergiIndia2025-09-15Rangoni Of Florence NEGOTIATION35Anna Fali
1042Ricardo GauchoIndia2025-09-03Chanay, Jeffrey A Esq PROPOSAL92Xuxue Feng
1043Maria MarrierAustralia2025-08-29Commercial Press PROPOSAL90Onyama Limba
1044Ivar PaprockiRussia2025-09-15Chapman, Ross E Esq QUALIFIED59Onyama Limba
1045Kadeem FlosiIndia2025-09-03Printing Dimensions PROPOSAL52Onyama Limba
1046Arvin AlbaresRussia2025-09-08Benton, John B Jr NEW5Anna Fali
1047Isabel BowleyJapan2025-09-11King, Christopher A Esq RENEWAL6Xuxue Feng
1048Rodrigues CampainAustralia2025-09-07Printing Dimensions NEGOTIATION2Xuxue Feng
1049Deepesh ChuiFrance2025-08-31Feiner Bros NEW78Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Murillo MaletBrazilStephen Shaw RENEWAL
Juan WieserBrazilBernardo Dominic PROPOSAL
Johnson SergiGermanyStephen Shaw NEW
Antonio CaudyBrazilIoni Bowcher UNQUALIFIED
Munro FerenczItalyIoni Bowcher UNQUALIFIED
Chavez BriddickCanadaIvan Magalhaes PROPOSAL
Mayumi KolmetzBrazilBernardo Dominic PROPOSAL
Izzy GarufiIndiaIvan Magalhaes RENEWAL
Jones VocelkaItalyAsiya Javayant NEW
Stacey MacleadBrazilBernardo Dominic PROPOSAL
Leon OldroydJapanStephen Shaw NEW
Jennifer AmigonGermanyOnyama Limba UNQUALIFIED
Salvatore StockhamRussiaXuxue Feng NEW
Antonio CaudyFranceElwin Sharvill NEGOTIATION
Jones VocelkaRussiaBernardo Dominic PROPOSAL
Misaki RoysterCanadaIoni Bowcher NEGOTIATION
Nicolas IturbideIndiaXuxue Feng NEW
Claire TollnerIndiaAnna Fali RENEWAL
Faith GillianIndiaAmy Elsner QUALIFIED
Ricardo GauchoUnited KingdomXuxue Feng NEW
Adams MorascaAustraliaAsiya Javayant NEGOTIATION
Stacey MacleadGermanyIoni Bowcher NEW
Adams MorascaJapanIoni Bowcher PROPOSAL
Chavez BriddickRussiaBernardo Dominic RENEWAL
Mujtaba NickaCanadaAmy Elsner NEGOTIATION
Alejandro PerinUnited KingdomXuxue Feng QUALIFIED
Maisha RulapaughAustraliaIoni Bowcher UNQUALIFIED
Faith GillianJapanAsiya Javayant NEGOTIATION
Kadeem FlosiFranceXuxue Feng QUALIFIED
Mayumi KolmetzFranceOnyama Limba PROPOSAL
Stacey MacleadSpainIvan Magalhaes UNQUALIFIED
Silvio SlusarskiUnited KingdomAmy Elsner QUALIFIED
Wickens NestleRussiaAsiya Javayant RENEWAL
Leon OldroydItalyElwin Sharvill QUALIFIED
Kaitlin OstroskyItalyIvan Magalhaes PROPOSAL
Emily WhobreyUnited KingdomXuxue Feng RENEWAL
Jones VocelkaGermanyXuxue Feng NEW
Mujtaba NickaIndiaXuxue Feng NEGOTIATION
Maisha RulapaughAustraliaAsiya Javayant PROPOSAL
Silvio SlusarskiBrazilElwin Sharvill QUALIFIED
Clifford RimArgentinaIvan Magalhaes NEW
Johnson SergiFranceXuxue Feng QUALIFIED
Jones VocelkaItalyIoni Bowcher NEW
Greenwood BologniaRussiaBernardo Dominic NEGOTIATION
Emily WhobreyItalyAmy Elsner UNQUALIFIED
Munro FerenczIndiaXuxue Feng NEGOTIATION
Leon OldroydIndiaIoni Bowcher RENEWAL
Jeanfrancois VenereCanadaStephen Shaw QUALIFIED
Ivar PaprockiAustraliaIvan Magalhaes NEW
Faith GillianJapanBernardo Dominic QUALIFIED
Frozen Columns
Name
Greenwood Bolognia
Claire Tollner
Nicolas Iturbide
Jones Vocelka
Leja Caldarera
Darci Poquette
Tony Foller
Cody Saylors
Adams Morasca
James Butt
Maisha Rulapaugh
Smith Glick
Tony Foller
Cody Saylors
James Butt
Munro Ferencz
Aika Inouye
Chavez Briddick
Arvin Albares
Sinclair Waycott
Cody Saylors
Adams Morasca
Silvio Slusarski
Antonio Caudy
Juan Wieser
Aruna Figeroa
Wickens Nestle
Murillo Malet
Johnson Sergi
Emily Whobrey
Morrow Ruta
Juan Wieser
Francesco Shinko
Jefferson Schemmer
Claire Tollner
Smith Glick
Emily Whobrey
Ivar Paprocki
Cody Saylors
Mayumi Kolmetz
Murillo Malet
Julie Stenseth
Leja Caldarera
Maisha Rulapaugh
Juan Wieser
James Butt
Emily Whobrey
Jones Vocelka
Faith Gillian
Nicolas Iturbide
IdCountryDate
1000Russia2025-08-26
1001Germany2025-09-17
1002United Kingdom2025-08-30
1003Germany2025-09-12
1004Germany2025-09-16
1005Germany2025-09-20
1006Australia2025-09-07
1007France2025-09-09
1008Spain2025-08-26
1009Japan2025-09-04
1010Spain2025-08-31
1011Australia2025-09-16
1012Germany2025-09-08
1013Italy2025-09-19
1014Japan2025-09-02
1015Russia2025-09-09
1016Argentina2025-09-07
1017France2025-09-16
1018Argentina2025-09-17
1019Australia2025-09-14
1020Australia2025-09-14
1021Australia2025-09-08
1022Japan2025-09-04
1023India2025-09-06
1024India2025-09-07
1025Italy2025-09-24
1026Australia2025-09-13
1027France2025-09-10
1028Spain2025-09-08
1029Russia2025-09-07
1030Japan2025-09-18
1031Germany2025-09-06
1032Russia2025-09-15
1033France2025-09-24
1034India2025-09-19
1035Australia2025-09-16
1036Canada2025-08-28
1037Japan2025-09-20
1038Spain2025-09-05
1039Italy2025-09-23
1040India2025-09-19
1041Germany2025-08-31
1042United Kingdom2025-08-31
1043Argentina2025-08-27
1044Japan2025-09-24
1045Italy2025-09-01
1046Japan2025-09-03
1047Germany2025-08-31
1048Russia2025-09-19
1049Germany2025-09-07

On-Demand Data

NameIdCountryDate
Morrow Ruta1000Canada2025-09-16
Smith Glick1001Argentina2025-09-15
Misaki Royster1002Germany2025-09-01
Arvin Albares1003Germany2025-08-28
Isabel Bowley1004United Kingdom2025-09-21
Silvio Slusarski1005Japan2025-08-28
Kaitlin Ostrosky1006Japan2025-09-20
Costa Dilliard1007Italy2025-09-24
Kadeem Flosi1008Italy2025-09-05
Misaki Royster1009France2025-09-15
Jones Vocelka1010Canada2025-09-05
Costa Dilliard1011Brazil2025-09-20
Wickens Nestle1012Spain2025-08-28
Morrow Ruta1013Brazil2025-09-20
Aditya Kusko1014United Kingdom2025-09-09
James Butt1015Italy2025-08-28
Murillo Malet1016France2025-09-20
Morrow Ruta1017Argentina2025-09-23
Darci Poquette1018Germany2025-09-07
Emily Whobrey1019Argentina2025-08-28
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Wickens NestleIndiaIvan Magalhaes RENEWAL
Aika InouyeAustraliaAsiya Javayant UNQUALIFIED
Ricardo GauchoJapanStephen Shaw RENEWAL
Jeanfrancois VenereRussiaOnyama Limba NEGOTIATION
Mujtaba NickaItalyAmy Elsner NEW
Deepesh ChuiIndiaOnyama Limba RENEWAL
Jennifer AmigonSpainXuxue Feng QUALIFIED
Munro FerenczSpainElwin Sharvill RENEWAL
David DarakjyArgentinaElwin Sharvill QUALIFIED
Cody SaylorsRussiaStephen Shaw NEW
Salvatore StockhamBrazilElwin Sharvill PROPOSAL
Ricardo GauchoIndiaXuxue Feng NEGOTIATION
Ashley DoeFranceStephen Shaw NEGOTIATION
Deepesh ChuiBrazilAsiya Javayant NEGOTIATION
Jones VocelkaSpainAnna Fali UNQUALIFIED
Jefferson SchemmerRussiaAsiya Javayant QUALIFIED
Chavez BriddickUnited KingdomIvan Magalhaes UNQUALIFIED
Aditya KuskoCanadaIvan Magalhaes NEGOTIATION
James ButtUnited KingdomXuxue Feng PROPOSAL
Jefferson SchemmerIndiaAsiya Javayant QUALIFIED
Misaki RoysterSpainXuxue Feng NEGOTIATION
Aditya KuskoBrazilAmy Elsner UNQUALIFIED
Julie StensethSpainBernardo Dominic NEGOTIATION
Mujtaba NickaFranceAmy Elsner NEGOTIATION
Maria MarrierFranceStephen Shaw PROPOSAL
Misaki RoysterArgentinaBernardo Dominic NEGOTIATION
Jefferson SchemmerJapanOnyama Limba QUALIFIED
Maria MarrierBrazilStephen Shaw NEW
Morrow RutaCanadaIoni Bowcher UNQUALIFIED
Nicolas IturbideGermanyIvan Magalhaes QUALIFIED
Wickens NestleJapanOnyama Limba PROPOSAL
Jefferson SchemmerArgentinaIoni Bowcher NEGOTIATION
Emily WhobreyArgentinaIoni Bowcher RENEWAL
Izzy GarufiSpainIvan Magalhaes NEGOTIATION
Aruna FigeroaIndiaXuxue Feng QUALIFIED
Silvio SlusarskiArgentinaIvan Magalhaes NEW
Rodrigues CampainIndiaIvan Magalhaes NEGOTIATION
Juan WieserFranceOnyama Limba NEW
Misaki RoysterIndiaIoni Bowcher RENEWAL
Jefferson SchemmerRussiaAsiya Javayant NEW

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