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
Leja CaldareraJapanAnna Fali NEGOTIATION
Tony FollerSpainXuxue Feng NEW
Munro FerenczUnited KingdomIvan Magalhaes NEGOTIATION
Emily WhobreySpainStephen Shaw NEW
Izzy GarufiUnited KingdomStephen Shaw PROPOSAL
Morrow RutaSpainOnyama Limba NEGOTIATION
James ButtAustraliaBernardo Dominic PROPOSAL
Izzy GarufiUnited KingdomXuxue Feng NEGOTIATION
Izzy GarufiIndiaOnyama Limba NEGOTIATION
Maisha RulapaughItalyXuxue Feng NEW
Morrow RutaFranceAmy Elsner QUALIFIED
Tony FollerFranceBernardo Dominic UNQUALIFIED
Rodrigues CampainRussiaIvan Magalhaes QUALIFIED
Kaitlin OstroskyBrazilAsiya Javayant PROPOSAL
Stacey MacleadArgentinaOnyama Limba UNQUALIFIED
Jefferson SchemmerArgentinaXuxue Feng RENEWAL
Nicolas IturbideArgentinaXuxue Feng RENEWAL
Stacey MacleadBrazilStephen Shaw UNQUALIFIED
Alejandro PerinRussiaXuxue Feng NEGOTIATION
Claire TollnerFranceAnna Fali QUALIFIED
Jennifer AmigonRussiaOnyama Limba NEGOTIATION
Clifford RimRussiaIoni Bowcher PROPOSAL
Deepesh ChuiUnited KingdomIoni Bowcher NEGOTIATION
Salvatore StockhamGermanyElwin Sharvill NEGOTIATION
Nicolas IturbideRussiaIoni Bowcher QUALIFIED
Jennifer AmigonFranceStephen Shaw NEGOTIATION
Adams MorascaJapanAsiya Javayant RENEWAL
Wickens NestleUnited KingdomIvan Magalhaes RENEWAL
Silvio SlusarskiAustraliaIvan Magalhaes UNQUALIFIED
Izzy GarufiSpainAnna Fali PROPOSAL
Deepesh ChuiBrazilBernardo Dominic QUALIFIED
Jeanfrancois VenereFranceAnna Fali NEGOTIATION
Jeanfrancois VenereRussiaStephen Shaw NEW
Aditya KuskoRussiaStephen Shaw UNQUALIFIED
Aika InouyeCanadaStephen Shaw QUALIFIED
Jennifer AmigonGermanyElwin Sharvill QUALIFIED
Juan WieserAustraliaIvan Magalhaes PROPOSAL
Jeanfrancois VenereCanadaAnna Fali NEW
Misaki RoysterRussiaOnyama Limba QUALIFIED
Francesco ShinkoAustraliaAsiya Javayant UNQUALIFIED
Izzy GarufiJapanIvan Magalhaes QUALIFIED
Francesco ShinkoFranceIvan Magalhaes RENEWAL
Smith GlickSpainBernardo Dominic NEGOTIATION
Juan WieserArgentinaAnna Fali PROPOSAL
Isabel BowleyCanadaElwin Sharvill UNQUALIFIED
Smith GlickJapanAnna Fali UNQUALIFIED
Jones VocelkaSpainIoni Bowcher UNQUALIFIED
Tony FollerSpainIoni Bowcher RENEWAL
Maisha RulapaughBrazilAnna Fali NEW
Jeanfrancois VenereAustraliaBernardo Dominic PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Mayumi KolmetzJapanStephen Shaw NEW
Rodrigues CampainCanadaAnna Fali PROPOSAL
Julie StensethArgentinaAnna Fali PROPOSAL
Emily WhobreyIndiaBernardo Dominic UNQUALIFIED
Juan WieserFranceAsiya Javayant NEW
Stacey MacleadAustraliaIoni Bowcher QUALIFIED
Leja CaldareraBrazilElwin Sharvill QUALIFIED
Leon OldroydFranceAsiya Javayant RENEWAL
David DarakjyCanadaAmy Elsner PROPOSAL
Ivar PaprockiRussiaOnyama Limba QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Tony FollerBrazil2026-04-18Chemel, James L Cpa NEW38Amy Elsner
1001Costa DilliardItaly2026-04-23King, Christopher A Esq PROPOSAL52Bernardo Dominic
1002Deepesh ChuiGermany2026-04-05Printing Dimensions PROPOSAL61Amy Elsner
1003Arvin AlbaresItaly2026-04-18Printing Dimensions RENEWAL98Ivan Magalhaes
1004Stacey MacleadRussia2026-04-10Printing Dimensions UNQUALIFIED70Anna Fali
1005Chavez BriddickCanada2026-04-14Rangoni Of Florence NEW98Bernardo Dominic
1006Cody SaylorsArgentina2026-04-17Commercial Press QUALIFIED94Anna Fali
1007Jefferson SchemmerRussia2026-04-02Chemel, James L Cpa QUALIFIED68Anna Fali
1008Cody SaylorsCanada2026-04-19Buckley Miller Wright NEGOTIATION54Ioni Bowcher
1009Arvin AlbaresArgentina2026-04-12Benton, John B Jr RENEWAL74Onyama Limba
1010Ivar PaprockiAustralia2026-04-20Feltz Printing Service QUALIFIED46Xuxue Feng
1011Isabel BowleyItaly2026-04-20Commercial Press QUALIFIED85Ivan Magalhaes
1012Misaki RoysterGermany2026-04-29Rousseaux, Michael Esq PROPOSAL44Stephen Shaw
1013Kaitlin OstroskyFrance2026-04-15Rousseaux, Michael Esq UNQUALIFIED51Asiya Javayant
1014Ashley DoeIndia2026-04-11Chemel, James L Cpa NEW54Bernardo Dominic
1015Jefferson SchemmerBrazil2026-04-13Feiner Bros UNQUALIFIED29Amy Elsner
1016Arvin AlbaresRussia2026-04-29Printing Dimensions QUALIFIED99Onyama Limba
1017Misaki RoysterArgentina2026-04-13Printing Dimensions QUALIFIED53Ioni Bowcher
1018Smith GlickCanada2026-04-10Commercial Press NEW51Xuxue Feng
1019James ButtGermany2026-04-15King, Christopher A Esq QUALIFIED74Ioni Bowcher
1020Tony FollerAustralia2026-05-01Buckley Miller Wright QUALIFIED5Xuxue Feng
1021Izzy GarufiArgentina2026-04-08Chemel, James L Cpa UNQUALIFIED52Stephen Shaw
1022Maisha RulapaughUnited Kingdom2026-04-14Dorl, James J Esq NEGOTIATION54Amy Elsner
1023Claire TollnerItaly2026-04-02Dorl, James J Esq NEW8Stephen Shaw
1024Mayumi KolmetzAustralia2026-04-16Printing Dimensions RENEWAL99Onyama Limba
1025Juan WieserIndia2026-04-12Feiner Bros NEGOTIATION39Amy Elsner
1026Ashley DoeBrazil2026-04-05Feltz Printing Service NEGOTIATION10Xuxue Feng
1027Stacey MacleadBrazil2026-04-19Commercial Press NEGOTIATION75Ivan Magalhaes
1028Stacey MacleadRussia2026-04-10Feltz Printing Service UNQUALIFIED75Asiya Javayant
1029Cody SaylorsBrazil2026-04-12Chanay, Jeffrey A Esq NEW14Bernardo Dominic
1030Alejandro PerinRussia2026-04-14Benton, John B Jr NEGOTIATION4Stephen Shaw
1031Julie StensethJapan2026-04-06Feiner Bros NEW81Elwin Sharvill
1032Maria MarrierIndia2026-04-30Truhlar And Truhlar Attys PROPOSAL40Anna Fali
1033Alejandro PerinItaly2026-04-17Rousseaux, Michael Esq NEW38Elwin Sharvill
1034Silvio SlusarskiSpain2026-04-09Dorl, James J Esq NEGOTIATION66Amy Elsner
1035Izzy GarufiFrance2026-04-06Dorl, James J Esq PROPOSAL55Stephen Shaw
1036Francesco ShinkoCanada2026-04-14Rangoni Of Florence NEGOTIATION34Ioni Bowcher
1037Leon OldroydAustralia2026-04-25Rangoni Of Florence QUALIFIED66Elwin Sharvill
1038Munro FerenczItaly2026-04-30Benton, John B Jr RENEWAL69Elwin Sharvill
1039Jennifer AmigonIndia2026-04-20Dorl, James J Esq UNQUALIFIED84Xuxue Feng
1040Kadeem FlosiGermany2026-04-07Chemel, James L Cpa UNQUALIFIED11Onyama Limba
1041Clifford RimGermany2026-04-09Morlong Associates RENEWAL15Onyama Limba
1042Mayumi KolmetzArgentina2026-04-19King, Christopher A Esq UNQUALIFIED35Amy Elsner
1043Leon OldroydUnited Kingdom2026-04-26Dorl, James J Esq NEGOTIATION97Ioni Bowcher
1044Stacey MacleadCanada2026-04-19Chemel, James L Cpa UNQUALIFIED50Ivan Magalhaes
1045Arvin AlbaresAustralia2026-04-09Chapman, Ross E Esq QUALIFIED0Onyama Limba
1046Smith GlickSpain2026-04-22Chemel, James L Cpa NEGOTIATION57Ivan Magalhaes
1047David DarakjyItaly2026-04-09Truhlar And Truhlar Attys NEW91Anna Fali
1048Ricardo GauchoRussia2026-04-06Rangoni Of Florence PROPOSAL6Xuxue Feng
1049Ashley DoeBrazil2026-04-23Commercial Press PROPOSAL1Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Jones VocelkaUnited KingdomAsiya Javayant RENEWAL
Aruna FigeroaCanadaXuxue Feng PROPOSAL
Ivar PaprockiIndiaAsiya Javayant RENEWAL
Aika InouyeBrazilAnna Fali NEGOTIATION
Antonio CaudyCanadaAmy Elsner QUALIFIED
Sinclair WaycottItalyOnyama Limba RENEWAL
Jefferson SchemmerArgentinaBernardo Dominic NEGOTIATION
Aruna FigeroaGermanyBernardo Dominic PROPOSAL
Arvin AlbaresUnited KingdomIvan Magalhaes NEGOTIATION
Salvatore StockhamRussiaIvan Magalhaes NEGOTIATION
Antonio CaudyJapanIoni Bowcher QUALIFIED
Maisha RulapaughItalyAsiya Javayant UNQUALIFIED
Tony FollerAustraliaXuxue Feng UNQUALIFIED
Julie StensethRussiaAmy Elsner PROPOSAL
Wickens NestleJapanIvan Magalhaes QUALIFIED
Emily WhobreySpainOnyama Limba NEW
Arvin AlbaresRussiaIoni Bowcher UNQUALIFIED
Cody SaylorsArgentinaIvan Magalhaes NEGOTIATION
David DarakjyAustraliaStephen Shaw UNQUALIFIED
Ivar PaprockiIndiaElwin Sharvill QUALIFIED
Aika InouyeSpainAsiya Javayant RENEWAL
Rodrigues CampainSpainXuxue Feng NEGOTIATION
Adams MorascaFranceStephen Shaw QUALIFIED
Smith GlickJapanOnyama Limba PROPOSAL
Emily WhobreyJapanBernardo Dominic UNQUALIFIED
Isabel BowleyAustraliaXuxue Feng PROPOSAL
Ricardo GauchoArgentinaXuxue Feng RENEWAL
Emily WhobreyUnited KingdomBernardo Dominic NEW
Morrow RutaFranceIvan Magalhaes RENEWAL
Costa DilliardArgentinaIvan Magalhaes NEW
Leja CaldareraIndiaElwin Sharvill PROPOSAL
Leja CaldareraRussiaAnna Fali RENEWAL
Tony FollerBrazilAmy Elsner QUALIFIED
Izzy GarufiUnited KingdomIvan Magalhaes NEW
Greenwood BologniaItalyAsiya Javayant QUALIFIED
Silvio SlusarskiGermanyXuxue Feng NEGOTIATION
Antonio CaudyFranceAmy Elsner NEGOTIATION
Aika InouyeFranceAnna Fali PROPOSAL
Arvin AlbaresJapanIvan Magalhaes UNQUALIFIED
Alejandro PerinSpainOnyama Limba RENEWAL
Aditya KuskoFranceAnna Fali NEW
Octavia MaletRussiaBernardo Dominic PROPOSAL
Nicolas IturbideRussiaBernardo Dominic RENEWAL
Jeanfrancois VenereGermanyAsiya Javayant RENEWAL
Murillo MaletBrazilElwin Sharvill NEW
Maria MarrierRussiaAnna Fali QUALIFIED
Francesco ShinkoArgentinaAnna Fali NEGOTIATION
Deepesh ChuiIndiaIvan Magalhaes RENEWAL
Salvatore StockhamSpainIoni Bowcher QUALIFIED
Jennifer AmigonJapanOnyama Limba QUALIFIED
Frozen Columns
Name
Salvatore Stockham
Costa Dilliard
Murillo Malet
Maria Marrier
Ivar Paprocki
Jones Vocelka
Maisha Rulapaugh
Costa Dilliard
Francesco Shinko
Clifford Rim
James Butt
Smith Glick
Claire Tollner
Kaitlin Ostrosky
Octavia Malet
Sinclair Waycott
Silvio Slusarski
Clifford Rim
Jeanfrancois Venere
Antonio Caudy
Ricardo Gaucho
Maria Marrier
Maria Marrier
Kaitlin Ostrosky
Morrow Ruta
Maria Marrier
Antonio Caudy
Aruna Figeroa
Juan Wieser
Munro Ferencz
Faith Gillian
Julie Stenseth
Sinclair Waycott
Kaitlin Ostrosky
Aika Inouye
Leon Oldroyd
Maisha Rulapaugh
Jennifer Amigon
Cody Saylors
Juan Wieser
Jennifer Amigon
Jeanfrancois Venere
Nicolas Iturbide
Darci Poquette
Deepesh Chui
Jennifer Amigon
Ashley Doe
Jeanfrancois Venere
Johnson Sergi
Ivar Paprocki
IdCountryDate
1000India2026-04-06
1001United Kingdom2026-04-13
1002Brazil2026-04-22
1003Canada2026-04-08
1004India2026-04-20
1005Brazil2026-04-22
1006Russia2026-04-19
1007Italy2026-04-17
1008Australia2026-04-14
1009Spain2026-05-01
1010Italy2026-04-23
1011Japan2026-05-01
1012Italy2026-04-23
1013France2026-04-05
1014France2026-04-09
1015Spain2026-04-07
1016Australia2026-04-25
1017Australia2026-04-19
1018United Kingdom2026-04-18
1019Russia2026-04-12
1020Italy2026-04-02
1021United Kingdom2026-04-14
1022Argentina2026-04-30
1023India2026-04-18
1024Brazil2026-04-09
1025Germany2026-04-04
1026Germany2026-04-02
1027Australia2026-04-30
1028Germany2026-04-03
1029Italy2026-04-18
1030Spain2026-04-07
1031France2026-04-29
1032India2026-04-27
1033Australia2026-04-04
1034France2026-04-02
1035Germany2026-04-02
1036Brazil2026-04-24
1037Australia2026-04-30
1038United Kingdom2026-04-09
1039France2026-04-18
1040Russia2026-04-12
1041India2026-04-21
1042France2026-04-13
1043Spain2026-04-12
1044United Kingdom2026-04-18
1045Canada2026-04-20
1046Argentina2026-04-10
1047Argentina2026-04-25
1048Brazil2026-04-03
1049Canada2026-04-27

On-Demand Data

NameIdCountryDate
Greenwood Bolognia1000Brazil2026-04-13
Emily Whobrey1001Russia2026-04-10
Maria Marrier1002Italy2026-04-28
Jennifer Amigon1003Brazil2026-04-26
Maria Marrier1004Canada2026-04-12
Emily Whobrey1005Australia2026-04-07
Arvin Albares1006Argentina2026-04-19
Wickens Nestle1007India2026-04-08
Kaitlin Ostrosky1008Germany2026-04-16
Julie Stenseth1009United Kingdom2026-04-23
Darci Poquette1010Australia2026-04-04
Chavez Briddick1011Japan2026-04-25
Darci Poquette1012Italy2026-04-06
Munro Ferencz1013Australia2026-04-13
Aika Inouye1014India2026-04-20
Jefferson Schemmer1015India2026-04-06
Jeanfrancois Venere1016Brazil2026-04-05
Silvio Slusarski1017Spain2026-04-21
Rodrigues Campain1018Canada2026-04-02
Deepesh Chui1019Japan2026-04-27
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aruna FigeroaJapanAsiya Javayant RENEWAL
Nicolas IturbideFranceXuxue Feng QUALIFIED
Emily WhobreyRussiaBernardo Dominic NEW
David DarakjyUnited KingdomXuxue Feng UNQUALIFIED
Faith GillianCanadaXuxue Feng NEW
Claire TollnerBrazilStephen Shaw PROPOSAL
Munro FerenczJapanElwin Sharvill NEGOTIATION
Leja CaldareraSpainAsiya Javayant UNQUALIFIED
Clifford RimJapanOnyama Limba NEW
Kaitlin OstroskyUnited KingdomOnyama Limba RENEWAL
Morrow RutaItalyElwin Sharvill NEW
Kadeem FlosiJapanElwin Sharvill PROPOSAL
Sinclair WaycottRussiaElwin Sharvill QUALIFIED
Cody SaylorsFranceElwin Sharvill QUALIFIED
Claire TollnerRussiaOnyama Limba QUALIFIED
Jeanfrancois VenereRussiaXuxue Feng NEGOTIATION
Francesco ShinkoJapanBernardo Dominic PROPOSAL
Tony FollerGermanyIoni Bowcher NEW
Nicolas IturbideCanadaElwin Sharvill NEW
Munro FerenczItalyIvan Magalhaes RENEWAL
Salvatore StockhamJapanStephen Shaw UNQUALIFIED
David DarakjyGermanyAsiya Javayant NEGOTIATION
Mujtaba NickaSpainBernardo Dominic PROPOSAL
Octavia MaletUnited KingdomBernardo Dominic NEW
Claire TollnerJapanBernardo Dominic NEGOTIATION
Nicolas IturbideSpainAmy Elsner NEGOTIATION
Octavia MaletSpainIoni Bowcher QUALIFIED
Smith GlickGermanyAsiya Javayant PROPOSAL
Cody SaylorsJapanAsiya Javayant NEW
Maisha RulapaughItalyXuxue Feng UNQUALIFIED
Johnson SergiAustraliaAnna Fali NEW
Kadeem FlosiCanadaAnna Fali NEW
Cody SaylorsRussiaElwin Sharvill NEGOTIATION
Mujtaba NickaUnited KingdomElwin Sharvill UNQUALIFIED
Maisha RulapaughGermanyAnna Fali QUALIFIED
Ricardo GauchoJapanIvan Magalhaes QUALIFIED
Leon OldroydAustraliaIvan Magalhaes QUALIFIED
Faith GillianUnited KingdomXuxue Feng NEGOTIATION
Ashley DoeJapanStephen Shaw PROPOSAL
Arvin AlbaresUnited KingdomIoni Bowcher 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>