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
Alejandro PerinCanadaIvan Magalhaes PROPOSAL
Emily WhobreyJapanIvan Magalhaes PROPOSAL
Mujtaba NickaItalyOnyama Limba RENEWAL
Nicolas IturbideItalyAnna Fali UNQUALIFIED
Emily WhobreyArgentinaOnyama Limba QUALIFIED
Julie StensethFranceElwin Sharvill UNQUALIFIED
Darci PoquetteAustraliaAsiya Javayant QUALIFIED
Maisha RulapaughRussiaAnna Fali QUALIFIED
Aruna FigeroaBrazilStephen Shaw NEGOTIATION
Maria MarrierItalyAnna Fali NEW
Leon OldroydSpainIoni Bowcher RENEWAL
Kaitlin OstroskyIndiaAsiya Javayant RENEWAL
Aruna FigeroaArgentinaElwin Sharvill RENEWAL
Maria MarrierFranceOnyama Limba PROPOSAL
Silvio SlusarskiItalyStephen Shaw QUALIFIED
Izzy GarufiUnited KingdomBernardo Dominic NEW
Johnson SergiArgentinaXuxue Feng NEGOTIATION
Antonio CaudyItalyAmy Elsner QUALIFIED
Leon OldroydBrazilAsiya Javayant QUALIFIED
Juan WieserCanadaOnyama Limba UNQUALIFIED
Alejandro PerinJapanAsiya Javayant NEW
Arvin AlbaresItalyStephen Shaw UNQUALIFIED
Tony FollerAustraliaElwin Sharvill NEGOTIATION
Isabel BowleyUnited KingdomAmy Elsner NEGOTIATION
Rodrigues CampainSpainBernardo Dominic NEGOTIATION
Maria MarrierRussiaAmy Elsner PROPOSAL
Nicolas IturbideFranceOnyama Limba RENEWAL
Stacey MacleadBrazilAnna Fali QUALIFIED
Ashley DoeGermanyXuxue Feng NEW
Morrow RutaJapanXuxue Feng NEW
Octavia MaletJapanAnna Fali NEGOTIATION
Aika InouyeIndiaAmy Elsner RENEWAL
Juan WieserFranceIvan Magalhaes UNQUALIFIED
Murillo MaletJapanAmy Elsner PROPOSAL
Nicolas IturbideSpainStephen Shaw UNQUALIFIED
Ivar PaprockiGermanyAmy Elsner NEGOTIATION
Jones VocelkaSpainXuxue Feng NEGOTIATION
Claire TollnerItalyStephen Shaw QUALIFIED
Leon OldroydAustraliaAnna Fali QUALIFIED
Ashley DoeFranceAmy Elsner QUALIFIED
Francesco ShinkoBrazilBernardo Dominic UNQUALIFIED
Maria MarrierSpainOnyama Limba NEGOTIATION
Maisha RulapaughBrazilAmy Elsner UNQUALIFIED
Alejandro PerinJapanXuxue Feng RENEWAL
Claire TollnerUnited KingdomAsiya Javayant RENEWAL
Cody SaylorsGermanyAmy Elsner NEW
Aruna FigeroaBrazilIoni Bowcher NEGOTIATION
Julie StensethItalyAmy Elsner PROPOSAL
Cody SaylorsIndiaOnyama Limba QUALIFIED
Aruna FigeroaRussiaIvan Magalhaes NEW
Horizontal
NameCountryRepresentativeStatus
Nicolas IturbideBrazilOnyama Limba QUALIFIED
Salvatore StockhamAustraliaAsiya Javayant PROPOSAL
Emily WhobreyRussiaAsiya Javayant RENEWAL
Clifford RimBrazilAnna Fali RENEWAL
Juan WieserRussiaXuxue Feng RENEWAL
Deepesh ChuiBrazilAsiya Javayant RENEWAL
Stacey MacleadItalyAnna Fali NEW
Octavia MaletCanadaOnyama Limba NEW
Emily WhobreyArgentinaXuxue Feng UNQUALIFIED
Rodrigues CampainIndiaAmy Elsner NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000David DarakjyBrazil2026-05-07Printing Dimensions RENEWAL97Onyama Limba
1001Mujtaba NickaAustralia2026-05-07Chanay, Jeffrey A Esq UNQUALIFIED60Asiya Javayant
1002Ricardo GauchoCanada2026-05-09Rousseaux, Michael Esq NEGOTIATION70Onyama Limba
1003Tony FollerArgentina2026-04-25Rousseaux, Michael Esq NEW46Asiya Javayant
1004Aditya KuskoAustralia2026-05-11Chapman, Ross E Esq NEW25Elwin Sharvill
1005Ricardo GauchoGermany2026-05-23Chapman, Ross E Esq QUALIFIED79Elwin Sharvill
1006Jones VocelkaUnited Kingdom2026-05-01Rousseaux, Michael Esq NEGOTIATION10Bernardo Dominic
1007Emily WhobreyCanada2026-05-17Feiner Bros NEW0Ivan Magalhaes
1008Tony FollerCanada2026-05-13Rangoni Of Florence QUALIFIED92Asiya Javayant
1009Ashley DoeFrance2026-05-05Chemel, James L Cpa UNQUALIFIED4Amy Elsner
1010Wickens NestleJapan2026-05-18Rangoni Of Florence NEGOTIATION31Onyama Limba
1011Nicolas IturbideFrance2026-05-07Buckley Miller Wright UNQUALIFIED51Ioni Bowcher
1012Smith GlickCanada2026-05-24Commercial Press RENEWAL47Bernardo Dominic
1013Maisha RulapaughUnited Kingdom2026-04-29Morlong Associates RENEWAL76Onyama Limba
1014Wickens NestleArgentina2026-05-21Rousseaux, Michael Esq PROPOSAL39Amy Elsner
1015Isabel BowleyJapan2026-04-29Buckley Miller Wright PROPOSAL96Ioni Bowcher
1016Greenwood BologniaItaly2026-05-20Chanay, Jeffrey A Esq PROPOSAL11Onyama Limba
1017Leon OldroydBrazil2026-05-21Chemel, James L Cpa QUALIFIED61Elwin Sharvill
1018Darci PoquetteBrazil2026-05-07Chapman, Ross E Esq QUALIFIED20Onyama Limba
1019Sinclair WaycottJapan2026-05-18Rousseaux, Michael Esq QUALIFIED37Ioni Bowcher
1020Kadeem FlosiCanada2026-05-13Benton, John B Jr UNQUALIFIED31Onyama Limba
1021Izzy GarufiAustralia2026-05-15Truhlar And Truhlar Attys UNQUALIFIED94Ivan Magalhaes
1022Darci PoquetteFrance2026-05-07Benton, John B Jr NEW18Stephen Shaw
1023Izzy GarufiAustralia2026-05-08Chapman, Ross E Esq UNQUALIFIED9Ivan Magalhaes
1024Rodrigues CampainArgentina2026-05-12Truhlar And Truhlar Attys RENEWAL92Bernardo Dominic
1025Octavia MaletUnited Kingdom2026-05-13Chapman, Ross E Esq NEW73Asiya Javayant
1026Antonio CaudyUnited Kingdom2026-05-01Buckley Miller Wright UNQUALIFIED16Elwin Sharvill
1027David DarakjyIndia2026-05-09Benton, John B Jr QUALIFIED62Onyama Limba
1028Alejandro PerinCanada2026-05-17Chemel, James L Cpa PROPOSAL49Asiya Javayant
1029Izzy GarufiRussia2026-05-15King, Christopher A Esq PROPOSAL2Ivan Magalhaes
1030Chavez BriddickArgentina2026-05-13Rousseaux, Michael Esq QUALIFIED79Elwin Sharvill
1031Silvio SlusarskiJapan2026-05-06Feiner Bros QUALIFIED23Anna Fali
1032Costa DilliardItaly2026-05-03Benton, John B Jr NEW80Stephen Shaw
1033Emily WhobreyIndia2026-05-22Chanay, Jeffrey A Esq NEGOTIATION66Asiya Javayant
1034Smith GlickGermany2026-05-21King, Christopher A Esq NEGOTIATION83Xuxue Feng
1035Juan WieserCanada2026-05-04Dorl, James J Esq NEGOTIATION9Asiya Javayant
1036Mayumi KolmetzUnited Kingdom2026-04-30Morlong Associates NEW16Amy Elsner
1037Misaki RoysterJapan2026-04-30Buckley Miller Wright NEW95Ivan Magalhaes
1038Greenwood BologniaBrazil2026-05-03Chemel, James L Cpa QUALIFIED74Stephen Shaw
1039Ivar PaprockiItaly2026-05-06Commercial Press RENEWAL58Ioni Bowcher
1040Aika InouyeGermany2026-05-15Morlong Associates QUALIFIED27Ioni Bowcher
1041Ricardo GauchoBrazil2026-05-16Truhlar And Truhlar Attys NEW6Xuxue Feng
1042Sinclair WaycottSpain2026-05-15Feltz Printing Service PROPOSAL52Elwin Sharvill
1043Chavez BriddickAustralia2026-05-18Commercial Press PROPOSAL76Anna Fali
1044Johnson SergiIndia2026-05-21Chemel, James L Cpa NEGOTIATION42Amy Elsner
1045Jones VocelkaUnited Kingdom2026-05-17Feltz Printing Service NEW30Elwin Sharvill
1046Leon OldroydAustralia2026-04-30King, Christopher A Esq NEGOTIATION88Bernardo Dominic
1047Aruna FigeroaGermany2026-05-03Chapman, Ross E Esq PROPOSAL12Onyama Limba
1048Murillo MaletCanada2026-05-05Rousseaux, Michael Esq UNQUALIFIED93Anna Fali
1049Emily WhobreyIndia2026-04-27Chanay, Jeffrey A Esq NEW47Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Ricardo GauchoUnited KingdomElwin Sharvill QUALIFIED
James ButtGermanyIvan Magalhaes RENEWAL
Stacey MacleadArgentinaOnyama Limba NEW
Julie StensethIndiaAsiya Javayant NEW
Clifford RimItalyIoni Bowcher RENEWAL
Misaki RoysterGermanyIvan Magalhaes NEW
Silvio SlusarskiRussiaAsiya Javayant RENEWAL
Maisha RulapaughUnited KingdomAsiya Javayant NEW
Misaki RoysterGermanyAnna Fali RENEWAL
Leja CaldareraJapanAmy Elsner UNQUALIFIED
Julie StensethCanadaAsiya Javayant UNQUALIFIED
Munro FerenczFranceOnyama Limba QUALIFIED
Wickens NestleFranceElwin Sharvill NEGOTIATION
Smith GlickItalyIoni Bowcher PROPOSAL
Chavez BriddickCanadaAmy Elsner NEGOTIATION
Nicolas IturbideIndiaIvan Magalhaes PROPOSAL
Julie StensethCanadaAnna Fali RENEWAL
Antonio CaudyItalyIoni Bowcher NEW
Greenwood BologniaFranceElwin Sharvill RENEWAL
Ashley DoeFranceIoni Bowcher NEGOTIATION
Aika InouyeCanadaIvan Magalhaes NEGOTIATION
James ButtCanadaAmy Elsner NEW
Johnson SergiBrazilXuxue Feng PROPOSAL
Kaitlin OstroskyItalyAmy Elsner UNQUALIFIED
Adams MorascaJapanStephen Shaw UNQUALIFIED
Antonio CaudyRussiaStephen Shaw NEW
Isabel BowleyRussiaStephen Shaw NEW
Chavez BriddickCanadaAsiya Javayant RENEWAL
Darci PoquetteSpainAmy Elsner PROPOSAL
Adams MorascaSpainIvan Magalhaes PROPOSAL
Tony FollerCanadaElwin Sharvill NEGOTIATION
Rodrigues CampainJapanIoni Bowcher UNQUALIFIED
Greenwood BologniaGermanyIoni Bowcher NEW
Juan WieserUnited KingdomAnna Fali PROPOSAL
Aditya KuskoIndiaAnna Fali NEGOTIATION
Tony FollerIndiaIvan Magalhaes UNQUALIFIED
Silvio SlusarskiIndiaIvan Magalhaes UNQUALIFIED
Murillo MaletBrazilBernardo Dominic NEGOTIATION
Costa DilliardArgentinaElwin Sharvill UNQUALIFIED
Alejandro PerinFranceAmy Elsner RENEWAL
Aruna FigeroaItalyIvan Magalhaes NEGOTIATION
Ricardo GauchoBrazilAmy Elsner UNQUALIFIED
Darci PoquetteArgentinaIvan Magalhaes RENEWAL
Julie StensethArgentinaElwin Sharvill RENEWAL
Izzy GarufiSpainAsiya Javayant PROPOSAL
Julie StensethSpainOnyama Limba QUALIFIED
Alejandro PerinJapanStephen Shaw QUALIFIED
Tony FollerArgentinaAnna Fali QUALIFIED
Wickens NestleSpainBernardo Dominic NEGOTIATION
Maisha RulapaughBrazilBernardo Dominic UNQUALIFIED
Frozen Columns
Name
Emily Whobrey
David Darakjy
Rodrigues Campain
Aditya Kusko
Darci Poquette
Smith Glick
Aditya Kusko
Silvio Slusarski
Juan Wieser
Antonio Caudy
Silvio Slusarski
Murillo Malet
Isabel Bowley
Izzy Garufi
Greenwood Bolognia
Misaki Royster
Jefferson Schemmer
Arvin Albares
Darci Poquette
Adams Morasca
Silvio Slusarski
Francesco Shinko
Jeanfrancois Venere
Leja Caldarera
Mujtaba Nicka
Aruna Figeroa
Smith Glick
Jefferson Schemmer
Salvatore Stockham
Deepesh Chui
Greenwood Bolognia
Deepesh Chui
Nicolas Iturbide
Murillo Malet
Alejandro Perin
Clifford Rim
Smith Glick
Aika Inouye
Emily Whobrey
Aditya Kusko
Julie Stenseth
Jeanfrancois Venere
Claire Tollner
Tony Foller
Munro Ferencz
Murillo Malet
Octavia Malet
David Darakjy
Francesco Shinko
Leja Caldarera
IdCountryDate
1000Argentina2026-05-04
1001Canada2026-05-20
1002Canada2026-05-14
1003Argentina2026-04-27
1004Spain2026-05-18
1005Canada2026-05-13
1006Australia2026-05-21
1007France2026-05-02
1008Australia2026-05-08
1009Australia2026-05-17
1010Canada2026-05-10
1011France2026-05-03
1012France2026-05-12
1013Canada2026-05-07
1014India2026-05-02
1015Japan2026-04-26
1016United Kingdom2026-04-26
1017Brazil2026-05-22
1018Spain2026-05-05
1019Spain2026-04-25
1020Spain2026-05-18
1021Japan2026-04-27
1022Canada2026-05-15
1023Germany2026-04-28
1024Canada2026-05-15
1025Argentina2026-05-08
1026France2026-05-10
1027Italy2026-05-05
1028Germany2026-04-29
1029Spain2026-05-13
1030Japan2026-04-26
1031Brazil2026-05-16
1032Australia2026-04-28
1033Germany2026-04-25
1034Argentina2026-05-03
1035Germany2026-05-01
1036Spain2026-05-17
1037Russia2026-05-16
1038United Kingdom2026-05-21
1039France2026-05-15
1040Germany2026-05-02
1041Brazil2026-05-18
1042United Kingdom2026-05-03
1043United Kingdom2026-05-23
1044Russia2026-05-09
1045France2026-05-05
1046France2026-05-23
1047Russia2026-05-09
1048United Kingdom2026-05-21
1049France2026-05-07

On-Demand Data

NameIdCountryDate
Aditya Kusko1000Argentina2026-04-29
Jennifer Amigon1001Italy2026-04-28
Wickens Nestle1002Australia2026-05-08
Johnson Sergi1003Germany2026-05-03
Izzy Garufi1004Japan2026-05-13
Nicolas Iturbide1005Italy2026-05-01
Isabel Bowley1006Argentina2026-05-02
Alejandro Perin1007Italy2026-04-26
Jones Vocelka1008Japan2026-05-03
Silvio Slusarski1009Spain2026-04-26
Mujtaba Nicka1010United Kingdom2026-04-28
Misaki Royster1011United Kingdom2026-05-06
Juan Wieser1012United Kingdom2026-05-05
Stacey Maclead1013Canada2026-05-20
Kaitlin Ostrosky1014Russia2026-05-12
Smith Glick1015France2026-04-26
Ashley Doe1016Brazil2026-05-20
Clifford Rim1017France2026-05-04
Stacey Maclead1018United Kingdom2026-05-17
Morrow Ruta1019United Kingdom2026-04-30
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Chavez BriddickJapanAsiya Javayant NEGOTIATION
Maisha RulapaughUnited KingdomAsiya Javayant NEW
Isabel BowleySpainAsiya Javayant PROPOSAL
Ricardo GauchoUnited KingdomAmy Elsner NEW
Francesco ShinkoJapanXuxue Feng UNQUALIFIED
Cody SaylorsBrazilIoni Bowcher NEGOTIATION
Munro FerenczRussiaXuxue Feng RENEWAL
Silvio SlusarskiSpainStephen Shaw NEW
Clifford RimUnited KingdomIvan Magalhaes NEGOTIATION
Leja CaldareraAustraliaBernardo Dominic PROPOSAL
Aika InouyeSpainAsiya Javayant RENEWAL
Cody SaylorsUnited KingdomElwin Sharvill NEGOTIATION
Silvio SlusarskiSpainXuxue Feng NEGOTIATION
Izzy GarufiJapanAmy Elsner PROPOSAL
Alejandro PerinArgentinaAnna Fali PROPOSAL
Aditya KuskoSpainIoni Bowcher RENEWAL
Salvatore StockhamCanadaBernardo Dominic QUALIFIED
Morrow RutaAustraliaElwin Sharvill UNQUALIFIED
Smith GlickGermanyIoni Bowcher NEW
Maria MarrierIndiaIoni Bowcher RENEWAL
Claire TollnerAustraliaBernardo Dominic NEW
Alejandro PerinArgentinaIoni Bowcher PROPOSAL
Ivar PaprockiUnited KingdomIvan Magalhaes RENEWAL
Munro FerenczFranceStephen Shaw PROPOSAL
Jones VocelkaJapanOnyama Limba NEGOTIATION
Claire TollnerUnited KingdomStephen Shaw NEGOTIATION
Leon OldroydAustraliaElwin Sharvill NEGOTIATION
Johnson SergiFranceAsiya Javayant QUALIFIED
Aditya KuskoSpainAmy Elsner UNQUALIFIED
Rodrigues CampainSpainStephen Shaw UNQUALIFIED
Ricardo GauchoCanadaElwin Sharvill RENEWAL
Ricardo GauchoRussiaAnna Fali NEW
Jones VocelkaFranceAnna Fali PROPOSAL
Silvio SlusarskiIndiaAsiya Javayant QUALIFIED
Stacey MacleadBrazilXuxue Feng RENEWAL
Cody SaylorsRussiaAmy Elsner PROPOSAL
Costa DilliardBrazilBernardo Dominic PROPOSAL
Julie StensethJapanIoni Bowcher QUALIFIED
Chavez BriddickGermanyAnna Fali NEW
Leja CaldareraGermanyIvan Magalhaes 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>