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
Johnson SergiBrazilElwin Sharvill PROPOSAL
Claire TollnerRussiaOnyama Limba NEW
Greenwood BologniaGermanyElwin Sharvill PROPOSAL
David DarakjyIndiaIoni Bowcher NEW
Izzy GarufiSpainIvan Magalhaes RENEWAL
Arvin AlbaresGermanyAnna Fali PROPOSAL
Aditya KuskoArgentinaAmy Elsner NEW
Antonio CaudyArgentinaOnyama Limba NEW
Izzy GarufiSpainXuxue Feng PROPOSAL
Silvio SlusarskiJapanBernardo Dominic QUALIFIED
Silvio SlusarskiUnited KingdomAmy Elsner NEW
Chavez BriddickGermanyElwin Sharvill UNQUALIFIED
Deepesh ChuiBrazilIvan Magalhaes PROPOSAL
Octavia MaletAustraliaAsiya Javayant QUALIFIED
Johnson SergiArgentinaIoni Bowcher NEW
Munro FerenczFranceIvan Magalhaes UNQUALIFIED
Jennifer AmigonItalyIoni Bowcher PROPOSAL
Clifford RimGermanyBernardo Dominic NEGOTIATION
Ashley DoeGermanyXuxue Feng RENEWAL
Antonio CaudyBrazilIvan Magalhaes UNQUALIFIED
Faith GillianIndiaBernardo Dominic NEGOTIATION
Aditya KuskoAustraliaAmy Elsner QUALIFIED
Mujtaba NickaUnited KingdomAmy Elsner NEGOTIATION
Claire TollnerItalyAmy Elsner UNQUALIFIED
Morrow RutaCanadaXuxue Feng UNQUALIFIED
Costa DilliardItalyElwin Sharvill RENEWAL
Nicolas IturbideJapanStephen Shaw PROPOSAL
Jeanfrancois VenereRussiaAsiya Javayant PROPOSAL
James ButtAustraliaAmy Elsner UNQUALIFIED
Julie StensethGermanyAsiya Javayant RENEWAL
Johnson SergiRussiaStephen Shaw RENEWAL
Deepesh ChuiFranceOnyama Limba PROPOSAL
Kadeem FlosiUnited KingdomIvan Magalhaes NEGOTIATION
Octavia MaletCanadaElwin Sharvill RENEWAL
Emily WhobreyRussiaElwin Sharvill QUALIFIED
Tony FollerItalyAmy Elsner NEW
Ashley DoeBrazilBernardo Dominic UNQUALIFIED
Costa DilliardGermanyAsiya Javayant NEGOTIATION
Izzy GarufiFranceAnna Fali RENEWAL
Johnson SergiJapanElwin Sharvill NEGOTIATION
Jennifer AmigonAustraliaIoni Bowcher RENEWAL
Johnson SergiJapanStephen Shaw NEW
Aruna FigeroaUnited KingdomIoni Bowcher NEW
Aika InouyeBrazilAmy Elsner UNQUALIFIED
Clifford RimIndiaIoni Bowcher NEGOTIATION
Darci PoquetteRussiaIoni Bowcher UNQUALIFIED
Kadeem FlosiUnited KingdomXuxue Feng QUALIFIED
Murillo MaletUnited KingdomIvan Magalhaes RENEWAL
Cody SaylorsGermanyAmy Elsner PROPOSAL
Francesco ShinkoGermanyAmy Elsner PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Maria MarrierUnited KingdomAsiya Javayant NEW
Isabel BowleySpainElwin Sharvill RENEWAL
Clifford RimCanadaStephen Shaw NEGOTIATION
Maria MarrierCanadaAsiya Javayant RENEWAL
David DarakjyJapanAnna Fali UNQUALIFIED
Adams MorascaCanadaStephen Shaw PROPOSAL
Jefferson SchemmerFranceAmy Elsner QUALIFIED
Chavez BriddickSpainIvan Magalhaes RENEWAL
Jeanfrancois VenereUnited KingdomBernardo Dominic RENEWAL
Antonio CaudyArgentinaXuxue Feng PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ivar PaprockiCanada2025-09-14King, Christopher A Esq NEGOTIATION88Onyama Limba
1001Sinclair WaycottGermany2025-08-31Morlong Associates RENEWAL39Asiya Javayant
1002Isabel BowleyUnited Kingdom2025-09-17Commercial Press RENEWAL72Stephen Shaw
1003Clifford RimIndia2025-09-21Chemel, James L Cpa PROPOSAL78Amy Elsner
1004Silvio SlusarskiIndia2025-09-24Morlong Associates NEGOTIATION74Asiya Javayant
1005Darci PoquetteJapan2025-09-19Chemel, James L Cpa RENEWAL97Ioni Bowcher
1006Ashley DoeUnited Kingdom2025-09-26King, Christopher A Esq PROPOSAL84Bernardo Dominic
1007Murillo MaletFrance2025-09-11Dorl, James J Esq QUALIFIED37Amy Elsner
1008Johnson SergiItaly2025-09-21Printing Dimensions RENEWAL90Elwin Sharvill
1009Deepesh ChuiGermany2025-09-16Chapman, Ross E Esq QUALIFIED20Xuxue Feng
1010Tony FollerSpain2025-09-14Chanay, Jeffrey A Esq QUALIFIED39Anna Fali
1011Antonio CaudyUnited Kingdom2025-09-08Chemel, James L Cpa QUALIFIED99Ivan Magalhaes
1012Jeanfrancois VenereUnited Kingdom2025-09-16Buckley Miller Wright PROPOSAL76Ivan Magalhaes
1013Deepesh ChuiRussia2025-09-15Commercial Press QUALIFIED34Xuxue Feng
1014Kaitlin OstroskyIndia2025-09-11King, Christopher A Esq NEGOTIATION22Asiya Javayant
1015Mujtaba NickaUnited Kingdom2025-09-16Dorl, James J Esq RENEWAL9Xuxue Feng
1016Murillo MaletCanada2025-09-02Buckley Miller Wright PROPOSAL1Stephen Shaw
1017Emily WhobreyArgentina2025-09-23Truhlar And Truhlar Attys UNQUALIFIED54Anna Fali
1018Aika InouyeRussia2025-09-02Feltz Printing Service QUALIFIED38Ioni Bowcher
1019Izzy GarufiRussia2025-09-04Printing Dimensions UNQUALIFIED64Anna Fali
1020Silvio SlusarskiItaly2025-09-27Morlong Associates NEGOTIATION77Stephen Shaw
1021Faith GillianGermany2025-09-23Buckley Miller Wright RENEWAL74Elwin Sharvill
1022Mujtaba NickaGermany2025-09-04Rangoni Of Florence RENEWAL45Bernardo Dominic
1023Silvio SlusarskiItaly2025-09-12Feltz Printing Service NEW2Onyama Limba
1024Francesco ShinkoUnited Kingdom2025-09-07Feltz Printing Service NEGOTIATION70Amy Elsner
1025Kaitlin OstroskyBrazil2025-09-06Printing Dimensions NEW55Xuxue Feng
1026Johnson SergiAustralia2025-09-03Chanay, Jeffrey A Esq RENEWAL14Ivan Magalhaes
1027Wickens NestleJapan2025-09-23Truhlar And Truhlar Attys PROPOSAL64Amy Elsner
1028Leja CaldareraItaly2025-08-31Chanay, Jeffrey A Esq UNQUALIFIED69Xuxue Feng
1029Jennifer AmigonUnited Kingdom2025-09-11Dorl, James J Esq RENEWAL8Amy Elsner
1030Wickens NestleItaly2025-09-26King, Christopher A Esq RENEWAL82Bernardo Dominic
1031Maria MarrierItaly2025-09-25Rousseaux, Michael Esq NEGOTIATION79Asiya Javayant
1032Maisha RulapaughIndia2025-09-29Rousseaux, Michael Esq RENEWAL66Amy Elsner
1033Wickens NestleUnited Kingdom2025-09-05Dorl, James J Esq RENEWAL2Stephen Shaw
1034Faith GillianCanada2025-09-23Commercial Press RENEWAL3Anna Fali
1035Aditya KuskoIndia2025-09-10Commercial Press UNQUALIFIED3Elwin Sharvill
1036Octavia MaletBrazil2025-09-11Morlong Associates NEW16Amy Elsner
1037Juan WieserCanada2025-09-21King, Christopher A Esq UNQUALIFIED20Xuxue Feng
1038Alejandro PerinSpain2025-09-08King, Christopher A Esq NEGOTIATION33Bernardo Dominic
1039Misaki RoysterItaly2025-09-21Rangoni Of Florence UNQUALIFIED7Asiya Javayant
1040Morrow RutaArgentina2025-09-02Feltz Printing Service NEGOTIATION86Amy Elsner
1041Ivar PaprockiUnited Kingdom2025-08-31King, Christopher A Esq QUALIFIED68Anna Fali
1042Johnson SergiBrazil2025-08-31Benton, John B Jr QUALIFIED23Amy Elsner
1043Costa DilliardFrance2025-09-23Rousseaux, Michael Esq NEW40Stephen Shaw
1044Deepesh ChuiIndia2025-09-16King, Christopher A Esq QUALIFIED46Elwin Sharvill
1045Chavez BriddickFrance2025-09-29Dorl, James J Esq PROPOSAL40Ioni Bowcher
1046Sinclair WaycottItaly2025-09-28King, Christopher A Esq NEGOTIATION28Ioni Bowcher
1047Munro FerenczArgentina2025-09-11Printing Dimensions NEGOTIATION49Ivan Magalhaes
1048Nicolas IturbideJapan2025-09-20Chemel, James L Cpa QUALIFIED24Ivan Magalhaes
1049David DarakjyFrance2025-09-09Chemel, James L Cpa RENEWAL2Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Stacey MacleadBrazilElwin Sharvill NEW
Octavia MaletJapanIoni Bowcher QUALIFIED
Octavia MaletRussiaIoni Bowcher UNQUALIFIED
Costa DilliardFranceBernardo Dominic QUALIFIED
Jefferson SchemmerFranceIvan Magalhaes RENEWAL
Jennifer AmigonUnited KingdomAmy Elsner NEGOTIATION
Ashley DoeSpainBernardo Dominic RENEWAL
Faith GillianArgentinaBernardo Dominic UNQUALIFIED
Munro FerenczRussiaAnna Fali QUALIFIED
David DarakjyArgentinaAnna Fali QUALIFIED
Emily WhobreySpainBernardo Dominic PROPOSAL
Morrow RutaBrazilOnyama Limba UNQUALIFIED
Silvio SlusarskiFranceAmy Elsner NEGOTIATION
Aditya KuskoGermanyIoni Bowcher NEW
Leja CaldareraJapanXuxue Feng NEW
Johnson SergiJapanAsiya Javayant RENEWAL
Isabel BowleyGermanyXuxue Feng NEW
Aika InouyeGermanyElwin Sharvill UNQUALIFIED
Kadeem FlosiCanadaIvan Magalhaes NEGOTIATION
Aika InouyeUnited KingdomStephen Shaw RENEWAL
Antonio CaudySpainAnna Fali NEW
Morrow RutaItalyXuxue Feng PROPOSAL
Munro FerenczFranceAsiya Javayant PROPOSAL
Kaitlin OstroskyUnited KingdomIvan Magalhaes NEW
Sinclair WaycottBrazilBernardo Dominic UNQUALIFIED
Jennifer AmigonArgentinaStephen Shaw NEW
Maria MarrierUnited KingdomIoni Bowcher PROPOSAL
Kaitlin OstroskyUnited KingdomElwin Sharvill NEGOTIATION
Costa DilliardAustraliaStephen Shaw UNQUALIFIED
Silvio SlusarskiJapanAmy Elsner NEGOTIATION
Ivar PaprockiSpainAsiya Javayant PROPOSAL
Greenwood BologniaFranceOnyama Limba NEW
James ButtUnited KingdomAmy Elsner PROPOSAL
Stacey MacleadGermanyStephen Shaw QUALIFIED
Misaki RoysterBrazilIoni Bowcher NEW
Faith GillianUnited KingdomAmy Elsner RENEWAL
Darci PoquetteCanadaIoni Bowcher NEW
Misaki RoysterArgentinaAsiya Javayant PROPOSAL
Maria MarrierAustraliaIvan Magalhaes QUALIFIED
Greenwood BologniaCanadaStephen Shaw QUALIFIED
Smith GlickSpainAmy Elsner NEW
Ashley DoeBrazilAmy Elsner QUALIFIED
Arvin AlbaresGermanyXuxue Feng NEW
Smith GlickIndiaAsiya Javayant RENEWAL
Mujtaba NickaRussiaAnna Fali RENEWAL
Ashley DoeItalyStephen Shaw PROPOSAL
Isabel BowleyArgentinaElwin Sharvill UNQUALIFIED
Emily WhobreyGermanyStephen Shaw PROPOSAL
Silvio SlusarskiIndiaStephen Shaw UNQUALIFIED
Octavia MaletRussiaBernardo Dominic NEW
Frozen Columns
Name
Mujtaba Nicka
Clifford Rim
Francesco Shinko
Juan Wieser
Greenwood Bolognia
Nicolas Iturbide
David Darakjy
Aruna Figeroa
Morrow Ruta
Rodrigues Campain
Kadeem Flosi
Darci Poquette
Aditya Kusko
Kadeem Flosi
Ricardo Gaucho
Johnson Sergi
Morrow Ruta
Alejandro Perin
Antonio Caudy
Faith Gillian
Stacey Maclead
Emily Whobrey
Francesco Shinko
Francesco Shinko
Aruna Figeroa
Isabel Bowley
Costa Dilliard
Aruna Figeroa
Emily Whobrey
Darci Poquette
Deepesh Chui
Aika Inouye
Octavia Malet
Tony Foller
Ricardo Gaucho
Ashley Doe
Aditya Kusko
Munro Ferencz
Jefferson Schemmer
Juan Wieser
Kaitlin Ostrosky
Morrow Ruta
Emily Whobrey
Emily Whobrey
Maria Marrier
Silvio Slusarski
Ashley Doe
Misaki Royster
Ashley Doe
Adams Morasca
IdCountryDate
1000United Kingdom2025-09-02
1001Japan2025-09-09
1002Brazil2025-09-21
1003Spain2025-09-03
1004France2025-09-11
1005Argentina2025-09-02
1006Argentina2025-09-07
1007Argentina2025-09-25
1008Spain2025-08-31
1009Japan2025-09-14
1010France2025-09-25
1011Japan2025-09-08
1012Japan2025-09-23
1013Brazil2025-09-06
1014France2025-09-05
1015Argentina2025-09-04
1016Italy2025-09-06
1017Germany2025-09-04
1018Argentina2025-09-13
1019India2025-08-31
1020United Kingdom2025-09-18
1021Argentina2025-09-16
1022Argentina2025-09-16
1023Germany2025-09-08
1024United Kingdom2025-09-12
1025Russia2025-09-23
1026Australia2025-09-05
1027Italy2025-09-24
1028United Kingdom2025-09-09
1029United Kingdom2025-09-08
1030Japan2025-09-27
1031Canada2025-09-01
1032Russia2025-09-02
1033Japan2025-09-04
1034India2025-09-23
1035Brazil2025-09-12
1036India2025-09-20
1037Japan2025-09-19
1038Russia2025-09-07
1039Brazil2025-09-08
1040Australia2025-09-23
1041Canada2025-09-16
1042India2025-08-31
1043France2025-09-28
1044Russia2025-09-18
1045France2025-09-22
1046Japan2025-09-12
1047Spain2025-09-29
1048Argentina2025-09-28
1049Brazil2025-09-26

On-Demand Data

NameIdCountryDate
Murillo Malet1000Spain2025-09-20
Clifford Rim1001Australia2025-09-24
Maria Marrier1002France2025-08-31
Ricardo Gaucho1003Germany2025-09-18
Johnson Sergi1004Argentina2025-09-26
Kaitlin Ostrosky1005Canada2025-09-21
Aika Inouye1006Spain2025-09-15
Nicolas Iturbide1007India2025-09-10
Wickens Nestle1008Italy2025-09-15
Munro Ferencz1009Canada2025-09-08
James Butt1010Brazil2025-09-26
Francesco Shinko1011India2025-09-16
Tony Foller1012Argentina2025-09-18
Smith Glick1013Australia2025-09-04
Jeanfrancois Venere1014India2025-09-25
Johnson Sergi1015France2025-09-24
Kaitlin Ostrosky1016India2025-09-13
Silvio Slusarski1017Brazil2025-09-26
Chavez Briddick1018Spain2025-09-26
Faith Gillian1019Argentina2025-09-26
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aika InouyeRussiaBernardo Dominic PROPOSAL
Adams MorascaJapanElwin Sharvill NEW
Maria MarrierGermanyIvan Magalhaes NEGOTIATION
Nicolas IturbideAustraliaBernardo Dominic PROPOSAL
Johnson SergiSpainBernardo Dominic UNQUALIFIED
Aditya KuskoUnited KingdomBernardo Dominic QUALIFIED
Cody SaylorsFranceAsiya Javayant NEGOTIATION
Salvatore StockhamAustraliaIoni Bowcher UNQUALIFIED
Ashley DoeGermanyBernardo Dominic NEGOTIATION
Jennifer AmigonIndiaIoni Bowcher NEGOTIATION
Johnson SergiCanadaElwin Sharvill NEW
Kadeem FlosiArgentinaAmy Elsner UNQUALIFIED
Murillo MaletBrazilOnyama Limba RENEWAL
Adams MorascaFranceAnna Fali PROPOSAL
Juan WieserFranceBernardo Dominic NEGOTIATION
Emily WhobreyItalyAmy Elsner UNQUALIFIED
Sinclair WaycottIndiaOnyama Limba NEGOTIATION
Stacey MacleadCanadaOnyama Limba QUALIFIED
Tony FollerGermanyIoni Bowcher PROPOSAL
Wickens NestleCanadaXuxue Feng UNQUALIFIED
Maisha RulapaughUnited KingdomElwin Sharvill NEW
Tony FollerSpainElwin Sharvill NEW
Maria MarrierAustraliaAsiya Javayant RENEWAL
Nicolas IturbideAustraliaElwin Sharvill QUALIFIED
Julie StensethSpainOnyama Limba PROPOSAL
Emily WhobreyArgentinaStephen Shaw UNQUALIFIED
Emily WhobreyFranceOnyama Limba RENEWAL
Kadeem FlosiItalyAsiya Javayant RENEWAL
Jefferson SchemmerAustraliaIvan Magalhaes RENEWAL
Isabel BowleyJapanAnna Fali NEW
Munro FerenczAustraliaOnyama Limba NEGOTIATION
Ricardo GauchoRussiaElwin Sharvill PROPOSAL
Ivar PaprockiGermanyOnyama Limba RENEWAL
Misaki RoysterFranceIvan Magalhaes QUALIFIED
Ricardo GauchoArgentinaAnna Fali QUALIFIED
Nicolas IturbideCanadaBernardo Dominic NEW
Isabel BowleyIndiaBernardo Dominic NEW
Francesco ShinkoGermanyIoni Bowcher RENEWAL
Murillo MaletUnited KingdomOnyama Limba NEW
Cody SaylorsRussiaIoni Bowcher NEGOTIATION

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