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
Silvio SlusarskiUnited KingdomIvan Magalhaes NEW
Faith GillianGermanyIvan Magalhaes QUALIFIED
Octavia MaletCanadaIvan Magalhaes RENEWAL
Jennifer AmigonJapanAnna Fali NEW
Morrow RutaBrazilAsiya Javayant PROPOSAL
Leja CaldareraJapanAsiya Javayant NEW
Salvatore StockhamGermanyAmy Elsner QUALIFIED
Johnson SergiItalyXuxue Feng NEW
Silvio SlusarskiArgentinaElwin Sharvill NEGOTIATION
Izzy GarufiFranceOnyama Limba UNQUALIFIED
Chavez BriddickUnited KingdomStephen Shaw RENEWAL
Arvin AlbaresJapanStephen Shaw QUALIFIED
Aditya KuskoGermanyAmy Elsner QUALIFIED
Jeanfrancois VenereAustraliaElwin Sharvill NEW
Silvio SlusarskiAustraliaOnyama Limba RENEWAL
Silvio SlusarskiCanadaAsiya Javayant QUALIFIED
Claire TollnerFranceBernardo Dominic NEGOTIATION
Murillo MaletAustraliaIoni Bowcher NEW
Jones VocelkaAustraliaOnyama Limba PROPOSAL
Octavia MaletArgentinaStephen Shaw QUALIFIED
Salvatore StockhamBrazilXuxue Feng NEW
Claire TollnerUnited KingdomIoni Bowcher NEW
Kaitlin OstroskyIndiaStephen Shaw NEGOTIATION
Salvatore StockhamArgentinaIoni Bowcher UNQUALIFIED
Isabel BowleyJapanAsiya Javayant NEGOTIATION
Isabel BowleyFranceIvan Magalhaes NEW
Chavez BriddickIndiaXuxue Feng RENEWAL
Ivar PaprockiAustraliaAmy Elsner NEGOTIATION
Julie StensethUnited KingdomAmy Elsner RENEWAL
Kaitlin OstroskyFranceStephen Shaw RENEWAL
Juan WieserBrazilOnyama Limba RENEWAL
Morrow RutaRussiaIoni Bowcher QUALIFIED
Sinclair WaycottItalyAnna Fali PROPOSAL
Mayumi KolmetzUnited KingdomOnyama Limba NEGOTIATION
Juan WieserSpainIoni Bowcher UNQUALIFIED
Emily WhobreyUnited KingdomBernardo Dominic UNQUALIFIED
Sinclair WaycottIndiaStephen Shaw PROPOSAL
Aditya KuskoItalyStephen Shaw QUALIFIED
Cody SaylorsIndiaBernardo Dominic PROPOSAL
Salvatore StockhamRussiaXuxue Feng QUALIFIED
Jones VocelkaFranceXuxue Feng PROPOSAL
Smith GlickCanadaIoni Bowcher RENEWAL
Aruna FigeroaCanadaIoni Bowcher NEGOTIATION
Ricardo GauchoIndiaXuxue Feng QUALIFIED
Munro FerenczJapanIvan Magalhaes PROPOSAL
Jennifer AmigonJapanIvan Magalhaes NEGOTIATION
Ricardo GauchoCanadaXuxue Feng UNQUALIFIED
Mayumi KolmetzIndiaXuxue Feng NEW
Wickens NestleFranceAnna Fali NEGOTIATION
Faith GillianBrazilAmy Elsner RENEWAL
Horizontal
NameCountryRepresentativeStatus
Emily WhobreyItalyOnyama Limba UNQUALIFIED
Isabel BowleyItalyXuxue Feng RENEWAL
Alejandro PerinCanadaBernardo Dominic QUALIFIED
Alejandro PerinItalyAmy Elsner PROPOSAL
Claire TollnerCanadaBernardo Dominic NEW
Murillo MaletFranceStephen Shaw PROPOSAL
Chavez BriddickRussiaAnna Fali UNQUALIFIED
Chavez BriddickUnited KingdomIoni Bowcher NEGOTIATION
Isabel BowleyJapanAnna Fali PROPOSAL
Misaki RoysterUnited KingdomOnyama Limba PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Maria MarrierBrazil2026-04-27Chapman, Ross E Esq QUALIFIED2Onyama Limba
1001Maisha RulapaughFrance2026-04-26Truhlar And Truhlar Attys NEGOTIATION95Amy Elsner
1002Kadeem FlosiItaly2026-05-15Feltz Printing Service RENEWAL13Bernardo Dominic
1003David DarakjyAustralia2026-05-13Chemel, James L Cpa UNQUALIFIED24Stephen Shaw
1004David DarakjyJapan2026-05-21Feltz Printing Service NEGOTIATION15Anna Fali
1005Murillo MaletAustralia2026-05-05Feiner Bros PROPOSAL5Xuxue Feng
1006Claire TollnerIndia2026-05-06Printing Dimensions RENEWAL95Amy Elsner
1007Mayumi KolmetzRussia2026-05-04Chemel, James L Cpa NEGOTIATION82Xuxue Feng
1008Alejandro PerinCanada2026-05-23Morlong Associates PROPOSAL73Ioni Bowcher
1009Maisha RulapaughFrance2026-05-11Morlong Associates UNQUALIFIED68Asiya Javayant
1010Alejandro PerinFrance2026-05-13Feiner Bros PROPOSAL7Asiya Javayant
1011Alejandro PerinJapan2026-05-20King, Christopher A Esq RENEWAL47Onyama Limba
1012Murillo MaletAustralia2026-05-17Printing Dimensions QUALIFIED25Ioni Bowcher
1013Tony FollerIndia2026-05-20Chemel, James L Cpa RENEWAL69Stephen Shaw
1014Clifford RimJapan2026-04-30Morlong Associates RENEWAL84Ivan Magalhaes
1015Arvin AlbaresCanada2026-05-13Benton, John B Jr QUALIFIED80Xuxue Feng
1016Munro FerenczUnited Kingdom2026-05-09Morlong Associates UNQUALIFIED5Ioni Bowcher
1017Kadeem FlosiRussia2026-05-06Benton, John B Jr UNQUALIFIED46Anna Fali
1018Greenwood BologniaBrazil2026-05-12Feltz Printing Service NEGOTIATION49Xuxue Feng
1019Rodrigues CampainUnited Kingdom2026-05-21Dorl, James J Esq NEGOTIATION26Amy Elsner
1020Alejandro PerinUnited Kingdom2026-04-29Rangoni Of Florence NEGOTIATION67Elwin Sharvill
1021Wickens NestleIndia2026-05-14Morlong Associates RENEWAL84Asiya Javayant
1022Murillo MaletBrazil2026-05-17Feltz Printing Service NEGOTIATION67Bernardo Dominic
1023Izzy GarufiAustralia2026-04-27Printing Dimensions QUALIFIED9Amy Elsner
1024Wickens NestleFrance2026-05-16Feltz Printing Service NEGOTIATION93Anna Fali
1025Isabel BowleyAustralia2026-05-16Dorl, James J Esq PROPOSAL65Ioni Bowcher
1026Aruna FigeroaBrazil2026-04-26Morlong Associates RENEWAL81Ivan Magalhaes
1027Tony FollerGermany2026-05-15King, Christopher A Esq PROPOSAL77Anna Fali
1028Kadeem FlosiArgentina2026-05-21Truhlar And Truhlar Attys NEGOTIATION95Ivan Magalhaes
1029Octavia MaletSpain2026-04-25Morlong Associates PROPOSAL62Ivan Magalhaes
1030Octavia MaletCanada2026-05-05Rousseaux, Michael Esq NEW89Ivan Magalhaes
1031Sinclair WaycottArgentina2026-04-27Feltz Printing Service NEGOTIATION81Amy Elsner
1032Izzy GarufiRussia2026-04-26Commercial Press PROPOSAL87Anna Fali
1033Alejandro PerinItaly2026-05-04Benton, John B Jr NEW38Ivan Magalhaes
1034Rodrigues CampainArgentina2026-04-29Benton, John B Jr NEGOTIATION98Ivan Magalhaes
1035Jeanfrancois VenereRussia2026-05-10Morlong Associates NEGOTIATION83Amy Elsner
1036Faith GillianRussia2026-04-26Feltz Printing Service RENEWAL69Bernardo Dominic
1037Antonio CaudySpain2026-04-26Dorl, James J Esq QUALIFIED42Bernardo Dominic
1038Alejandro PerinRussia2026-05-06Chanay, Jeffrey A Esq NEGOTIATION49Xuxue Feng
1039Silvio SlusarskiGermany2026-05-05Morlong Associates RENEWAL44Bernardo Dominic
1040Aditya KuskoUnited Kingdom2026-05-06Feiner Bros PROPOSAL41Onyama Limba
1041Sinclair WaycottAustralia2026-05-17Feltz Printing Service PROPOSAL50Ioni Bowcher
1042Darci PoquetteSpain2026-05-04Printing Dimensions RENEWAL26Bernardo Dominic
1043Mujtaba NickaCanada2026-04-25King, Christopher A Esq NEGOTIATION94Ivan Magalhaes
1044Rodrigues CampainSpain2026-05-20Rangoni Of Florence RENEWAL43Bernardo Dominic
1045Emily WhobreyIndia2026-05-19Rangoni Of Florence RENEWAL62Ioni Bowcher
1046Wickens NestleIndia2026-05-07Dorl, James J Esq NEW32Xuxue Feng
1047Tony FollerUnited Kingdom2026-05-23Chapman, Ross E Esq NEW33Onyama Limba
1048Claire TollnerUnited Kingdom2026-04-26King, Christopher A Esq RENEWAL78Bernardo Dominic
1049Darci PoquetteArgentina2026-05-08Printing Dimensions NEW88Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Ricardo GauchoGermanyIoni Bowcher NEGOTIATION
David DarakjyAustraliaAsiya Javayant PROPOSAL
Jefferson SchemmerArgentinaBernardo Dominic PROPOSAL
Leon OldroydUnited KingdomElwin Sharvill RENEWAL
Rodrigues CampainIndiaBernardo Dominic NEW
Ashley DoeItalyBernardo Dominic RENEWAL
Kaitlin OstroskyJapanAmy Elsner PROPOSAL
Maria MarrierItalyOnyama Limba NEW
Cody SaylorsBrazilXuxue Feng NEGOTIATION
Jones VocelkaGermanyIvan Magalhaes PROPOSAL
Ivar PaprockiAustraliaAsiya Javayant NEW
Greenwood BologniaAustraliaXuxue Feng QUALIFIED
Chavez BriddickCanadaIoni Bowcher NEGOTIATION
Emily WhobreyIndiaBernardo Dominic NEGOTIATION
Isabel BowleyRussiaOnyama Limba NEW
Salvatore StockhamCanadaElwin Sharvill UNQUALIFIED
Chavez BriddickSpainAsiya Javayant NEGOTIATION
Tony FollerGermanyXuxue Feng PROPOSAL
Costa DilliardGermanyIoni Bowcher RENEWAL
Octavia MaletGermanyAnna Fali UNQUALIFIED
Morrow RutaRussiaAnna Fali NEW
Rodrigues CampainUnited KingdomAmy Elsner NEW
Morrow RutaFranceXuxue Feng RENEWAL
Clifford RimUnited KingdomIoni Bowcher NEGOTIATION
Izzy GarufiArgentinaIvan Magalhaes NEW
Cody SaylorsBrazilStephen Shaw PROPOSAL
Kaitlin OstroskyGermanyAsiya Javayant NEW
Octavia MaletArgentinaAmy Elsner RENEWAL
Francesco ShinkoRussiaAsiya Javayant UNQUALIFIED
Darci PoquetteFranceStephen Shaw QUALIFIED
Alejandro PerinAustraliaAmy Elsner NEGOTIATION
Johnson SergiCanadaIvan Magalhaes QUALIFIED
Adams MorascaSpainIoni Bowcher RENEWAL
Ricardo GauchoCanadaElwin Sharvill QUALIFIED
Misaki RoysterUnited KingdomAsiya Javayant NEW
Ricardo GauchoRussiaAsiya Javayant NEGOTIATION
Alejandro PerinAustraliaAmy Elsner NEW
Jefferson SchemmerAustraliaIoni Bowcher NEW
Isabel BowleyCanadaAmy Elsner NEGOTIATION
Aditya KuskoFranceBernardo Dominic PROPOSAL
Darci PoquetteBrazilAmy Elsner UNQUALIFIED
James ButtItalyStephen Shaw PROPOSAL
Francesco ShinkoArgentinaXuxue Feng NEGOTIATION
Morrow RutaAustraliaAnna Fali RENEWAL
Jones VocelkaSpainStephen Shaw PROPOSAL
Jones VocelkaItalyAnna Fali UNQUALIFIED
Jefferson SchemmerBrazilXuxue Feng RENEWAL
Cody SaylorsFranceElwin Sharvill QUALIFIED
Arvin AlbaresSpainOnyama Limba RENEWAL
Leja CaldareraIndiaElwin Sharvill RENEWAL
Frozen Columns
Name
Silvio Slusarski
Misaki Royster
Francesco Shinko
Tony Foller
Kadeem Flosi
Kadeem Flosi
Leon Oldroyd
Julie Stenseth
Mayumi Kolmetz
Greenwood Bolognia
Mayumi Kolmetz
Rodrigues Campain
Smith Glick
Mayumi Kolmetz
Alejandro Perin
Deepesh Chui
Clifford Rim
Julie Stenseth
Wickens Nestle
David Darakjy
Costa Dilliard
Stacey Maclead
Octavia Malet
Alejandro Perin
Antonio Caudy
Murillo Malet
Octavia Malet
Darci Poquette
Clifford Rim
Silvio Slusarski
Misaki Royster
Darci Poquette
Maisha Rulapaugh
Darci Poquette
Aditya Kusko
Munro Ferencz
Cody Saylors
Kaitlin Ostrosky
Nicolas Iturbide
Nicolas Iturbide
Adams Morasca
Aika Inouye
Jefferson Schemmer
Claire Tollner
Stacey Maclead
Jones Vocelka
Jeanfrancois Venere
Adams Morasca
Tony Foller
Clifford Rim
IdCountryDate
1000Australia2026-05-02
1001Brazil2026-04-25
1002Russia2026-04-27
1003United Kingdom2026-04-26
1004Brazil2026-05-11
1005India2026-04-26
1006Canada2026-05-03
1007France2026-05-01
1008India2026-05-10
1009Argentina2026-05-11
1010United Kingdom2026-05-22
1011Germany2026-05-15
1012Canada2026-05-22
1013Italy2026-05-07
1014Australia2026-05-21
1015Italy2026-05-09
1016Brazil2026-05-07
1017Russia2026-05-06
1018Canada2026-05-19
1019France2026-05-05
1020Argentina2026-05-15
1021Italy2026-05-05
1022Australia2026-04-30
1023Russia2026-05-19
1024Canada2026-05-23
1025Italy2026-05-11
1026Italy2026-05-08
1027France2026-05-01
1028Italy2026-05-07
1029Brazil2026-05-10
1030Spain2026-05-20
1031Germany2026-04-27
1032United Kingdom2026-04-27
1033Germany2026-05-07
1034Australia2026-04-29
1035Russia2026-05-08
1036France2026-05-01
1037Brazil2026-05-05
1038India2026-05-05
1039France2026-04-25
1040Canada2026-05-04
1041Spain2026-04-29
1042Spain2026-05-08
1043Spain2026-04-27
1044India2026-04-30
1045Brazil2026-05-07
1046Italy2026-05-13
1047Canada2026-05-12
1048Argentina2026-05-18
1049Japan2026-05-24

On-Demand Data

NameIdCountryDate
Ricardo Gaucho1000United Kingdom2026-05-16
Ashley Doe1001Argentina2026-05-01
Mayumi Kolmetz1002Spain2026-05-13
Octavia Malet1003United Kingdom2026-05-03
Maria Marrier1004Italy2026-05-06
Jeanfrancois Venere1005Brazil2026-04-30
Kadeem Flosi1006Argentina2026-05-08
Kaitlin Ostrosky1007Spain2026-05-04
Isabel Bowley1008Australia2026-05-23
Juan Wieser1009Germany2026-05-03
Maisha Rulapaugh1010Australia2026-05-13
Aruna Figeroa1011Australia2026-05-13
Aruna Figeroa1012Spain2026-05-20
Antonio Caudy1013Japan2026-04-27
Octavia Malet1014Italy2026-05-08
Greenwood Bolognia1015France2026-05-04
Misaki Royster1016France2026-04-29
Sinclair Waycott1017Italy2026-05-18
Costa Dilliard1018Germany2026-05-12
Antonio Caudy1019Russia2026-04-26
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Silvio SlusarskiRussiaOnyama Limba NEW
Stacey MacleadItalyBernardo Dominic PROPOSAL
David DarakjyItalyOnyama Limba PROPOSAL
Jennifer AmigonSpainAmy Elsner NEGOTIATION
Deepesh ChuiUnited KingdomXuxue Feng QUALIFIED
Adams MorascaIndiaStephen Shaw NEW
Costa DilliardBrazilAsiya Javayant QUALIFIED
Alejandro PerinItalyElwin Sharvill PROPOSAL
Smith GlickIndiaBernardo Dominic NEGOTIATION
Costa DilliardFranceAsiya Javayant QUALIFIED
Izzy GarufiArgentinaAsiya Javayant NEW
Costa DilliardArgentinaElwin Sharvill QUALIFIED
Alejandro PerinArgentinaAsiya Javayant NEGOTIATION
Jefferson SchemmerJapanBernardo Dominic NEW
Greenwood BologniaCanadaXuxue Feng NEW
Julie StensethItalyAnna Fali RENEWAL
Jones VocelkaUnited KingdomXuxue Feng QUALIFIED
Antonio CaudyItalyXuxue Feng NEW
Izzy GarufiItalyStephen Shaw QUALIFIED
Leon OldroydGermanyAsiya Javayant QUALIFIED
Leja CaldareraArgentinaAnna Fali UNQUALIFIED
Faith GillianAustraliaIoni Bowcher PROPOSAL
Jefferson SchemmerItalyXuxue Feng NEGOTIATION
Salvatore StockhamFranceElwin Sharvill PROPOSAL
Emily WhobreyItalyOnyama Limba NEW
Sinclair WaycottItalyIoni Bowcher RENEWAL
Deepesh ChuiJapanIvan Magalhaes UNQUALIFIED
Costa DilliardSpainAmy Elsner UNQUALIFIED
Darci PoquetteArgentinaAnna Fali RENEWAL
Nicolas IturbideJapanIoni Bowcher UNQUALIFIED
Jefferson SchemmerCanadaBernardo Dominic NEW
Chavez BriddickCanadaIvan Magalhaes RENEWAL
Deepesh ChuiJapanAsiya Javayant NEGOTIATION
Jeanfrancois VenereUnited KingdomIoni Bowcher QUALIFIED
Adams MorascaItalyAnna Fali UNQUALIFIED
Stacey MacleadUnited KingdomAsiya Javayant NEGOTIATION
David DarakjyRussiaIvan Magalhaes PROPOSAL
James ButtItalyAsiya Javayant NEGOTIATION
Murillo MaletFranceAsiya Javayant QUALIFIED
Wickens NestleFranceBernardo Dominic 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>