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
Maisha RulapaughJapanBernardo Dominic NEGOTIATION
Leon OldroydSpainAnna Fali RENEWAL
Isabel BowleyJapanOnyama Limba NEGOTIATION
Maria MarrierBrazilElwin Sharvill UNQUALIFIED
Darci PoquetteFranceElwin Sharvill QUALIFIED
Kadeem FlosiIndiaOnyama Limba RENEWAL
Murillo MaletJapanAsiya Javayant PROPOSAL
Arvin AlbaresCanadaXuxue Feng PROPOSAL
Costa DilliardArgentinaBernardo Dominic NEGOTIATION
Silvio SlusarskiCanadaBernardo Dominic NEW
Aruna FigeroaFranceAnna Fali RENEWAL
Rodrigues CampainArgentinaIoni Bowcher QUALIFIED
Jefferson SchemmerAustraliaIoni Bowcher NEGOTIATION
Chavez BriddickItalyElwin Sharvill QUALIFIED
Julie StensethCanadaStephen Shaw UNQUALIFIED
Rodrigues CampainCanadaBernardo Dominic NEW
Cody SaylorsJapanXuxue Feng QUALIFIED
Ashley DoeIndiaAmy Elsner PROPOSAL
Alejandro PerinItalyXuxue Feng UNQUALIFIED
Deepesh ChuiUnited KingdomAsiya Javayant UNQUALIFIED
Adams MorascaAustraliaXuxue Feng NEW
Francesco ShinkoFranceAnna Fali UNQUALIFIED
Aruna FigeroaGermanyIvan Magalhaes UNQUALIFIED
Isabel BowleySpainOnyama Limba UNQUALIFIED
Antonio CaudyArgentinaXuxue Feng QUALIFIED
Faith GillianArgentinaOnyama Limba UNQUALIFIED
Jefferson SchemmerRussiaAsiya Javayant PROPOSAL
Misaki RoysterBrazilAmy Elsner QUALIFIED
Chavez BriddickFranceIvan Magalhaes NEW
Wickens NestleBrazilStephen Shaw QUALIFIED
Smith GlickRussiaAmy Elsner NEGOTIATION
Izzy GarufiCanadaStephen Shaw PROPOSAL
Deepesh ChuiRussiaOnyama Limba UNQUALIFIED
Jefferson SchemmerItalyXuxue Feng NEW
Francesco ShinkoUnited KingdomStephen Shaw QUALIFIED
Jeanfrancois VenereArgentinaAnna Fali QUALIFIED
Julie StensethItalyAnna Fali QUALIFIED
Arvin AlbaresBrazilAmy Elsner PROPOSAL
Tony FollerSpainAsiya Javayant NEW
Nicolas IturbideUnited KingdomIvan Magalhaes UNQUALIFIED
Arvin AlbaresSpainAsiya Javayant PROPOSAL
Smith GlickJapanElwin Sharvill UNQUALIFIED
Salvatore StockhamAustraliaIoni Bowcher RENEWAL
Francesco ShinkoRussiaAsiya Javayant PROPOSAL
Julie StensethGermanyBernardo Dominic QUALIFIED
Claire TollnerItalyIvan Magalhaes QUALIFIED
Rodrigues CampainCanadaBernardo Dominic NEGOTIATION
Munro FerenczGermanyBernardo Dominic NEGOTIATION
Nicolas IturbideSpainAsiya Javayant NEGOTIATION
Munro FerenczAustraliaIvan Magalhaes PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Salvatore StockhamAustraliaAmy Elsner NEW
Izzy GarufiItalyOnyama Limba UNQUALIFIED
Chavez BriddickUnited KingdomAsiya Javayant NEW
Aika InouyeBrazilOnyama Limba UNQUALIFIED
Salvatore StockhamSpainAnna Fali UNQUALIFIED
Maisha RulapaughIndiaStephen Shaw NEGOTIATION
Leon OldroydBrazilStephen Shaw QUALIFIED
Darci PoquetteFranceBernardo Dominic QUALIFIED
Rodrigues CampainFranceBernardo Dominic RENEWAL
Aika InouyeArgentinaIvan Magalhaes RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ivar PaprockiAustralia2026-04-26Morlong Associates QUALIFIED88Xuxue Feng
1001Ashley DoeFrance2026-04-27Printing Dimensions PROPOSAL80Xuxue Feng
1002Wickens NestleItaly2026-05-05Benton, John B Jr PROPOSAL24Bernardo Dominic
1003James ButtGermany2026-04-14Rangoni Of Florence UNQUALIFIED99Amy Elsner
1004Greenwood BologniaCanada2026-04-18Feiner Bros UNQUALIFIED75Bernardo Dominic
1005Maisha RulapaughBrazil2026-05-04Benton, John B Jr NEW87Anna Fali
1006Kadeem FlosiItaly2026-04-24Truhlar And Truhlar Attys RENEWAL58Stephen Shaw
1007Aika InouyeRussia2026-04-15Printing Dimensions NEGOTIATION80Xuxue Feng
1008Sinclair WaycottAustralia2026-04-14Rangoni Of Florence NEW32Xuxue Feng
1009Sinclair WaycottRussia2026-04-18Benton, John B Jr QUALIFIED99Stephen Shaw
1010Antonio CaudyGermany2026-05-06Rousseaux, Michael Esq QUALIFIED12Amy Elsner
1011Chavez BriddickArgentina2026-05-11Commercial Press QUALIFIED65Xuxue Feng
1012Kaitlin OstroskyCanada2026-04-20Buckley Miller Wright NEW75Xuxue Feng
1013Greenwood BologniaRussia2026-05-02King, Christopher A Esq UNQUALIFIED73Amy Elsner
1014Julie StensethBrazil2026-05-09Chemel, James L Cpa QUALIFIED68Xuxue Feng
1015Costa DilliardIndia2026-05-06Dorl, James J Esq NEW45Elwin Sharvill
1016Aruna FigeroaAustralia2026-04-23Morlong Associates QUALIFIED39Stephen Shaw
1017Jones VocelkaGermany2026-05-04Rangoni Of Florence NEGOTIATION16Ivan Magalhaes
1018Rodrigues CampainAustralia2026-04-18King, Christopher A Esq NEGOTIATION50Xuxue Feng
1019Arvin AlbaresFrance2026-04-14Chemel, James L Cpa RENEWAL59Stephen Shaw
1020Rodrigues CampainIndia2026-05-02Chapman, Ross E Esq NEW73Asiya Javayant
1021James ButtUnited Kingdom2026-04-19Printing Dimensions UNQUALIFIED39Asiya Javayant
1022Maisha RulapaughAustralia2026-05-05Chapman, Ross E Esq QUALIFIED39Ioni Bowcher
1023Misaki RoysterBrazil2026-04-29Feltz Printing Service NEW4Xuxue Feng
1024Maria MarrierItaly2026-05-11Truhlar And Truhlar Attys NEW23Amy Elsner
1025Leon OldroydJapan2026-05-04Chemel, James L Cpa PROPOSAL72Elwin Sharvill
1026Alejandro PerinRussia2026-04-24King, Christopher A Esq RENEWAL66Ivan Magalhaes
1027Isabel BowleySpain2026-04-16Rangoni Of Florence NEGOTIATION58Xuxue Feng
1028Ivar PaprockiRussia2026-04-26Feiner Bros UNQUALIFIED81Amy Elsner
1029Smith GlickGermany2026-05-01Chanay, Jeffrey A Esq UNQUALIFIED27Xuxue Feng
1030Ivar PaprockiCanada2026-05-06Rangoni Of Florence NEGOTIATION55Anna Fali
1031Munro FerenczRussia2026-05-06Commercial Press UNQUALIFIED29Onyama Limba
1032Darci PoquetteArgentina2026-04-28Chemel, James L Cpa UNQUALIFIED21Xuxue Feng
1033Sinclair WaycottJapan2026-04-20Chapman, Ross E Esq NEGOTIATION36Anna Fali
1034Cody SaylorsJapan2026-05-09Chanay, Jeffrey A Esq QUALIFIED18Anna Fali
1035Aika InouyeAustralia2026-05-04Feltz Printing Service NEW83Ioni Bowcher
1036Jones VocelkaCanada2026-05-06Truhlar And Truhlar Attys QUALIFIED14Anna Fali
1037Leja CaldareraArgentina2026-05-03Printing Dimensions PROPOSAL72Anna Fali
1038Sinclair WaycottItaly2026-04-14Commercial Press RENEWAL22Stephen Shaw
1039Misaki RoysterSpain2026-05-09Buckley Miller Wright NEW86Stephen Shaw
1040Aruna FigeroaFrance2026-04-30Chemel, James L Cpa NEGOTIATION21Elwin Sharvill
1041Claire TollnerUnited Kingdom2026-04-22Dorl, James J Esq NEGOTIATION19Asiya Javayant
1042Aditya KuskoFrance2026-05-11Benton, John B Jr UNQUALIFIED44Amy Elsner
1043James ButtJapan2026-05-03Feiner Bros NEGOTIATION67Stephen Shaw
1044Faith GillianSpain2026-05-06Rangoni Of Florence QUALIFIED89Stephen Shaw
1045Francesco ShinkoBrazil2026-04-26Feltz Printing Service QUALIFIED18Amy Elsner
1046Isabel BowleyRussia2026-04-28Buckley Miller Wright RENEWAL2Asiya Javayant
1047Arvin AlbaresAustralia2026-04-26Rousseaux, Michael Esq RENEWAL71Onyama Limba
1048Izzy GarufiIndia2026-04-16Benton, John B Jr NEGOTIATION53Asiya Javayant
1049Leon OldroydRussia2026-05-07Feltz Printing Service PROPOSAL56Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Maria MarrierSpainIoni Bowcher UNQUALIFIED
Salvatore StockhamArgentinaElwin Sharvill UNQUALIFIED
Misaki RoysterArgentinaIoni Bowcher PROPOSAL
Arvin AlbaresCanadaBernardo Dominic UNQUALIFIED
Stacey MacleadSpainAmy Elsner UNQUALIFIED
Wickens NestleArgentinaIvan Magalhaes PROPOSAL
Kaitlin OstroskyArgentinaElwin Sharvill NEW
Costa DilliardRussiaXuxue Feng PROPOSAL
Salvatore StockhamGermanyBernardo Dominic NEW
Stacey MacleadCanadaAmy Elsner NEW
Julie StensethIndiaIoni Bowcher PROPOSAL
Murillo MaletArgentinaIoni Bowcher PROPOSAL
Mayumi KolmetzRussiaBernardo Dominic NEGOTIATION
Octavia MaletItalyAnna Fali NEGOTIATION
Jefferson SchemmerAustraliaAsiya Javayant NEW
Mujtaba NickaBrazilElwin Sharvill UNQUALIFIED
Stacey MacleadSpainAnna Fali QUALIFIED
Emily WhobreyFranceIoni Bowcher NEGOTIATION
Adams MorascaCanadaAsiya Javayant NEW
Silvio SlusarskiGermanyXuxue Feng NEW
Ashley DoeCanadaAnna Fali UNQUALIFIED
Mujtaba NickaRussiaXuxue Feng NEW
Cody SaylorsUnited KingdomXuxue Feng QUALIFIED
Jeanfrancois VenereRussiaBernardo Dominic UNQUALIFIED
Ashley DoeArgentinaStephen Shaw NEW
Jennifer AmigonGermanyStephen Shaw PROPOSAL
Deepesh ChuiFranceAmy Elsner RENEWAL
Ivar PaprockiUnited KingdomBernardo Dominic QUALIFIED
Arvin AlbaresCanadaXuxue Feng NEW
Alejandro PerinIndiaAnna Fali RENEWAL
Silvio SlusarskiBrazilBernardo Dominic UNQUALIFIED
Isabel BowleyGermanyAmy Elsner NEGOTIATION
Alejandro PerinAustraliaOnyama Limba NEW
Isabel BowleySpainIvan Magalhaes NEGOTIATION
Kadeem FlosiJapanBernardo Dominic UNQUALIFIED
Ivar PaprockiIndiaAmy Elsner RENEWAL
Clifford RimUnited KingdomBernardo Dominic PROPOSAL
Francesco ShinkoRussiaIoni Bowcher QUALIFIED
Julie StensethFranceOnyama Limba RENEWAL
Kaitlin OstroskyUnited KingdomBernardo Dominic NEW
Silvio SlusarskiJapanAnna Fali RENEWAL
Aruna FigeroaGermanyStephen Shaw RENEWAL
Rodrigues CampainRussiaOnyama Limba QUALIFIED
Claire TollnerFranceStephen Shaw NEGOTIATION
Aditya KuskoFranceOnyama Limba RENEWAL
Morrow RutaJapanIvan Magalhaes RENEWAL
Maisha RulapaughJapanAnna Fali NEGOTIATION
Munro FerenczIndiaAsiya Javayant NEGOTIATION
Greenwood BologniaSpainStephen Shaw UNQUALIFIED
Misaki RoysterUnited KingdomAnna Fali UNQUALIFIED
Frozen Columns
Name
Greenwood Bolognia
Emily Whobrey
Munro Ferencz
Cody Saylors
Francesco Shinko
Cody Saylors
Emily Whobrey
Ivar Paprocki
Adams Morasca
Silvio Slusarski
David Darakjy
Kadeem Flosi
Clifford Rim
Aditya Kusko
Misaki Royster
Chavez Briddick
Chavez Briddick
Clifford Rim
Stacey Maclead
Adams Morasca
Nicolas Iturbide
Wickens Nestle
Faith Gillian
Kadeem Flosi
Smith Glick
Maria Marrier
Alejandro Perin
Smith Glick
Chavez Briddick
Deepesh Chui
Stacey Maclead
Ricardo Gaucho
Murillo Malet
Sinclair Waycott
Costa Dilliard
Silvio Slusarski
Stacey Maclead
Jeanfrancois Venere
Aruna Figeroa
Jefferson Schemmer
Juan Wieser
Izzy Garufi
Munro Ferencz
Wickens Nestle
Mujtaba Nicka
Salvatore Stockham
Faith Gillian
Darci Poquette
Ashley Doe
Misaki Royster
IdCountryDate
1000Italy2026-05-07
1001France2026-05-12
1002Japan2026-04-22
1003Russia2026-04-27
1004Russia2026-04-26
1005Japan2026-05-04
1006Russia2026-05-08
1007Russia2026-04-16
1008Russia2026-05-09
1009Japan2026-04-27
1010Japan2026-04-20
1011Japan2026-05-08
1012Canada2026-04-14
1013Germany2026-04-30
1014Germany2026-05-06
1015Russia2026-04-28
1016France2026-05-11
1017Italy2026-04-21
1018Spain2026-04-16
1019Russia2026-04-17
1020Spain2026-04-28
1021Japan2026-04-19
1022Canada2026-05-10
1023Brazil2026-05-06
1024Argentina2026-04-14
1025Italy2026-04-28
1026Germany2026-04-30
1027Canada2026-04-20
1028Italy2026-05-07
1029Argentina2026-04-21
1030Canada2026-04-22
1031Japan2026-04-27
1032Canada2026-05-08
1033Italy2026-04-16
1034Canada2026-04-20
1035Australia2026-05-01
1036India2026-05-07
1037Brazil2026-05-01
1038Japan2026-05-02
1039Spain2026-04-14
1040Italy2026-05-05
1041Germany2026-04-29
1042Japan2026-04-23
1043Japan2026-05-03
1044France2026-05-10
1045Argentina2026-04-14
1046Spain2026-04-18
1047Japan2026-04-25
1048Argentina2026-04-20
1049India2026-04-26

On-Demand Data

NameIdCountryDate
Jefferson Schemmer1000Australia2026-04-19
David Darakjy1001United Kingdom2026-05-12
Izzy Garufi1002India2026-04-24
Francesco Shinko1003Japan2026-05-05
Smith Glick1004France2026-05-04
Arvin Albares1005India2026-05-01
Mujtaba Nicka1006Spain2026-04-23
James Butt1007United Kingdom2026-05-13
Sinclair Waycott1008Australia2026-05-13
Costa Dilliard1009United Kingdom2026-04-16
Darci Poquette1010Japan2026-05-06
Misaki Royster1011Canada2026-05-07
Sinclair Waycott1012United Kingdom2026-05-11
Tony Foller1013Japan2026-04-27
Leja Caldarera1014Germany2026-05-08
Aditya Kusko1015Australia2026-04-21
Costa Dilliard1016Canada2026-04-17
Octavia Malet1017Canada2026-04-22
Deepesh Chui1018Argentina2026-05-01
Jeanfrancois Venere1019Japan2026-05-04
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Claire TollnerUnited KingdomElwin Sharvill NEGOTIATION
Alejandro PerinGermanyStephen Shaw PROPOSAL
Jones VocelkaGermanyIvan Magalhaes PROPOSAL
Antonio CaudyBrazilIvan Magalhaes PROPOSAL
Misaki RoysterRussiaStephen Shaw QUALIFIED
Deepesh ChuiItalyIoni Bowcher UNQUALIFIED
Jeanfrancois VenereSpainIoni Bowcher UNQUALIFIED
James ButtArgentinaAmy Elsner UNQUALIFIED
Claire TollnerRussiaIoni Bowcher QUALIFIED
Salvatore StockhamBrazilAnna Fali QUALIFIED
Costa DilliardFranceIvan Magalhaes NEW
Murillo MaletFranceAnna Fali NEGOTIATION
Jeanfrancois VenereAustraliaElwin Sharvill QUALIFIED
Murillo MaletItalyOnyama Limba PROPOSAL
Juan WieserRussiaAsiya Javayant UNQUALIFIED
Greenwood BologniaBrazilAnna Fali NEGOTIATION
Kaitlin OstroskySpainXuxue Feng NEW
James ButtSpainAnna Fali RENEWAL
Darci PoquetteFranceStephen Shaw QUALIFIED
Wickens NestleUnited KingdomAsiya Javayant NEGOTIATION
Misaki RoysterIndiaAsiya Javayant QUALIFIED
Clifford RimCanadaAnna Fali UNQUALIFIED
Aika InouyeArgentinaBernardo Dominic NEW
Greenwood BologniaJapanBernardo Dominic PROPOSAL
Alejandro PerinCanadaAnna Fali NEW
Arvin AlbaresIndiaElwin Sharvill RENEWAL
Faith GillianJapanAmy Elsner RENEWAL
Adams MorascaAustraliaOnyama Limba NEW
Juan WieserAustraliaStephen Shaw NEW
Maisha RulapaughItalyIoni Bowcher RENEWAL
Adams MorascaFranceIoni Bowcher UNQUALIFIED
Silvio SlusarskiIndiaStephen Shaw NEW
Clifford RimAustraliaIoni Bowcher NEGOTIATION
Julie StensethSpainIvan Magalhaes PROPOSAL
Juan WieserFranceBernardo Dominic NEW
Jeanfrancois VenereSpainOnyama Limba RENEWAL
Faith GillianFranceIoni Bowcher PROPOSAL
Aruna FigeroaCanadaIvan Magalhaes PROPOSAL
Izzy GarufiFranceBernardo Dominic NEW
Clifford RimSpainOnyama Limba 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>