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
Jones VocelkaArgentinaIoni Bowcher QUALIFIED
Juan WieserItalyBernardo Dominic PROPOSAL
Nicolas IturbideFranceIvan Magalhaes UNQUALIFIED
Juan WieserAustraliaElwin Sharvill UNQUALIFIED
Octavia MaletGermanyBernardo Dominic UNQUALIFIED
Jones VocelkaAustraliaIoni Bowcher NEGOTIATION
Nicolas IturbideAustraliaIvan Magalhaes UNQUALIFIED
Murillo MaletRussiaXuxue Feng PROPOSAL
Faith GillianItalyElwin Sharvill NEGOTIATION
Munro FerenczItalyBernardo Dominic QUALIFIED
Kaitlin OstroskyBrazilIvan Magalhaes NEGOTIATION
Octavia MaletCanadaAsiya Javayant PROPOSAL
Nicolas IturbideUnited KingdomAsiya Javayant PROPOSAL
Arvin AlbaresItalyAmy Elsner QUALIFIED
Ivar PaprockiItalyBernardo Dominic RENEWAL
Misaki RoysterSpainAsiya Javayant UNQUALIFIED
Maria MarrierAustraliaXuxue Feng PROPOSAL
Antonio CaudyRussiaOnyama Limba NEW
Antonio CaudySpainAsiya Javayant QUALIFIED
Deepesh ChuiItalyBernardo Dominic RENEWAL
Misaki RoysterArgentinaStephen Shaw UNQUALIFIED
Ivar PaprockiArgentinaXuxue Feng NEGOTIATION
Clifford RimGermanyAnna Fali UNQUALIFIED
Octavia MaletAustraliaAmy Elsner UNQUALIFIED
Arvin AlbaresRussiaXuxue Feng NEGOTIATION
Faith GillianFranceStephen Shaw NEGOTIATION
Ricardo GauchoSpainAnna Fali NEGOTIATION
Jefferson SchemmerRussiaAsiya Javayant NEGOTIATION
Claire TollnerUnited KingdomAmy Elsner NEGOTIATION
Adams MorascaFranceAsiya Javayant NEGOTIATION
Jennifer AmigonFranceBernardo Dominic PROPOSAL
Emily WhobreyFranceStephen Shaw RENEWAL
Jefferson SchemmerAustraliaStephen Shaw NEW
Stacey MacleadIndiaAmy Elsner RENEWAL
Ivar PaprockiItalyAmy Elsner QUALIFIED
Darci PoquetteArgentinaOnyama Limba UNQUALIFIED
Jones VocelkaJapanAsiya Javayant UNQUALIFIED
Deepesh ChuiArgentinaIvan Magalhaes PROPOSAL
Darci PoquetteSpainStephen Shaw PROPOSAL
Tony FollerFranceOnyama Limba RENEWAL
Mayumi KolmetzIndiaXuxue Feng PROPOSAL
Munro FerenczJapanAmy Elsner QUALIFIED
Cody SaylorsSpainElwin Sharvill PROPOSAL
Leja CaldareraJapanOnyama Limba NEGOTIATION
Salvatore StockhamAustraliaBernardo Dominic NEGOTIATION
Alejandro PerinGermanyAnna Fali PROPOSAL
Tony FollerItalyXuxue Feng NEW
Munro FerenczFranceAnna Fali NEW
Aika InouyeGermanyXuxue Feng RENEWAL
Cody SaylorsSpainAnna Fali RENEWAL
Horizontal
NameCountryRepresentativeStatus
Stacey MacleadJapanAsiya Javayant NEGOTIATION
Jefferson SchemmerJapanIvan Magalhaes RENEWAL
Kadeem FlosiCanadaStephen Shaw QUALIFIED
Kadeem FlosiSpainOnyama Limba RENEWAL
Ivar PaprockiSpainAsiya Javayant QUALIFIED
Aruna FigeroaCanadaIoni Bowcher NEGOTIATION
Morrow RutaAustraliaElwin Sharvill QUALIFIED
Aika InouyeFranceStephen Shaw UNQUALIFIED
Alejandro PerinUnited KingdomIvan Magalhaes NEW
Jefferson SchemmerAustraliaOnyama Limba RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Faith GillianBrazil2025-07-27Commercial Press NEGOTIATION61Amy Elsner
1001Wickens NestleAustralia2025-07-26Feltz Printing Service NEW14Amy Elsner
1002Jennifer AmigonGermany2025-07-23Morlong Associates UNQUALIFIED70Xuxue Feng
1003Alejandro PerinItaly2025-08-01Chanay, Jeffrey A Esq PROPOSAL3Anna Fali
1004Smith GlickArgentina2025-08-17Benton, John B Jr NEW81Onyama Limba
1005Aika InouyeUnited Kingdom2025-08-05Feiner Bros NEW45Bernardo Dominic
1006Chavez BriddickGermany2025-08-20Morlong Associates PROPOSAL35Ioni Bowcher
1007Misaki RoysterAustralia2025-07-30Chemel, James L Cpa NEGOTIATION40Asiya Javayant
1008Antonio CaudyBrazil2025-08-04Feiner Bros RENEWAL70Stephen Shaw
1009Juan WieserRussia2025-08-19Morlong Associates QUALIFIED5Anna Fali
1010Stacey MacleadBrazil2025-07-24Feiner Bros PROPOSAL86Onyama Limba
1011Clifford RimArgentina2025-08-18Feltz Printing Service RENEWAL16Bernardo Dominic
1012Smith GlickUnited Kingdom2025-08-16King, Christopher A Esq PROPOSAL45Xuxue Feng
1013Jones VocelkaAustralia2025-08-03Printing Dimensions NEW70Bernardo Dominic
1014Maisha RulapaughJapan2025-08-11Morlong Associates PROPOSAL91Elwin Sharvill
1015Mujtaba NickaBrazil2025-07-24Feltz Printing Service NEGOTIATION37Xuxue Feng
1016Tony FollerCanada2025-07-25Dorl, James J Esq NEW18Elwin Sharvill
1017Darci PoquetteFrance2025-07-27Benton, John B Jr RENEWAL21Anna Fali
1018Chavez BriddickJapan2025-08-11Chemel, James L Cpa NEW7Xuxue Feng
1019Darci PoquetteGermany2025-08-07King, Christopher A Esq RENEWAL45Onyama Limba
1020Ricardo GauchoJapan2025-08-11Rangoni Of Florence UNQUALIFIED25Bernardo Dominic
1021Isabel BowleyIndia2025-07-29Dorl, James J Esq QUALIFIED92Stephen Shaw
1022Stacey MacleadItaly2025-08-07Truhlar And Truhlar Attys NEW33Onyama Limba
1023Izzy GarufiBrazil2025-07-31Buckley Miller Wright RENEWAL4Onyama Limba
1024Claire TollnerJapan2025-08-15Chapman, Ross E Esq UNQUALIFIED0Stephen Shaw
1025Faith GillianAustralia2025-08-13Benton, John B Jr UNQUALIFIED97Onyama Limba
1026Ricardo GauchoCanada2025-08-13Buckley Miller Wright NEGOTIATION18Ioni Bowcher
1027Chavez BriddickIndia2025-08-11Rousseaux, Michael Esq QUALIFIED74Anna Fali
1028Aditya KuskoGermany2025-08-09Benton, John B Jr QUALIFIED32Elwin Sharvill
1029Antonio CaudyArgentina2025-07-30Dorl, James J Esq NEGOTIATION34Ioni Bowcher
1030Francesco ShinkoRussia2025-08-02Printing Dimensions RENEWAL47Amy Elsner
1031Cody SaylorsRussia2025-07-27Printing Dimensions NEGOTIATION16Ivan Magalhaes
1032Mayumi KolmetzItaly2025-08-12Commercial Press RENEWAL2Ivan Magalhaes
1033Faith GillianCanada2025-08-18Feltz Printing Service UNQUALIFIED72Xuxue Feng
1034Aditya KuskoCanada2025-08-14Buckley Miller Wright QUALIFIED12Asiya Javayant
1035Jeanfrancois VenereBrazil2025-08-19Chapman, Ross E Esq PROPOSAL14Amy Elsner
1036Chavez BriddickIndia2025-08-19Chapman, Ross E Esq PROPOSAL55Xuxue Feng
1037Kaitlin OstroskyBrazil2025-08-06Chanay, Jeffrey A Esq NEW60Xuxue Feng
1038Ashley DoeCanada2025-08-18Printing Dimensions NEW86Onyama Limba
1039Jeanfrancois VenereIndia2025-08-13Commercial Press UNQUALIFIED17Bernardo Dominic
1040Rodrigues CampainCanada2025-07-25Buckley Miller Wright QUALIFIED99Xuxue Feng
1041Wickens NestleFrance2025-07-24Printing Dimensions QUALIFIED47Anna Fali
1042Octavia MaletAustralia2025-08-11Rangoni Of Florence RENEWAL53Onyama Limba
1043Wickens NestleCanada2025-08-04Chanay, Jeffrey A Esq QUALIFIED8Ioni Bowcher
1044Leja CaldareraArgentina2025-08-16Buckley Miller Wright RENEWAL60Amy Elsner
1045Smith GlickItaly2025-08-08Chemel, James L Cpa NEW36Anna Fali
1046Wickens NestleUnited Kingdom2025-07-26Printing Dimensions NEW49Asiya Javayant
1047Claire TollnerSpain2025-08-07Rousseaux, Michael Esq QUALIFIED15Bernardo Dominic
1048Silvio SlusarskiJapan2025-08-18Chanay, Jeffrey A Esq RENEWAL45Bernardo Dominic
1049Leja CaldareraItaly2025-08-12Feiner Bros RENEWAL0Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Greenwood BologniaUnited KingdomAmy Elsner NEGOTIATION
Claire TollnerCanadaXuxue Feng NEW
Murillo MaletGermanyAmy Elsner PROPOSAL
Ivar PaprockiFranceElwin Sharvill RENEWAL
Antonio CaudyAustraliaIoni Bowcher QUALIFIED
Cody SaylorsArgentinaStephen Shaw QUALIFIED
Izzy GarufiItalyAmy Elsner QUALIFIED
Aika InouyeUnited KingdomStephen Shaw PROPOSAL
Nicolas IturbideGermanyIvan Magalhaes QUALIFIED
Ricardo GauchoCanadaStephen Shaw RENEWAL
Julie StensethRussiaAsiya Javayant UNQUALIFIED
Claire TollnerAustraliaAsiya Javayant NEW
Wickens NestleItalyOnyama Limba NEGOTIATION
Salvatore StockhamIndiaElwin Sharvill QUALIFIED
Ashley DoeJapanXuxue Feng QUALIFIED
Faith GillianArgentinaIvan Magalhaes NEW
Faith GillianArgentinaAmy Elsner QUALIFIED
Jeanfrancois VenereCanadaElwin Sharvill NEGOTIATION
Kadeem FlosiIndiaAsiya Javayant QUALIFIED
Aditya KuskoFranceAnna Fali RENEWAL
Silvio SlusarskiFranceElwin Sharvill NEW
Misaki RoysterArgentinaAnna Fali RENEWAL
James ButtBrazilAnna Fali RENEWAL
Murillo MaletJapanStephen Shaw PROPOSAL
Jennifer AmigonJapanIvan Magalhaes NEGOTIATION
James ButtSpainElwin Sharvill QUALIFIED
Chavez BriddickRussiaStephen Shaw UNQUALIFIED
Johnson SergiBrazilXuxue Feng RENEWAL
Jefferson SchemmerIndiaAmy Elsner NEGOTIATION
Maria MarrierBrazilIoni Bowcher RENEWAL
Rodrigues CampainFranceStephen Shaw NEGOTIATION
Misaki RoysterJapanIoni Bowcher PROPOSAL
Jones VocelkaRussiaStephen Shaw QUALIFIED
Mayumi KolmetzFranceStephen Shaw RENEWAL
David DarakjyJapanAmy Elsner PROPOSAL
Emily WhobreyRussiaAmy Elsner QUALIFIED
Ricardo GauchoSpainIvan Magalhaes NEW
Ricardo GauchoRussiaXuxue Feng QUALIFIED
Jones VocelkaArgentinaOnyama Limba NEW
Deepesh ChuiJapanXuxue Feng UNQUALIFIED
Julie StensethBrazilAmy Elsner PROPOSAL
Octavia MaletCanadaXuxue Feng NEGOTIATION
Mayumi KolmetzArgentinaIvan Magalhaes NEGOTIATION
Darci PoquetteItalyElwin Sharvill PROPOSAL
Kaitlin OstroskyJapanStephen Shaw RENEWAL
Johnson SergiBrazilOnyama Limba QUALIFIED
Clifford RimUnited KingdomStephen Shaw QUALIFIED
Johnson SergiItalyBernardo Dominic RENEWAL
Misaki RoysterFranceBernardo Dominic RENEWAL
Julie StensethIndiaAnna Fali NEGOTIATION
Frozen Columns
Name
Mujtaba Nicka
Faith Gillian
Alejandro Perin
Ricardo Gaucho
Nicolas Iturbide
Emily Whobrey
Claire Tollner
Costa Dilliard
Sinclair Waycott
Faith Gillian
Aika Inouye
Morrow Ruta
Emily Whobrey
Johnson Sergi
Munro Ferencz
Jones Vocelka
Mayumi Kolmetz
Morrow Ruta
Kaitlin Ostrosky
Aika Inouye
Ashley Doe
Maisha Rulapaugh
Jones Vocelka
Maria Marrier
Jennifer Amigon
Deepesh Chui
Izzy Garufi
Kaitlin Ostrosky
Adams Morasca
Juan Wieser
Ashley Doe
Greenwood Bolognia
Ashley Doe
Juan Wieser
Chavez Briddick
Ashley Doe
Salvatore Stockham
Morrow Ruta
Kadeem Flosi
Costa Dilliard
Jeanfrancois Venere
Chavez Briddick
Mujtaba Nicka
Wickens Nestle
Nicolas Iturbide
Jennifer Amigon
Greenwood Bolognia
Juan Wieser
Jones Vocelka
Faith Gillian
IdCountryDate
1000Canada2025-08-12
1001Germany2025-08-10
1002Italy2025-08-14
1003Japan2025-08-08
1004Spain2025-07-22
1005Italy2025-08-12
1006France2025-08-18
1007Brazil2025-08-09
1008Russia2025-08-04
1009Australia2025-08-02
1010Germany2025-07-25
1011Brazil2025-08-06
1012Australia2025-07-30
1013France2025-08-18
1014Australia2025-08-04
1015India2025-08-14
1016Argentina2025-07-29
1017Russia2025-08-06
1018Argentina2025-08-14
1019Canada2025-08-09
1020Canada2025-07-26
1021Russia2025-07-24
1022Italy2025-08-19
1023Russia2025-08-14
1024India2025-07-22
1025Spain2025-08-17
1026Japan2025-08-14
1027Germany2025-08-06
1028Canada2025-08-12
1029Japan2025-08-20
1030Russia2025-08-15
1031Brazil2025-07-22
1032Argentina2025-08-19
1033Italy2025-08-17
1034Brazil2025-08-06
1035India2025-08-13
1036Spain2025-07-29
1037Brazil2025-07-26
1038Russia2025-07-31
1039Italy2025-08-05
1040Canada2025-08-15
1041Russia2025-07-23
1042Canada2025-07-30
1043Russia2025-08-04
1044Spain2025-07-26
1045Brazil2025-08-09
1046Brazil2025-08-18
1047Argentina2025-08-19
1048Australia2025-08-16
1049Russia2025-08-05

On-Demand Data

NameIdCountryDate
Deepesh Chui1000Canada2025-08-13
Tony Foller1001Japan2025-07-30
Aruna Figeroa1002United Kingdom2025-07-23
Murillo Malet1003India2025-07-22
Rodrigues Campain1004Japan2025-08-17
Salvatore Stockham1005Argentina2025-08-10
Smith Glick1006France2025-08-02
Izzy Garufi1007Italy2025-07-31
Greenwood Bolognia1008India2025-08-03
Salvatore Stockham1009India2025-08-03
Juan Wieser1010United Kingdom2025-07-26
Isabel Bowley1011Canada2025-08-02
Francesco Shinko1012Russia2025-08-09
Maisha Rulapaugh1013Canada2025-07-26
Kaitlin Ostrosky1014Germany2025-08-06
Arvin Albares1015Japan2025-08-08
Cody Saylors1016United Kingdom2025-07-29
Morrow Ruta1017Japan2025-07-27
Cody Saylors1018Italy2025-08-11
Faith Gillian1019India2025-07-24
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
James ButtFranceAmy Elsner QUALIFIED
Octavia MaletGermanyAnna Fali PROPOSAL
Maisha RulapaughUnited KingdomIoni Bowcher UNQUALIFIED
Francesco ShinkoRussiaOnyama Limba PROPOSAL
Silvio SlusarskiJapanIoni Bowcher NEGOTIATION
Morrow RutaUnited KingdomOnyama Limba QUALIFIED
Adams MorascaIndiaAnna Fali UNQUALIFIED
Ashley DoeGermanyElwin Sharvill NEGOTIATION
Adams MorascaUnited KingdomBernardo Dominic NEGOTIATION
Julie StensethSpainStephen Shaw UNQUALIFIED
Wickens NestleRussiaIvan Magalhaes NEW
Wickens NestleSpainAmy Elsner QUALIFIED
Cody SaylorsGermanyAsiya Javayant QUALIFIED
Ivar PaprockiIndiaStephen Shaw NEW
Antonio CaudyRussiaElwin Sharvill UNQUALIFIED
Claire TollnerCanadaIoni Bowcher UNQUALIFIED
Isabel BowleyJapanAmy Elsner PROPOSAL
Chavez BriddickUnited KingdomAnna Fali RENEWAL
Rodrigues CampainSpainIoni Bowcher RENEWAL
Sinclair WaycottRussiaIoni Bowcher QUALIFIED
Misaki RoysterIndiaAsiya Javayant NEGOTIATION
Juan WieserJapanXuxue Feng QUALIFIED
Nicolas IturbideItalyOnyama Limba NEGOTIATION
Juan WieserArgentinaIvan Magalhaes PROPOSAL
Rodrigues CampainBrazilXuxue Feng QUALIFIED
Juan WieserRussiaAmy Elsner PROPOSAL
Darci PoquetteRussiaElwin Sharvill NEW
Julie StensethJapanAnna Fali RENEWAL
Jeanfrancois VenereArgentinaElwin Sharvill NEGOTIATION
Wickens NestleCanadaAmy Elsner NEW
Sinclair WaycottJapanXuxue Feng NEGOTIATION
Silvio SlusarskiGermanyIvan Magalhaes PROPOSAL
Clifford RimRussiaElwin Sharvill NEW
Smith GlickRussiaOnyama Limba NEGOTIATION
Clifford RimSpainBernardo Dominic PROPOSAL
Leon OldroydAustraliaIoni Bowcher RENEWAL
Antonio CaudyAustraliaAsiya Javayant PROPOSAL
Leja CaldareraUnited KingdomIoni Bowcher UNQUALIFIED
Salvatore StockhamUnited KingdomAsiya Javayant PROPOSAL
Rodrigues CampainUnited KingdomAnna Fali NEGOTIATION

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