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
Costa DilliardFranceStephen Shaw QUALIFIED
Claire TollnerUnited KingdomOnyama Limba NEW
Antonio CaudyIndiaStephen Shaw UNQUALIFIED
Maria MarrierIndiaBernardo Dominic QUALIFIED
Morrow RutaCanadaIoni Bowcher UNQUALIFIED
Juan WieserJapanOnyama Limba NEW
Kadeem FlosiItalyElwin Sharvill UNQUALIFIED
Leon OldroydGermanyStephen Shaw UNQUALIFIED
Francesco ShinkoAustraliaAnna Fali NEW
Juan WieserIndiaIvan Magalhaes UNQUALIFIED
Darci PoquetteUnited KingdomOnyama Limba QUALIFIED
Kadeem FlosiJapanStephen Shaw RENEWAL
Costa DilliardAustraliaIoni Bowcher PROPOSAL
Alejandro PerinSpainAmy Elsner NEGOTIATION
Antonio CaudyBrazilOnyama Limba PROPOSAL
Morrow RutaFranceAsiya Javayant PROPOSAL
Mujtaba NickaCanadaBernardo Dominic QUALIFIED
Jefferson SchemmerGermanyAsiya Javayant NEGOTIATION
Wickens NestleIndiaIvan Magalhaes QUALIFIED
Wickens NestleSpainStephen Shaw QUALIFIED
Smith GlickRussiaAmy Elsner RENEWAL
Misaki RoysterItalyIoni Bowcher UNQUALIFIED
Leja CaldareraSpainOnyama Limba NEW
Smith GlickCanadaXuxue Feng RENEWAL
Jeanfrancois VenereSpainBernardo Dominic PROPOSAL
Maisha RulapaughGermanyStephen Shaw RENEWAL
Antonio CaudyUnited KingdomXuxue Feng RENEWAL
Kadeem FlosiAustraliaAnna Fali QUALIFIED
Adams MorascaFranceElwin Sharvill PROPOSAL
Isabel BowleyAustraliaAnna Fali NEGOTIATION
Salvatore StockhamCanadaElwin Sharvill PROPOSAL
Greenwood BologniaItalyStephen Shaw NEW
Mujtaba NickaBrazilIvan Magalhaes QUALIFIED
David DarakjyRussiaAnna Fali NEGOTIATION
Francesco ShinkoJapanXuxue Feng RENEWAL
Claire TollnerSpainOnyama Limba NEW
Mayumi KolmetzAustraliaElwin Sharvill NEGOTIATION
Emily WhobreyGermanyOnyama Limba NEGOTIATION
Mujtaba NickaGermanyStephen Shaw RENEWAL
Salvatore StockhamUnited KingdomXuxue Feng NEGOTIATION
Aika InouyeCanadaAsiya Javayant NEGOTIATION
Leja CaldareraCanadaAmy Elsner NEGOTIATION
Emily WhobreyFranceOnyama Limba UNQUALIFIED
Kaitlin OstroskyBrazilBernardo Dominic UNQUALIFIED
Alejandro PerinSpainXuxue Feng NEW
Morrow RutaUnited KingdomElwin Sharvill RENEWAL
Murillo MaletAustraliaIoni Bowcher PROPOSAL
Jennifer AmigonAustraliaIoni Bowcher PROPOSAL
Octavia MaletItalyAsiya Javayant QUALIFIED
Stacey MacleadJapanStephen Shaw UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Deepesh ChuiSpainOnyama Limba QUALIFIED
Maisha RulapaughArgentinaElwin Sharvill UNQUALIFIED
Jones VocelkaRussiaStephen Shaw QUALIFIED
Ricardo GauchoUnited KingdomIoni Bowcher QUALIFIED
Nicolas IturbideSpainStephen Shaw QUALIFIED
Octavia MaletAustraliaXuxue Feng NEGOTIATION
Cody SaylorsSpainBernardo Dominic RENEWAL
Greenwood BologniaGermanyIoni Bowcher NEGOTIATION
Aditya KuskoFranceElwin Sharvill RENEWAL
Smith GlickItalyAsiya Javayant QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Misaki RoysterItaly2025-03-07Buckley Miller Wright NEGOTIATION52Elwin Sharvill
1001Costa DilliardUnited Kingdom2025-03-17Chapman, Ross E Esq RENEWAL67Onyama Limba
1002Costa DilliardSpain2025-03-20Benton, John B Jr NEW98Bernardo Dominic
1003Murillo MaletJapan2025-03-21King, Christopher A Esq NEGOTIATION18Ioni Bowcher
1004Mayumi KolmetzArgentina2025-03-18Commercial Press NEGOTIATION64Ivan Magalhaes
1005Mujtaba NickaGermany2025-04-02Feltz Printing Service PROPOSAL34Elwin Sharvill
1006David DarakjyRussia2025-03-24Dorl, James J Esq NEW12Asiya Javayant
1007James ButtUnited Kingdom2025-03-12Feltz Printing Service PROPOSAL61Elwin Sharvill
1008Jennifer AmigonIndia2025-03-13Buckley Miller Wright NEW42Asiya Javayant
1009Darci PoquetteBrazil2025-03-08Dorl, James J Esq PROPOSAL73Asiya Javayant
1010Faith GillianAustralia2025-03-06Printing Dimensions QUALIFIED90Elwin Sharvill
1011Nicolas IturbideGermany2025-03-14Buckley Miller Wright RENEWAL22Xuxue Feng
1012David DarakjyUnited Kingdom2025-03-26Morlong Associates NEW59Xuxue Feng
1013Morrow RutaAustralia2025-03-17Buckley Miller Wright RENEWAL80Ivan Magalhaes
1014Adams MorascaSpain2025-04-01Morlong Associates RENEWAL31Xuxue Feng
1015Izzy GarufiSpain2025-03-24Truhlar And Truhlar Attys RENEWAL2Ivan Magalhaes
1016Isabel BowleyGermany2025-03-29Chemel, James L Cpa QUALIFIED37Elwin Sharvill
1017Munro FerenczArgentina2025-03-11Chapman, Ross E Esq PROPOSAL0Anna Fali
1018Nicolas IturbideUnited Kingdom2025-03-18Truhlar And Truhlar Attys NEGOTIATION3Ivan Magalhaes
1019Costa DilliardBrazil2025-03-18Morlong Associates UNQUALIFIED16Amy Elsner
1020Alejandro PerinArgentina2025-03-14King, Christopher A Esq QUALIFIED37Ivan Magalhaes
1021Octavia MaletCanada2025-03-28Morlong Associates NEW81Bernardo Dominic
1022Emily WhobreyGermany2025-03-21Printing Dimensions NEGOTIATION99Bernardo Dominic
1023Mujtaba NickaArgentina2025-03-06King, Christopher A Esq PROPOSAL83Elwin Sharvill
1024Stacey MacleadBrazil2025-03-26Printing Dimensions NEGOTIATION49Ivan Magalhaes
1025Octavia MaletAustralia2025-04-02Chemel, James L Cpa RENEWAL8Stephen Shaw
1026Darci PoquetteRussia2025-03-26Printing Dimensions NEGOTIATION24Ioni Bowcher
1027Aika InouyeAustralia2025-03-29Benton, John B Jr UNQUALIFIED41Asiya Javayant
1028Arvin AlbaresCanada2025-04-02Chapman, Ross E Esq RENEWAL2Anna Fali
1029Jennifer AmigonJapan2025-03-20Dorl, James J Esq PROPOSAL71Ioni Bowcher
1030Julie StensethSpain2025-04-02Rangoni Of Florence RENEWAL51Elwin Sharvill
1031Darci PoquetteUnited Kingdom2025-04-03Commercial Press PROPOSAL17Amy Elsner
1032Kadeem FlosiIndia2025-03-26Printing Dimensions QUALIFIED57Xuxue Feng
1033Jones VocelkaArgentina2025-04-01Chanay, Jeffrey A Esq RENEWAL1Elwin Sharvill
1034Jones VocelkaBrazil2025-03-26Benton, John B Jr QUALIFIED66Onyama Limba
1035Tony FollerAustralia2025-03-08Feltz Printing Service UNQUALIFIED31Elwin Sharvill
1036Greenwood BologniaSpain2025-03-25Rousseaux, Michael Esq QUALIFIED93Onyama Limba
1037Maria MarrierJapan2025-03-06Rangoni Of Florence NEW13Amy Elsner
1038Ricardo GauchoBrazil2025-04-03Rousseaux, Michael Esq RENEWAL67Amy Elsner
1039Adams MorascaJapan2025-03-09Chapman, Ross E Esq PROPOSAL95Elwin Sharvill
1040Kaitlin OstroskyFrance2025-03-05Truhlar And Truhlar Attys NEW12Bernardo Dominic
1041Ivar PaprockiJapan2025-03-09Truhlar And Truhlar Attys PROPOSAL23Onyama Limba
1042Munro FerenczGermany2025-03-14Chanay, Jeffrey A Esq NEW20Stephen Shaw
1043Silvio SlusarskiArgentina2025-03-19King, Christopher A Esq NEGOTIATION26Amy Elsner
1044Johnson SergiCanada2025-03-06Morlong Associates NEW6Anna Fali
1045Mayumi KolmetzArgentina2025-03-17Printing Dimensions NEW17Xuxue Feng
1046Leja CaldareraGermany2025-03-14Buckley Miller Wright UNQUALIFIED82Xuxue Feng
1047Munro FerenczGermany2025-03-26Buckley Miller Wright RENEWAL44Ioni Bowcher
1048Jeanfrancois VenereRussia2025-03-29Rangoni Of Florence QUALIFIED63Asiya Javayant
1049Morrow RutaJapan2025-03-21Rangoni Of Florence RENEWAL8Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Cody SaylorsCanadaElwin Sharvill UNQUALIFIED
Emily WhobreyUnited KingdomAmy Elsner PROPOSAL
Darci PoquetteUnited KingdomBernardo Dominic NEW
Sinclair WaycottBrazilAnna Fali RENEWAL
Wickens NestleFranceAnna Fali QUALIFIED
Faith GillianSpainStephen Shaw PROPOSAL
Ricardo GauchoUnited KingdomXuxue Feng RENEWAL
Tony FollerIndiaElwin Sharvill UNQUALIFIED
Izzy GarufiCanadaElwin Sharvill UNQUALIFIED
Smith GlickCanadaStephen Shaw NEW
Maria MarrierIndiaAmy Elsner UNQUALIFIED
Arvin AlbaresItalyBernardo Dominic NEW
Rodrigues CampainJapanXuxue Feng UNQUALIFIED
Darci PoquetteRussiaAsiya Javayant RENEWAL
Adams MorascaCanadaElwin Sharvill PROPOSAL
Murillo MaletArgentinaAnna Fali NEGOTIATION
Smith GlickFranceAsiya Javayant RENEWAL
Aika InouyeArgentinaElwin Sharvill NEGOTIATION
Leja CaldareraBrazilAmy Elsner UNQUALIFIED
Jefferson SchemmerCanadaBernardo Dominic PROPOSAL
Cody SaylorsUnited KingdomAsiya Javayant NEW
Juan WieserBrazilElwin Sharvill RENEWAL
Leon OldroydGermanyAnna Fali NEGOTIATION
Aika InouyeSpainElwin Sharvill RENEWAL
Stacey MacleadGermanyAsiya Javayant UNQUALIFIED
Aditya KuskoGermanyAmy Elsner PROPOSAL
Clifford RimUnited KingdomIoni Bowcher NEW
Francesco ShinkoItalyAmy Elsner RENEWAL
Aditya KuskoUnited KingdomAsiya Javayant NEGOTIATION
Kadeem FlosiArgentinaElwin Sharvill UNQUALIFIED
Greenwood BologniaFranceAnna Fali PROPOSAL
Tony FollerArgentinaIoni Bowcher RENEWAL
Cody SaylorsFranceAsiya Javayant QUALIFIED
Francesco ShinkoBrazilXuxue Feng NEW
Izzy GarufiSpainXuxue Feng UNQUALIFIED
Mayumi KolmetzCanadaStephen Shaw NEGOTIATION
James ButtIndiaAmy Elsner UNQUALIFIED
Rodrigues CampainJapanAsiya Javayant RENEWAL
Jennifer AmigonGermanyElwin Sharvill NEW
Greenwood BologniaCanadaAmy Elsner RENEWAL
Wickens NestleJapanElwin Sharvill NEW
Munro FerenczCanadaIvan Magalhaes PROPOSAL
Silvio SlusarskiArgentinaAmy Elsner RENEWAL
Salvatore StockhamItalyIvan Magalhaes UNQUALIFIED
Clifford RimJapanStephen Shaw PROPOSAL
Francesco ShinkoSpainIoni Bowcher QUALIFIED
Rodrigues CampainUnited KingdomAnna Fali UNQUALIFIED
Jefferson SchemmerJapanStephen Shaw PROPOSAL
Morrow RutaSpainBernardo Dominic RENEWAL
Darci PoquetteUnited KingdomBernardo Dominic NEW
Frozen Columns
Name
Misaki Royster
Juan Wieser
Maisha Rulapaugh
Rodrigues Campain
Smith Glick
Johnson Sergi
Alejandro Perin
Ivar Paprocki
Silvio Slusarski
Murillo Malet
Stacey Maclead
Deepesh Chui
Leja Caldarera
Darci Poquette
Jeanfrancois Venere
Aruna Figeroa
Isabel Bowley
Mayumi Kolmetz
Munro Ferencz
Johnson Sergi
Silvio Slusarski
Ashley Doe
Chavez Briddick
Cody Saylors
Nicolas Iturbide
Darci Poquette
Ricardo Gaucho
Leon Oldroyd
Silvio Slusarski
Adams Morasca
Misaki Royster
Alejandro Perin
Juan Wieser
Misaki Royster
Maisha Rulapaugh
Adams Morasca
Isabel Bowley
Maisha Rulapaugh
Aruna Figeroa
Jones Vocelka
David Darakjy
Aruna Figeroa
Aruna Figeroa
Nicolas Iturbide
Mayumi Kolmetz
Murillo Malet
Kadeem Flosi
Isabel Bowley
Maisha Rulapaugh
Leon Oldroyd
IdCountryDate
1000Canada2025-03-27
1001Russia2025-03-11
1002Japan2025-03-31
1003Brazil2025-03-14
1004Canada2025-03-25
1005Spain2025-03-15
1006United Kingdom2025-04-02
1007Canada2025-03-09
1008Brazil2025-03-16
1009Spain2025-03-05
1010India2025-03-18
1011United Kingdom2025-03-31
1012Canada2025-03-30
1013India2025-03-15
1014Italy2025-04-02
1015Germany2025-03-22
1016Spain2025-03-08
1017United Kingdom2025-03-19
1018Germany2025-03-30
1019Italy2025-03-21
1020Germany2025-03-12
1021India2025-03-20
1022Russia2025-03-05
1023Spain2025-04-02
1024Australia2025-03-12
1025Germany2025-03-13
1026Canada2025-03-11
1027Russia2025-03-23
1028Argentina2025-03-25
1029Australia2025-03-14
1030Spain2025-04-01
1031Japan2025-03-07
1032Spain2025-03-06
1033France2025-03-09
1034United Kingdom2025-03-05
1035United Kingdom2025-03-24
1036Germany2025-03-13
1037Russia2025-04-02
1038Australia2025-03-09
1039Brazil2025-03-28
1040Canada2025-03-22
1041United Kingdom2025-03-19
1042Australia2025-03-30
1043Argentina2025-03-07
1044Canada2025-03-15
1045Germany2025-03-10
1046Canada2025-03-14
1047Italy2025-03-11
1048Russia2025-04-02
1049Spain2025-03-06

On-Demand Data

NameIdCountryDate
Arvin Albares1000Argentina2025-03-09
Ashley Doe1001Canada2025-03-05
Clifford Rim1002Spain2025-03-15
Clifford Rim1003France2025-03-08
Antonio Caudy1004Canada2025-03-09
Adams Morasca1005Spain2025-03-27
Faith Gillian1006Russia2025-03-06
Jones Vocelka1007Germany2025-03-23
Izzy Garufi1008India2025-03-06
Jones Vocelka1009Argentina2025-03-11
Clifford Rim1010Russia2025-03-25
Darci Poquette1011Spain2025-03-17
Ivar Paprocki1012Germany2025-04-01
Mayumi Kolmetz1013United Kingdom2025-03-09
Isabel Bowley1014Germany2025-03-12
Clifford Rim1015United Kingdom2025-03-29
James Butt1016India2025-03-08
Francesco Shinko1017Germany2025-03-06
Octavia Malet1018Germany2025-03-08
Cody Saylors1019Argentina2025-03-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Juan WieserFranceIvan Magalhaes PROPOSAL
Greenwood BologniaRussiaBernardo Dominic QUALIFIED
Ashley DoeUnited KingdomAmy Elsner NEGOTIATION
Cody SaylorsFranceElwin Sharvill RENEWAL
Adams MorascaIndiaXuxue Feng QUALIFIED
Murillo MaletArgentinaOnyama Limba NEGOTIATION
Johnson SergiSpainXuxue Feng NEW
Salvatore StockhamIndiaAsiya Javayant NEW
Greenwood BologniaItalyAnna Fali RENEWAL
Julie StensethJapanStephen Shaw NEGOTIATION
Silvio SlusarskiCanadaBernardo Dominic NEW
Octavia MaletGermanyBernardo Dominic UNQUALIFIED
Claire TollnerItalyOnyama Limba PROPOSAL
Munro FerenczItalyAsiya Javayant NEGOTIATION
Mujtaba NickaRussiaAsiya Javayant NEGOTIATION
Stacey MacleadSpainIvan Magalhaes PROPOSAL
Greenwood BologniaUnited KingdomIvan Magalhaes QUALIFIED
Kaitlin OstroskyRussiaBernardo Dominic PROPOSAL
Chavez BriddickItalyAsiya Javayant RENEWAL
Faith GillianJapanIoni Bowcher QUALIFIED
Sinclair WaycottIndiaBernardo Dominic RENEWAL
Misaki RoysterAustraliaElwin Sharvill UNQUALIFIED
Nicolas IturbideGermanyAsiya Javayant NEW
Maria MarrierBrazilXuxue Feng RENEWAL
Alejandro PerinSpainXuxue Feng RENEWAL
Munro FerenczSpainAmy Elsner RENEWAL
Ricardo GauchoUnited KingdomAnna Fali QUALIFIED
Chavez BriddickBrazilAmy Elsner NEW
Ricardo GauchoIndiaStephen Shaw PROPOSAL
Stacey MacleadCanadaOnyama Limba PROPOSAL
Maisha RulapaughCanadaBernardo Dominic PROPOSAL
Leja CaldareraItalyBernardo Dominic UNQUALIFIED
Johnson SergiArgentinaIoni Bowcher UNQUALIFIED
Emily WhobreyItalyBernardo Dominic PROPOSAL
Morrow RutaIndiaAmy Elsner QUALIFIED
Costa DilliardIndiaXuxue Feng QUALIFIED
Kadeem FlosiIndiaStephen Shaw PROPOSAL
Isabel BowleyGermanyAsiya Javayant NEW
Stacey MacleadJapanElwin Sharvill NEW
Greenwood BologniaCanadaOnyama Limba 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>