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
Jeanfrancois VenereRussiaIoni Bowcher NEW
Isabel BowleyFranceXuxue Feng QUALIFIED
David DarakjyRussiaElwin Sharvill RENEWAL
Deepesh ChuiAustraliaElwin Sharvill NEW
Deepesh ChuiJapanIvan Magalhaes QUALIFIED
Tony FollerUnited KingdomOnyama Limba QUALIFIED
Chavez BriddickUnited KingdomBernardo Dominic PROPOSAL
Aruna FigeroaRussiaXuxue Feng QUALIFIED
Munro FerenczUnited KingdomXuxue Feng NEW
Maisha RulapaughIndiaXuxue Feng UNQUALIFIED
Silvio SlusarskiAustraliaXuxue Feng PROPOSAL
Aditya KuskoItalyAnna Fali NEGOTIATION
Octavia MaletGermanyAsiya Javayant QUALIFIED
James ButtJapanAnna Fali NEW
James ButtBrazilAsiya Javayant UNQUALIFIED
Adams MorascaGermanyAsiya Javayant RENEWAL
Darci PoquetteSpainIoni Bowcher NEGOTIATION
Aruna FigeroaUnited KingdomAmy Elsner RENEWAL
Costa DilliardSpainIoni Bowcher NEW
Alejandro PerinRussiaAsiya Javayant NEGOTIATION
Aditya KuskoItalyOnyama Limba RENEWAL
Morrow RutaRussiaIvan Magalhaes UNQUALIFIED
Aditya KuskoFranceAmy Elsner PROPOSAL
David DarakjyUnited KingdomIoni Bowcher PROPOSAL
Chavez BriddickCanadaBernardo Dominic RENEWAL
Jennifer AmigonFranceOnyama Limba NEW
David DarakjyJapanIoni Bowcher NEGOTIATION
Leon OldroydIndiaIvan Magalhaes NEW
Murillo MaletJapanAsiya Javayant UNQUALIFIED
Rodrigues CampainSpainBernardo Dominic UNQUALIFIED
Jefferson SchemmerArgentinaAmy Elsner PROPOSAL
Maisha RulapaughBrazilAnna Fali UNQUALIFIED
Salvatore StockhamFranceAnna Fali NEW
Chavez BriddickArgentinaStephen Shaw NEGOTIATION
Claire TollnerArgentinaXuxue Feng NEW
Maisha RulapaughFranceStephen Shaw PROPOSAL
Ricardo GauchoArgentinaElwin Sharvill NEW
Munro FerenczAustraliaAmy Elsner QUALIFIED
Silvio SlusarskiIndiaStephen Shaw UNQUALIFIED
Misaki RoysterRussiaAnna Fali NEGOTIATION
Leon OldroydIndiaAnna Fali RENEWAL
Octavia MaletRussiaBernardo Dominic PROPOSAL
Misaki RoysterAustraliaBernardo Dominic NEGOTIATION
Antonio CaudySpainAsiya Javayant UNQUALIFIED
Antonio CaudyBrazilAmy Elsner PROPOSAL
Tony FollerRussiaBernardo Dominic UNQUALIFIED
Isabel BowleySpainXuxue Feng NEGOTIATION
Ricardo GauchoIndiaStephen Shaw QUALIFIED
Arvin AlbaresGermanyBernardo Dominic PROPOSAL
Ricardo GauchoUnited KingdomAnna Fali NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Aruna FigeroaIndiaBernardo Dominic QUALIFIED
Jennifer AmigonAustraliaAmy Elsner NEW
Johnson SergiArgentinaElwin Sharvill RENEWAL
Tony FollerCanadaStephen Shaw NEGOTIATION
Silvio SlusarskiGermanyAmy Elsner UNQUALIFIED
Maisha RulapaughRussiaAnna Fali QUALIFIED
Mujtaba NickaSpainBernardo Dominic QUALIFIED
Costa DilliardAustraliaAsiya Javayant NEGOTIATION
Aditya KuskoSpainIoni Bowcher RENEWAL
Isabel BowleyItalyStephen Shaw NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Silvio SlusarskiUnited Kingdom2026-04-10Rangoni Of Florence PROPOSAL30Amy Elsner
1001Smith GlickFrance2026-04-17Printing Dimensions NEGOTIATION88Xuxue Feng
1002Smith GlickItaly2026-04-28Chemel, James L Cpa PROPOSAL99Elwin Sharvill
1003Kadeem FlosiUnited Kingdom2026-04-15Chapman, Ross E Esq PROPOSAL8Xuxue Feng
1004Mujtaba NickaIndia2026-04-15Benton, John B Jr PROPOSAL87Amy Elsner
1005Ashley DoeArgentina2026-04-06Morlong Associates UNQUALIFIED58Anna Fali
1006Isabel BowleyRussia2026-04-22Rousseaux, Michael Esq PROPOSAL53Stephen Shaw
1007Emily WhobreyUnited Kingdom2026-04-30Commercial Press PROPOSAL44Elwin Sharvill
1008Maisha RulapaughItaly2026-04-29Benton, John B Jr NEGOTIATION72Anna Fali
1009Darci PoquetteRussia2026-04-21Truhlar And Truhlar Attys NEGOTIATION60Stephen Shaw
1010Leja CaldareraFrance2026-04-29Chemel, James L Cpa NEGOTIATION17Ioni Bowcher
1011Smith GlickAustralia2026-04-09Truhlar And Truhlar Attys NEGOTIATION10Ivan Magalhaes
1012Johnson SergiRussia2026-04-13Feiner Bros UNQUALIFIED6Ivan Magalhaes
1013Cody SaylorsItaly2026-04-06Benton, John B Jr NEGOTIATION90Ivan Magalhaes
1014James ButtGermany2026-04-21King, Christopher A Esq UNQUALIFIED88Ioni Bowcher
1015Nicolas IturbideFrance2026-05-02Benton, John B Jr NEW31Stephen Shaw
1016Smith GlickItaly2026-04-20Commercial Press RENEWAL42Ioni Bowcher
1017Sinclair WaycottItaly2026-04-27Chapman, Ross E Esq NEW39Ivan Magalhaes
1018Darci PoquetteIndia2026-04-21Chemel, James L Cpa PROPOSAL1Stephen Shaw
1019Octavia MaletGermany2026-04-04Feiner Bros UNQUALIFIED12Ioni Bowcher
1020Mayumi KolmetzRussia2026-04-15King, Christopher A Esq NEW15Stephen Shaw
1021Faith GillianAustralia2026-04-07Buckley Miller Wright PROPOSAL46Ioni Bowcher
1022James ButtSpain2026-04-06Printing Dimensions UNQUALIFIED73Xuxue Feng
1023Izzy GarufiRussia2026-04-10Printing Dimensions UNQUALIFIED28Xuxue Feng
1024Nicolas IturbideRussia2026-04-27Buckley Miller Wright NEW35Stephen Shaw
1025Maria MarrierSpain2026-04-27King, Christopher A Esq UNQUALIFIED60Ioni Bowcher
1026Jeanfrancois VenereArgentina2026-05-03Chanay, Jeffrey A Esq NEGOTIATION33Stephen Shaw
1027Maria MarrierCanada2026-04-09Truhlar And Truhlar Attys QUALIFIED34Onyama Limba
1028Julie StensethItaly2026-04-25Benton, John B Jr NEGOTIATION32Anna Fali
1029Jennifer AmigonSpain2026-04-29Morlong Associates NEGOTIATION81Stephen Shaw
1030Leja CaldareraCanada2026-04-29Chanay, Jeffrey A Esq RENEWAL85Xuxue Feng
1031Murillo MaletIndia2026-04-16Chanay, Jeffrey A Esq NEGOTIATION77Ivan Magalhaes
1032Emily WhobreyFrance2026-04-14Morlong Associates NEW27Bernardo Dominic
1033Adams MorascaSpain2026-04-29Feltz Printing Service UNQUALIFIED6Amy Elsner
1034Deepesh ChuiItaly2026-04-25Feiner Bros UNQUALIFIED85Ioni Bowcher
1035Francesco ShinkoBrazil2026-04-13Rangoni Of Florence PROPOSAL17Stephen Shaw
1036Silvio SlusarskiFrance2026-04-19King, Christopher A Esq UNQUALIFIED43Bernardo Dominic
1037Maisha RulapaughJapan2026-04-21Rousseaux, Michael Esq RENEWAL62Anna Fali
1038Antonio CaudyUnited Kingdom2026-04-24Truhlar And Truhlar Attys NEGOTIATION22Ivan Magalhaes
1039Kaitlin OstroskyFrance2026-04-12King, Christopher A Esq PROPOSAL25Onyama Limba
1040Francesco ShinkoGermany2026-05-01Buckley Miller Wright UNQUALIFIED21Onyama Limba
1041Francesco ShinkoSpain2026-04-24Rangoni Of Florence RENEWAL45Onyama Limba
1042Ricardo GauchoJapan2026-04-21Benton, John B Jr RENEWAL73Bernardo Dominic
1043Jones VocelkaGermany2026-04-11Buckley Miller Wright RENEWAL89Amy Elsner
1044James ButtCanada2026-04-27Chapman, Ross E Esq UNQUALIFIED47Ioni Bowcher
1045Darci PoquetteItaly2026-05-01Chapman, Ross E Esq PROPOSAL76Onyama Limba
1046Adams MorascaJapan2026-05-03Commercial Press UNQUALIFIED76Anna Fali
1047Tony FollerUnited Kingdom2026-04-07Rangoni Of Florence NEGOTIATION94Elwin Sharvill
1048Jones VocelkaUnited Kingdom2026-04-07Feltz Printing Service UNQUALIFIED71Bernardo Dominic
1049Alejandro PerinGermany2026-04-26Commercial Press NEGOTIATION67Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Adams MorascaGermanyIvan Magalhaes UNQUALIFIED
Julie StensethCanadaAmy Elsner PROPOSAL
Mayumi KolmetzCanadaIvan Magalhaes PROPOSAL
Salvatore StockhamRussiaBernardo Dominic NEW
Wickens NestleArgentinaStephen Shaw NEW
Silvio SlusarskiBrazilAsiya Javayant NEW
Kaitlin OstroskyBrazilOnyama Limba QUALIFIED
Izzy GarufiBrazilXuxue Feng QUALIFIED
Ivar PaprockiCanadaXuxue Feng NEGOTIATION
Rodrigues CampainBrazilBernardo Dominic PROPOSAL
Juan WieserSpainStephen Shaw RENEWAL
Francesco ShinkoGermanyIoni Bowcher UNQUALIFIED
Alejandro PerinCanadaXuxue Feng RENEWAL
Greenwood BologniaArgentinaIoni Bowcher QUALIFIED
Francesco ShinkoJapanAsiya Javayant UNQUALIFIED
Izzy GarufiCanadaOnyama Limba NEGOTIATION
Izzy GarufiGermanyIvan Magalhaes RENEWAL
Jefferson SchemmerBrazilAnna Fali NEGOTIATION
Leja CaldareraGermanyOnyama Limba UNQUALIFIED
Rodrigues CampainAustraliaOnyama Limba UNQUALIFIED
Salvatore StockhamUnited KingdomAnna Fali RENEWAL
Ricardo GauchoFranceAsiya Javayant UNQUALIFIED
Salvatore StockhamFranceXuxue Feng NEW
Ashley DoeAustraliaXuxue Feng NEGOTIATION
Claire TollnerGermanyStephen Shaw NEW
Izzy GarufiCanadaAmy Elsner PROPOSAL
Ricardo GauchoArgentinaElwin Sharvill RENEWAL
Darci PoquetteBrazilAmy Elsner UNQUALIFIED
Julie StensethUnited KingdomAnna Fali PROPOSAL
Leja CaldareraJapanIoni Bowcher NEGOTIATION
Aika InouyeRussiaBernardo Dominic NEW
Salvatore StockhamIndiaAmy Elsner UNQUALIFIED
Maria MarrierJapanAmy Elsner QUALIFIED
Ricardo GauchoCanadaBernardo Dominic NEGOTIATION
Izzy GarufiJapanIvan Magalhaes RENEWAL
Rodrigues CampainItalyAmy Elsner NEW
Clifford RimItalyIvan Magalhaes NEGOTIATION
Costa DilliardIndiaAmy Elsner RENEWAL
Cody SaylorsAustraliaStephen Shaw NEGOTIATION
Izzy GarufiJapanIoni Bowcher UNQUALIFIED
Aruna FigeroaSpainIvan Magalhaes NEGOTIATION
Ivar PaprockiSpainElwin Sharvill NEW
Smith GlickBrazilAsiya Javayant UNQUALIFIED
Mujtaba NickaSpainIoni Bowcher PROPOSAL
Munro FerenczCanadaIoni Bowcher QUALIFIED
Aditya KuskoBrazilOnyama Limba QUALIFIED
Leja CaldareraItalyAsiya Javayant NEW
Alejandro PerinCanadaAmy Elsner PROPOSAL
Jeanfrancois VenereItalyBernardo Dominic RENEWAL
Adams MorascaGermanyAnna Fali QUALIFIED
Frozen Columns
Name
Claire Tollner
Maisha Rulapaugh
Aditya Kusko
Silvio Slusarski
Juan Wieser
Arvin Albares
Faith Gillian
Clifford Rim
Leja Caldarera
Smith Glick
Aruna Figeroa
Clifford Rim
Ricardo Gaucho
Faith Gillian
Jennifer Amigon
Stacey Maclead
Jennifer Amigon
Smith Glick
Octavia Malet
Faith Gillian
Silvio Slusarski
Salvatore Stockham
Jennifer Amigon
Aditya Kusko
Izzy Garufi
Ashley Doe
Kaitlin Ostrosky
Antonio Caudy
Chavez Briddick
Jennifer Amigon
Smith Glick
Tony Foller
Greenwood Bolognia
David Darakjy
David Darakjy
Antonio Caudy
Rodrigues Campain
Alejandro Perin
Munro Ferencz
Mujtaba Nicka
Jeanfrancois Venere
Silvio Slusarski
Faith Gillian
Julie Stenseth
Misaki Royster
Smith Glick
Octavia Malet
Cody Saylors
Maria Marrier
Clifford Rim
IdCountryDate
1000Germany2026-04-26
1001Spain2026-04-10
1002France2026-05-03
1003United Kingdom2026-04-23
1004Canada2026-05-03
1005Brazil2026-04-05
1006France2026-05-01
1007Italy2026-04-10
1008Germany2026-04-17
1009Spain2026-04-21
1010Germany2026-04-15
1011Canada2026-05-03
1012United Kingdom2026-04-25
1013Spain2026-04-19
1014Japan2026-05-01
1015Japan2026-04-09
1016Argentina2026-05-02
1017Spain2026-04-23
1018Argentina2026-04-13
1019Russia2026-04-30
1020India2026-04-16
1021Australia2026-04-27
1022Canada2026-04-07
1023Argentina2026-05-03
1024Argentina2026-05-03
1025Canada2026-04-12
1026Italy2026-04-25
1027Germany2026-04-28
1028India2026-04-08
1029Australia2026-04-22
1030India2026-04-16
1031India2026-04-30
1032Canada2026-04-23
1033Australia2026-04-26
1034Italy2026-04-04
1035Russia2026-04-20
1036Brazil2026-04-21
1037Russia2026-04-09
1038United Kingdom2026-04-04
1039Brazil2026-04-30
1040India2026-04-24
1041France2026-04-06
1042Australia2026-04-18
1043India2026-04-12
1044Japan2026-04-28
1045Japan2026-04-13
1046Argentina2026-04-09
1047France2026-05-03
1048Australia2026-04-29
1049Brazil2026-04-16

On-Demand Data

NameIdCountryDate
Arvin Albares1000France2026-04-12
Jefferson Schemmer1001Brazil2026-04-11
David Darakjy1002France2026-04-08
Kaitlin Ostrosky1003Japan2026-04-05
Aruna Figeroa1004Russia2026-04-30
Jefferson Schemmer1005Australia2026-04-14
Antonio Caudy1006Australia2026-04-15
Adams Morasca1007Russia2026-04-11
Faith Gillian1008Germany2026-04-15
Cody Saylors1009Brazil2026-04-25
Deepesh Chui1010Germany2026-04-12
Greenwood Bolognia1011India2026-04-12
Silvio Slusarski1012Germany2026-04-29
Chavez Briddick1013Italy2026-04-22
Clifford Rim1014Canada2026-04-22
Stacey Maclead1015Japan2026-04-14
Maria Marrier1016Australia2026-04-29
Alejandro Perin1017Australia2026-04-28
Tony Foller1018Russia2026-04-22
Munro Ferencz1019Japan2026-04-11
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Francesco ShinkoFranceAnna Fali NEW
Maisha RulapaughArgentinaBernardo Dominic PROPOSAL
Juan WieserUnited KingdomBernardo Dominic UNQUALIFIED
Greenwood BologniaIndiaIoni Bowcher RENEWAL
Izzy GarufiArgentinaBernardo Dominic PROPOSAL
Francesco ShinkoJapanAsiya Javayant RENEWAL
Deepesh ChuiJapanAsiya Javayant QUALIFIED
Misaki RoysterIndiaOnyama Limba PROPOSAL
Julie StensethJapanAmy Elsner UNQUALIFIED
Izzy GarufiFranceIvan Magalhaes PROPOSAL
Emily WhobreyIndiaAsiya Javayant NEW
Chavez BriddickCanadaXuxue Feng PROPOSAL
Jennifer AmigonGermanyXuxue Feng QUALIFIED
Arvin AlbaresIndiaAmy Elsner RENEWAL
Adams MorascaJapanStephen Shaw UNQUALIFIED
Silvio SlusarskiUnited KingdomBernardo Dominic RENEWAL
Maria MarrierFranceAsiya Javayant UNQUALIFIED
Smith GlickJapanIoni Bowcher PROPOSAL
Aditya KuskoRussiaStephen Shaw PROPOSAL
Juan WieserSpainAnna Fali NEW
Octavia MaletIndiaStephen Shaw RENEWAL
Claire TollnerBrazilAsiya Javayant RENEWAL
Ashley DoeItalyAmy Elsner NEGOTIATION
Aditya KuskoFranceAsiya Javayant NEGOTIATION
Sinclair WaycottJapanBernardo Dominic RENEWAL
David DarakjyArgentinaOnyama Limba QUALIFIED
Claire TollnerAustraliaElwin Sharvill UNQUALIFIED
Chavez BriddickArgentinaElwin Sharvill QUALIFIED
Morrow RutaArgentinaOnyama Limba UNQUALIFIED
Juan WieserUnited KingdomElwin Sharvill NEGOTIATION
Johnson SergiJapanOnyama Limba PROPOSAL
Ricardo GauchoFranceIvan Magalhaes NEW
Silvio SlusarskiRussiaElwin Sharvill NEW
Greenwood BologniaArgentinaBernardo Dominic UNQUALIFIED
Faith GillianUnited KingdomAmy Elsner RENEWAL
Tony FollerArgentinaElwin Sharvill UNQUALIFIED
Aruna FigeroaCanadaIoni Bowcher NEGOTIATION
Salvatore StockhamAustraliaBernardo Dominic NEW
Clifford RimItalyBernardo Dominic RENEWAL
Jeanfrancois VenereBrazilIvan Magalhaes NEW

<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>