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
Jeanfrancois VenereFranceIvan Magalhaes UNQUALIFIED
Munro FerenczAustraliaStephen Shaw QUALIFIED
Cody SaylorsItalyAsiya Javayant NEW
Stacey MacleadRussiaOnyama Limba PROPOSAL
Aditya KuskoFranceAsiya Javayant NEGOTIATION
Jones VocelkaFranceOnyama Limba NEW
Jefferson SchemmerUnited KingdomIoni Bowcher RENEWAL
Cody SaylorsCanadaAsiya Javayant NEW
Octavia MaletArgentinaAsiya Javayant NEGOTIATION
Rodrigues CampainIndiaXuxue Feng QUALIFIED
David DarakjyUnited KingdomAmy Elsner NEW
Smith GlickUnited KingdomAnna Fali NEW
Ashley DoeItalyBernardo Dominic RENEWAL
Sinclair WaycottArgentinaElwin Sharvill UNQUALIFIED
Darci PoquetteUnited KingdomAsiya Javayant PROPOSAL
Deepesh ChuiRussiaStephen Shaw NEGOTIATION
Wickens NestleFranceAmy Elsner NEW
Costa DilliardAustraliaAnna Fali NEW
Ivar PaprockiUnited KingdomBernardo Dominic UNQUALIFIED
Claire TollnerArgentinaElwin Sharvill UNQUALIFIED
Emily WhobreyFranceElwin Sharvill UNQUALIFIED
Sinclair WaycottSpainBernardo Dominic QUALIFIED
Ricardo GauchoAustraliaXuxue Feng QUALIFIED
Aditya KuskoJapanAnna Fali UNQUALIFIED
Ashley DoeFranceOnyama Limba NEGOTIATION
Tony FollerBrazilStephen Shaw NEGOTIATION
Murillo MaletGermanyAnna Fali QUALIFIED
Juan WieserRussiaAsiya Javayant RENEWAL
Julie StensethFranceBernardo Dominic QUALIFIED
Octavia MaletUnited KingdomAmy Elsner NEW
Maria MarrierArgentinaStephen Shaw QUALIFIED
David DarakjyRussiaElwin Sharvill PROPOSAL
Wickens NestleUnited KingdomOnyama Limba PROPOSAL
Aditya KuskoCanadaIoni Bowcher QUALIFIED
Darci PoquetteItalyOnyama Limba PROPOSAL
Kadeem FlosiCanadaBernardo Dominic NEW
Adams MorascaCanadaAmy Elsner QUALIFIED
Leon OldroydAustraliaStephen Shaw PROPOSAL
Emily WhobreyBrazilXuxue Feng PROPOSAL
Silvio SlusarskiCanadaOnyama Limba UNQUALIFIED
Francesco ShinkoIndiaBernardo Dominic QUALIFIED
Maria MarrierIndiaIoni Bowcher QUALIFIED
Juan WieserCanadaOnyama Limba QUALIFIED
Salvatore StockhamRussiaIoni Bowcher PROPOSAL
Isabel BowleyArgentinaIvan Magalhaes PROPOSAL
Munro FerenczArgentinaIoni Bowcher NEW
Juan WieserGermanyOnyama Limba QUALIFIED
Maisha RulapaughCanadaXuxue Feng RENEWAL
Nicolas IturbideIndiaIvan Magalhaes RENEWAL
Antonio CaudyItalyIvan Magalhaes QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Emily WhobreyAustraliaIvan Magalhaes RENEWAL
Julie StensethRussiaAmy Elsner NEW
Kaitlin OstroskyRussiaXuxue Feng QUALIFIED
Jefferson SchemmerUnited KingdomIvan Magalhaes NEGOTIATION
Morrow RutaRussiaXuxue Feng UNQUALIFIED
Chavez BriddickItalyBernardo Dominic QUALIFIED
Jones VocelkaGermanyStephen Shaw UNQUALIFIED
Aditya KuskoBrazilIoni Bowcher NEW
Morrow RutaCanadaIoni Bowcher NEGOTIATION
Antonio CaudyBrazilXuxue Feng NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aruna FigeroaAustralia2026-06-15Feiner Bros UNQUALIFIED21Ivan Magalhaes
1001Darci PoquetteItaly2026-05-31Printing Dimensions RENEWAL83Stephen Shaw
1002Rodrigues CampainFrance2026-06-13Truhlar And Truhlar Attys RENEWAL99Stephen Shaw
1003Jennifer AmigonUnited Kingdom2026-05-30Morlong Associates QUALIFIED3Stephen Shaw
1004Adams MorascaSpain2026-05-31Commercial Press RENEWAL73Xuxue Feng
1005Silvio SlusarskiUnited Kingdom2026-06-11Chemel, James L Cpa NEGOTIATION69Asiya Javayant
1006Salvatore StockhamIndia2026-06-11Truhlar And Truhlar Attys RENEWAL84Anna Fali
1007Jones VocelkaGermany2026-06-10Printing Dimensions RENEWAL67Amy Elsner
1008Deepesh ChuiRussia2026-06-15Commercial Press NEGOTIATION22Bernardo Dominic
1009Faith GillianCanada2026-06-15Morlong Associates NEW23Anna Fali
1010Juan WieserJapan2026-06-14Benton, John B Jr UNQUALIFIED69Xuxue Feng
1011Sinclair WaycottBrazil2026-06-06Rangoni Of Florence PROPOSAL74Stephen Shaw
1012Julie StensethJapan2026-06-15Rousseaux, Michael Esq NEGOTIATION92Anna Fali
1013Isabel BowleyFrance2026-06-15Chemel, James L Cpa NEGOTIATION22Stephen Shaw
1014Murillo MaletSpain2026-06-19Buckley Miller Wright RENEWAL62Xuxue Feng
1015Emily WhobreyFrance2026-06-07Feiner Bros UNQUALIFIED31Ivan Magalhaes
1016Mujtaba NickaAustralia2026-05-31Rangoni Of Florence NEGOTIATION32Onyama Limba
1017Adams MorascaGermany2026-05-25Chanay, Jeffrey A Esq QUALIFIED86Elwin Sharvill
1018Jennifer AmigonUnited Kingdom2026-05-28Rousseaux, Michael Esq RENEWAL1Stephen Shaw
1019Rodrigues CampainGermany2026-05-26King, Christopher A Esq UNQUALIFIED64Xuxue Feng
1020Smith GlickCanada2026-06-08Benton, John B Jr PROPOSAL54Ioni Bowcher
1021Maria MarrierSpain2026-06-03King, Christopher A Esq NEGOTIATION75Elwin Sharvill
1022Silvio SlusarskiFrance2026-06-17Chemel, James L Cpa QUALIFIED68Ivan Magalhaes
1023Alejandro PerinFrance2026-05-25Morlong Associates NEW52Anna Fali
1024Clifford RimBrazil2026-06-15Morlong Associates NEW14Elwin Sharvill
1025Costa DilliardGermany2026-06-04Benton, John B Jr RENEWAL61Ioni Bowcher
1026Rodrigues CampainIndia2026-05-26Chemel, James L Cpa QUALIFIED23Ioni Bowcher
1027Faith GillianBrazil2026-06-15Buckley Miller Wright PROPOSAL39Onyama Limba
1028Francesco ShinkoItaly2026-05-30Benton, John B Jr QUALIFIED33Xuxue Feng
1029Smith GlickFrance2026-06-19Benton, John B Jr QUALIFIED45Amy Elsner
1030Antonio CaudySpain2026-06-18Commercial Press PROPOSAL11Stephen Shaw
1031Francesco ShinkoJapan2026-05-29King, Christopher A Esq QUALIFIED48Bernardo Dominic
1032Ricardo GauchoSpain2026-06-02Rangoni Of Florence UNQUALIFIED52Ivan Magalhaes
1033Mujtaba NickaRussia2026-05-23Benton, John B Jr QUALIFIED58Amy Elsner
1034Adams MorascaGermany2026-05-30Morlong Associates QUALIFIED77Asiya Javayant
1035Ivar PaprockiItaly2026-06-18Chapman, Ross E Esq RENEWAL96Amy Elsner
1036James ButtFrance2026-06-11Benton, John B Jr RENEWAL96Bernardo Dominic
1037Aditya KuskoItaly2026-05-26Truhlar And Truhlar Attys NEGOTIATION42Asiya Javayant
1038Salvatore StockhamUnited Kingdom2026-05-29Buckley Miller Wright NEW16Onyama Limba
1039Cody SaylorsRussia2026-06-19Feltz Printing Service PROPOSAL49Asiya Javayant
1040Clifford RimFrance2026-06-06Buckley Miller Wright RENEWAL61Ivan Magalhaes
1041Darci PoquetteGermany2026-05-27Rousseaux, Michael Esq UNQUALIFIED3Ivan Magalhaes
1042Jefferson SchemmerItaly2026-05-26Rousseaux, Michael Esq UNQUALIFIED92Amy Elsner
1043Jones VocelkaItaly2026-06-17Rousseaux, Michael Esq NEGOTIATION82Xuxue Feng
1044Jennifer AmigonItaly2026-06-15Buckley Miller Wright NEW0Ioni Bowcher
1045Nicolas IturbideArgentina2026-06-18Rousseaux, Michael Esq NEGOTIATION36Amy Elsner
1046Silvio SlusarskiUnited Kingdom2026-06-10Dorl, James J Esq QUALIFIED25Stephen Shaw
1047Claire TollnerCanada2026-06-19Chanay, Jeffrey A Esq NEGOTIATION98Ioni Bowcher
1048Isabel BowleyUnited Kingdom2026-06-13Chanay, Jeffrey A Esq UNQUALIFIED44Amy Elsner
1049Greenwood BologniaAustralia2026-06-05Feltz Printing Service UNQUALIFIED12Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Alejandro PerinGermanyAmy Elsner QUALIFIED
Francesco ShinkoFranceAnna Fali UNQUALIFIED
Juan WieserIndiaOnyama Limba NEGOTIATION
Costa DilliardUnited KingdomAnna Fali RENEWAL
Claire TollnerSpainXuxue Feng UNQUALIFIED
Adams MorascaGermanyOnyama Limba RENEWAL
Darci PoquetteJapanIoni Bowcher NEGOTIATION
Isabel BowleyGermanyOnyama Limba QUALIFIED
Clifford RimItalyIvan Magalhaes UNQUALIFIED
Mujtaba NickaBrazilOnyama Limba NEGOTIATION
Morrow RutaItalyXuxue Feng RENEWAL
Munro FerenczJapanBernardo Dominic RENEWAL
Izzy GarufiGermanyElwin Sharvill NEGOTIATION
Alejandro PerinUnited KingdomElwin Sharvill NEGOTIATION
Rodrigues CampainArgentinaIvan Magalhaes NEGOTIATION
Jennifer AmigonJapanAsiya Javayant QUALIFIED
Sinclair WaycottCanadaOnyama Limba NEGOTIATION
Julie StensethJapanAnna Fali QUALIFIED
Maisha RulapaughBrazilXuxue Feng UNQUALIFIED
Izzy GarufiArgentinaStephen Shaw NEGOTIATION
Emily WhobreyUnited KingdomIvan Magalhaes NEW
Nicolas IturbideUnited KingdomElwin Sharvill QUALIFIED
Aruna FigeroaArgentinaOnyama Limba PROPOSAL
Jones VocelkaSpainOnyama Limba NEW
Costa DilliardRussiaBernardo Dominic NEGOTIATION
Claire TollnerJapanAsiya Javayant PROPOSAL
Leja CaldareraRussiaAmy Elsner NEW
Kaitlin OstroskySpainBernardo Dominic NEGOTIATION
Misaki RoysterIndiaAnna Fali UNQUALIFIED
Mayumi KolmetzSpainAnna Fali UNQUALIFIED
Sinclair WaycottBrazilStephen Shaw PROPOSAL
Mayumi KolmetzArgentinaXuxue Feng RENEWAL
Leon OldroydUnited KingdomIoni Bowcher QUALIFIED
Maria MarrierRussiaXuxue Feng NEW
Francesco ShinkoArgentinaIvan Magalhaes NEGOTIATION
Silvio SlusarskiJapanAnna Fali RENEWAL
Francesco ShinkoArgentinaAnna Fali UNQUALIFIED
Darci PoquetteArgentinaBernardo Dominic UNQUALIFIED
Morrow RutaUnited KingdomOnyama Limba RENEWAL
Greenwood BologniaUnited KingdomOnyama Limba NEW
Murillo MaletIndiaElwin Sharvill NEW
Murillo MaletRussiaXuxue Feng NEW
Darci PoquetteAustraliaAnna Fali UNQUALIFIED
Maisha RulapaughCanadaBernardo Dominic RENEWAL
Johnson SergiJapanAmy Elsner PROPOSAL
Maria MarrierFranceElwin Sharvill NEGOTIATION
Arvin AlbaresCanadaBernardo Dominic NEW
Kaitlin OstroskyFranceBernardo Dominic QUALIFIED
Claire TollnerJapanIoni Bowcher NEW
Morrow RutaUnited KingdomBernardo Dominic NEGOTIATION
Frozen Columns
Name
Alejandro Perin
Aruna Figeroa
Chavez Briddick
Ivar Paprocki
Kadeem Flosi
Kadeem Flosi
Misaki Royster
Stacey Maclead
Leja Caldarera
Octavia Malet
Juan Wieser
Johnson Sergi
Sinclair Waycott
Faith Gillian
Stacey Maclead
Adams Morasca
Jennifer Amigon
Mayumi Kolmetz
Darci Poquette
Octavia Malet
Isabel Bowley
Mujtaba Nicka
Aruna Figeroa
Wickens Nestle
Aika Inouye
Ashley Doe
Johnson Sergi
Aika Inouye
Ivar Paprocki
Rodrigues Campain
Rodrigues Campain
Maisha Rulapaugh
Nicolas Iturbide
Jennifer Amigon
Kadeem Flosi
Misaki Royster
Ivar Paprocki
Isabel Bowley
Tony Foller
Misaki Royster
Chavez Briddick
Alejandro Perin
Kaitlin Ostrosky
Munro Ferencz
Salvatore Stockham
Deepesh Chui
Maria Marrier
Jones Vocelka
Tony Foller
Octavia Malet
IdCountryDate
1000Brazil2026-06-04
1001Brazil2026-05-25
1002Spain2026-06-04
1003Argentina2026-06-05
1004India2026-06-07
1005Spain2026-06-04
1006Italy2026-05-21
1007Brazil2026-06-19
1008France2026-06-09
1009Australia2026-06-08
1010Australia2026-06-08
1011France2026-05-30
1012Germany2026-05-28
1013United Kingdom2026-05-22
1014Australia2026-05-26
1015Brazil2026-06-05
1016France2026-05-21
1017Argentina2026-06-04
1018Germany2026-06-14
1019Russia2026-05-30
1020Russia2026-06-08
1021Japan2026-05-24
1022France2026-05-25
1023Germany2026-06-17
1024Argentina2026-06-04
1025United Kingdom2026-05-29
1026France2026-06-02
1027Brazil2026-06-10
1028Italy2026-06-06
1029Germany2026-05-24
1030France2026-06-04
1031Australia2026-06-18
1032Italy2026-05-29
1033Italy2026-05-24
1034Canada2026-05-23
1035France2026-06-16
1036United Kingdom2026-06-16
1037Germany2026-05-30
1038Argentina2026-06-12
1039Germany2026-05-27
1040Germany2026-05-25
1041Argentina2026-05-21
1042United Kingdom2026-06-04
1043Argentina2026-05-31
1044Japan2026-06-11
1045India2026-06-03
1046Argentina2026-06-11
1047Italy2026-06-11
1048Canada2026-06-15
1049Spain2026-05-25

On-Demand Data

NameIdCountryDate
Salvatore Stockham1000Australia2026-05-21
Arvin Albares1001Germany2026-06-16
Mayumi Kolmetz1002India2026-06-12
Munro Ferencz1003Australia2026-05-27
Adams Morasca1004Spain2026-06-09
Wickens Nestle1005Australia2026-05-24
Clifford Rim1006Russia2026-05-28
Mayumi Kolmetz1007Canada2026-05-21
Arvin Albares1008Germany2026-05-27
Costa Dilliard1009United Kingdom2026-05-23
Darci Poquette1010Spain2026-05-29
Deepesh Chui1011United Kingdom2026-05-29
Sinclair Waycott1012Canada2026-06-02
Greenwood Bolognia1013Canada2026-05-22
Leja Caldarera1014Brazil2026-06-12
Tony Foller1015Germany2026-06-01
Izzy Garufi1016Japan2026-06-13
Arvin Albares1017Brazil2026-06-14
Maria Marrier1018Australia2026-06-15
Leon Oldroyd1019Germany2026-06-12
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Arvin AlbaresGermanyElwin Sharvill RENEWAL
Jones VocelkaUnited KingdomIoni Bowcher RENEWAL
Leja CaldareraItalyElwin Sharvill RENEWAL
Maisha RulapaughRussiaOnyama Limba QUALIFIED
Munro FerenczItalyAmy Elsner QUALIFIED
Isabel BowleyArgentinaIoni Bowcher QUALIFIED
Aruna FigeroaFranceOnyama Limba NEW
Costa DilliardSpainIvan Magalhaes RENEWAL
Julie StensethFranceStephen Shaw PROPOSAL
Izzy GarufiCanadaBernardo Dominic UNQUALIFIED
Leja CaldareraJapanXuxue Feng RENEWAL
Silvio SlusarskiAustraliaIoni Bowcher NEW
Silvio SlusarskiFranceIoni Bowcher NEGOTIATION
Emily WhobreyJapanStephen Shaw NEGOTIATION
Isabel BowleyFranceAsiya Javayant NEGOTIATION
Jeanfrancois VenereSpainOnyama Limba UNQUALIFIED
Maisha RulapaughUnited KingdomOnyama Limba PROPOSAL
Octavia MaletCanadaAnna Fali NEGOTIATION
Rodrigues CampainIndiaStephen Shaw PROPOSAL
Claire TollnerBrazilAsiya Javayant RENEWAL
Salvatore StockhamCanadaElwin Sharvill NEGOTIATION
Mayumi KolmetzRussiaStephen Shaw PROPOSAL
Salvatore StockhamGermanyElwin Sharvill QUALIFIED
Arvin AlbaresIndiaElwin Sharvill NEGOTIATION
David DarakjyCanadaAnna Fali NEGOTIATION
Smith GlickBrazilOnyama Limba RENEWAL
Rodrigues CampainRussiaAnna Fali PROPOSAL
Murillo MaletFranceAsiya Javayant NEGOTIATION
Alejandro PerinGermanyAmy Elsner UNQUALIFIED
Deepesh ChuiSpainAnna Fali QUALIFIED
Mayumi KolmetzUnited KingdomXuxue Feng UNQUALIFIED
Kaitlin OstroskyArgentinaIoni Bowcher RENEWAL
Emily WhobreyIndiaAnna Fali NEGOTIATION
Jefferson SchemmerGermanyXuxue Feng NEW
Claire TollnerUnited KingdomAnna Fali RENEWAL
Maria MarrierFranceElwin Sharvill NEW
Deepesh ChuiFranceIvan Magalhaes NEW
Tony FollerSpainAnna Fali RENEWAL
Tony FollerGermanyXuxue Feng UNQUALIFIED
Jones VocelkaItalyAmy Elsner UNQUALIFIED

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