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
Sinclair WaycottIndiaOnyama Limba UNQUALIFIED
Aditya KuskoArgentinaBernardo Dominic NEW
Cody SaylorsArgentinaStephen Shaw UNQUALIFIED
Jefferson SchemmerCanadaIvan Magalhaes QUALIFIED
Aruna FigeroaUnited KingdomXuxue Feng UNQUALIFIED
Costa DilliardArgentinaAnna Fali QUALIFIED
Juan WieserCanadaAnna Fali RENEWAL
Sinclair WaycottItalyElwin Sharvill QUALIFIED
Maria MarrierGermanyBernardo Dominic QUALIFIED
Francesco ShinkoBrazilStephen Shaw UNQUALIFIED
Jeanfrancois VenereBrazilStephen Shaw NEW
Jennifer AmigonUnited KingdomAnna Fali RENEWAL
Faith GillianArgentinaElwin Sharvill NEW
Aika InouyeRussiaElwin Sharvill NEW
Maisha RulapaughItalyAmy Elsner RENEWAL
Maisha RulapaughFranceStephen Shaw UNQUALIFIED
Arvin AlbaresRussiaXuxue Feng NEW
Faith GillianIndiaElwin Sharvill RENEWAL
Deepesh ChuiJapanBernardo Dominic PROPOSAL
Cody SaylorsArgentinaBernardo Dominic QUALIFIED
Wickens NestleJapanXuxue Feng RENEWAL
Emily WhobreyCanadaIoni Bowcher UNQUALIFIED
Aditya KuskoCanadaIvan Magalhaes NEGOTIATION
Francesco ShinkoSpainIvan Magalhaes NEW
Ricardo GauchoJapanIoni Bowcher RENEWAL
Jeanfrancois VenereGermanyIoni Bowcher PROPOSAL
Murillo MaletJapanAnna Fali UNQUALIFIED
Mujtaba NickaFranceBernardo Dominic RENEWAL
Clifford RimItalyElwin Sharvill NEGOTIATION
Alejandro PerinCanadaAnna Fali PROPOSAL
Tony FollerIndiaElwin Sharvill NEW
David DarakjyJapanIoni Bowcher PROPOSAL
Misaki RoysterUnited KingdomIoni Bowcher NEGOTIATION
Arvin AlbaresArgentinaXuxue Feng NEGOTIATION
Octavia MaletCanadaXuxue Feng PROPOSAL
Aruna FigeroaIndiaIoni Bowcher QUALIFIED
Julie StensethFranceAnna Fali RENEWAL
Juan WieserItalyIoni Bowcher UNQUALIFIED
Deepesh ChuiIndiaAnna Fali NEGOTIATION
Mujtaba NickaFranceBernardo Dominic QUALIFIED
Smith GlickUnited KingdomStephen Shaw RENEWAL
Leja CaldareraJapanElwin Sharvill NEGOTIATION
Aruna FigeroaGermanyBernardo Dominic QUALIFIED
Arvin AlbaresGermanyXuxue Feng QUALIFIED
Mujtaba NickaUnited KingdomStephen Shaw UNQUALIFIED
Jennifer AmigonFranceAnna Fali QUALIFIED
Adams MorascaBrazilOnyama Limba RENEWAL
Wickens NestleBrazilElwin Sharvill RENEWAL
Smith GlickGermanyStephen Shaw NEGOTIATION
Aruna FigeroaRussiaBernardo Dominic QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Jennifer AmigonUnited KingdomIvan Magalhaes RENEWAL
Emily WhobreyBrazilAsiya Javayant UNQUALIFIED
Mayumi KolmetzUnited KingdomAsiya Javayant QUALIFIED
Aika InouyeRussiaElwin Sharvill RENEWAL
Cody SaylorsGermanyIvan Magalhaes NEGOTIATION
Mujtaba NickaUnited KingdomXuxue Feng NEGOTIATION
Julie StensethJapanAsiya Javayant QUALIFIED
Chavez BriddickBrazilIoni Bowcher UNQUALIFIED
Mujtaba NickaRussiaIoni Bowcher RENEWAL
Cody SaylorsBrazilOnyama Limba QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Smith GlickAustralia2025-08-10Truhlar And Truhlar Attys UNQUALIFIED44Bernardo Dominic
1001Maria MarrierJapan2025-08-03King, Christopher A Esq RENEWAL25Amy Elsner
1002Leja CaldareraRussia2025-08-25Feltz Printing Service NEW58Anna Fali
1003Tony FollerItaly2025-07-31Benton, John B Jr PROPOSAL38Stephen Shaw
1004Arvin AlbaresRussia2025-08-11Chemel, James L Cpa UNQUALIFIED80Xuxue Feng
1005Costa DilliardBrazil2025-08-19Rousseaux, Michael Esq NEW0Onyama Limba
1006Salvatore StockhamItaly2025-08-12Chapman, Ross E Esq PROPOSAL29Ivan Magalhaes
1007Chavez BriddickGermany2025-08-20Morlong Associates QUALIFIED31Ioni Bowcher
1008Izzy GarufiRussia2025-08-18Chapman, Ross E Esq NEGOTIATION81Stephen Shaw
1009Darci PoquetteFrance2025-08-03Printing Dimensions QUALIFIED42Ivan Magalhaes
1010James ButtSpain2025-08-08Chanay, Jeffrey A Esq RENEWAL45Ioni Bowcher
1011Mayumi KolmetzRussia2025-08-20Truhlar And Truhlar Attys UNQUALIFIED27Onyama Limba
1012Maisha RulapaughFrance2025-08-24Chapman, Ross E Esq NEGOTIATION9Elwin Sharvill
1013Clifford RimUnited Kingdom2025-08-20Commercial Press UNQUALIFIED27Amy Elsner
1014Stacey MacleadSpain2025-08-06King, Christopher A Esq PROPOSAL29Anna Fali
1015David DarakjyIndia2025-08-22Chanay, Jeffrey A Esq QUALIFIED69Elwin Sharvill
1016Kaitlin OstroskyArgentina2025-08-04Chemel, James L Cpa NEW89Xuxue Feng
1017Cody SaylorsSpain2025-08-15Printing Dimensions UNQUALIFIED93Amy Elsner
1018Cody SaylorsIndia2025-08-09Chanay, Jeffrey A Esq QUALIFIED95Xuxue Feng
1019Nicolas IturbideUnited Kingdom2025-08-02Chapman, Ross E Esq NEW72Asiya Javayant
1020Salvatore StockhamGermany2025-08-21Feiner Bros PROPOSAL90Asiya Javayant
1021Antonio CaudyJapan2025-07-31Feiner Bros PROPOSAL46Ivan Magalhaes
1022Misaki RoysterAustralia2025-08-02Feltz Printing Service QUALIFIED38Ioni Bowcher
1023Munro FerenczAustralia2025-08-14Chemel, James L Cpa NEW32Ioni Bowcher
1024Mujtaba NickaSpain2025-08-27Printing Dimensions PROPOSAL69Anna Fali
1025Aika InouyeItaly2025-08-02Commercial Press UNQUALIFIED19Anna Fali
1026Mujtaba NickaUnited Kingdom2025-08-27Benton, John B Jr RENEWAL27Stephen Shaw
1027Izzy GarufiUnited Kingdom2025-08-10Printing Dimensions RENEWAL68Asiya Javayant
1028Kadeem FlosiItaly2025-08-05Chanay, Jeffrey A Esq NEW47Amy Elsner
1029Aika InouyeRussia2025-08-08Truhlar And Truhlar Attys NEW65Ivan Magalhaes
1030Mayumi KolmetzJapan2025-08-18Printing Dimensions PROPOSAL1Elwin Sharvill
1031Maria MarrierBrazil2025-08-17Feltz Printing Service RENEWAL97Ioni Bowcher
1032Emily WhobreyFrance2025-08-14Buckley Miller Wright NEGOTIATION75Stephen Shaw
1033Adams MorascaRussia2025-08-17Chemel, James L Cpa PROPOSAL71Anna Fali
1034Salvatore StockhamItaly2025-08-22Dorl, James J Esq NEW33Xuxue Feng
1035Kaitlin OstroskySpain2025-07-30Dorl, James J Esq UNQUALIFIED64Stephen Shaw
1036Jones VocelkaArgentina2025-08-23Chanay, Jeffrey A Esq UNQUALIFIED72Xuxue Feng
1037Misaki RoysterRussia2025-08-05Chemel, James L Cpa QUALIFIED80Elwin Sharvill
1038Arvin AlbaresSpain2025-07-30Commercial Press NEW92Ioni Bowcher
1039Misaki RoysterAustralia2025-08-13Chemel, James L Cpa NEW97Elwin Sharvill
1040Ivar PaprockiSpain2025-08-21Chapman, Ross E Esq NEW97Xuxue Feng
1041Faith GillianSpain2025-08-05Commercial Press RENEWAL51Elwin Sharvill
1042Tony FollerFrance2025-08-03Morlong Associates RENEWAL94Stephen Shaw
1043Juan WieserGermany2025-08-01King, Christopher A Esq QUALIFIED4Xuxue Feng
1044Aika InouyeArgentina2025-08-17Buckley Miller Wright NEW58Ivan Magalhaes
1045Leja CaldareraFrance2025-08-25Chanay, Jeffrey A Esq QUALIFIED33Xuxue Feng
1046Izzy GarufiUnited Kingdom2025-08-26Buckley Miller Wright NEW38Bernardo Dominic
1047Aika InouyeUnited Kingdom2025-08-08Chemel, James L Cpa QUALIFIED26Xuxue Feng
1048Stacey MacleadRussia2025-08-10Feiner Bros QUALIFIED57Asiya Javayant
1049Stacey MacleadItaly2025-08-08Chanay, Jeffrey A Esq QUALIFIED60Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Jones VocelkaUnited KingdomIvan Magalhaes UNQUALIFIED
Mayumi KolmetzFranceIoni Bowcher QUALIFIED
Leon OldroydSpainBernardo Dominic QUALIFIED
Jennifer AmigonUnited KingdomIvan Magalhaes NEGOTIATION
Mayumi KolmetzArgentinaIoni Bowcher QUALIFIED
Sinclair WaycottBrazilBernardo Dominic NEGOTIATION
Jefferson SchemmerUnited KingdomIoni Bowcher RENEWAL
Mayumi KolmetzRussiaAmy Elsner NEGOTIATION
Mayumi KolmetzIndiaElwin Sharvill RENEWAL
Jefferson SchemmerIndiaIvan Magalhaes UNQUALIFIED
Isabel BowleyUnited KingdomAnna Fali NEW
Isabel BowleyAustraliaElwin Sharvill NEW
Greenwood BologniaSpainStephen Shaw NEGOTIATION
Izzy GarufiSpainBernardo Dominic PROPOSAL
Faith GillianAustraliaBernardo Dominic QUALIFIED
Clifford RimItalyOnyama Limba QUALIFIED
Cody SaylorsAustraliaIvan Magalhaes NEGOTIATION
Leon OldroydFranceIoni Bowcher PROPOSAL
Ashley DoeUnited KingdomIoni Bowcher PROPOSAL
Leja CaldareraCanadaAsiya Javayant NEGOTIATION
Isabel BowleySpainBernardo Dominic NEW
Maria MarrierSpainStephen Shaw QUALIFIED
Morrow RutaBrazilIvan Magalhaes NEGOTIATION
Julie StensethIndiaBernardo Dominic NEW
Johnson SergiArgentinaElwin Sharvill QUALIFIED
Kaitlin OstroskyCanadaAnna Fali PROPOSAL
Darci PoquetteRussiaAmy Elsner NEGOTIATION
Deepesh ChuiJapanBernardo Dominic RENEWAL
Antonio CaudyFranceElwin Sharvill NEW
Ricardo GauchoAustraliaStephen Shaw NEW
Greenwood BologniaAustraliaElwin Sharvill QUALIFIED
Claire TollnerJapanAnna Fali NEW
James ButtJapanElwin Sharvill PROPOSAL
Darci PoquetteUnited KingdomStephen Shaw RENEWAL
Johnson SergiSpainIoni Bowcher NEW
Jeanfrancois VenereIndiaStephen Shaw NEGOTIATION
Julie StensethJapanIvan Magalhaes UNQUALIFIED
Ricardo GauchoArgentinaStephen Shaw PROPOSAL
Jeanfrancois VenereGermanyXuxue Feng QUALIFIED
Alejandro PerinRussiaElwin Sharvill UNQUALIFIED
Faith GillianBrazilIoni Bowcher NEW
Julie StensethSpainIoni Bowcher NEW
Alejandro PerinArgentinaElwin Sharvill QUALIFIED
Leon OldroydBrazilOnyama Limba RENEWAL
Leon OldroydBrazilXuxue Feng UNQUALIFIED
Julie StensethBrazilAsiya Javayant QUALIFIED
Aditya KuskoGermanyAmy Elsner NEGOTIATION
Kaitlin OstroskyGermanyAsiya Javayant PROPOSAL
Emily WhobreyItalyAsiya Javayant PROPOSAL
Aruna FigeroaUnited KingdomAnna Fali PROPOSAL
Frozen Columns
Name
Sinclair Waycott
Arvin Albares
Kaitlin Ostrosky
Octavia Malet
Greenwood Bolognia
Aika Inouye
Smith Glick
David Darakjy
Aika Inouye
Isabel Bowley
Juan Wieser
Silvio Slusarski
Ricardo Gaucho
Emily Whobrey
Francesco Shinko
Johnson Sergi
Antonio Caudy
Octavia Malet
Darci Poquette
Kaitlin Ostrosky
Cody Saylors
Ivar Paprocki
Munro Ferencz
Salvatore Stockham
Francesco Shinko
Juan Wieser
Ricardo Gaucho
Emily Whobrey
Adams Morasca
Cody Saylors
Kaitlin Ostrosky
Murillo Malet
Juan Wieser
Costa Dilliard
Murillo Malet
Cody Saylors
Jefferson Schemmer
Aruna Figeroa
Chavez Briddick
Tony Foller
Aika Inouye
David Darakjy
Faith Gillian
Mayumi Kolmetz
Izzy Garufi
Jennifer Amigon
Tony Foller
Ivar Paprocki
Mayumi Kolmetz
Munro Ferencz
IdCountryDate
1000Germany2025-08-01
1001Argentina2025-08-11
1002Italy2025-08-10
1003India2025-08-22
1004France2025-08-19
1005Italy2025-08-13
1006United Kingdom2025-08-17
1007Canada2025-08-17
1008India2025-08-17
1009United Kingdom2025-08-06
1010Germany2025-08-22
1011United Kingdom2025-08-22
1012Japan2025-08-23
1013France2025-08-03
1014Canada2025-08-18
1015France2025-08-22
1016Canada2025-08-19
1017Japan2025-07-31
1018Brazil2025-08-23
1019Canada2025-08-06
1020France2025-08-24
1021Italy2025-08-19
1022India2025-08-12
1023India2025-08-25
1024Italy2025-08-25
1025Argentina2025-08-16
1026Australia2025-08-22
1027Japan2025-08-15
1028Germany2025-08-25
1029Brazil2025-08-20
1030Russia2025-07-30
1031Germany2025-08-09
1032France2025-08-13
1033Australia2025-08-10
1034Italy2025-08-22
1035Spain2025-08-23
1036Japan2025-08-08
1037Brazil2025-08-07
1038Japan2025-08-25
1039Australia2025-08-23
1040Spain2025-08-05
1041Australia2025-08-24
1042France2025-08-24
1043Russia2025-08-19
1044Russia2025-08-25
1045Canada2025-08-14
1046Japan2025-08-11
1047India2025-08-03
1048Germany2025-08-20
1049France2025-08-04

On-Demand Data

NameIdCountryDate
Jones Vocelka1000United Kingdom2025-08-10
Maria Marrier1001Australia2025-07-30
Ivar Paprocki1002United Kingdom2025-08-08
Maria Marrier1003India2025-08-15
Jones Vocelka1004Spain2025-08-09
Johnson Sergi1005Spain2025-07-30
Mayumi Kolmetz1006Canada2025-08-01
Misaki Royster1007Brazil2025-08-16
Ashley Doe1008India2025-08-03
Aditya Kusko1009Spain2025-08-25
Faith Gillian1010Spain2025-08-19
Arvin Albares1011United Kingdom2025-08-04
Cody Saylors1012Germany2025-08-15
David Darakjy1013Japan2025-07-30
Stacey Maclead1014Brazil2025-08-23
Alejandro Perin1015United Kingdom2025-08-02
Mayumi Kolmetz1016Brazil2025-08-09
Greenwood Bolognia1017Italy2025-08-23
Murillo Malet1018Russia2025-08-17
Jennifer Amigon1019France2025-08-11
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Julie StensethItalyIoni Bowcher NEW
Munro FerenczFranceAnna Fali PROPOSAL
Faith GillianFranceBernardo Dominic NEGOTIATION
Tony FollerAustraliaAnna Fali UNQUALIFIED
Murillo MaletCanadaBernardo Dominic QUALIFIED
Jefferson SchemmerAustraliaBernardo Dominic PROPOSAL
Aruna FigeroaUnited KingdomAmy Elsner NEW
Chavez BriddickIndiaAsiya Javayant QUALIFIED
Sinclair WaycottFranceXuxue Feng NEW
Isabel BowleyItalyBernardo Dominic UNQUALIFIED
Izzy GarufiCanadaStephen Shaw NEW
Antonio CaudyBrazilXuxue Feng NEGOTIATION
Greenwood BologniaCanadaAnna Fali QUALIFIED
Silvio SlusarskiUnited KingdomStephen Shaw PROPOSAL
Arvin AlbaresRussiaIvan Magalhaes NEW
David DarakjyBrazilAnna Fali NEGOTIATION
Ivar PaprockiUnited KingdomAsiya Javayant NEW
Murillo MaletCanadaIvan Magalhaes NEGOTIATION
Juan WieserItalyIoni Bowcher NEGOTIATION
Jefferson SchemmerGermanyIvan Magalhaes NEW
Aruna FigeroaItalyXuxue Feng PROPOSAL
Adams MorascaGermanyAsiya Javayant UNQUALIFIED
Jones VocelkaBrazilElwin Sharvill QUALIFIED
Smith GlickCanadaIoni Bowcher RENEWAL
Mujtaba NickaGermanyAmy Elsner QUALIFIED
Maria MarrierItalyAsiya Javayant QUALIFIED
Isabel BowleyRussiaIoni Bowcher UNQUALIFIED
Sinclair WaycottSpainAmy Elsner RENEWAL
Cody SaylorsRussiaXuxue Feng PROPOSAL
Morrow RutaCanadaBernardo Dominic UNQUALIFIED
Ivar PaprockiArgentinaElwin Sharvill RENEWAL
Juan WieserGermanyIvan Magalhaes NEW
Aruna FigeroaIndiaStephen Shaw PROPOSAL
Juan WieserItalyElwin Sharvill NEW
Aruna FigeroaItalyIoni Bowcher QUALIFIED
Tony FollerUnited KingdomAmy Elsner NEGOTIATION
Antonio CaudyCanadaIvan Magalhaes NEGOTIATION
Kaitlin OstroskyCanadaElwin Sharvill NEGOTIATION
Johnson SergiGermanyAnna Fali NEW
Emily WhobreyItalyXuxue Feng 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>