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
Leon OldroydCanadaIvan Magalhaes QUALIFIED
Mujtaba NickaArgentinaAsiya Javayant PROPOSAL
Adams MorascaGermanyIvan Magalhaes NEW
Nicolas IturbideArgentinaAsiya Javayant UNQUALIFIED
Greenwood BologniaBrazilStephen Shaw RENEWAL
Ashley DoeRussiaAsiya Javayant PROPOSAL
Nicolas IturbideJapanAmy Elsner RENEWAL
Maria MarrierArgentinaAnna Fali NEGOTIATION
Munro FerenczSpainXuxue Feng QUALIFIED
Stacey MacleadRussiaStephen Shaw NEGOTIATION
Jeanfrancois VenereIndiaXuxue Feng PROPOSAL
Arvin AlbaresUnited KingdomBernardo Dominic QUALIFIED
Arvin AlbaresRussiaBernardo Dominic NEW
Salvatore StockhamCanadaAsiya Javayant QUALIFIED
Maria MarrierUnited KingdomIvan Magalhaes PROPOSAL
Faith GillianFranceOnyama Limba NEGOTIATION
Ivar PaprockiGermanyBernardo Dominic PROPOSAL
Ricardo GauchoArgentinaIvan Magalhaes NEW
Greenwood BologniaSpainIoni Bowcher NEW
Julie StensethGermanyIoni Bowcher RENEWAL
Sinclair WaycottGermanyIvan Magalhaes NEW
Greenwood BologniaGermanyIoni Bowcher UNQUALIFIED
Misaki RoysterJapanXuxue Feng NEGOTIATION
Ivar PaprockiIndiaOnyama Limba PROPOSAL
Jones VocelkaGermanyAsiya Javayant NEGOTIATION
Morrow RutaCanadaIvan Magalhaes RENEWAL
Misaki RoysterCanadaStephen Shaw PROPOSAL
Leja CaldareraAustraliaAsiya Javayant NEW
Claire TollnerAustraliaIoni Bowcher RENEWAL
Wickens NestleJapanStephen Shaw NEW
Adams MorascaAustraliaAmy Elsner NEGOTIATION
Darci PoquetteSpainAnna Fali RENEWAL
Ricardo GauchoGermanyIoni Bowcher NEW
James ButtAustraliaIvan Magalhaes UNQUALIFIED
Morrow RutaGermanyElwin Sharvill UNQUALIFIED
Clifford RimItalyXuxue Feng QUALIFIED
Darci PoquetteRussiaStephen Shaw NEGOTIATION
Cody SaylorsCanadaIoni Bowcher UNQUALIFIED
Stacey MacleadBrazilXuxue Feng RENEWAL
James ButtIndiaAnna Fali PROPOSAL
Sinclair WaycottJapanAnna Fali UNQUALIFIED
Mujtaba NickaUnited KingdomXuxue Feng NEGOTIATION
Maisha RulapaughJapanElwin Sharvill QUALIFIED
Juan WieserCanadaBernardo Dominic RENEWAL
Sinclair WaycottAustraliaIoni Bowcher RENEWAL
Chavez BriddickIndiaIvan Magalhaes NEW
Aika InouyeCanadaIvan Magalhaes NEGOTIATION
Adams MorascaItalyIoni Bowcher RENEWAL
Jennifer AmigonIndiaStephen Shaw PROPOSAL
Julie StensethAustraliaIoni Bowcher RENEWAL
Horizontal
NameCountryRepresentativeStatus
Greenwood BologniaCanadaXuxue Feng PROPOSAL
Morrow RutaJapanOnyama Limba QUALIFIED
Clifford RimJapanAmy Elsner NEGOTIATION
Munro FerenczBrazilElwin Sharvill RENEWAL
Murillo MaletBrazilOnyama Limba UNQUALIFIED
Johnson SergiUnited KingdomAsiya Javayant UNQUALIFIED
Octavia MaletUnited KingdomBernardo Dominic PROPOSAL
Stacey MacleadIndiaAsiya Javayant NEW
Alejandro PerinArgentinaIvan Magalhaes QUALIFIED
Wickens NestleFranceAmy Elsner RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aditya KuskoFrance2025-06-25Chanay, Jeffrey A Esq QUALIFIED76Ioni Bowcher
1001Maria MarrierBrazil2025-06-12Benton, John B Jr PROPOSAL42Amy Elsner
1002Claire TollnerGermany2025-06-18Rousseaux, Michael Esq QUALIFIED87Bernardo Dominic
1003David DarakjySpain2025-06-11Rousseaux, Michael Esq UNQUALIFIED31Elwin Sharvill
1004Maria MarrierJapan2025-06-23Dorl, James J Esq RENEWAL33Asiya Javayant
1005Adams MorascaBrazil2025-06-22Rangoni Of Florence QUALIFIED92Stephen Shaw
1006Leja CaldareraSpain2025-06-29Rousseaux, Michael Esq RENEWAL46Xuxue Feng
1007David DarakjyArgentina2025-06-19Rousseaux, Michael Esq NEW91Anna Fali
1008Faith GillianAustralia2025-06-29Printing Dimensions NEGOTIATION38Onyama Limba
1009Munro FerenczUnited Kingdom2025-06-29Chemel, James L Cpa PROPOSAL69Anna Fali
1010Chavez BriddickCanada2025-06-29Morlong Associates UNQUALIFIED14Anna Fali
1011Misaki RoysterSpain2025-06-24Feltz Printing Service PROPOSAL3Elwin Sharvill
1012Stacey MacleadItaly2025-06-15Printing Dimensions NEGOTIATION74Xuxue Feng
1013Silvio SlusarskiItaly2025-06-09Rousseaux, Michael Esq NEGOTIATION60Xuxue Feng
1014Alejandro PerinFrance2025-06-13Printing Dimensions QUALIFIED66Ivan Magalhaes
1015Kadeem FlosiCanada2025-06-18Printing Dimensions RENEWAL74Asiya Javayant
1016Ricardo GauchoIndia2025-07-03Rangoni Of Florence UNQUALIFIED64Ioni Bowcher
1017Tony FollerFrance2025-06-06King, Christopher A Esq QUALIFIED67Xuxue Feng
1018Cody SaylorsSpain2025-06-24Commercial Press PROPOSAL59Stephen Shaw
1019Antonio CaudyArgentina2025-06-08Benton, John B Jr NEW86Ivan Magalhaes
1020James ButtRussia2025-06-13Chanay, Jeffrey A Esq NEGOTIATION90Amy Elsner
1021Darci PoquetteFrance2025-06-09Feiner Bros PROPOSAL78Ivan Magalhaes
1022Jennifer AmigonArgentina2025-06-29Dorl, James J Esq PROPOSAL84Ioni Bowcher
1023Cody SaylorsItaly2025-06-11Chemel, James L Cpa PROPOSAL58Bernardo Dominic
1024Ricardo GauchoRussia2025-06-17Chapman, Ross E Esq QUALIFIED82Xuxue Feng
1025Sinclair WaycottCanada2025-06-29Rousseaux, Michael Esq RENEWAL53Xuxue Feng
1026Leon OldroydFrance2025-07-03Rangoni Of Florence NEW53Elwin Sharvill
1027David DarakjyJapan2025-06-05King, Christopher A Esq QUALIFIED4Asiya Javayant
1028Sinclair WaycottJapan2025-06-28Feiner Bros NEGOTIATION24Bernardo Dominic
1029Leon OldroydAustralia2025-06-18Commercial Press PROPOSAL1Onyama Limba
1030Jennifer AmigonCanada2025-06-22Chanay, Jeffrey A Esq NEGOTIATION46Elwin Sharvill
1031Alejandro PerinRussia2025-06-18Chemel, James L Cpa NEGOTIATION39Stephen Shaw
1032Munro FerenczBrazil2025-06-12Morlong Associates UNQUALIFIED83Onyama Limba
1033Izzy GarufiArgentina2025-06-14Printing Dimensions UNQUALIFIED4Elwin Sharvill
1034Maisha RulapaughAustralia2025-06-21Dorl, James J Esq RENEWAL49Elwin Sharvill
1035Antonio CaudyJapan2025-06-22Chanay, Jeffrey A Esq NEGOTIATION56Anna Fali
1036Aditya KuskoRussia2025-06-16Rangoni Of Florence NEW55Ivan Magalhaes
1037Jones VocelkaItaly2025-06-14Morlong Associates RENEWAL45Elwin Sharvill
1038Leja CaldareraGermany2025-06-17Feltz Printing Service QUALIFIED51Elwin Sharvill
1039Silvio SlusarskiArgentina2025-06-17Rousseaux, Michael Esq NEW63Anna Fali
1040Rodrigues CampainSpain2025-06-19Feltz Printing Service PROPOSAL43Ioni Bowcher
1041James ButtFrance2025-06-05Chemel, James L Cpa RENEWAL43Ioni Bowcher
1042Kaitlin OstroskyCanada2025-06-23Printing Dimensions NEW79Elwin Sharvill
1043Darci PoquetteFrance2025-06-26Printing Dimensions UNQUALIFIED49Stephen Shaw
1044Aika InouyeBrazil2025-06-28Truhlar And Truhlar Attys PROPOSAL71Amy Elsner
1045Costa DilliardCanada2025-06-06King, Christopher A Esq NEW95Stephen Shaw
1046Alejandro PerinSpain2025-06-25Feiner Bros QUALIFIED50Asiya Javayant
1047Costa DilliardBrazil2025-06-04Morlong Associates UNQUALIFIED94Onyama Limba
1048Julie StensethCanada2025-06-07Morlong Associates RENEWAL32Ivan Magalhaes
1049Stacey MacleadSpain2025-06-13King, Christopher A Esq NEGOTIATION96Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Aruna FigeroaFranceAnna Fali NEGOTIATION
Chavez BriddickSpainStephen Shaw PROPOSAL
David DarakjyRussiaAmy Elsner RENEWAL
Wickens NestleGermanyIvan Magalhaes UNQUALIFIED
Jennifer AmigonFranceElwin Sharvill NEW
Mayumi KolmetzIndiaStephen Shaw NEGOTIATION
Misaki RoysterAustraliaBernardo Dominic PROPOSAL
Tony FollerGermanyOnyama Limba UNQUALIFIED
Morrow RutaGermanyAsiya Javayant RENEWAL
Aditya KuskoFranceOnyama Limba RENEWAL
Antonio CaudyItalyOnyama Limba QUALIFIED
Claire TollnerArgentinaAsiya Javayant NEW
Adams MorascaCanadaElwin Sharvill NEW
Sinclair WaycottAustraliaAsiya Javayant QUALIFIED
Adams MorascaArgentinaElwin Sharvill NEW
Wickens NestleSpainAnna Fali NEGOTIATION
Murillo MaletItalyAnna Fali QUALIFIED
Francesco ShinkoCanadaElwin Sharvill UNQUALIFIED
Ashley DoeBrazilBernardo Dominic PROPOSAL
Wickens NestleArgentinaIvan Magalhaes RENEWAL
Mayumi KolmetzSpainAnna Fali QUALIFIED
Kaitlin OstroskyArgentinaAmy Elsner PROPOSAL
Claire TollnerSpainStephen Shaw UNQUALIFIED
Alejandro PerinArgentinaXuxue Feng NEGOTIATION
Stacey MacleadItalyIvan Magalhaes PROPOSAL
Munro FerenczAustraliaAsiya Javayant NEGOTIATION
Morrow RutaRussiaAnna Fali UNQUALIFIED
David DarakjyFranceBernardo Dominic NEW
Izzy GarufiFranceAnna Fali PROPOSAL
Claire TollnerItalyAmy Elsner RENEWAL
Octavia MaletJapanAnna Fali UNQUALIFIED
Izzy GarufiBrazilAmy Elsner UNQUALIFIED
Sinclair WaycottSpainElwin Sharvill UNQUALIFIED
Jeanfrancois VenereCanadaElwin Sharvill NEW
Johnson SergiIndiaBernardo Dominic UNQUALIFIED
Salvatore StockhamSpainElwin Sharvill UNQUALIFIED
Maisha RulapaughAustraliaAmy Elsner QUALIFIED
Antonio CaudyBrazilAsiya Javayant UNQUALIFIED
Morrow RutaSpainAnna Fali UNQUALIFIED
James ButtRussiaStephen Shaw UNQUALIFIED
Faith GillianSpainAmy Elsner PROPOSAL
Alejandro PerinUnited KingdomOnyama Limba QUALIFIED
Deepesh ChuiRussiaAmy Elsner NEW
Jones VocelkaUnited KingdomBernardo Dominic UNQUALIFIED
Sinclair WaycottArgentinaElwin Sharvill PROPOSAL
Sinclair WaycottItalyAsiya Javayant NEGOTIATION
Aruna FigeroaFranceAsiya Javayant PROPOSAL
Antonio CaudyJapanAmy Elsner NEGOTIATION
Izzy GarufiGermanyXuxue Feng PROPOSAL
Jeanfrancois VenereIndiaXuxue Feng UNQUALIFIED
Frozen Columns
Name
Julie Stenseth
Salvatore Stockham
Rodrigues Campain
Sinclair Waycott
James Butt
James Butt
Leon Oldroyd
Claire Tollner
Jefferson Schemmer
Francesco Shinko
Maisha Rulapaugh
Leja Caldarera
Aika Inouye
Costa Dilliard
Claire Tollner
Cody Saylors
Aika Inouye
Ricardo Gaucho
Chavez Briddick
Ivar Paprocki
Rodrigues Campain
Jeanfrancois Venere
Kadeem Flosi
Arvin Albares
Salvatore Stockham
Jones Vocelka
Alejandro Perin
Chavez Briddick
Arvin Albares
Kaitlin Ostrosky
James Butt
Greenwood Bolognia
Darci Poquette
Jones Vocelka
Wickens Nestle
Maisha Rulapaugh
Kadeem Flosi
Costa Dilliard
Munro Ferencz
Faith Gillian
Faith Gillian
Mayumi Kolmetz
Mayumi Kolmetz
Mujtaba Nicka
Tony Foller
Jennifer Amigon
Cody Saylors
David Darakjy
Aruna Figeroa
Mayumi Kolmetz
IdCountryDate
1000United Kingdom2025-07-01
1001Germany2025-06-07
1002Argentina2025-07-01
1003Brazil2025-06-17
1004India2025-06-12
1005Brazil2025-06-24
1006Spain2025-06-09
1007India2025-06-28
1008Spain2025-06-15
1009France2025-07-01
1010France2025-06-29
1011France2025-06-06
1012Australia2025-06-05
1013Canada2025-06-11
1014Germany2025-06-18
1015Italy2025-06-16
1016India2025-06-20
1017Germany2025-06-20
1018Canada2025-07-03
1019Germany2025-06-22
1020Canada2025-07-02
1021Spain2025-06-12
1022Russia2025-06-28
1023Germany2025-07-01
1024Argentina2025-06-27
1025India2025-06-16
1026Argentina2025-06-04
1027Spain2025-06-30
1028Brazil2025-06-12
1029India2025-06-12
1030Japan2025-06-12
1031Canada2025-07-02
1032Canada2025-07-01
1033Russia2025-07-02
1034United Kingdom2025-06-26
1035Australia2025-06-10
1036Japan2025-06-13
1037Italy2025-06-07
1038United Kingdom2025-06-10
1039Australia2025-06-17
1040Russia2025-06-15
1041Japan2025-07-03
1042Germany2025-06-11
1043Australia2025-06-26
1044Canada2025-06-25
1045France2025-06-16
1046India2025-06-12
1047Japan2025-06-20
1048Spain2025-06-22
1049Russia2025-06-11

On-Demand Data

NameIdCountryDate
David Darakjy1000Russia2025-06-17
Adams Morasca1001India2025-06-07
Chavez Briddick1002Spain2025-06-25
Leon Oldroyd1003Spain2025-06-30
Salvatore Stockham1004Spain2025-06-24
Isabel Bowley1005Germany2025-06-13
Leja Caldarera1006Australia2025-06-12
Sinclair Waycott1007France2025-06-23
Juan Wieser1008India2025-06-22
Juan Wieser1009Spain2025-06-23
Leja Caldarera1010Italy2025-06-25
Maisha Rulapaugh1011India2025-06-21
David Darakjy1012Italy2025-06-28
Deepesh Chui1013Argentina2025-06-23
Antonio Caudy1014United Kingdom2025-06-25
Rodrigues Campain1015Russia2025-06-07
Jefferson Schemmer1016Russia2025-06-20
Murillo Malet1017Brazil2025-07-03
Wickens Nestle1018Japan2025-06-23
Ivar Paprocki1019India2025-06-15
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Ashley DoeJapanStephen Shaw NEGOTIATION
Juan WieserJapanIvan Magalhaes RENEWAL
Antonio CaudyRussiaIvan Magalhaes NEGOTIATION
Misaki RoysterRussiaIoni Bowcher UNQUALIFIED
Julie StensethItalyElwin Sharvill QUALIFIED
Sinclair WaycottItalyIoni Bowcher NEGOTIATION
Mayumi KolmetzArgentinaOnyama Limba PROPOSAL
Tony FollerRussiaElwin Sharvill PROPOSAL
Tony FollerIndiaIoni Bowcher RENEWAL
Aruna FigeroaRussiaAsiya Javayant NEGOTIATION
Sinclair WaycottAustraliaOnyama Limba QUALIFIED
Stacey MacleadSpainAsiya Javayant RENEWAL
Arvin AlbaresIndiaBernardo Dominic QUALIFIED
Maisha RulapaughUnited KingdomIvan Magalhaes NEW
Sinclair WaycottFranceAmy Elsner NEGOTIATION
Mujtaba NickaAustraliaAnna Fali NEGOTIATION
Jones VocelkaJapanStephen Shaw UNQUALIFIED
Aika InouyeCanadaAsiya Javayant NEGOTIATION
James ButtArgentinaAmy Elsner RENEWAL
Tony FollerFranceStephen Shaw RENEWAL
Aruna FigeroaCanadaXuxue Feng PROPOSAL
Greenwood BologniaGermanyIvan Magalhaes RENEWAL
Chavez BriddickCanadaStephen Shaw PROPOSAL
Emily WhobreyFranceAsiya Javayant QUALIFIED
James ButtJapanAmy Elsner QUALIFIED
Chavez BriddickItalyAnna Fali NEW
Deepesh ChuiGermanyAsiya Javayant NEW
Isabel BowleyAustraliaStephen Shaw PROPOSAL
Misaki RoysterJapanAsiya Javayant UNQUALIFIED
Francesco ShinkoCanadaIoni Bowcher QUALIFIED
Francesco ShinkoIndiaAmy Elsner NEGOTIATION
Aruna FigeroaArgentinaElwin Sharvill NEW
Emily WhobreyUnited KingdomXuxue Feng QUALIFIED
Julie StensethBrazilAnna Fali NEGOTIATION
Jennifer AmigonIndiaXuxue Feng RENEWAL
Aruna FigeroaUnited KingdomAsiya Javayant RENEWAL
Wickens NestleJapanElwin Sharvill NEW
Aika InouyeAustraliaElwin Sharvill QUALIFIED
Alejandro PerinJapanIvan Magalhaes NEGOTIATION
Leja CaldareraCanadaIoni Bowcher PROPOSAL

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