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
Adams MorascaCanadaIvan Magalhaes NEW
Izzy GarufiSpainAsiya Javayant UNQUALIFIED
Rodrigues CampainCanadaAnna Fali NEGOTIATION
Jefferson SchemmerCanadaIoni Bowcher NEW
Faith GillianSpainAnna Fali NEW
Maisha RulapaughSpainAsiya Javayant PROPOSAL
Ashley DoeGermanyBernardo Dominic QUALIFIED
Tony FollerJapanXuxue Feng PROPOSAL
Leon OldroydGermanyElwin Sharvill QUALIFIED
Faith GillianItalyXuxue Feng NEGOTIATION
Jeanfrancois VenereAustraliaElwin Sharvill RENEWAL
Julie StensethSpainAnna Fali UNQUALIFIED
David DarakjySpainAmy Elsner NEGOTIATION
Nicolas IturbideArgentinaXuxue Feng PROPOSAL
Rodrigues CampainItalyAsiya Javayant RENEWAL
Ivar PaprockiCanadaIoni Bowcher QUALIFIED
Tony FollerArgentinaAsiya Javayant QUALIFIED
Darci PoquetteRussiaAmy Elsner NEGOTIATION
Arvin AlbaresRussiaIoni Bowcher PROPOSAL
Salvatore StockhamFranceAnna Fali PROPOSAL
Ashley DoeItalyAsiya Javayant QUALIFIED
Cody SaylorsIndiaOnyama Limba PROPOSAL
Antonio CaudyIndiaIoni Bowcher PROPOSAL
David DarakjyItalyAmy Elsner NEGOTIATION
Tony FollerCanadaIvan Magalhaes PROPOSAL
Juan WieserArgentinaAsiya Javayant QUALIFIED
Morrow RutaSpainAmy Elsner UNQUALIFIED
Morrow RutaBrazilElwin Sharvill QUALIFIED
Ashley DoeGermanyAsiya Javayant UNQUALIFIED
Arvin AlbaresFranceXuxue Feng UNQUALIFIED
Stacey MacleadRussiaIoni Bowcher UNQUALIFIED
Sinclair WaycottSpainOnyama Limba RENEWAL
Chavez BriddickItalyIoni Bowcher PROPOSAL
Leja CaldareraJapanAmy Elsner QUALIFIED
Jennifer AmigonUnited KingdomBernardo Dominic QUALIFIED
Emily WhobreyCanadaBernardo Dominic UNQUALIFIED
Mayumi KolmetzRussiaBernardo Dominic NEGOTIATION
Isabel BowleyBrazilBernardo Dominic NEGOTIATION
James ButtGermanyBernardo Dominic UNQUALIFIED
Isabel BowleyGermanyBernardo Dominic NEW
Faith GillianSpainOnyama Limba RENEWAL
Costa DilliardSpainXuxue Feng NEW
Misaki RoysterJapanAmy Elsner QUALIFIED
Leja CaldareraCanadaIoni Bowcher QUALIFIED
Jeanfrancois VenereFranceStephen Shaw NEW
Costa DilliardFranceStephen Shaw NEGOTIATION
Smith GlickCanadaOnyama Limba RENEWAL
Ricardo GauchoJapanIoni Bowcher RENEWAL
Wickens NestleGermanyXuxue Feng NEW
Ricardo GauchoRussiaIvan Magalhaes PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Chavez BriddickIndiaOnyama Limba QUALIFIED
Alejandro PerinFranceIoni Bowcher NEW
Aditya KuskoAustraliaIvan Magalhaes NEGOTIATION
Jennifer AmigonJapanIvan Magalhaes NEGOTIATION
Mujtaba NickaBrazilAnna Fali NEW
Wickens NestleBrazilAnna Fali NEW
Greenwood BologniaRussiaStephen Shaw NEGOTIATION
Kaitlin OstroskyJapanAnna Fali UNQUALIFIED
Octavia MaletRussiaOnyama Limba RENEWAL
Isabel BowleyCanadaAnna Fali NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Murillo MaletUnited Kingdom2026-04-16Chapman, Ross E Esq NEGOTIATION20Amy Elsner
1001Cody SaylorsGermany2026-04-24Feiner Bros NEW98Amy Elsner
1002Isabel BowleyAustralia2026-04-19King, Christopher A Esq QUALIFIED75Onyama Limba
1003Francesco ShinkoFrance2026-04-27Buckley Miller Wright QUALIFIED20Amy Elsner
1004Julie StensethGermany2026-04-17Rangoni Of Florence QUALIFIED54Stephen Shaw
1005Leon OldroydCanada2026-04-14Printing Dimensions UNQUALIFIED15Onyama Limba
1006Stacey MacleadJapan2026-04-23Feiner Bros NEGOTIATION39Asiya Javayant
1007Izzy GarufiIndia2026-04-25Chapman, Ross E Esq UNQUALIFIED16Amy Elsner
1008Aditya KuskoBrazil2026-04-13Morlong Associates UNQUALIFIED81Xuxue Feng
1009Darci PoquetteUnited Kingdom2026-04-16Benton, John B Jr UNQUALIFIED2Xuxue Feng
1010Faith GillianBrazil2026-04-04Feltz Printing Service NEW37Ivan Magalhaes
1011Antonio CaudyCanada2026-04-16Commercial Press NEW5Ioni Bowcher
1012Maisha RulapaughBrazil2026-04-10Printing Dimensions NEGOTIATION11Bernardo Dominic
1013Rodrigues CampainIndia2026-04-23Morlong Associates UNQUALIFIED85Anna Fali
1014Rodrigues CampainAustralia2026-04-05King, Christopher A Esq PROPOSAL36Onyama Limba
1015Munro FerenczRussia2026-04-26Feltz Printing Service NEGOTIATION70Stephen Shaw
1016Morrow RutaUnited Kingdom2026-05-01Chanay, Jeffrey A Esq UNQUALIFIED82Asiya Javayant
1017Costa DilliardItaly2026-04-10Buckley Miller Wright NEW9Ivan Magalhaes
1018Leja CaldareraCanada2026-04-10Benton, John B Jr NEGOTIATION90Elwin Sharvill
1019Murillo MaletIndia2026-04-10Morlong Associates NEGOTIATION89Xuxue Feng
1020Greenwood BologniaAustralia2026-04-06Benton, John B Jr NEW4Onyama Limba
1021Izzy GarufiRussia2026-04-20Dorl, James J Esq NEGOTIATION82Anna Fali
1022Clifford RimJapan2026-04-12Rangoni Of Florence PROPOSAL98Stephen Shaw
1023Salvatore StockhamAustralia2026-04-28Commercial Press NEGOTIATION71Ioni Bowcher
1024Leon OldroydJapan2026-04-07Commercial Press RENEWAL79Elwin Sharvill
1025Rodrigues CampainBrazil2026-04-04Commercial Press NEW5Elwin Sharvill
1026Nicolas IturbideFrance2026-04-26Feltz Printing Service UNQUALIFIED62Stephen Shaw
1027Jeanfrancois VenereAustralia2026-04-03Dorl, James J Esq NEW94Ivan Magalhaes
1028Leon OldroydRussia2026-04-04Rangoni Of Florence UNQUALIFIED64Stephen Shaw
1029Aditya KuskoAustralia2026-04-03Chemel, James L Cpa NEW48Bernardo Dominic
1030Francesco ShinkoItaly2026-04-30Benton, John B Jr NEW74Stephen Shaw
1031Arvin AlbaresUnited Kingdom2026-04-23Chemel, James L Cpa UNQUALIFIED42Anna Fali
1032Alejandro PerinFrance2026-04-20Chapman, Ross E Esq UNQUALIFIED68Xuxue Feng
1033Faith GillianArgentina2026-04-23King, Christopher A Esq PROPOSAL93Ioni Bowcher
1034Antonio CaudyJapan2026-04-13Chapman, Ross E Esq RENEWAL33Onyama Limba
1035Arvin AlbaresRussia2026-05-02Rangoni Of Florence RENEWAL26Bernardo Dominic
1036Izzy GarufiSpain2026-04-15Chapman, Ross E Esq NEGOTIATION41Elwin Sharvill
1037Costa DilliardRussia2026-04-08Rousseaux, Michael Esq UNQUALIFIED17Stephen Shaw
1038Darci PoquetteBrazil2026-04-07Rangoni Of Florence NEGOTIATION3Asiya Javayant
1039Greenwood BologniaSpain2026-04-21King, Christopher A Esq NEGOTIATION9Asiya Javayant
1040Kaitlin OstroskyIndia2026-04-13Dorl, James J Esq NEW23Bernardo Dominic
1041Aditya KuskoItaly2026-04-26Dorl, James J Esq NEGOTIATION71Bernardo Dominic
1042Mujtaba NickaFrance2026-04-10Dorl, James J Esq NEW44Onyama Limba
1043Aruna FigeroaJapan2026-05-02Commercial Press UNQUALIFIED39Ivan Magalhaes
1044Maisha RulapaughBrazil2026-04-25Benton, John B Jr PROPOSAL98Bernardo Dominic
1045Maria MarrierGermany2026-04-09Rousseaux, Michael Esq PROPOSAL45Amy Elsner
1046Leon OldroydUnited Kingdom2026-04-16Morlong Associates UNQUALIFIED17Elwin Sharvill
1047Ricardo GauchoRussia2026-04-16Buckley Miller Wright UNQUALIFIED39Ivan Magalhaes
1048Johnson SergiSpain2026-04-23Chanay, Jeffrey A Esq NEW26Elwin Sharvill
1049Chavez BriddickRussia2026-04-30Benton, John B Jr RENEWAL88Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Misaki RoysterIndiaAsiya Javayant PROPOSAL
Octavia MaletUnited KingdomIvan Magalhaes UNQUALIFIED
Kadeem FlosiItalyXuxue Feng PROPOSAL
Cody SaylorsFranceAnna Fali RENEWAL
Johnson SergiRussiaXuxue Feng NEGOTIATION
Leja CaldareraJapanAsiya Javayant PROPOSAL
Nicolas IturbideCanadaAnna Fali UNQUALIFIED
David DarakjyUnited KingdomAsiya Javayant RENEWAL
Octavia MaletArgentinaStephen Shaw UNQUALIFIED
Faith GillianIndiaAmy Elsner RENEWAL
Murillo MaletGermanyElwin Sharvill RENEWAL
Chavez BriddickRussiaAnna Fali NEGOTIATION
Maria MarrierUnited KingdomAnna Fali NEGOTIATION
Mayumi KolmetzBrazilXuxue Feng UNQUALIFIED
Tony FollerUnited KingdomIoni Bowcher NEW
Jones VocelkaUnited KingdomElwin Sharvill PROPOSAL
Greenwood BologniaItalyIvan Magalhaes QUALIFIED
Francesco ShinkoFranceIoni Bowcher RENEWAL
Nicolas IturbideJapanBernardo Dominic QUALIFIED
Julie StensethRussiaBernardo Dominic NEW
Antonio CaudyGermanyAmy Elsner RENEWAL
Munro FerenczArgentinaOnyama Limba RENEWAL
Kadeem FlosiJapanXuxue Feng UNQUALIFIED
Claire TollnerFranceIoni Bowcher PROPOSAL
Aika InouyeSpainIvan Magalhaes NEGOTIATION
Aditya KuskoItalyAsiya Javayant NEGOTIATION
Ivar PaprockiSpainXuxue Feng QUALIFIED
Aditya KuskoAustraliaAmy Elsner NEGOTIATION
Jones VocelkaIndiaXuxue Feng PROPOSAL
Aika InouyeSpainIvan Magalhaes QUALIFIED
Leon OldroydItalyElwin Sharvill UNQUALIFIED
Kadeem FlosiJapanBernardo Dominic QUALIFIED
Jeanfrancois VenereRussiaAsiya Javayant UNQUALIFIED
Claire TollnerCanadaBernardo Dominic NEGOTIATION
Wickens NestleAustraliaXuxue Feng RENEWAL
Deepesh ChuiCanadaElwin Sharvill PROPOSAL
Arvin AlbaresAustraliaOnyama Limba NEGOTIATION
Aditya KuskoArgentinaAnna Fali RENEWAL
Deepesh ChuiBrazilElwin Sharvill RENEWAL
Claire TollnerBrazilBernardo Dominic NEGOTIATION
Ricardo GauchoItalyIoni Bowcher NEW
Deepesh ChuiGermanyXuxue Feng NEW
Ricardo GauchoFranceIoni Bowcher NEW
Cody SaylorsRussiaOnyama Limba NEGOTIATION
Leja CaldareraItalyAmy Elsner QUALIFIED
David DarakjyIndiaElwin Sharvill QUALIFIED
Leja CaldareraJapanElwin Sharvill UNQUALIFIED
Izzy GarufiJapanIoni Bowcher NEW
Leja CaldareraCanadaStephen Shaw QUALIFIED
Nicolas IturbideJapanIoni Bowcher UNQUALIFIED
Frozen Columns
Name
Arvin Albares
Arvin Albares
Jefferson Schemmer
Emily Whobrey
Jones Vocelka
Tony Foller
Deepesh Chui
Wickens Nestle
Munro Ferencz
Nicolas Iturbide
Emily Whobrey
Wickens Nestle
Cody Saylors
James Butt
Ricardo Gaucho
Ashley Doe
Antonio Caudy
Aditya Kusko
Claire Tollner
Juan Wieser
Greenwood Bolognia
Misaki Royster
Wickens Nestle
Rodrigues Campain
Jennifer Amigon
Juan Wieser
Rodrigues Campain
Emily Whobrey
Stacey Maclead
Murillo Malet
Faith Gillian
Leon Oldroyd
Julie Stenseth
Morrow Ruta
Stacey Maclead
Munro Ferencz
Francesco Shinko
Ivar Paprocki
Deepesh Chui
Johnson Sergi
Nicolas Iturbide
Cody Saylors
Wickens Nestle
Leon Oldroyd
Chavez Briddick
Morrow Ruta
Claire Tollner
Faith Gillian
Jefferson Schemmer
Arvin Albares
IdCountryDate
1000India2026-04-03
1001India2026-04-26
1002Italy2026-04-21
1003Argentina2026-05-02
1004Italy2026-04-29
1005Russia2026-04-10
1006Germany2026-04-18
1007Japan2026-04-06
1008Argentina2026-04-21
1009Russia2026-04-28
1010Argentina2026-04-21
1011United Kingdom2026-04-28
1012Italy2026-04-07
1013Brazil2026-05-02
1014Italy2026-04-15
1015France2026-04-03
1016United Kingdom2026-04-28
1017Germany2026-04-25
1018Spain2026-04-05
1019Japan2026-04-12
1020France2026-04-26
1021United Kingdom2026-04-16
1022Russia2026-04-30
1023Canada2026-04-20
1024Spain2026-04-08
1025India2026-04-30
1026Australia2026-05-01
1027Germany2026-04-12
1028Japan2026-04-20
1029Japan2026-04-23
1030Australia2026-04-06
1031Japan2026-04-14
1032Brazil2026-05-02
1033India2026-04-17
1034Brazil2026-04-26
1035Italy2026-04-16
1036France2026-04-07
1037Argentina2026-05-02
1038Japan2026-04-06
1039United Kingdom2026-04-21
1040Japan2026-04-08
1041Canada2026-04-25
1042India2026-04-10
1043Germany2026-04-20
1044Argentina2026-04-07
1045France2026-04-22
1046United Kingdom2026-04-16
1047India2026-04-19
1048Brazil2026-04-15
1049Argentina2026-04-15

On-Demand Data

NameIdCountryDate
Julie Stenseth1000Japan2026-04-24
Aruna Figeroa1001Japan2026-04-22
Maisha Rulapaugh1002Japan2026-04-16
Leja Caldarera1003Argentina2026-04-18
Murillo Malet1004Canada2026-04-09
Mayumi Kolmetz1005Germany2026-04-18
Mayumi Kolmetz1006Italy2026-04-25
Kadeem Flosi1007France2026-04-19
Emily Whobrey1008Germany2026-04-21
Salvatore Stockham1009Spain2026-04-25
Mayumi Kolmetz1010United Kingdom2026-04-04
Darci Poquette1011France2026-04-16
Maisha Rulapaugh1012Russia2026-04-22
Deepesh Chui1013France2026-05-02
Leon Oldroyd1014Italy2026-04-18
Murillo Malet1015Japan2026-04-22
Claire Tollner1016France2026-04-18
Mayumi Kolmetz1017Russia2026-04-04
Aditya Kusko1018Canada2026-04-20
Deepesh Chui1019Germany2026-04-27
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Mujtaba NickaArgentinaAmy Elsner NEGOTIATION
Ricardo GauchoItalyAsiya Javayant RENEWAL
Maria MarrierJapanAmy Elsner NEGOTIATION
Nicolas IturbideItalyElwin Sharvill UNQUALIFIED
Darci PoquetteAustraliaAnna Fali RENEWAL
Francesco ShinkoGermanyStephen Shaw NEGOTIATION
Smith GlickCanadaIvan Magalhaes PROPOSAL
David DarakjyRussiaAsiya Javayant NEW
Munro FerenczJapanBernardo Dominic PROPOSAL
Aditya KuskoAustraliaAmy Elsner PROPOSAL
Jennifer AmigonUnited KingdomXuxue Feng UNQUALIFIED
Smith GlickRussiaStephen Shaw RENEWAL
Ivar PaprockiAustraliaStephen Shaw PROPOSAL
Leja CaldareraItalyElwin Sharvill NEGOTIATION
Cody SaylorsAustraliaBernardo Dominic NEW
Antonio CaudyRussiaAsiya Javayant QUALIFIED
Smith GlickBrazilIvan Magalhaes QUALIFIED
Deepesh ChuiCanadaIvan Magalhaes UNQUALIFIED
Emily WhobreyAustraliaXuxue Feng QUALIFIED
Aika InouyeIndiaOnyama Limba QUALIFIED
Cody SaylorsBrazilIvan Magalhaes UNQUALIFIED
Silvio SlusarskiIndiaAsiya Javayant QUALIFIED
James ButtBrazilStephen Shaw PROPOSAL
Munro FerenczIndiaAsiya Javayant RENEWAL
David DarakjyRussiaOnyama Limba PROPOSAL
Smith GlickUnited KingdomBernardo Dominic UNQUALIFIED
Munro FerenczRussiaIvan Magalhaes NEW
James ButtSpainIvan Magalhaes NEW
Sinclair WaycottAustraliaOnyama Limba UNQUALIFIED
Wickens NestleGermanyAnna Fali PROPOSAL
Morrow RutaItalyStephen Shaw QUALIFIED
Morrow RutaUnited KingdomOnyama Limba PROPOSAL
James ButtJapanAsiya Javayant NEGOTIATION
Francesco ShinkoArgentinaXuxue Feng NEW
Cody SaylorsCanadaAnna Fali NEGOTIATION
Misaki RoysterJapanStephen Shaw PROPOSAL
Adams MorascaGermanyXuxue Feng PROPOSAL
Ashley DoeAustraliaAnna Fali PROPOSAL
Arvin AlbaresCanadaAsiya Javayant UNQUALIFIED
Mayumi KolmetzGermanyAsiya Javayant RENEWAL

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