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
Emily WhobreyCanadaBernardo Dominic NEW
Chavez BriddickAustraliaAsiya Javayant UNQUALIFIED
Mayumi KolmetzBrazilOnyama Limba NEW
Kadeem FlosiIndiaIoni Bowcher PROPOSAL
Clifford RimJapanAsiya Javayant NEGOTIATION
Morrow RutaGermanyElwin Sharvill UNQUALIFIED
Jennifer AmigonGermanyStephen Shaw RENEWAL
Murillo MaletUnited KingdomStephen Shaw PROPOSAL
Emily WhobreyCanadaXuxue Feng RENEWAL
Leja CaldareraRussiaAmy Elsner RENEWAL
Ashley DoeItalyAsiya Javayant QUALIFIED
Mayumi KolmetzBrazilElwin Sharvill NEW
Costa DilliardJapanIvan Magalhaes PROPOSAL
Faith GillianGermanyOnyama Limba PROPOSAL
Morrow RutaSpainIvan Magalhaes PROPOSAL
Maria MarrierJapanIoni Bowcher UNQUALIFIED
Aruna FigeroaUnited KingdomAnna Fali PROPOSAL
Juan WieserItalyIoni Bowcher NEW
Maisha RulapaughFranceBernardo Dominic RENEWAL
Misaki RoysterIndiaBernardo Dominic PROPOSAL
Ivar PaprockiBrazilIoni Bowcher NEW
Rodrigues CampainGermanyIoni Bowcher NEW
Julie StensethItalyIvan Magalhaes UNQUALIFIED
Aditya KuskoArgentinaAnna Fali QUALIFIED
Adams MorascaUnited KingdomAnna Fali QUALIFIED
Rodrigues CampainSpainIoni Bowcher QUALIFIED
Mujtaba NickaJapanBernardo Dominic PROPOSAL
Ivar PaprockiFranceXuxue Feng NEW
Aruna FigeroaUnited KingdomIvan Magalhaes RENEWAL
Kaitlin OstroskyFranceXuxue Feng NEW
Aruna FigeroaBrazilStephen Shaw NEGOTIATION
Johnson SergiSpainBernardo Dominic RENEWAL
Mujtaba NickaCanadaXuxue Feng QUALIFIED
Faith GillianFranceBernardo Dominic UNQUALIFIED
Misaki RoysterItalyXuxue Feng RENEWAL
Morrow RutaItalyAsiya Javayant QUALIFIED
Leja CaldareraArgentinaAmy Elsner QUALIFIED
Jennifer AmigonBrazilAsiya Javayant QUALIFIED
Morrow RutaIndiaOnyama Limba QUALIFIED
Maria MarrierAustraliaIvan Magalhaes NEW
Julie StensethBrazilIoni Bowcher QUALIFIED
Claire TollnerCanadaXuxue Feng NEW
Murillo MaletSpainIoni Bowcher UNQUALIFIED
Rodrigues CampainUnited KingdomAsiya Javayant PROPOSAL
Kaitlin OstroskyFranceIvan Magalhaes NEGOTIATION
Jennifer AmigonItalyXuxue Feng UNQUALIFIED
Maria MarrierItalyStephen Shaw QUALIFIED
Ricardo GauchoCanadaElwin Sharvill RENEWAL
Faith GillianRussiaIvan Magalhaes PROPOSAL
Morrow RutaUnited KingdomElwin Sharvill NEW
Horizontal
NameCountryRepresentativeStatus
Mayumi KolmetzItalyElwin Sharvill PROPOSAL
Ricardo GauchoGermanyAnna Fali QUALIFIED
Rodrigues CampainItalyStephen Shaw NEW
Mujtaba NickaFranceIoni Bowcher RENEWAL
Kaitlin OstroskyArgentinaAmy Elsner QUALIFIED
Isabel BowleyFranceIvan Magalhaes PROPOSAL
Nicolas IturbideItalyOnyama Limba UNQUALIFIED
Salvatore StockhamAustraliaBernardo Dominic QUALIFIED
Nicolas IturbideCanadaAmy Elsner QUALIFIED
Francesco ShinkoRussiaOnyama Limba UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Leon OldroydBrazil2025-08-15Chanay, Jeffrey A Esq PROPOSAL54Anna Fali
1001Jeanfrancois VenereIndia2025-08-02Feltz Printing Service NEGOTIATION10Elwin Sharvill
1002Jennifer AmigonArgentina2025-08-19Feltz Printing Service RENEWAL80Onyama Limba
1003Misaki RoysterSpain2025-08-24Truhlar And Truhlar Attys QUALIFIED43Onyama Limba
1004Mayumi KolmetzItaly2025-08-14Rangoni Of Florence NEW61Stephen Shaw
1005Darci PoquetteUnited Kingdom2025-08-22Feltz Printing Service RENEWAL40Stephen Shaw
1006Greenwood BologniaCanada2025-08-26Commercial Press QUALIFIED12Anna Fali
1007Leon OldroydFrance2025-08-22Chemel, James L Cpa NEGOTIATION99Asiya Javayant
1008Emily WhobreyGermany2025-08-27Dorl, James J Esq NEW37Bernardo Dominic
1009Wickens NestleFrance2025-08-17Printing Dimensions PROPOSAL49Onyama Limba
1010Mayumi KolmetzAustralia2025-08-29Truhlar And Truhlar Attys UNQUALIFIED14Onyama Limba
1011Morrow RutaBrazil2025-08-08Chemel, James L Cpa NEGOTIATION63Stephen Shaw
1012Morrow RutaRussia2025-08-11Morlong Associates NEGOTIATION84Ivan Magalhaes
1013Rodrigues CampainJapan2025-08-06Truhlar And Truhlar Attys QUALIFIED95Amy Elsner
1014Maria MarrierGermany2025-08-01Rangoni Of Florence NEW0Stephen Shaw
1015Aditya KuskoBrazil2025-08-03Dorl, James J Esq RENEWAL72Amy Elsner
1016Sinclair WaycottAustralia2025-08-26Morlong Associates QUALIFIED45Stephen Shaw
1017Ashley DoeGermany2025-08-03Chemel, James L Cpa NEW0Xuxue Feng
1018Greenwood BologniaJapan2025-08-14Commercial Press QUALIFIED51Asiya Javayant
1019Cody SaylorsJapan2025-08-10Feltz Printing Service NEW84Ioni Bowcher
1020Jones VocelkaRussia2025-08-01Buckley Miller Wright NEGOTIATION34Anna Fali
1021Leja CaldareraAustralia2025-08-21Chanay, Jeffrey A Esq PROPOSAL52Stephen Shaw
1022Greenwood BologniaFrance2025-08-04King, Christopher A Esq NEGOTIATION6Asiya Javayant
1023Claire TollnerSpain2025-08-03Benton, John B Jr QUALIFIED98Ivan Magalhaes
1024Julie StensethItaly2025-08-12Dorl, James J Esq NEW13Stephen Shaw
1025Juan WieserAustralia2025-08-01Truhlar And Truhlar Attys RENEWAL96Ivan Magalhaes
1026Ashley DoeGermany2025-08-10Dorl, James J Esq QUALIFIED8Ioni Bowcher
1027Munro FerenczUnited Kingdom2025-08-19Buckley Miller Wright QUALIFIED61Bernardo Dominic
1028Tony FollerFrance2025-08-11Printing Dimensions PROPOSAL64Ioni Bowcher
1029Wickens NestleIndia2025-08-02Chapman, Ross E Esq NEGOTIATION78Ivan Magalhaes
1030Rodrigues CampainRussia2025-08-29Morlong Associates NEGOTIATION87Xuxue Feng
1031Maria MarrierRussia2025-08-10Chapman, Ross E Esq QUALIFIED24Xuxue Feng
1032Darci PoquetteItaly2025-08-29Rousseaux, Michael Esq UNQUALIFIED3Onyama Limba
1033Kadeem FlosiSpain2025-08-16Truhlar And Truhlar Attys UNQUALIFIED58Stephen Shaw
1034Juan WieserBrazil2025-08-23King, Christopher A Esq RENEWAL77Stephen Shaw
1035Jefferson SchemmerCanada2025-08-07Morlong Associates UNQUALIFIED25Ioni Bowcher
1036James ButtBrazil2025-08-04Feltz Printing Service QUALIFIED37Xuxue Feng
1037Murillo MaletIndia2025-08-11Chemel, James L Cpa RENEWAL57Ioni Bowcher
1038Faith GillianItaly2025-08-17Buckley Miller Wright PROPOSAL21Amy Elsner
1039Claire TollnerJapan2025-08-14Benton, John B Jr RENEWAL34Elwin Sharvill
1040Antonio CaudyCanada2025-08-21Benton, John B Jr RENEWAL35Ivan Magalhaes
1041Deepesh ChuiSpain2025-08-06Commercial Press QUALIFIED86Ivan Magalhaes
1042Silvio SlusarskiJapan2025-08-19Feiner Bros NEGOTIATION34Asiya Javayant
1043Deepesh ChuiGermany2025-08-09Truhlar And Truhlar Attys PROPOSAL19Ivan Magalhaes
1044Alejandro PerinRussia2025-08-11Buckley Miller Wright UNQUALIFIED1Asiya Javayant
1045David DarakjySpain2025-08-03Morlong Associates UNQUALIFIED44Bernardo Dominic
1046Munro FerenczFrance2025-08-21Printing Dimensions QUALIFIED47Ioni Bowcher
1047Aruna FigeroaUnited Kingdom2025-08-13Morlong Associates PROPOSAL57Asiya Javayant
1048Ashley DoeGermany2025-08-01Rousseaux, Michael Esq RENEWAL8Anna Fali
1049Isabel BowleyRussia2025-08-17Truhlar And Truhlar Attys PROPOSAL81Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Ivar PaprockiItalyBernardo Dominic PROPOSAL
Francesco ShinkoArgentinaAmy Elsner NEGOTIATION
Julie StensethUnited KingdomStephen Shaw NEGOTIATION
Ricardo GauchoAustraliaAnna Fali NEW
Mujtaba NickaGermanyAmy Elsner PROPOSAL
Silvio SlusarskiSpainAsiya Javayant UNQUALIFIED
Mujtaba NickaArgentinaAmy Elsner PROPOSAL
Cody SaylorsSpainElwin Sharvill NEGOTIATION
Leja CaldareraBrazilElwin Sharvill UNQUALIFIED
Jeanfrancois VenereRussiaAmy Elsner NEGOTIATION
Aika InouyeSpainAsiya Javayant QUALIFIED
Arvin AlbaresAustraliaIvan Magalhaes QUALIFIED
Munro FerenczRussiaStephen Shaw NEGOTIATION
Jennifer AmigonBrazilElwin Sharvill RENEWAL
Ivar PaprockiFranceIoni Bowcher PROPOSAL
Faith GillianAustraliaElwin Sharvill PROPOSAL
Alejandro PerinFranceAsiya Javayant NEGOTIATION
Aruna FigeroaFranceBernardo Dominic UNQUALIFIED
Silvio SlusarskiGermanyIoni Bowcher RENEWAL
Salvatore StockhamBrazilAnna Fali NEW
Leja CaldareraJapanIoni Bowcher NEGOTIATION
Maria MarrierItalyAnna Fali PROPOSAL
Maisha RulapaughItalyOnyama Limba QUALIFIED
Julie StensethArgentinaXuxue Feng NEW
Adams MorascaBrazilBernardo Dominic NEGOTIATION
Juan WieserIndiaIvan Magalhaes QUALIFIED
Wickens NestleArgentinaOnyama Limba NEGOTIATION
Munro FerenczBrazilOnyama Limba RENEWAL
Arvin AlbaresAustraliaIvan Magalhaes QUALIFIED
Alejandro PerinItalyXuxue Feng UNQUALIFIED
Leja CaldareraItalyStephen Shaw NEGOTIATION
Antonio CaudyGermanyStephen Shaw RENEWAL
Kaitlin OstroskyIndiaAsiya Javayant QUALIFIED
Aika InouyeJapanAsiya Javayant UNQUALIFIED
Kadeem FlosiItalyAsiya Javayant PROPOSAL
Kaitlin OstroskyJapanBernardo Dominic PROPOSAL
Aika InouyeUnited KingdomAmy Elsner NEW
Ivar PaprockiCanadaElwin Sharvill PROPOSAL
Smith GlickFranceOnyama Limba PROPOSAL
Jefferson SchemmerArgentinaAmy Elsner QUALIFIED
Chavez BriddickAustraliaAmy Elsner UNQUALIFIED
Costa DilliardAustraliaOnyama Limba RENEWAL
Cody SaylorsCanadaAnna Fali NEGOTIATION
Greenwood BologniaGermanyIvan Magalhaes PROPOSAL
Cody SaylorsJapanElwin Sharvill QUALIFIED
Salvatore StockhamGermanyBernardo Dominic PROPOSAL
Ricardo GauchoBrazilAsiya Javayant PROPOSAL
Greenwood BologniaCanadaOnyama Limba PROPOSAL
Maisha RulapaughUnited KingdomElwin Sharvill NEW
Maisha RulapaughArgentinaStephen Shaw PROPOSAL
Frozen Columns
Name
Leja Caldarera
Silvio Slusarski
Salvatore Stockham
Greenwood Bolognia
Leja Caldarera
Wickens Nestle
David Darakjy
James Butt
Izzy Garufi
Mujtaba Nicka
Darci Poquette
Faith Gillian
Cody Saylors
Maria Marrier
Tony Foller
Silvio Slusarski
Faith Gillian
Jennifer Amigon
Kaitlin Ostrosky
Rodrigues Campain
Rodrigues Campain
Aika Inouye
Isabel Bowley
Ivar Paprocki
Maisha Rulapaugh
Isabel Bowley
Aditya Kusko
Wickens Nestle
Mayumi Kolmetz
Antonio Caudy
Leon Oldroyd
Izzy Garufi
Maria Marrier
Francesco Shinko
Ashley Doe
Aditya Kusko
Silvio Slusarski
Rodrigues Campain
Jennifer Amigon
Greenwood Bolognia
Chavez Briddick
Deepesh Chui
Deepesh Chui
Sinclair Waycott
Deepesh Chui
Izzy Garufi
Maria Marrier
Alejandro Perin
Antonio Caudy
Julie Stenseth
IdCountryDate
1000Argentina2025-08-30
1001Italy2025-08-13
1002France2025-08-09
1003Spain2025-08-18
1004Brazil2025-08-22
1005Australia2025-08-22
1006Germany2025-08-29
1007Italy2025-08-01
1008Australia2025-08-07
1009Argentina2025-08-16
1010Italy2025-08-02
1011Italy2025-08-22
1012Germany2025-08-23
1013Australia2025-08-16
1014Germany2025-08-09
1015France2025-08-08
1016Brazil2025-08-15
1017Australia2025-08-16
1018Brazil2025-08-16
1019Argentina2025-08-18
1020France2025-08-16
1021Argentina2025-08-02
1022United Kingdom2025-08-18
1023Germany2025-08-14
1024Germany2025-08-11
1025Germany2025-08-06
1026Germany2025-08-27
1027Spain2025-08-15
1028Brazil2025-08-23
1029Japan2025-08-04
1030United Kingdom2025-08-19
1031Spain2025-08-06
1032United Kingdom2025-08-08
1033Russia2025-08-04
1034Brazil2025-08-06
1035Canada2025-08-13
1036Canada2025-08-19
1037Germany2025-08-24
1038Italy2025-08-09
1039France2025-08-23
1040France2025-08-26
1041France2025-08-22
1042Brazil2025-08-15
1043Australia2025-08-11
1044France2025-08-15
1045Argentina2025-08-26
1046Italy2025-08-07
1047France2025-08-27
1048Germany2025-08-18
1049United Kingdom2025-08-17

On-Demand Data

NameIdCountryDate
Jefferson Schemmer1000Australia2025-08-02
Jennifer Amigon1001Canada2025-08-30
Adams Morasca1002France2025-08-03
Leon Oldroyd1003Germany2025-08-21
Salvatore Stockham1004Germany2025-08-28
Maria Marrier1005Germany2025-08-17
Munro Ferencz1006Spain2025-08-29
Mujtaba Nicka1007Spain2025-08-03
Jennifer Amigon1008Australia2025-08-24
Adams Morasca1009Spain2025-08-20
Munro Ferencz1010Canada2025-08-04
Tony Foller1011Argentina2025-08-04
Claire Tollner1012France2025-08-12
Morrow Ruta1013Japan2025-08-21
Ricardo Gaucho1014India2025-08-09
Rodrigues Campain1015Japan2025-08-25
Stacey Maclead1016Australia2025-08-06
Stacey Maclead1017Spain2025-08-03
Silvio Slusarski1018Spain2025-08-09
Stacey Maclead1019Germany2025-08-02
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Morrow RutaSpainBernardo Dominic NEW
Deepesh ChuiAustraliaIoni Bowcher UNQUALIFIED
Maisha RulapaughJapanBernardo Dominic QUALIFIED
Aruna FigeroaCanadaIvan Magalhaes QUALIFIED
Tony FollerSpainXuxue Feng NEW
Ivar PaprockiRussiaAnna Fali NEGOTIATION
Juan WieserSpainBernardo Dominic UNQUALIFIED
Faith GillianItalyAmy Elsner RENEWAL
Aika InouyeUnited KingdomIvan Magalhaes RENEWAL
Rodrigues CampainJapanIoni Bowcher PROPOSAL
Maria MarrierCanadaStephen Shaw PROPOSAL
James ButtSpainElwin Sharvill QUALIFIED
Munro FerenczArgentinaAmy Elsner PROPOSAL
Jones VocelkaGermanyElwin Sharvill PROPOSAL
Emily WhobreyAustraliaAsiya Javayant NEW
Aika InouyeIndiaAsiya Javayant NEW
Chavez BriddickAustraliaOnyama Limba UNQUALIFIED
Deepesh ChuiIndiaXuxue Feng NEW
Aruna FigeroaUnited KingdomElwin Sharvill NEW
Chavez BriddickUnited KingdomAmy Elsner NEGOTIATION
James ButtJapanIvan Magalhaes NEW
Chavez BriddickArgentinaIvan Magalhaes PROPOSAL
Leon OldroydBrazilElwin Sharvill NEW
Jeanfrancois VenereFranceAnna Fali UNQUALIFIED
Morrow RutaIndiaStephen Shaw NEW
Jeanfrancois VenereFranceOnyama Limba QUALIFIED
Leja CaldareraItalyStephen Shaw QUALIFIED
Greenwood BologniaAustraliaElwin Sharvill NEGOTIATION
Mujtaba NickaFranceAnna Fali PROPOSAL
Tony FollerItalyStephen Shaw RENEWAL
James ButtGermanyIoni Bowcher PROPOSAL
Silvio SlusarskiIndiaIvan Magalhaes QUALIFIED
Smith GlickCanadaAmy Elsner RENEWAL
Alejandro PerinGermanyIvan Magalhaes PROPOSAL
Costa DilliardIndiaBernardo Dominic PROPOSAL
Stacey MacleadUnited KingdomXuxue Feng NEGOTIATION
Maisha RulapaughBrazilOnyama Limba RENEWAL
Jones VocelkaSpainStephen Shaw NEW
Jones VocelkaJapanAnna Fali QUALIFIED
Ashley DoeArgentinaXuxue 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>