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
Wickens NestleGermanyIoni Bowcher NEW
Darci PoquetteRussiaIvan Magalhaes RENEWAL
Izzy GarufiArgentinaAnna Fali NEGOTIATION
Nicolas IturbideGermanyElwin Sharvill NEW
Antonio CaudyIndiaIoni Bowcher RENEWAL
Silvio SlusarskiJapanElwin Sharvill RENEWAL
Greenwood BologniaJapanIoni Bowcher UNQUALIFIED
Salvatore StockhamFranceElwin Sharvill QUALIFIED
Isabel BowleyUnited KingdomXuxue Feng NEW
Darci PoquetteGermanyIvan Magalhaes NEW
Greenwood BologniaRussiaAsiya Javayant RENEWAL
David DarakjyItalyElwin Sharvill RENEWAL
Aruna FigeroaAustraliaElwin Sharvill QUALIFIED
Stacey MacleadAustraliaIvan Magalhaes NEGOTIATION
Isabel BowleyUnited KingdomAsiya Javayant QUALIFIED
Leon OldroydGermanyXuxue Feng RENEWAL
Ashley DoeCanadaBernardo Dominic UNQUALIFIED
Arvin AlbaresAustraliaIoni Bowcher RENEWAL
Silvio SlusarskiGermanyElwin Sharvill NEGOTIATION
Alejandro PerinAustraliaIoni Bowcher NEW
Jennifer AmigonArgentinaIvan Magalhaes PROPOSAL
Maria MarrierUnited KingdomXuxue Feng UNQUALIFIED
Jefferson SchemmerAustraliaAnna Fali QUALIFIED
Maria MarrierItalyXuxue Feng NEGOTIATION
Misaki RoysterRussiaXuxue Feng NEGOTIATION
Octavia MaletBrazilXuxue Feng QUALIFIED
Morrow RutaUnited KingdomAsiya Javayant PROPOSAL
Aruna FigeroaRussiaElwin Sharvill NEW
Greenwood BologniaJapanAmy Elsner NEGOTIATION
Deepesh ChuiRussiaXuxue Feng NEW
Jeanfrancois VenereSpainOnyama Limba QUALIFIED
Wickens NestleAustraliaOnyama Limba NEW
Cody SaylorsCanadaAnna Fali PROPOSAL
Cody SaylorsArgentinaAmy Elsner PROPOSAL
Arvin AlbaresAustraliaBernardo Dominic PROPOSAL
Morrow RutaGermanyAsiya Javayant NEW
Misaki RoysterFranceIoni Bowcher NEGOTIATION
Rodrigues CampainBrazilStephen Shaw PROPOSAL
Francesco ShinkoIndiaIvan Magalhaes NEGOTIATION
Murillo MaletBrazilIvan Magalhaes NEW
Costa DilliardIndiaStephen Shaw UNQUALIFIED
Jefferson SchemmerArgentinaAmy Elsner UNQUALIFIED
Mujtaba NickaFranceXuxue Feng NEGOTIATION
Smith GlickFranceOnyama Limba NEW
Kaitlin OstroskyUnited KingdomAnna Fali RENEWAL
Faith GillianItalyOnyama Limba PROPOSAL
Silvio SlusarskiGermanyBernardo Dominic NEW
Smith GlickArgentinaAsiya Javayant RENEWAL
Smith GlickFranceXuxue Feng PROPOSAL
Munro FerenczBrazilIoni Bowcher PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Faith GillianUnited KingdomIvan Magalhaes RENEWAL
Misaki RoysterFranceBernardo Dominic QUALIFIED
Arvin AlbaresCanadaAnna Fali QUALIFIED
Aditya KuskoItalyIoni Bowcher PROPOSAL
Maisha RulapaughUnited KingdomIvan Magalhaes PROPOSAL
Jennifer AmigonAustraliaBernardo Dominic NEW
Wickens NestleAustraliaElwin Sharvill RENEWAL
Adams MorascaArgentinaAsiya Javayant NEGOTIATION
Deepesh ChuiGermanyAsiya Javayant QUALIFIED
Johnson SergiIndiaIvan Magalhaes UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Leja CaldareraItaly2025-08-05Truhlar And Truhlar Attys NEW6Amy Elsner
1001Salvatore StockhamIndia2025-08-05Rousseaux, Michael Esq PROPOSAL50Onyama Limba
1002Silvio SlusarskiSpain2025-07-27Commercial Press NEGOTIATION73Elwin Sharvill
1003Mujtaba NickaGermany2025-08-06Dorl, James J Esq PROPOSAL66Stephen Shaw
1004Isabel BowleyIndia2025-08-16Printing Dimensions RENEWAL39Ivan Magalhaes
1005Ivar PaprockiAustralia2025-08-13Feltz Printing Service UNQUALIFIED74Ivan Magalhaes
1006Johnson SergiBrazil2025-08-19Chapman, Ross E Esq PROPOSAL1Stephen Shaw
1007Arvin AlbaresUnited Kingdom2025-07-25Chemel, James L Cpa NEGOTIATION39Asiya Javayant
1008Deepesh ChuiIndia2025-08-15Rangoni Of Florence NEW63Asiya Javayant
1009Rodrigues CampainSpain2025-08-15Benton, John B Jr UNQUALIFIED49Bernardo Dominic
1010Cody SaylorsIndia2025-07-30Chemel, James L Cpa RENEWAL95Elwin Sharvill
1011Maria MarrierArgentina2025-07-26Buckley Miller Wright QUALIFIED35Bernardo Dominic
1012Darci PoquetteFrance2025-08-01Buckley Miller Wright NEW77Anna Fali
1013Wickens NestleAustralia2025-07-22Chemel, James L Cpa QUALIFIED10Stephen Shaw
1014Nicolas IturbideCanada2025-07-31Commercial Press PROPOSAL91Bernardo Dominic
1015Juan WieserGermany2025-08-11Morlong Associates QUALIFIED73Onyama Limba
1016Jefferson SchemmerArgentina2025-08-19Benton, John B Jr PROPOSAL34Anna Fali
1017Misaki RoysterBrazil2025-07-27King, Christopher A Esq QUALIFIED48Xuxue Feng
1018Claire TollnerRussia2025-08-15King, Christopher A Esq NEGOTIATION77Elwin Sharvill
1019Costa DilliardUnited Kingdom2025-07-25Feiner Bros RENEWAL37Ivan Magalhaes
1020Jefferson SchemmerArgentina2025-08-02Chemel, James L Cpa PROPOSAL79Onyama Limba
1021Aditya KuskoSpain2025-08-07Rangoni Of Florence NEW44Bernardo Dominic
1022Aruna FigeroaAustralia2025-08-04Commercial Press RENEWAL84Asiya Javayant
1023Maisha RulapaughRussia2025-07-26Chemel, James L Cpa NEW59Bernardo Dominic
1024Jones VocelkaUnited Kingdom2025-07-30Feiner Bros QUALIFIED43Ioni Bowcher
1025Kaitlin OstroskySpain2025-07-29Chapman, Ross E Esq QUALIFIED56Ivan Magalhaes
1026Chavez BriddickIndia2025-08-09Commercial Press QUALIFIED33Ioni Bowcher
1027Stacey MacleadSpain2025-08-03Commercial Press RENEWAL88Bernardo Dominic
1028Chavez BriddickJapan2025-08-01Feiner Bros QUALIFIED66Ivan Magalhaes
1029Cody SaylorsAustralia2025-08-02Feltz Printing Service QUALIFIED53Onyama Limba
1030Costa DilliardIndia2025-08-16Buckley Miller Wright QUALIFIED55Ivan Magalhaes
1031Ivar PaprockiRussia2025-08-02Rousseaux, Michael Esq NEGOTIATION70Amy Elsner
1032Wickens NestleFrance2025-08-02Chemel, James L Cpa UNQUALIFIED73Elwin Sharvill
1033Aditya KuskoSpain2025-07-23King, Christopher A Esq RENEWAL15Ivan Magalhaes
1034Darci PoquetteIndia2025-08-18Truhlar And Truhlar Attys NEW67Asiya Javayant
1035Jennifer AmigonJapan2025-08-11Buckley Miller Wright NEW24Elwin Sharvill
1036Smith GlickIndia2025-07-29Dorl, James J Esq NEW67Amy Elsner
1037Faith GillianGermany2025-07-27King, Christopher A Esq NEGOTIATION15Stephen Shaw
1038David DarakjyCanada2025-07-24Chapman, Ross E Esq PROPOSAL1Asiya Javayant
1039Clifford RimFrance2025-07-24Rousseaux, Michael Esq QUALIFIED59Amy Elsner
1040Claire TollnerFrance2025-08-18Benton, John B Jr QUALIFIED74Amy Elsner
1041James ButtAustralia2025-08-15Benton, John B Jr QUALIFIED15Xuxue Feng
1042Tony FollerUnited Kingdom2025-07-31Feiner Bros UNQUALIFIED74Elwin Sharvill
1043Chavez BriddickFrance2025-07-28Morlong Associates NEW72Onyama Limba
1044Greenwood BologniaSpain2025-07-23Truhlar And Truhlar Attys RENEWAL60Ioni Bowcher
1045Murillo MaletItaly2025-08-15Benton, John B Jr QUALIFIED79Onyama Limba
1046Ricardo GauchoCanada2025-07-22King, Christopher A Esq UNQUALIFIED42Onyama Limba
1047Silvio SlusarskiUnited Kingdom2025-08-04Rangoni Of Florence QUALIFIED55Bernardo Dominic
1048Francesco ShinkoSpain2025-08-07Chanay, Jeffrey A Esq RENEWAL48Stephen Shaw
1049Costa DilliardRussia2025-08-10King, Christopher A Esq RENEWAL18Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Jeanfrancois VenereFranceIoni Bowcher RENEWAL
David DarakjyGermanyStephen Shaw NEGOTIATION
Jennifer AmigonUnited KingdomElwin Sharvill NEW
Maria MarrierUnited KingdomXuxue Feng NEW
Isabel BowleyItalyAnna Fali NEW
Costa DilliardAustraliaBernardo Dominic UNQUALIFIED
Munro FerenczBrazilAmy Elsner RENEWAL
Antonio CaudyUnited KingdomIvan Magalhaes NEW
Arvin AlbaresUnited KingdomIoni Bowcher UNQUALIFIED
Deepesh ChuiSpainIvan Magalhaes QUALIFIED
Cody SaylorsArgentinaAnna Fali NEGOTIATION
Costa DilliardArgentinaIoni Bowcher UNQUALIFIED
Ricardo GauchoRussiaOnyama Limba NEW
Faith GillianCanadaAnna Fali UNQUALIFIED
Costa DilliardJapanIoni Bowcher RENEWAL
Munro FerenczCanadaAsiya Javayant PROPOSAL
Murillo MaletSpainIvan Magalhaes NEW
Izzy GarufiCanadaAsiya Javayant UNQUALIFIED
Jennifer AmigonSpainStephen Shaw QUALIFIED
Aruna FigeroaSpainAmy Elsner PROPOSAL
Mayumi KolmetzItalyElwin Sharvill UNQUALIFIED
Tony FollerBrazilStephen Shaw PROPOSAL
Mujtaba NickaIndiaAsiya Javayant NEW
Emily WhobreyUnited KingdomStephen Shaw NEW
Rodrigues CampainRussiaElwin Sharvill NEW
Cody SaylorsJapanOnyama Limba RENEWAL
Aika InouyeArgentinaAsiya Javayant NEW
Stacey MacleadCanadaIoni Bowcher RENEWAL
Isabel BowleyFranceStephen Shaw PROPOSAL
Leon OldroydGermanyStephen Shaw NEGOTIATION
Nicolas IturbideJapanAsiya Javayant PROPOSAL
Costa DilliardSpainXuxue Feng PROPOSAL
Jefferson SchemmerRussiaBernardo Dominic PROPOSAL
Misaki RoysterSpainBernardo Dominic QUALIFIED
Clifford RimJapanAnna Fali RENEWAL
Salvatore StockhamIndiaBernardo Dominic NEGOTIATION
Costa DilliardItalyIvan Magalhaes NEGOTIATION
Clifford RimRussiaIoni Bowcher NEW
Aditya KuskoIndiaIvan Magalhaes NEW
Aditya KuskoCanadaStephen Shaw QUALIFIED
Aditya KuskoGermanyOnyama Limba NEW
Maisha RulapaughFranceBernardo Dominic UNQUALIFIED
Tony FollerIndiaStephen Shaw NEW
Leon OldroydGermanyAnna Fali QUALIFIED
Jefferson SchemmerFranceOnyama Limba NEW
Chavez BriddickFranceBernardo Dominic NEW
Faith GillianIndiaAmy Elsner QUALIFIED
Mujtaba NickaIndiaIoni Bowcher UNQUALIFIED
Ivar PaprockiAustraliaXuxue Feng QUALIFIED
Johnson SergiCanadaAsiya Javayant RENEWAL
Frozen Columns
Name
Wickens Nestle
Cody Saylors
Morrow Ruta
Leon Oldroyd
Ivar Paprocki
Chavez Briddick
Murillo Malet
Leja Caldarera
Jefferson Schemmer
Mayumi Kolmetz
Salvatore Stockham
Jones Vocelka
Kaitlin Ostrosky
Aruna Figeroa
Kadeem Flosi
Claire Tollner
Isabel Bowley
Salvatore Stockham
Emily Whobrey
Izzy Garufi
Jeanfrancois Venere
Tony Foller
Aruna Figeroa
Cody Saylors
Izzy Garufi
Chavez Briddick
Claire Tollner
Maria Marrier
Jeanfrancois Venere
Clifford Rim
Murillo Malet
Jennifer Amigon
Adams Morasca
Alejandro Perin
Aika Inouye
Smith Glick
Darci Poquette
Rodrigues Campain
Ivar Paprocki
Jefferson Schemmer
Ashley Doe
Isabel Bowley
Emily Whobrey
Juan Wieser
Maisha Rulapaugh
Izzy Garufi
Leja Caldarera
Aika Inouye
Deepesh Chui
Jennifer Amigon
IdCountryDate
1000Italy2025-08-20
1001Australia2025-08-03
1002Argentina2025-08-18
1003United Kingdom2025-08-01
1004Argentina2025-08-15
1005United Kingdom2025-07-30
1006Italy2025-08-12
1007France2025-08-03
1008Germany2025-07-30
1009United Kingdom2025-07-23
1010France2025-07-31
1011United Kingdom2025-08-16
1012Germany2025-08-15
1013Argentina2025-07-27
1014Canada2025-08-06
1015France2025-07-29
1016Spain2025-08-19
1017United Kingdom2025-07-28
1018India2025-08-06
1019Australia2025-08-14
1020Italy2025-07-26
1021India2025-08-03
1022Brazil2025-08-16
1023Brazil2025-08-18
1024Spain2025-08-09
1025Spain2025-08-10
1026Canada2025-08-01
1027Spain2025-08-06
1028Brazil2025-08-19
1029Spain2025-08-17
1030Germany2025-07-24
1031Germany2025-08-04
1032Canada2025-08-19
1033Russia2025-07-28
1034India2025-07-30
1035India2025-07-26
1036Spain2025-08-08
1037Russia2025-08-08
1038Argentina2025-08-10
1039Australia2025-08-10
1040Brazil2025-07-29
1041Germany2025-08-16
1042Japan2025-07-29
1043Australia2025-08-16
1044Italy2025-08-20
1045United Kingdom2025-07-27
1046France2025-07-22
1047Spain2025-08-19
1048India2025-08-06
1049Brazil2025-07-23

On-Demand Data

NameIdCountryDate
Leon Oldroyd1000France2025-08-13
Smith Glick1001Canada2025-08-02
Deepesh Chui1002Russia2025-08-02
Arvin Albares1003France2025-08-15
Johnson Sergi1004Spain2025-07-22
Smith Glick1005Russia2025-07-27
Arvin Albares1006Japan2025-08-12
Julie Stenseth1007India2025-07-29
Costa Dilliard1008India2025-07-28
Arvin Albares1009France2025-07-27
Francesco Shinko1010France2025-08-16
Morrow Ruta1011Russia2025-08-14
Costa Dilliard1012Australia2025-08-01
Silvio Slusarski1013Italy2025-08-07
Smith Glick1014United Kingdom2025-08-07
Aika Inouye1015Brazil2025-07-24
Murillo Malet1016India2025-08-02
Morrow Ruta1017Japan2025-07-27
Ivar Paprocki1018India2025-08-12
Ivar Paprocki1019Argentina2025-08-03
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jefferson SchemmerArgentinaAmy Elsner NEW
Aruna FigeroaCanadaBernardo Dominic QUALIFIED
Ricardo GauchoArgentinaOnyama Limba PROPOSAL
Izzy GarufiIndiaElwin Sharvill QUALIFIED
Octavia MaletArgentinaIoni Bowcher UNQUALIFIED
Aditya KuskoArgentinaIoni Bowcher UNQUALIFIED
Izzy GarufiRussiaXuxue Feng NEGOTIATION
Smith GlickJapanStephen Shaw RENEWAL
Aruna FigeroaItalyOnyama Limba UNQUALIFIED
Jeanfrancois VenereFranceStephen Shaw NEGOTIATION
Mayumi KolmetzSpainIoni Bowcher NEGOTIATION
Misaki RoysterJapanAnna Fali NEGOTIATION
Jeanfrancois VenereIndiaIoni Bowcher PROPOSAL
Costa DilliardGermanyAsiya Javayant QUALIFIED
Murillo MaletItalyBernardo Dominic NEW
Aditya KuskoRussiaAsiya Javayant QUALIFIED
Mujtaba NickaBrazilAnna Fali NEW
Adams MorascaFranceIvan Magalhaes QUALIFIED
Aika InouyeAustraliaIvan Magalhaes NEGOTIATION
Rodrigues CampainRussiaIoni Bowcher PROPOSAL
Stacey MacleadCanadaAmy Elsner NEW
Adams MorascaGermanyIvan Magalhaes UNQUALIFIED
Munro FerenczAustraliaAnna Fali NEW
Mujtaba NickaAustraliaIoni Bowcher NEGOTIATION
Misaki RoysterRussiaAsiya Javayant NEW
Sinclair WaycottGermanyElwin Sharvill NEW
James ButtArgentinaIoni Bowcher NEGOTIATION
Jefferson SchemmerRussiaAnna Fali NEGOTIATION
Ricardo GauchoGermanyAsiya Javayant PROPOSAL
Costa DilliardJapanAnna Fali RENEWAL
Maisha RulapaughItalyIvan Magalhaes UNQUALIFIED
Faith GillianCanadaStephen Shaw RENEWAL
Isabel BowleyAustraliaStephen Shaw PROPOSAL
Adams MorascaBrazilStephen Shaw QUALIFIED
Johnson SergiFranceAsiya Javayant NEGOTIATION
Nicolas IturbideIndiaXuxue Feng NEGOTIATION
Francesco ShinkoGermanyXuxue Feng RENEWAL
Faith GillianItalyBernardo Dominic RENEWAL
Deepesh ChuiBrazilAmy Elsner PROPOSAL
Chavez BriddickIndiaIvan 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>