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
Jefferson SchemmerRussiaStephen Shaw UNQUALIFIED
Misaki RoysterIndiaAmy Elsner RENEWAL
Misaki RoysterAustraliaIvan Magalhaes UNQUALIFIED
Tony FollerFranceElwin Sharvill NEW
Francesco ShinkoFranceStephen Shaw NEW
Aruna FigeroaRussiaIvan Magalhaes QUALIFIED
David DarakjyRussiaXuxue Feng NEGOTIATION
Ivar PaprockiBrazilOnyama Limba NEW
Smith GlickArgentinaOnyama Limba PROPOSAL
Jeanfrancois VenereCanadaIoni Bowcher PROPOSAL
Francesco ShinkoGermanyBernardo Dominic QUALIFIED
Greenwood BologniaAustraliaStephen Shaw QUALIFIED
Julie StensethUnited KingdomXuxue Feng RENEWAL
Greenwood BologniaArgentinaElwin Sharvill UNQUALIFIED
Aruna FigeroaArgentinaStephen Shaw UNQUALIFIED
Deepesh ChuiCanadaAmy Elsner QUALIFIED
Stacey MacleadJapanOnyama Limba UNQUALIFIED
Wickens NestleBrazilXuxue Feng NEGOTIATION
Julie StensethFranceBernardo Dominic QUALIFIED
Julie StensethSpainAnna Fali QUALIFIED
Cody SaylorsArgentinaXuxue Feng PROPOSAL
Alejandro PerinSpainElwin Sharvill QUALIFIED
Jennifer AmigonSpainXuxue Feng NEW
Jennifer AmigonGermanyOnyama Limba UNQUALIFIED
Costa DilliardIndiaIoni Bowcher NEGOTIATION
Maisha RulapaughJapanIvan Magalhaes QUALIFIED
Kaitlin OstroskyRussiaIvan Magalhaes NEGOTIATION
Jennifer AmigonItalyOnyama Limba PROPOSAL
Greenwood BologniaArgentinaIvan Magalhaes NEW
Emily WhobreyJapanElwin Sharvill NEW
Adams MorascaRussiaAsiya Javayant NEW
Juan WieserAustraliaAsiya Javayant QUALIFIED
Jennifer AmigonAustraliaIoni Bowcher NEGOTIATION
Sinclair WaycottJapanXuxue Feng QUALIFIED
Smith GlickCanadaStephen Shaw RENEWAL
Smith GlickBrazilAmy Elsner UNQUALIFIED
Juan WieserFranceXuxue Feng RENEWAL
Darci PoquetteCanadaIoni Bowcher NEGOTIATION
Salvatore StockhamGermanyXuxue Feng NEGOTIATION
Misaki RoysterFranceIvan Magalhaes UNQUALIFIED
Darci PoquetteUnited KingdomAsiya Javayant RENEWAL
Jennifer AmigonArgentinaXuxue Feng QUALIFIED
Tony FollerGermanyAsiya Javayant NEW
David DarakjyRussiaBernardo Dominic QUALIFIED
Isabel BowleyFranceOnyama Limba UNQUALIFIED
Rodrigues CampainFranceOnyama Limba NEGOTIATION
Silvio SlusarskiBrazilStephen Shaw NEW
Octavia MaletCanadaOnyama Limba NEGOTIATION
Stacey MacleadBrazilXuxue Feng UNQUALIFIED
Smith GlickJapanXuxue Feng UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
David DarakjyJapanStephen Shaw PROPOSAL
Claire TollnerUnited KingdomBernardo Dominic UNQUALIFIED
Murillo MaletAustraliaAnna Fali PROPOSAL
Kadeem FlosiBrazilXuxue Feng UNQUALIFIED
Ivar PaprockiSpainBernardo Dominic RENEWAL
Smith GlickGermanyIvan Magalhaes PROPOSAL
Nicolas IturbideFranceIoni Bowcher UNQUALIFIED
Chavez BriddickRussiaIoni Bowcher PROPOSAL
Antonio CaudyJapanElwin Sharvill NEW
Ricardo GauchoSpainBernardo Dominic UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Leja CaldareraAustralia2025-08-02Chapman, Ross E Esq PROPOSAL88Anna Fali
1001David DarakjyFrance2025-08-12Morlong Associates PROPOSAL6Ioni Bowcher
1002Jones VocelkaIndia2025-08-15Rousseaux, Michael Esq PROPOSAL72Stephen Shaw
1003Johnson SergiItaly2025-08-13Chapman, Ross E Esq RENEWAL70Elwin Sharvill
1004Maisha RulapaughIndia2025-08-03Rangoni Of Florence QUALIFIED50Stephen Shaw
1005Jeanfrancois VenereRussia2025-08-10King, Christopher A Esq UNQUALIFIED33Bernardo Dominic
1006Cody SaylorsIndia2025-07-30Truhlar And Truhlar Attys UNQUALIFIED40Elwin Sharvill
1007Stacey MacleadBrazil2025-07-23Truhlar And Truhlar Attys PROPOSAL14Bernardo Dominic
1008David DarakjyIndia2025-08-20Chapman, Ross E Esq NEW94Ivan Magalhaes
1009Aditya KuskoBrazil2025-08-01Buckley Miller Wright RENEWAL38Elwin Sharvill
1010Isabel BowleyCanada2025-08-18Chemel, James L Cpa NEGOTIATION45Stephen Shaw
1011Ivar PaprockiGermany2025-08-16Benton, John B Jr NEW50Ivan Magalhaes
1012Tony FollerIndia2025-07-31Chemel, James L Cpa NEGOTIATION49Stephen Shaw
1013Alejandro PerinAustralia2025-08-13Chapman, Ross E Esq RENEWAL83Onyama Limba
1014Julie StensethItaly2025-08-10Morlong Associates RENEWAL9Stephen Shaw
1015Rodrigues CampainJapan2025-07-25Rangoni Of Florence NEW1Elwin Sharvill
1016Wickens NestleSpain2025-08-10Truhlar And Truhlar Attys NEGOTIATION5Bernardo Dominic
1017Aika InouyeUnited Kingdom2025-08-07Buckley Miller Wright UNQUALIFIED17Ioni Bowcher
1018Tony FollerArgentina2025-08-19Printing Dimensions UNQUALIFIED36Onyama Limba
1019Aditya KuskoRussia2025-07-28Benton, John B Jr PROPOSAL13Anna Fali
1020Leon OldroydUnited Kingdom2025-08-06Rousseaux, Michael Esq NEGOTIATION9Stephen Shaw
1021Jeanfrancois VenereAustralia2025-07-31Feltz Printing Service PROPOSAL66Stephen Shaw
1022Deepesh ChuiUnited Kingdom2025-08-19Rangoni Of Florence NEW55Bernardo Dominic
1023Francesco ShinkoUnited Kingdom2025-08-18Benton, John B Jr NEGOTIATION0Ivan Magalhaes
1024Salvatore StockhamAustralia2025-07-29Benton, John B Jr PROPOSAL10Ioni Bowcher
1025Smith GlickSpain2025-08-02Printing Dimensions RENEWAL46Ivan Magalhaes
1026Nicolas IturbideBrazil2025-08-06Benton, John B Jr QUALIFIED80Ivan Magalhaes
1027Costa DilliardJapan2025-07-23Rangoni Of Florence RENEWAL60Onyama Limba
1028Ashley DoeBrazil2025-08-17Printing Dimensions RENEWAL90Ioni Bowcher
1029Ashley DoeUnited Kingdom2025-08-19Benton, John B Jr NEGOTIATION92Asiya Javayant
1030Julie StensethJapan2025-08-01Feltz Printing Service QUALIFIED37Asiya Javayant
1031Tony FollerJapan2025-07-30Benton, John B Jr NEGOTIATION61Bernardo Dominic
1032Juan WieserUnited Kingdom2025-07-26Rangoni Of Florence NEW34Anna Fali
1033Tony FollerRussia2025-08-04Printing Dimensions PROPOSAL52Ioni Bowcher
1034Jones VocelkaUnited Kingdom2025-07-28Chemel, James L Cpa UNQUALIFIED87Anna Fali
1035Smith GlickIndia2025-07-26Commercial Press NEGOTIATION82Stephen Shaw
1036Morrow RutaFrance2025-08-10Truhlar And Truhlar Attys UNQUALIFIED10Xuxue Feng
1037Arvin AlbaresItaly2025-07-31Feiner Bros UNQUALIFIED55Asiya Javayant
1038Cody SaylorsAustralia2025-07-24Benton, John B Jr QUALIFIED84Ioni Bowcher
1039Mayumi KolmetzFrance2025-08-10King, Christopher A Esq NEGOTIATION66Amy Elsner
1040Sinclair WaycottItaly2025-08-06Rangoni Of Florence NEGOTIATION81Elwin Sharvill
1041Kaitlin OstroskyArgentina2025-08-16Chanay, Jeffrey A Esq PROPOSAL33Ioni Bowcher
1042Kadeem FlosiRussia2025-08-14Benton, John B Jr QUALIFIED55Elwin Sharvill
1043Maria MarrierArgentina2025-08-15Commercial Press QUALIFIED77Onyama Limba
1044Mujtaba NickaSpain2025-08-01Morlong Associates UNQUALIFIED50Ivan Magalhaes
1045Leja CaldareraBrazil2025-07-29Benton, John B Jr QUALIFIED7Bernardo Dominic
1046Arvin AlbaresGermany2025-07-31Commercial Press RENEWAL94Ivan Magalhaes
1047Aditya KuskoAustralia2025-08-11Morlong Associates UNQUALIFIED24Asiya Javayant
1048Juan WieserBrazil2025-07-28Chemel, James L Cpa QUALIFIED52Elwin Sharvill
1049Arvin AlbaresRussia2025-07-24Morlong Associates NEGOTIATION13Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Ashley DoeBrazilAmy Elsner PROPOSAL
Cody SaylorsRussiaAmy Elsner QUALIFIED
Aditya KuskoCanadaIoni Bowcher NEGOTIATION
Jefferson SchemmerRussiaAnna Fali NEW
Misaki RoysterGermanyAnna Fali PROPOSAL
David DarakjyGermanyIoni Bowcher RENEWAL
Aruna FigeroaGermanyXuxue Feng UNQUALIFIED
Aruna FigeroaRussiaStephen Shaw NEW
Wickens NestleUnited KingdomAmy Elsner PROPOSAL
Cody SaylorsGermanyStephen Shaw NEW
Chavez BriddickJapanOnyama Limba NEGOTIATION
Tony FollerFranceXuxue Feng NEGOTIATION
Aditya KuskoBrazilAmy Elsner NEGOTIATION
Jones VocelkaItalyOnyama Limba QUALIFIED
Mujtaba NickaBrazilIvan Magalhaes UNQUALIFIED
Misaki RoysterBrazilAmy Elsner PROPOSAL
Claire TollnerIndiaBernardo Dominic NEW
Maria MarrierArgentinaAnna Fali NEW
Cody SaylorsUnited KingdomAsiya Javayant RENEWAL
Faith GillianAustraliaElwin Sharvill RENEWAL
Mayumi KolmetzItalyIvan Magalhaes NEGOTIATION
Faith GillianFranceStephen Shaw NEW
James ButtIndiaBernardo Dominic NEGOTIATION
James ButtUnited KingdomAmy Elsner RENEWAL
Ashley DoeIndiaBernardo Dominic PROPOSAL
Wickens NestleCanadaOnyama Limba PROPOSAL
Nicolas IturbideItalyElwin Sharvill PROPOSAL
Jennifer AmigonJapanIoni Bowcher RENEWAL
Salvatore StockhamBrazilAsiya Javayant NEGOTIATION
Deepesh ChuiSpainIvan Magalhaes RENEWAL
Emily WhobreyGermanyIvan Magalhaes RENEWAL
Aruna FigeroaGermanyAnna Fali NEW
Mayumi KolmetzItalyIvan Magalhaes NEW
Jennifer AmigonArgentinaAnna Fali PROPOSAL
Faith GillianFranceAsiya Javayant UNQUALIFIED
Morrow RutaItalyElwin Sharvill QUALIFIED
Aika InouyeIndiaBernardo Dominic RENEWAL
Nicolas IturbideIndiaXuxue Feng PROPOSAL
Kadeem FlosiIndiaElwin Sharvill QUALIFIED
Julie StensethGermanyAnna Fali NEGOTIATION
Octavia MaletUnited KingdomIvan Magalhaes UNQUALIFIED
Octavia MaletUnited KingdomAsiya Javayant QUALIFIED
Julie StensethFranceAnna Fali PROPOSAL
Isabel BowleyBrazilBernardo Dominic PROPOSAL
Tony FollerUnited KingdomElwin Sharvill QUALIFIED
Arvin AlbaresBrazilXuxue Feng NEGOTIATION
Greenwood BologniaCanadaAsiya Javayant PROPOSAL
Leon OldroydIndiaAsiya Javayant RENEWAL
Tony FollerGermanyAsiya Javayant UNQUALIFIED
Mujtaba NickaRussiaXuxue Feng PROPOSAL
Frozen Columns
Name
Antonio Caudy
Morrow Ruta
Sinclair Waycott
Tony Foller
Silvio Slusarski
Darci Poquette
Darci Poquette
Kadeem Flosi
Izzy Garufi
Juan Wieser
Mayumi Kolmetz
Leja Caldarera
Misaki Royster
Johnson Sergi
Chavez Briddick
Nicolas Iturbide
Sinclair Waycott
Tony Foller
Alejandro Perin
Jones Vocelka
Mayumi Kolmetz
Mayumi Kolmetz
Claire Tollner
Francesco Shinko
Munro Ferencz
Smith Glick
Alejandro Perin
Izzy Garufi
Antonio Caudy
Kaitlin Ostrosky
Munro Ferencz
Ashley Doe
Stacey Maclead
Johnson Sergi
Smith Glick
Costa Dilliard
Rodrigues Campain
Cody Saylors
Tony Foller
Aika Inouye
Nicolas Iturbide
Maria Marrier
Cody Saylors
Murillo Malet
Sinclair Waycott
Mujtaba Nicka
Aditya Kusko
Wickens Nestle
Juan Wieser
Adams Morasca
IdCountryDate
1000Germany2025-08-04
1001Argentina2025-07-30
1002India2025-07-23
1003Australia2025-08-01
1004Canada2025-08-07
1005Japan2025-07-26
1006Russia2025-07-30
1007Italy2025-08-14
1008Russia2025-07-29
1009Japan2025-08-14
1010Canada2025-07-28
1011Russia2025-08-16
1012Canada2025-07-30
1013Spain2025-07-22
1014Argentina2025-08-19
1015Australia2025-08-08
1016Canada2025-08-17
1017Japan2025-08-14
1018India2025-08-20
1019Russia2025-08-11
1020Japan2025-08-17
1021Spain2025-07-30
1022France2025-07-22
1023Italy2025-07-22
1024Canada2025-08-09
1025Italy2025-07-25
1026United Kingdom2025-08-07
1027Canada2025-08-11
1028India2025-08-03
1029Argentina2025-07-27
1030Spain2025-08-12
1031United Kingdom2025-07-29
1032Argentina2025-07-23
1033Australia2025-08-07
1034United Kingdom2025-08-14
1035Russia2025-08-08
1036United Kingdom2025-08-17
1037Brazil2025-07-27
1038India2025-08-12
1039United Kingdom2025-08-14
1040France2025-08-06
1041Brazil2025-08-16
1042India2025-08-10
1043Japan2025-08-15
1044Italy2025-08-07
1045Canada2025-08-19
1046Germany2025-08-13
1047Canada2025-07-26
1048Canada2025-08-16
1049Japan2025-08-04

On-Demand Data

NameIdCountryDate
Aditya Kusko1000Canada2025-08-03
Leja Caldarera1001Japan2025-08-12
Emily Whobrey1002Argentina2025-08-11
Ivar Paprocki1003Argentina2025-08-10
Maisha Rulapaugh1004Italy2025-08-02
Chavez Briddick1005Australia2025-08-20
Aditya Kusko1006United Kingdom2025-08-02
Smith Glick1007Spain2025-07-24
Wickens Nestle1008United Kingdom2025-08-17
Stacey Maclead1009Australia2025-08-12
Leja Caldarera1010Argentina2025-08-14
Jones Vocelka1011Argentina2025-07-26
Adams Morasca1012Spain2025-08-10
Stacey Maclead1013Canada2025-07-23
Ivar Paprocki1014Japan2025-08-09
Wickens Nestle1015India2025-08-03
Tony Foller1016France2025-07-28
Juan Wieser1017Argentina2025-08-10
Julie Stenseth1018Australia2025-08-17
Faith Gillian1019Russia2025-08-14
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Octavia MaletItalyBernardo Dominic QUALIFIED
Francesco ShinkoFranceXuxue Feng NEW
Juan WieserUnited KingdomBernardo Dominic RENEWAL
Ashley DoeGermanyOnyama Limba UNQUALIFIED
Leja CaldareraSpainIvan Magalhaes QUALIFIED
Chavez BriddickBrazilAmy Elsner QUALIFIED
Sinclair WaycottAustraliaAsiya Javayant PROPOSAL
Arvin AlbaresArgentinaAnna Fali NEW
Aruna FigeroaGermanyElwin Sharvill RENEWAL
Deepesh ChuiFranceElwin Sharvill NEGOTIATION
Jennifer AmigonFranceElwin Sharvill PROPOSAL
Deepesh ChuiBrazilIoni Bowcher PROPOSAL
Antonio CaudyArgentinaElwin Sharvill PROPOSAL
Greenwood BologniaGermanyOnyama Limba QUALIFIED
Cody SaylorsAustraliaIvan Magalhaes PROPOSAL
Emily WhobreyUnited KingdomBernardo Dominic RENEWAL
David DarakjyUnited KingdomIvan Magalhaes UNQUALIFIED
Arvin AlbaresRussiaXuxue Feng NEGOTIATION
Misaki RoysterAustraliaIvan Magalhaes PROPOSAL
Stacey MacleadUnited KingdomIvan Magalhaes QUALIFIED
Antonio CaudyBrazilAsiya Javayant PROPOSAL
David DarakjyBrazilStephen Shaw UNQUALIFIED
Rodrigues CampainSpainIvan Magalhaes NEGOTIATION
Costa DilliardRussiaAmy Elsner UNQUALIFIED
Murillo MaletCanadaAmy Elsner UNQUALIFIED
Octavia MaletSpainAsiya Javayant QUALIFIED
Izzy GarufiBrazilAnna Fali NEW
Stacey MacleadArgentinaAsiya Javayant UNQUALIFIED
Mujtaba NickaBrazilAsiya Javayant QUALIFIED
Jefferson SchemmerFranceStephen Shaw QUALIFIED
Nicolas IturbideIndiaXuxue Feng NEW
Aditya KuskoSpainAmy Elsner UNQUALIFIED
Isabel BowleySpainXuxue Feng RENEWAL
Tony FollerGermanyXuxue Feng PROPOSAL
Leon OldroydSpainAnna Fali NEW
David DarakjyBrazilOnyama Limba UNQUALIFIED
Chavez BriddickCanadaXuxue Feng QUALIFIED
Jeanfrancois VenereUnited KingdomIoni Bowcher RENEWAL
Juan WieserBrazilStephen Shaw QUALIFIED
Greenwood BologniaFranceStephen Shaw 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>