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
Leja CaldareraBrazilAmy Elsner NEW
Cody SaylorsArgentinaElwin Sharvill NEGOTIATION
Faith GillianSpainAmy Elsner RENEWAL
Clifford RimSpainAmy Elsner RENEWAL
Leon OldroydGermanyAsiya Javayant NEW
Morrow RutaRussiaAnna Fali RENEWAL
Alejandro PerinBrazilOnyama Limba PROPOSAL
Clifford RimArgentinaStephen Shaw QUALIFIED
Aika InouyeJapanIoni Bowcher RENEWAL
Darci PoquetteAustraliaOnyama Limba UNQUALIFIED
Stacey MacleadAustraliaOnyama Limba NEW
Rodrigues CampainBrazilXuxue Feng PROPOSAL
Aditya KuskoAustraliaIoni Bowcher QUALIFIED
Claire TollnerSpainXuxue Feng NEW
Julie StensethSpainIoni Bowcher UNQUALIFIED
Francesco ShinkoCanadaXuxue Feng RENEWAL
Clifford RimUnited KingdomBernardo Dominic QUALIFIED
Faith GillianBrazilIvan Magalhaes QUALIFIED
Sinclair WaycottJapanStephen Shaw PROPOSAL
Kaitlin OstroskyGermanyAmy Elsner QUALIFIED
Morrow RutaIndiaIoni Bowcher PROPOSAL
Maisha RulapaughUnited KingdomIvan Magalhaes QUALIFIED
Maria MarrierIndiaStephen Shaw UNQUALIFIED
Adams MorascaUnited KingdomElwin Sharvill UNQUALIFIED
Julie StensethItalyOnyama Limba NEW
Kadeem FlosiCanadaStephen Shaw UNQUALIFIED
Aditya KuskoSpainOnyama Limba NEW
Izzy GarufiUnited KingdomElwin Sharvill RENEWAL
Cody SaylorsFranceOnyama Limba PROPOSAL
Wickens NestleItalyAsiya Javayant NEGOTIATION
Aika InouyeUnited KingdomStephen Shaw RENEWAL
Aruna FigeroaGermanyAnna Fali UNQUALIFIED
Darci PoquetteItalyXuxue Feng UNQUALIFIED
Smith GlickIndiaElwin Sharvill RENEWAL
Aika InouyeBrazilAsiya Javayant RENEWAL
Aika InouyeAustraliaAnna Fali NEW
Maria MarrierCanadaOnyama Limba PROPOSAL
Francesco ShinkoAustraliaAnna Fali NEGOTIATION
Emily WhobreyArgentinaAnna Fali UNQUALIFIED
Tony FollerRussiaAnna Fali UNQUALIFIED
Rodrigues CampainItalyAnna Fali NEW
Octavia MaletItalyAsiya Javayant NEW
Mujtaba NickaFranceAnna Fali QUALIFIED
Misaki RoysterIndiaOnyama Limba RENEWAL
Ricardo GauchoCanadaBernardo Dominic NEW
David DarakjyArgentinaOnyama Limba UNQUALIFIED
Isabel BowleyRussiaOnyama Limba NEW
Ivar PaprockiItalyAnna Fali RENEWAL
Antonio CaudyUnited KingdomBernardo Dominic UNQUALIFIED
Leon OldroydGermanyBernardo Dominic NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Izzy GarufiUnited KingdomIoni Bowcher RENEWAL
Aika InouyeCanadaAsiya Javayant QUALIFIED
Rodrigues CampainFranceStephen Shaw UNQUALIFIED
Mujtaba NickaBrazilBernardo Dominic QUALIFIED
Antonio CaudyUnited KingdomIvan Magalhaes QUALIFIED
Kaitlin OstroskyFranceIoni Bowcher QUALIFIED
Jeanfrancois VenereBrazilIvan Magalhaes PROPOSAL
Claire TollnerCanadaIvan Magalhaes RENEWAL
Jones VocelkaJapanAnna Fali UNQUALIFIED
Francesco ShinkoGermanyBernardo Dominic NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Julie StensethCanada2026-05-17Benton, John B Jr NEGOTIATION9Asiya Javayant
1001Arvin AlbaresJapan2026-05-10Chanay, Jeffrey A Esq NEW16Amy Elsner
1002Emily WhobreyIndia2026-06-01Feltz Printing Service NEGOTIATION94Anna Fali
1003Greenwood BologniaFrance2026-05-25Feltz Printing Service QUALIFIED7Ivan Magalhaes
1004Isabel BowleySpain2026-05-14Printing Dimensions NEGOTIATION53Xuxue Feng
1005Francesco ShinkoArgentina2026-05-13Buckley Miller Wright QUALIFIED29Ioni Bowcher
1006Misaki RoysterSpain2026-05-10Commercial Press QUALIFIED41Elwin Sharvill
1007Adams MorascaIndia2026-05-16Morlong Associates RENEWAL37Anna Fali
1008Salvatore StockhamSpain2026-05-20Chemel, James L Cpa UNQUALIFIED68Ivan Magalhaes
1009Jefferson SchemmerAustralia2026-05-15Feltz Printing Service QUALIFIED25Xuxue Feng
1010Claire TollnerAustralia2026-05-26Rousseaux, Michael Esq UNQUALIFIED80Ioni Bowcher
1011Silvio SlusarskiGermany2026-05-23Rangoni Of Florence QUALIFIED59Anna Fali
1012Ricardo GauchoGermany2026-05-26Chemel, James L Cpa NEW32Onyama Limba
1013Ivar PaprockiFrance2026-05-12Chapman, Ross E Esq UNQUALIFIED45Bernardo Dominic
1014Jones VocelkaAustralia2026-05-06Buckley Miller Wright NEGOTIATION56Onyama Limba
1015Darci PoquetteJapan2026-05-26Rousseaux, Michael Esq PROPOSAL79Bernardo Dominic
1016Faith GillianItaly2026-05-27Chapman, Ross E Esq PROPOSAL55Anna Fali
1017Tony FollerCanada2026-06-03Feiner Bros NEW45Stephen Shaw
1018Silvio SlusarskiRussia2026-05-11Chemel, James L Cpa PROPOSAL75Xuxue Feng
1019Jennifer AmigonBrazil2026-05-18Truhlar And Truhlar Attys NEGOTIATION84Ioni Bowcher
1020Salvatore StockhamJapan2026-05-06King, Christopher A Esq UNQUALIFIED98Elwin Sharvill
1021Greenwood BologniaItaly2026-05-21Morlong Associates RENEWAL4Stephen Shaw
1022Faith GillianRussia2026-05-24Buckley Miller Wright UNQUALIFIED38Ioni Bowcher
1023Misaki RoysterIndia2026-05-29Rangoni Of Florence PROPOSAL86Anna Fali
1024Izzy GarufiItaly2026-05-23Chanay, Jeffrey A Esq RENEWAL97Stephen Shaw
1025Alejandro PerinUnited Kingdom2026-05-28Morlong Associates NEGOTIATION33Amy Elsner
1026Tony FollerRussia2026-06-04Rangoni Of Florence PROPOSAL23Asiya Javayant
1027Jeanfrancois VenereArgentina2026-05-10Rangoni Of Florence NEGOTIATION26Anna Fali
1028Isabel BowleyUnited Kingdom2026-06-04Buckley Miller Wright PROPOSAL29Amy Elsner
1029Misaki RoysterJapan2026-05-13Chemel, James L Cpa PROPOSAL77Onyama Limba
1030Jefferson SchemmerBrazil2026-05-28Chapman, Ross E Esq RENEWAL26Ivan Magalhaes
1031Julie StensethItaly2026-05-31Printing Dimensions PROPOSAL73Ioni Bowcher
1032Clifford RimJapan2026-05-23Chapman, Ross E Esq NEW46Anna Fali
1033Smith GlickFrance2026-05-24Chemel, James L Cpa UNQUALIFIED72Ivan Magalhaes
1034Aruna FigeroaAustralia2026-05-09King, Christopher A Esq NEGOTIATION69Anna Fali
1035Clifford RimArgentina2026-05-12Rangoni Of Florence NEW48Anna Fali
1036Salvatore StockhamCanada2026-05-30Rousseaux, Michael Esq QUALIFIED13Anna Fali
1037Stacey MacleadGermany2026-05-31Rangoni Of Florence NEGOTIATION99Bernardo Dominic
1038Silvio SlusarskiGermany2026-05-15Chanay, Jeffrey A Esq PROPOSAL89Xuxue Feng
1039Adams MorascaFrance2026-06-02Rangoni Of Florence QUALIFIED1Stephen Shaw
1040Faith GillianJapan2026-05-12King, Christopher A Esq UNQUALIFIED66Anna Fali
1041Ivar PaprockiFrance2026-06-01Chanay, Jeffrey A Esq NEGOTIATION56Onyama Limba
1042Aruna FigeroaRussia2026-05-31Feiner Bros NEW52Ivan Magalhaes
1043Izzy GarufiUnited Kingdom2026-05-21Chemel, James L Cpa PROPOSAL83Ioni Bowcher
1044Tony FollerUnited Kingdom2026-05-24Morlong Associates PROPOSAL23Ioni Bowcher
1045Johnson SergiSpain2026-05-15Feltz Printing Service RENEWAL28Elwin Sharvill
1046Misaki RoysterCanada2026-05-09Morlong Associates RENEWAL24Bernardo Dominic
1047Izzy GarufiIndia2026-05-08Printing Dimensions UNQUALIFIED38Elwin Sharvill
1048James ButtAustralia2026-05-21Chemel, James L Cpa RENEWAL76Ioni Bowcher
1049Faith GillianRussia2026-05-19Rangoni Of Florence RENEWAL67Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Claire TollnerJapanXuxue Feng UNQUALIFIED
Aditya KuskoArgentinaXuxue Feng NEGOTIATION
Faith GillianArgentinaAnna Fali PROPOSAL
Mujtaba NickaArgentinaIvan Magalhaes UNQUALIFIED
Clifford RimAustraliaElwin Sharvill NEGOTIATION
Izzy GarufiIndiaStephen Shaw UNQUALIFIED
Jones VocelkaRussiaBernardo Dominic NEGOTIATION
Leja CaldareraGermanyAsiya Javayant UNQUALIFIED
Greenwood BologniaIndiaAmy Elsner UNQUALIFIED
Emily WhobreyArgentinaAsiya Javayant NEGOTIATION
Faith GillianJapanBernardo Dominic PROPOSAL
Francesco ShinkoIndiaAsiya Javayant RENEWAL
Izzy GarufiBrazilAnna Fali PROPOSAL
Chavez BriddickArgentinaXuxue Feng UNQUALIFIED
Ricardo GauchoSpainAsiya Javayant RENEWAL
Jefferson SchemmerJapanElwin Sharvill RENEWAL
Ricardo GauchoBrazilOnyama Limba NEGOTIATION
Smith GlickArgentinaIoni Bowcher QUALIFIED
Juan WieserFranceXuxue Feng PROPOSAL
Nicolas IturbideFranceElwin Sharvill RENEWAL
Leja CaldareraUnited KingdomOnyama Limba RENEWAL
Octavia MaletBrazilAsiya Javayant NEW
Maisha RulapaughSpainAsiya Javayant PROPOSAL
Arvin AlbaresAustraliaIvan Magalhaes RENEWAL
Mayumi KolmetzRussiaIoni Bowcher NEGOTIATION
Sinclair WaycottBrazilAmy Elsner NEGOTIATION
Leon OldroydGermanyXuxue Feng NEW
Nicolas IturbideIndiaOnyama Limba RENEWAL
Arvin AlbaresBrazilAnna Fali RENEWAL
Emily WhobreyArgentinaAmy Elsner QUALIFIED
Aruna FigeroaAustraliaStephen Shaw NEW
Jeanfrancois VenereCanadaAnna Fali UNQUALIFIED
Maisha RulapaughBrazilIvan Magalhaes RENEWAL
Faith GillianItalyXuxue Feng NEGOTIATION
Munro FerenczUnited KingdomOnyama Limba UNQUALIFIED
Julie StensethFranceAnna Fali UNQUALIFIED
Nicolas IturbideItalyAnna Fali PROPOSAL
Adams MorascaUnited KingdomIvan Magalhaes PROPOSAL
Munro FerenczCanadaIoni Bowcher QUALIFIED
Stacey MacleadFranceAnna Fali NEGOTIATION
Francesco ShinkoAustraliaAsiya Javayant NEW
Jeanfrancois VenereCanadaXuxue Feng NEW
Jefferson SchemmerIndiaAmy Elsner PROPOSAL
Ricardo GauchoBrazilStephen Shaw QUALIFIED
James ButtItalyIoni Bowcher RENEWAL
Stacey MacleadCanadaAmy Elsner QUALIFIED
Murillo MaletItalyIoni Bowcher QUALIFIED
Juan WieserJapanAsiya Javayant RENEWAL
Darci PoquetteGermanyIoni Bowcher NEW
Octavia MaletUnited KingdomOnyama Limba RENEWAL
Frozen Columns
Name
Cody Saylors
Emily Whobrey
Smith Glick
Jennifer Amigon
Aika Inouye
Jennifer Amigon
Darci Poquette
Tony Foller
Juan Wieser
Wickens Nestle
James Butt
Darci Poquette
Ricardo Gaucho
Rodrigues Campain
Juan Wieser
Antonio Caudy
Adams Morasca
Leon Oldroyd
Greenwood Bolognia
Emily Whobrey
Misaki Royster
Leja Caldarera
Clifford Rim
Emily Whobrey
Sinclair Waycott
Misaki Royster
Ashley Doe
Ivar Paprocki
Alejandro Perin
Aruna Figeroa
David Darakjy
Arvin Albares
Mayumi Kolmetz
Arvin Albares
Cody Saylors
Jennifer Amigon
Ashley Doe
Stacey Maclead
Nicolas Iturbide
Octavia Malet
Aruna Figeroa
Johnson Sergi
David Darakjy
Costa Dilliard
Antonio Caudy
Mujtaba Nicka
Clifford Rim
Jennifer Amigon
Silvio Slusarski
Mujtaba Nicka
IdCountryDate
1000India2026-06-03
1001France2026-05-21
1002France2026-05-30
1003Italy2026-05-07
1004Spain2026-05-07
1005France2026-06-02
1006Australia2026-06-04
1007Japan2026-05-17
1008Italy2026-06-02
1009Russia2026-05-15
1010Australia2026-06-02
1011United Kingdom2026-05-14
1012France2026-05-09
1013India2026-05-22
1014Russia2026-05-14
1015France2026-06-02
1016France2026-05-28
1017Spain2026-05-09
1018United Kingdom2026-06-03
1019Brazil2026-05-20
1020India2026-05-16
1021Canada2026-05-11
1022Australia2026-05-08
1023Japan2026-05-16
1024Russia2026-05-25
1025United Kingdom2026-05-15
1026Brazil2026-05-16
1027Russia2026-05-07
1028Argentina2026-05-20
1029Australia2026-05-27
1030France2026-05-15
1031Japan2026-06-01
1032Argentina2026-05-25
1033Germany2026-05-30
1034Russia2026-06-01
1035Italy2026-05-31
1036Australia2026-05-31
1037India2026-05-15
1038United Kingdom2026-05-22
1039United Kingdom2026-05-09
1040Argentina2026-05-27
1041France2026-05-10
1042France2026-05-25
1043Russia2026-05-25
1044Germany2026-06-03
1045Australia2026-05-18
1046Canada2026-05-30
1047Argentina2026-05-31
1048Spain2026-05-08
1049Argentina2026-05-28

On-Demand Data

NameIdCountryDate
Octavia Malet1000Australia2026-05-23
Arvin Albares1001France2026-05-29
Morrow Ruta1002Canada2026-05-20
Salvatore Stockham1003India2026-05-28
Darci Poquette1004United Kingdom2026-06-04
Francesco Shinko1005Russia2026-05-12
Chavez Briddick1006Italy2026-05-31
Octavia Malet1007Russia2026-05-07
Wickens Nestle1008Australia2026-06-02
Jones Vocelka1009France2026-05-19
Morrow Ruta1010Germany2026-05-06
Rodrigues Campain1011Germany2026-05-13
Munro Ferencz1012Germany2026-05-19
Antonio Caudy1013Australia2026-05-25
Clifford Rim1014Italy2026-05-11
Antonio Caudy1015France2026-05-06
Munro Ferencz1016Canada2026-05-20
Smith Glick1017United Kingdom2026-05-30
James Butt1018Canada2026-05-18
Munro Ferencz1019Italy2026-05-15
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Emily WhobreyUnited KingdomBernardo Dominic PROPOSAL
Silvio SlusarskiBrazilIoni Bowcher PROPOSAL
Munro FerenczJapanXuxue Feng NEGOTIATION
Jones VocelkaAustraliaXuxue Feng NEW
Isabel BowleyIndiaStephen Shaw UNQUALIFIED
Kaitlin OstroskyArgentinaOnyama Limba NEW
Kaitlin OstroskyCanadaXuxue Feng PROPOSAL
Kadeem FlosiRussiaAmy Elsner RENEWAL
Deepesh ChuiItalyAmy Elsner PROPOSAL
Jeanfrancois VenereBrazilOnyama Limba QUALIFIED
James ButtAustraliaXuxue Feng RENEWAL
Aditya KuskoGermanyAsiya Javayant NEGOTIATION
Leon OldroydItalyAsiya Javayant UNQUALIFIED
Maria MarrierIndiaOnyama Limba RENEWAL
Kaitlin OstroskyJapanIoni Bowcher UNQUALIFIED
Antonio CaudyCanadaIoni Bowcher UNQUALIFIED
Sinclair WaycottGermanyOnyama Limba NEW
Ivar PaprockiIndiaAnna Fali PROPOSAL
Rodrigues CampainArgentinaOnyama Limba NEW
Izzy GarufiAustraliaIvan Magalhaes QUALIFIED
Tony FollerJapanOnyama Limba NEW
Maria MarrierIndiaAsiya Javayant NEGOTIATION
Morrow RutaCanadaXuxue Feng RENEWAL
Deepesh ChuiRussiaAmy Elsner QUALIFIED
Silvio SlusarskiCanadaAnna Fali RENEWAL
Greenwood BologniaAustraliaAnna Fali PROPOSAL
Jeanfrancois VenereSpainIoni Bowcher PROPOSAL
Jefferson SchemmerGermanyIvan Magalhaes NEW
Ashley DoeJapanXuxue Feng QUALIFIED
Isabel BowleyBrazilStephen Shaw UNQUALIFIED
Sinclair WaycottGermanyElwin Sharvill QUALIFIED
Wickens NestleSpainAnna Fali QUALIFIED
Chavez BriddickJapanIoni Bowcher NEW
Jeanfrancois VenereItalyElwin Sharvill NEW
Tony FollerItalyBernardo Dominic RENEWAL
Misaki RoysterGermanyAsiya Javayant RENEWAL
Ivar PaprockiCanadaXuxue Feng RENEWAL
Cody SaylorsRussiaIoni Bowcher RENEWAL
James ButtFranceIvan Magalhaes PROPOSAL
Aditya KuskoJapanXuxue Feng 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>