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
Jefferson SchemmerUnited KingdomAnna Fali QUALIFIED
Wickens NestleArgentinaIvan Magalhaes NEW
Faith GillianUnited KingdomAmy Elsner PROPOSAL
Clifford RimFranceAmy Elsner NEGOTIATION
Ivar PaprockiCanadaIoni Bowcher NEW
Greenwood BologniaUnited KingdomElwin Sharvill RENEWAL
Emily WhobreyJapanStephen Shaw PROPOSAL
Izzy GarufiIndiaIoni Bowcher NEGOTIATION
Ivar PaprockiSpainBernardo Dominic RENEWAL
Adams MorascaRussiaStephen Shaw NEGOTIATION
Stacey MacleadBrazilStephen Shaw PROPOSAL
Juan WieserUnited KingdomAsiya Javayant RENEWAL
Antonio CaudyUnited KingdomStephen Shaw NEGOTIATION
Leon OldroydCanadaXuxue Feng PROPOSAL
Mujtaba NickaGermanyAmy Elsner NEGOTIATION
Octavia MaletAustraliaXuxue Feng PROPOSAL
Aika InouyeIndiaBernardo Dominic PROPOSAL
Deepesh ChuiRussiaElwin Sharvill RENEWAL
Leja CaldareraBrazilAnna Fali PROPOSAL
Maria MarrierCanadaBernardo Dominic UNQUALIFIED
Jones VocelkaGermanyElwin Sharvill NEGOTIATION
Silvio SlusarskiJapanOnyama Limba RENEWAL
Mujtaba NickaRussiaIoni Bowcher QUALIFIED
Mayumi KolmetzJapanIvan Magalhaes PROPOSAL
Johnson SergiAustraliaBernardo Dominic PROPOSAL
Darci PoquetteSpainStephen Shaw NEW
Wickens NestleArgentinaElwin Sharvill PROPOSAL
Ricardo GauchoUnited KingdomStephen Shaw PROPOSAL
Aruna FigeroaSpainBernardo Dominic NEW
Juan WieserBrazilXuxue Feng UNQUALIFIED
Deepesh ChuiFranceBernardo Dominic UNQUALIFIED
Aika InouyeArgentinaAsiya Javayant NEGOTIATION
Ivar PaprockiArgentinaXuxue Feng QUALIFIED
Mayumi KolmetzGermanyStephen Shaw QUALIFIED
Wickens NestleBrazilBernardo Dominic NEW
David DarakjyUnited KingdomStephen Shaw NEW
Juan WieserAustraliaXuxue Feng UNQUALIFIED
Aika InouyeCanadaStephen Shaw NEGOTIATION
Francesco ShinkoAustraliaOnyama Limba NEGOTIATION
Clifford RimAustraliaAmy Elsner RENEWAL
Claire TollnerCanadaAmy Elsner RENEWAL
Deepesh ChuiJapanXuxue Feng QUALIFIED
Greenwood BologniaGermanyAnna Fali PROPOSAL
Ricardo GauchoIndiaAsiya Javayant QUALIFIED
Greenwood BologniaSpainIoni Bowcher QUALIFIED
Julie StensethSpainIvan Magalhaes RENEWAL
Kaitlin OstroskyAustraliaAnna Fali NEW
Francesco ShinkoRussiaIvan Magalhaes RENEWAL
Leon OldroydBrazilElwin Sharvill NEGOTIATION
Ricardo GauchoJapanBernardo Dominic UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Maisha RulapaughRussiaAmy Elsner QUALIFIED
Morrow RutaCanadaAsiya Javayant UNQUALIFIED
Greenwood BologniaRussiaOnyama Limba PROPOSAL
Deepesh ChuiItalyAnna Fali NEW
Francesco ShinkoSpainAsiya Javayant RENEWAL
Jeanfrancois VenereAustraliaAsiya Javayant NEGOTIATION
Clifford RimUnited KingdomAnna Fali NEW
Isabel BowleyItalyElwin Sharvill RENEWAL
Salvatore StockhamUnited KingdomIoni Bowcher PROPOSAL
Chavez BriddickBrazilIoni Bowcher NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Kadeem FlosiRussia2025-03-13Rousseaux, Michael Esq NEGOTIATION51Onyama Limba
1001Kadeem FlosiAustralia2025-03-11Feiner Bros QUALIFIED25Onyama Limba
1002Faith GillianArgentina2025-03-20Rousseaux, Michael Esq NEGOTIATION75Bernardo Dominic
1003Leon OldroydBrazil2025-03-23Feltz Printing Service UNQUALIFIED27Amy Elsner
1004Jennifer AmigonAustralia2025-03-19Benton, John B Jr QUALIFIED60Asiya Javayant
1005Jefferson SchemmerBrazil2025-03-22Rangoni Of Florence QUALIFIED26Elwin Sharvill
1006Darci PoquetteBrazil2025-03-28Chemel, James L Cpa NEW38Stephen Shaw
1007Emily WhobreyItaly2025-03-10Rangoni Of Florence RENEWAL46Elwin Sharvill
1008Kadeem FlosiFrance2025-03-08Morlong Associates QUALIFIED11Stephen Shaw
1009Wickens NestleUnited Kingdom2025-03-05Morlong Associates RENEWAL48Asiya Javayant
1010Greenwood BologniaJapan2025-03-30Printing Dimensions RENEWAL66Elwin Sharvill
1011Mujtaba NickaItaly2025-03-18Morlong Associates QUALIFIED56Stephen Shaw
1012Jennifer AmigonGermany2025-03-16King, Christopher A Esq UNQUALIFIED3Ivan Magalhaes
1013Cody SaylorsArgentina2025-03-06Commercial Press NEW23Ivan Magalhaes
1014Alejandro PerinFrance2025-03-11Rousseaux, Michael Esq RENEWAL67Bernardo Dominic
1015Costa DilliardCanada2025-03-05Feltz Printing Service PROPOSAL25Asiya Javayant
1016James ButtBrazil2025-03-09Truhlar And Truhlar Attys RENEWAL57Xuxue Feng
1017Julie StensethSpain2025-03-08Printing Dimensions RENEWAL72Amy Elsner
1018Morrow RutaGermany2025-03-23Chanay, Jeffrey A Esq NEGOTIATION39Anna Fali
1019James ButtBrazil2025-03-31Rousseaux, Michael Esq RENEWAL86Onyama Limba
1020David DarakjyGermany2025-03-10Chanay, Jeffrey A Esq PROPOSAL20Onyama Limba
1021Juan WieserAustralia2025-03-09Feiner Bros NEGOTIATION90Ivan Magalhaes
1022Leja CaldareraIndia2025-03-11Buckley Miller Wright QUALIFIED45Xuxue Feng
1023Jennifer AmigonJapan2025-03-14Benton, John B Jr NEGOTIATION72Amy Elsner
1024Clifford RimAustralia2025-03-28Feltz Printing Service UNQUALIFIED48Bernardo Dominic
1025Jones VocelkaBrazil2025-03-13Truhlar And Truhlar Attys UNQUALIFIED96Amy Elsner
1026Costa DilliardBrazil2025-04-02Chemel, James L Cpa QUALIFIED64Asiya Javayant
1027Ricardo GauchoBrazil2025-03-04Buckley Miller Wright NEGOTIATION41Ivan Magalhaes
1028Alejandro PerinUnited Kingdom2025-03-15Printing Dimensions PROPOSAL26Anna Fali
1029Jones VocelkaSpain2025-03-24Chemel, James L Cpa RENEWAL62Onyama Limba
1030Cody SaylorsAustralia2025-03-28Feiner Bros PROPOSAL82Anna Fali
1031Aditya KuskoSpain2025-04-02Chanay, Jeffrey A Esq QUALIFIED43Stephen Shaw
1032Emily WhobreyCanada2025-03-20King, Christopher A Esq RENEWAL43Stephen Shaw
1033Alejandro PerinCanada2025-03-05Chapman, Ross E Esq PROPOSAL84Amy Elsner
1034Jones VocelkaAustralia2025-03-11Chemel, James L Cpa NEGOTIATION61Elwin Sharvill
1035Leon OldroydFrance2025-03-28Dorl, James J Esq QUALIFIED49Anna Fali
1036Nicolas IturbideGermany2025-03-10Chanay, Jeffrey A Esq NEGOTIATION83Asiya Javayant
1037Jennifer AmigonJapan2025-03-05Chemel, James L Cpa NEW51Bernardo Dominic
1038Morrow RutaUnited Kingdom2025-03-28Rousseaux, Michael Esq NEGOTIATION33Bernardo Dominic
1039Tony FollerItaly2025-03-26Chanay, Jeffrey A Esq NEW78Xuxue Feng
1040Misaki RoysterUnited Kingdom2025-04-01Rousseaux, Michael Esq NEW1Xuxue Feng
1041Munro FerenczUnited Kingdom2025-03-18Rangoni Of Florence PROPOSAL13Anna Fali
1042Claire TollnerArgentina2025-03-09Printing Dimensions PROPOSAL69Xuxue Feng
1043Julie StensethSpain2025-03-04Chemel, James L Cpa NEGOTIATION86Xuxue Feng
1044Jeanfrancois VenereArgentina2025-03-12Printing Dimensions NEW14Asiya Javayant
1045Greenwood BologniaCanada2025-03-17Rangoni Of Florence RENEWAL70Elwin Sharvill
1046Johnson SergiSpain2025-03-05Chemel, James L Cpa UNQUALIFIED87Ivan Magalhaes
1047Chavez BriddickUnited Kingdom2025-03-19King, Christopher A Esq PROPOSAL37Stephen Shaw
1048Morrow RutaFrance2025-03-30King, Christopher A Esq RENEWAL93Onyama Limba
1049Cody SaylorsCanada2025-03-10Rousseaux, Michael Esq NEGOTIATION11Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Rodrigues CampainAustraliaAsiya Javayant RENEWAL
Rodrigues CampainBrazilXuxue Feng RENEWAL
Aditya KuskoFranceAmy Elsner UNQUALIFIED
Maisha RulapaughAustraliaAsiya Javayant NEGOTIATION
Misaki RoysterJapanIvan Magalhaes UNQUALIFIED
Aruna FigeroaRussiaAnna Fali PROPOSAL
Kadeem FlosiJapanAmy Elsner QUALIFIED
David DarakjyUnited KingdomAmy Elsner NEW
Alejandro PerinFranceAmy Elsner UNQUALIFIED
Sinclair WaycottBrazilAnna Fali NEGOTIATION
Maria MarrierSpainAsiya Javayant QUALIFIED
Claire TollnerSpainBernardo Dominic QUALIFIED
Adams MorascaCanadaXuxue Feng QUALIFIED
Adams MorascaRussiaIvan Magalhaes QUALIFIED
Izzy GarufiRussiaIoni Bowcher NEW
Izzy GarufiAustraliaAnna Fali NEW
Alejandro PerinAustraliaStephen Shaw QUALIFIED
Aditya KuskoItalyBernardo Dominic UNQUALIFIED
Mayumi KolmetzBrazilAnna Fali UNQUALIFIED
Tony FollerAustraliaIvan Magalhaes NEW
Adams MorascaBrazilAsiya Javayant UNQUALIFIED
Ivar PaprockiCanadaElwin Sharvill NEGOTIATION
Jennifer AmigonFranceOnyama Limba RENEWAL
Smith GlickRussiaStephen Shaw UNQUALIFIED
Maria MarrierJapanAmy Elsner UNQUALIFIED
Jennifer AmigonAustraliaStephen Shaw UNQUALIFIED
Faith GillianArgentinaIoni Bowcher RENEWAL
Octavia MaletFranceAnna Fali RENEWAL
Faith GillianJapanStephen Shaw PROPOSAL
Alejandro PerinSpainStephen Shaw NEW
Francesco ShinkoBrazilAsiya Javayant PROPOSAL
Adams MorascaJapanIoni Bowcher UNQUALIFIED
Isabel BowleyFranceAnna Fali NEGOTIATION
Rodrigues CampainGermanyXuxue Feng QUALIFIED
Leon OldroydGermanyAnna Fali UNQUALIFIED
Sinclair WaycottIndiaBernardo Dominic NEGOTIATION
Aika InouyeCanadaElwin Sharvill UNQUALIFIED
Arvin AlbaresFranceAnna Fali QUALIFIED
Cody SaylorsRussiaAmy Elsner UNQUALIFIED
Faith GillianCanadaBernardo Dominic QUALIFIED
Jefferson SchemmerAustraliaAsiya Javayant PROPOSAL
Wickens NestleRussiaAmy Elsner PROPOSAL
Aika InouyeItalyIoni Bowcher QUALIFIED
Claire TollnerBrazilAsiya Javayant NEW
Leja CaldareraGermanyBernardo Dominic PROPOSAL
Murillo MaletArgentinaIvan Magalhaes UNQUALIFIED
James ButtUnited KingdomStephen Shaw NEGOTIATION
Antonio CaudyAustraliaAsiya Javayant QUALIFIED
Murillo MaletSpainIvan Magalhaes QUALIFIED
Stacey MacleadArgentinaOnyama Limba RENEWAL
Frozen Columns
Name
Cody Saylors
Emily Whobrey
Wickens Nestle
Clifford Rim
Smith Glick
Izzy Garufi
Ricardo Gaucho
Darci Poquette
Francesco Shinko
Ivar Paprocki
Jennifer Amigon
Maria Marrier
Sinclair Waycott
Misaki Royster
Adams Morasca
Ricardo Gaucho
Johnson Sergi
Juan Wieser
Isabel Bowley
Munro Ferencz
Munro Ferencz
Costa Dilliard
Izzy Garufi
Julie Stenseth
Smith Glick
Misaki Royster
Kaitlin Ostrosky
Greenwood Bolognia
Antonio Caudy
Ricardo Gaucho
Antonio Caudy
Misaki Royster
Ivar Paprocki
Silvio Slusarski
Leon Oldroyd
Silvio Slusarski
Arvin Albares
Jennifer Amigon
Adams Morasca
David Darakjy
Juan Wieser
Mujtaba Nicka
Sinclair Waycott
Munro Ferencz
Jones Vocelka
Chavez Briddick
Claire Tollner
Isabel Bowley
Alejandro Perin
Octavia Malet
IdCountryDate
1000India2025-03-23
1001Japan2025-03-05
1002France2025-03-28
1003Australia2025-03-13
1004Canada2025-03-31
1005Italy2025-03-14
1006Brazil2025-03-29
1007France2025-03-27
1008India2025-03-15
1009Brazil2025-03-12
1010United Kingdom2025-03-28
1011Canada2025-03-07
1012France2025-04-02
1013India2025-03-04
1014Australia2025-03-13
1015Argentina2025-03-25
1016Argentina2025-04-02
1017Spain2025-03-15
1018India2025-03-04
1019Japan2025-03-13
1020Japan2025-03-14
1021Australia2025-03-27
1022United Kingdom2025-04-02
1023Argentina2025-03-19
1024Spain2025-03-11
1025France2025-03-06
1026Brazil2025-03-31
1027Russia2025-03-20
1028Germany2025-03-19
1029Japan2025-04-02
1030Argentina2025-03-27
1031Spain2025-03-11
1032Australia2025-03-24
1033India2025-03-22
1034Argentina2025-03-10
1035Brazil2025-03-27
1036Japan2025-03-21
1037Japan2025-03-22
1038Spain2025-03-17
1039Canada2025-03-21
1040Argentina2025-03-23
1041Italy2025-03-05
1042Australia2025-03-10
1043India2025-03-15
1044France2025-03-14
1045Spain2025-03-29
1046Brazil2025-04-01
1047Germany2025-03-23
1048India2025-03-13
1049Japan2025-03-22

On-Demand Data

NameIdCountryDate
Emily Whobrey1000Germany2025-03-20
Maisha Rulapaugh1001Canada2025-03-16
Maria Marrier1002Germany2025-03-17
Julie Stenseth1003Spain2025-03-17
Izzy Garufi1004United Kingdom2025-03-25
Maisha Rulapaugh1005Brazil2025-03-25
Aika Inouye1006Canada2025-03-08
Salvatore Stockham1007France2025-03-10
Salvatore Stockham1008Japan2025-03-19
Jones Vocelka1009Brazil2025-03-09
Maisha Rulapaugh1010Germany2025-03-11
Jefferson Schemmer1011Spain2025-03-16
Aruna Figeroa1012United Kingdom2025-03-26
Ricardo Gaucho1013Canada2025-03-10
Antonio Caudy1014France2025-03-20
Silvio Slusarski1015Brazil2025-03-28
David Darakjy1016Germany2025-03-13
Juan Wieser1017France2025-03-20
Leon Oldroyd1018Brazil2025-03-25
Mujtaba Nicka1019India2025-03-26
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Ricardo GauchoBrazilAsiya Javayant UNQUALIFIED
Isabel BowleyFranceBernardo Dominic PROPOSAL
Cody SaylorsRussiaStephen Shaw UNQUALIFIED
Jeanfrancois VenereRussiaIvan Magalhaes RENEWAL
James ButtUnited KingdomAnna Fali UNQUALIFIED
Deepesh ChuiRussiaAsiya Javayant RENEWAL
Jeanfrancois VenereItalyStephen Shaw NEW
Alejandro PerinRussiaAnna Fali NEGOTIATION
Isabel BowleyItalyXuxue Feng NEGOTIATION
Izzy GarufiBrazilIoni Bowcher RENEWAL
Aruna FigeroaCanadaIoni Bowcher NEGOTIATION
Adams MorascaAustraliaOnyama Limba NEW
Aruna FigeroaGermanyXuxue Feng QUALIFIED
Kadeem FlosiCanadaAnna Fali PROPOSAL
Ricardo GauchoItalyIoni Bowcher RENEWAL
Jones VocelkaArgentinaIvan Magalhaes RENEWAL
Ashley DoeFranceOnyama Limba UNQUALIFIED
Aditya KuskoBrazilElwin Sharvill QUALIFIED
Juan WieserGermanyOnyama Limba PROPOSAL
Octavia MaletFranceElwin Sharvill RENEWAL
Rodrigues CampainCanadaIoni Bowcher QUALIFIED
Alejandro PerinIndiaIoni Bowcher NEW
Greenwood BologniaItalyStephen Shaw NEGOTIATION
Jeanfrancois VenereItalyIvan Magalhaes QUALIFIED
Julie StensethGermanyStephen Shaw NEGOTIATION
Antonio CaudyUnited KingdomIvan Magalhaes RENEWAL
Munro FerenczUnited KingdomIvan Magalhaes QUALIFIED
Claire TollnerItalyIvan Magalhaes NEGOTIATION
David DarakjyAustraliaIoni Bowcher NEGOTIATION
Leon OldroydFranceStephen Shaw RENEWAL
Mayumi KolmetzAustraliaXuxue Feng QUALIFIED
Murillo MaletFranceIvan Magalhaes NEGOTIATION
Emily WhobreyJapanElwin Sharvill PROPOSAL
Morrow RutaAustraliaElwin Sharvill NEW
Mayumi KolmetzCanadaXuxue Feng QUALIFIED
David DarakjyRussiaAnna Fali RENEWAL
Jones VocelkaGermanyStephen Shaw NEW
Darci PoquetteUnited KingdomElwin Sharvill UNQUALIFIED
Mujtaba NickaRussiaBernardo Dominic QUALIFIED
Octavia MaletFranceOnyama Limba 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>