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
Claire TollnerArgentinaAmy Elsner NEW
Morrow RutaJapanAmy Elsner RENEWAL
Chavez BriddickRussiaBernardo Dominic UNQUALIFIED
Johnson SergiGermanyBernardo Dominic NEW
Johnson SergiGermanyIoni Bowcher QUALIFIED
Julie StensethSpainOnyama Limba QUALIFIED
Adams MorascaUnited KingdomElwin Sharvill QUALIFIED
David DarakjyRussiaXuxue Feng UNQUALIFIED
Faith GillianBrazilAsiya Javayant NEW
Aditya KuskoRussiaElwin Sharvill NEGOTIATION
Misaki RoysterArgentinaIvan Magalhaes NEW
Johnson SergiIndiaBernardo Dominic RENEWAL
Ashley DoeAustraliaAmy Elsner NEGOTIATION
Claire TollnerAustraliaXuxue Feng NEW
Isabel BowleyJapanAmy Elsner NEGOTIATION
Francesco ShinkoSpainBernardo Dominic NEW
Smith GlickArgentinaXuxue Feng QUALIFIED
Leja CaldareraSpainAnna Fali PROPOSAL
Deepesh ChuiArgentinaAnna Fali NEGOTIATION
Juan WieserGermanyOnyama Limba UNQUALIFIED
Ricardo GauchoBrazilBernardo Dominic QUALIFIED
Costa DilliardArgentinaStephen Shaw UNQUALIFIED
Maria MarrierIndiaAmy Elsner PROPOSAL
Aika InouyeBrazilXuxue Feng RENEWAL
Murillo MaletSpainAnna Fali PROPOSAL
Greenwood BologniaJapanIoni Bowcher NEGOTIATION
Jones VocelkaIndiaAnna Fali NEGOTIATION
Darci PoquetteItalyXuxue Feng QUALIFIED
Aika InouyeUnited KingdomAsiya Javayant UNQUALIFIED
David DarakjyRussiaBernardo Dominic PROPOSAL
Costa DilliardSpainXuxue Feng NEGOTIATION
Jennifer AmigonGermanyAmy Elsner NEW
Rodrigues CampainGermanyIoni Bowcher RENEWAL
Maisha RulapaughCanadaOnyama Limba NEGOTIATION
Salvatore StockhamArgentinaIvan Magalhaes PROPOSAL
Jennifer AmigonFranceElwin Sharvill NEW
Antonio CaudyItalyStephen Shaw UNQUALIFIED
Aruna FigeroaBrazilAsiya Javayant NEW
Antonio CaudyRussiaElwin Sharvill RENEWAL
Tony FollerArgentinaIoni Bowcher QUALIFIED
Ricardo GauchoCanadaAsiya Javayant PROPOSAL
Aika InouyeFranceAmy Elsner RENEWAL
Misaki RoysterBrazilAmy Elsner UNQUALIFIED
Kadeem FlosiUnited KingdomElwin Sharvill PROPOSAL
Kaitlin OstroskyJapanStephen Shaw QUALIFIED
Costa DilliardJapanOnyama Limba RENEWAL
Cody SaylorsGermanyOnyama Limba QUALIFIED
Antonio CaudySpainStephen Shaw QUALIFIED
Juan WieserAustraliaXuxue Feng UNQUALIFIED
Jeanfrancois VenereUnited KingdomIoni Bowcher RENEWAL
Horizontal
NameCountryRepresentativeStatus
Salvatore StockhamIndiaXuxue Feng PROPOSAL
Maria MarrierArgentinaBernardo Dominic RENEWAL
Julie StensethSpainXuxue Feng NEGOTIATION
Leja CaldareraJapanAmy Elsner QUALIFIED
Ashley DoeRussiaXuxue Feng UNQUALIFIED
Cody SaylorsIndiaIoni Bowcher NEGOTIATION
Murillo MaletAustraliaElwin Sharvill NEGOTIATION
Ashley DoeRussiaXuxue Feng QUALIFIED
Jennifer AmigonRussiaXuxue Feng QUALIFIED
Stacey MacleadGermanyStephen Shaw RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Smith GlickFrance2026-03-29Commercial Press UNQUALIFIED50Ioni Bowcher
1001Aika InouyeItaly2026-04-27Rousseaux, Michael Esq NEGOTIATION11Amy Elsner
1002David DarakjyAustralia2026-04-02Chanay, Jeffrey A Esq UNQUALIFIED27Amy Elsner
1003Izzy GarufiRussia2026-04-27Rangoni Of Florence QUALIFIED55Ioni Bowcher
1004Arvin AlbaresArgentina2026-04-26Benton, John B Jr QUALIFIED37Elwin Sharvill
1005Francesco ShinkoItaly2026-04-08Rousseaux, Michael Esq UNQUALIFIED64Elwin Sharvill
1006Faith GillianIndia2026-04-11Rousseaux, Michael Esq RENEWAL10Asiya Javayant
1007Alejandro PerinRussia2026-04-03Chemel, James L Cpa RENEWAL70Asiya Javayant
1008Sinclair WaycottArgentina2026-04-06Chapman, Ross E Esq QUALIFIED36Asiya Javayant
1009Isabel BowleyRussia2026-04-25Rousseaux, Michael Esq QUALIFIED95Ioni Bowcher
1010Francesco ShinkoAustralia2026-04-24Chemel, James L Cpa NEW80Xuxue Feng
1011Cody SaylorsFrance2026-04-12Benton, John B Jr NEGOTIATION32Ivan Magalhaes
1012Ricardo GauchoCanada2026-04-06Rangoni Of Florence NEW22Elwin Sharvill
1013Mujtaba NickaGermany2026-04-26Morlong Associates QUALIFIED70Anna Fali
1014Faith GillianUnited Kingdom2026-04-10Dorl, James J Esq NEGOTIATION21Ioni Bowcher
1015Leon OldroydGermany2026-04-02Chapman, Ross E Esq QUALIFIED99Anna Fali
1016Kadeem FlosiSpain2026-04-21Morlong Associates PROPOSAL68Stephen Shaw
1017Costa DilliardUnited Kingdom2026-04-03Truhlar And Truhlar Attys NEGOTIATION35Onyama Limba
1018Greenwood BologniaCanada2026-04-01Feltz Printing Service QUALIFIED44Stephen Shaw
1019Maisha RulapaughBrazil2026-03-30Printing Dimensions NEW8Anna Fali
1020Leon OldroydGermany2026-04-26Feiner Bros NEW36Xuxue Feng
1021Leon OldroydBrazil2026-04-25Chanay, Jeffrey A Esq RENEWAL4Onyama Limba
1022David DarakjyBrazil2026-04-10Feltz Printing Service QUALIFIED15Amy Elsner
1023Costa DilliardBrazil2026-04-25Benton, John B Jr QUALIFIED36Bernardo Dominic
1024Claire TollnerGermany2026-04-06Buckley Miller Wright NEGOTIATION83Asiya Javayant
1025Octavia MaletJapan2026-04-20Chemel, James L Cpa NEW32Asiya Javayant
1026Ashley DoeJapan2026-04-21King, Christopher A Esq PROPOSAL89Anna Fali
1027Ricardo GauchoRussia2026-04-14Benton, John B Jr PROPOSAL32Ioni Bowcher
1028Leon OldroydBrazil2026-04-25Commercial Press UNQUALIFIED91Anna Fali
1029Jennifer AmigonFrance2026-04-06Feiner Bros NEW65Bernardo Dominic
1030Emily WhobreyJapan2026-04-26Chanay, Jeffrey A Esq NEW77Anna Fali
1031Francesco ShinkoUnited Kingdom2026-04-16Printing Dimensions NEW14Stephen Shaw
1032Juan WieserFrance2026-03-30King, Christopher A Esq NEGOTIATION48Amy Elsner
1033Claire TollnerSpain2026-04-08Printing Dimensions NEGOTIATION91Bernardo Dominic
1034Misaki RoysterItaly2026-04-25Chanay, Jeffrey A Esq RENEWAL62Xuxue Feng
1035Clifford RimJapan2026-04-21Feltz Printing Service UNQUALIFIED73Ivan Magalhaes
1036Clifford RimJapan2026-04-01Commercial Press RENEWAL5Onyama Limba
1037Rodrigues CampainItaly2026-04-20King, Christopher A Esq PROPOSAL9Amy Elsner
1038Aika InouyeFrance2026-04-25Chemel, James L Cpa NEGOTIATION68Onyama Limba
1039Tony FollerIndia2026-04-15Commercial Press PROPOSAL0Bernardo Dominic
1040Maisha RulapaughArgentina2026-04-01Feiner Bros RENEWAL34Ivan Magalhaes
1041Wickens NestleRussia2026-04-15Buckley Miller Wright RENEWAL15Xuxue Feng
1042Rodrigues CampainIndia2026-04-27Rangoni Of Florence PROPOSAL37Elwin Sharvill
1043Ricardo GauchoJapan2026-04-22Truhlar And Truhlar Attys NEW62Onyama Limba
1044Clifford RimSpain2026-04-17Feiner Bros NEW82Asiya Javayant
1045Octavia MaletSpain2026-04-21Printing Dimensions NEW40Stephen Shaw
1046Faith GillianFrance2026-04-08Feiner Bros PROPOSAL86Asiya Javayant
1047Alejandro PerinUnited Kingdom2026-04-17Dorl, James J Esq PROPOSAL11Xuxue Feng
1048Leja CaldareraSpain2026-04-09Printing Dimensions UNQUALIFIED97Elwin Sharvill
1049Nicolas IturbideSpain2026-04-02Rousseaux, Michael Esq RENEWAL44Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Ashley DoeFranceXuxue Feng QUALIFIED
Mujtaba NickaItalyAmy Elsner QUALIFIED
Salvatore StockhamGermanyBernardo Dominic RENEWAL
Jefferson SchemmerJapanIvan Magalhaes QUALIFIED
Ivar PaprockiCanadaIoni Bowcher NEW
James ButtUnited KingdomAmy Elsner PROPOSAL
Silvio SlusarskiJapanIoni Bowcher NEGOTIATION
Deepesh ChuiBrazilAmy Elsner NEGOTIATION
Leja CaldareraRussiaIoni Bowcher NEGOTIATION
Morrow RutaCanadaAsiya Javayant NEW
Aruna FigeroaArgentinaBernardo Dominic NEW
Salvatore StockhamFranceIvan Magalhaes NEGOTIATION
Jennifer AmigonArgentinaIoni Bowcher PROPOSAL
Smith GlickCanadaStephen Shaw NEW
Morrow RutaCanadaOnyama Limba UNQUALIFIED
Antonio CaudyJapanAsiya Javayant NEGOTIATION
Morrow RutaCanadaIoni Bowcher NEGOTIATION
Jennifer AmigonFranceAmy Elsner PROPOSAL
Stacey MacleadRussiaIvan Magalhaes RENEWAL
Salvatore StockhamArgentinaAsiya Javayant QUALIFIED
Mayumi KolmetzIndiaXuxue Feng RENEWAL
Chavez BriddickSpainAnna Fali RENEWAL
Jefferson SchemmerRussiaOnyama Limba NEGOTIATION
Leon OldroydSpainAnna Fali PROPOSAL
Aruna FigeroaIndiaElwin Sharvill PROPOSAL
Nicolas IturbideUnited KingdomAmy Elsner PROPOSAL
Munro FerenczUnited KingdomAnna Fali PROPOSAL
Leon OldroydFranceAnna Fali NEGOTIATION
Cody SaylorsAustraliaAmy Elsner NEW
Jefferson SchemmerItalyStephen Shaw UNQUALIFIED
Sinclair WaycottRussiaAsiya Javayant PROPOSAL
Juan WieserCanadaIoni Bowcher PROPOSAL
Aruna FigeroaGermanyIoni Bowcher NEGOTIATION
Smith GlickUnited KingdomAsiya Javayant RENEWAL
Tony FollerJapanIoni Bowcher NEW
Claire TollnerFranceXuxue Feng PROPOSAL
Salvatore StockhamCanadaIvan Magalhaes QUALIFIED
Izzy GarufiAustraliaAmy Elsner NEW
Deepesh ChuiBrazilElwin Sharvill QUALIFIED
Morrow RutaSpainIvan Magalhaes UNQUALIFIED
Rodrigues CampainJapanIoni Bowcher QUALIFIED
Faith GillianCanadaIoni Bowcher UNQUALIFIED
Mujtaba NickaGermanyAmy Elsner RENEWAL
Maisha RulapaughGermanyStephen Shaw PROPOSAL
Octavia MaletFranceBernardo Dominic UNQUALIFIED
Costa DilliardJapanAmy Elsner PROPOSAL
Kaitlin OstroskySpainBernardo Dominic QUALIFIED
Aditya KuskoJapanIvan Magalhaes NEW
Kaitlin OstroskyCanadaXuxue Feng RENEWAL
Rodrigues CampainBrazilIvan Magalhaes QUALIFIED
Frozen Columns
Name
Kaitlin Ostrosky
Emily Whobrey
Tony Foller
Misaki Royster
Smith Glick
Ashley Doe
Jennifer Amigon
Ricardo Gaucho
Ricardo Gaucho
Mujtaba Nicka
Munro Ferencz
David Darakjy
Aruna Figeroa
Leja Caldarera
Misaki Royster
Ivar Paprocki
Deepesh Chui
Munro Ferencz
Octavia Malet
Deepesh Chui
Munro Ferencz
Izzy Garufi
Munro Ferencz
Julie Stenseth
Salvatore Stockham
Clifford Rim
Jones Vocelka
Ivar Paprocki
Adams Morasca
Mujtaba Nicka
Cody Saylors
Alejandro Perin
Salvatore Stockham
Clifford Rim
Ricardo Gaucho
Juan Wieser
Kadeem Flosi
Maria Marrier
Maisha Rulapaugh
Ashley Doe
Murillo Malet
Mayumi Kolmetz
Jefferson Schemmer
Arvin Albares
Maisha Rulapaugh
Jefferson Schemmer
Isabel Bowley
Munro Ferencz
Aika Inouye
Antonio Caudy
IdCountryDate
1000Spain2026-03-31
1001France2026-04-02
1002Japan2026-04-19
1003Brazil2026-04-04
1004Japan2026-04-08
1005Japan2026-04-13
1006France2026-04-25
1007United Kingdom2026-04-07
1008Brazil2026-04-12
1009France2026-03-29
1010France2026-03-29
1011Spain2026-04-07
1012India2026-04-06
1013France2026-04-23
1014Germany2026-04-03
1015Canada2026-04-22
1016Italy2026-04-18
1017Russia2026-04-15
1018Russia2026-04-06
1019Germany2026-04-21
1020Germany2026-04-05
1021Italy2026-04-20
1022Australia2026-04-13
1023Russia2026-04-04
1024Japan2026-04-04
1025Japan2026-04-02
1026Germany2026-04-09
1027Germany2026-04-20
1028France2026-04-25
1029Brazil2026-04-07
1030Germany2026-04-09
1031Spain2026-04-09
1032United Kingdom2026-04-22
1033India2026-03-30
1034Italy2026-04-18
1035Canada2026-04-25
1036Italy2026-04-14
1037Russia2026-04-21
1038Russia2026-03-30
1039United Kingdom2026-04-09
1040Brazil2026-04-22
1041India2026-03-30
1042Australia2026-04-17
1043Italy2026-03-31
1044Argentina2026-04-17
1045India2026-04-19
1046Germany2026-03-30
1047United Kingdom2026-04-07
1048France2026-04-03
1049Australia2026-04-19

On-Demand Data

NameIdCountryDate
Chavez Briddick1000Italy2026-04-16
Salvatore Stockham1001Russia2026-04-07
Claire Tollner1002Argentina2026-04-10
Morrow Ruta1003Italy2026-04-26
Stacey Maclead1004India2026-04-06
Jeanfrancois Venere1005United Kingdom2026-04-09
Johnson Sergi1006Japan2026-03-31
Jefferson Schemmer1007France2026-04-03
Jeanfrancois Venere1008Italy2026-04-27
Ricardo Gaucho1009United Kingdom2026-03-30
Kaitlin Ostrosky1010Brazil2026-04-22
Silvio Slusarski1011United Kingdom2026-04-04
Ivar Paprocki1012Spain2026-03-31
Antonio Caudy1013France2026-04-14
Jefferson Schemmer1014Japan2026-04-21
Munro Ferencz1015Germany2026-04-23
Maisha Rulapaugh1016India2026-04-18
Murillo Malet1017India2026-04-26
Maria Marrier1018Canada2026-04-16
Izzy Garufi1019Brazil2026-04-07
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Cody SaylorsItalyXuxue Feng UNQUALIFIED
Ivar PaprockiUnited KingdomAsiya Javayant NEW
Faith GillianSpainIvan Magalhaes QUALIFIED
Cody SaylorsIndiaBernardo Dominic NEGOTIATION
Jennifer AmigonJapanIvan Magalhaes QUALIFIED
Greenwood BologniaFranceOnyama Limba QUALIFIED
Darci PoquetteSpainAmy Elsner QUALIFIED
Kaitlin OstroskyRussiaElwin Sharvill RENEWAL
Jones VocelkaCanadaOnyama Limba NEGOTIATION
Darci PoquetteFranceStephen Shaw NEGOTIATION
Silvio SlusarskiIndiaXuxue Feng QUALIFIED
Stacey MacleadArgentinaBernardo Dominic RENEWAL
Tony FollerUnited KingdomXuxue Feng PROPOSAL
Stacey MacleadIndiaXuxue Feng RENEWAL
Stacey MacleadAustraliaAmy Elsner NEW
Izzy GarufiAustraliaAsiya Javayant PROPOSAL
Faith GillianItalyAsiya Javayant RENEWAL
Juan WieserRussiaStephen Shaw PROPOSAL
Mayumi KolmetzIndiaStephen Shaw PROPOSAL
Darci PoquetteBrazilStephen Shaw NEW
Kaitlin OstroskySpainElwin Sharvill RENEWAL
Clifford RimJapanAnna Fali NEGOTIATION
Ashley DoeCanadaAmy Elsner UNQUALIFIED
Jeanfrancois VenereAustraliaIoni Bowcher UNQUALIFIED
Ashley DoeCanadaElwin Sharvill PROPOSAL
Munro FerenczJapanElwin Sharvill NEW
Izzy GarufiUnited KingdomAsiya Javayant QUALIFIED
Aruna FigeroaCanadaOnyama Limba NEW
Cody SaylorsItalyStephen Shaw NEGOTIATION
Jennifer AmigonIndiaOnyama Limba NEGOTIATION
Octavia MaletCanadaIoni Bowcher QUALIFIED
Ricardo GauchoJapanStephen Shaw NEW
Emily WhobreyItalyStephen Shaw PROPOSAL
Salvatore StockhamAustraliaAmy Elsner QUALIFIED
Jennifer AmigonAustraliaElwin Sharvill NEGOTIATION
Chavez BriddickIndiaAsiya Javayant UNQUALIFIED
Maria MarrierBrazilAsiya Javayant UNQUALIFIED
Izzy GarufiGermanyElwin Sharvill NEW
Kadeem FlosiCanadaIoni Bowcher RENEWAL
Costa DilliardGermanyAnna Fali 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>