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
Jefferson SchemmerCanadaXuxue Feng UNQUALIFIED
Sinclair WaycottBrazilBernardo Dominic RENEWAL
Wickens NestleRussiaElwin Sharvill RENEWAL
Sinclair WaycottBrazilOnyama Limba NEW
Cody SaylorsSpainOnyama Limba PROPOSAL
Aruna FigeroaFranceOnyama Limba NEW
Jones VocelkaSpainBernardo Dominic QUALIFIED
Costa DilliardGermanyBernardo Dominic NEGOTIATION
Arvin AlbaresCanadaIoni Bowcher NEGOTIATION
Morrow RutaSpainIoni Bowcher NEW
Jeanfrancois VenereAustraliaIoni Bowcher NEW
Cody SaylorsUnited KingdomOnyama Limba RENEWAL
Deepesh ChuiIndiaElwin Sharvill NEGOTIATION
James ButtAustraliaAsiya Javayant QUALIFIED
Claire TollnerGermanyAsiya Javayant RENEWAL
Faith GillianFranceOnyama Limba PROPOSAL
Morrow RutaCanadaAsiya Javayant NEW
Antonio CaudyItalyElwin Sharvill UNQUALIFIED
Jennifer AmigonUnited KingdomAmy Elsner NEGOTIATION
Francesco ShinkoItalyIoni Bowcher NEGOTIATION
Stacey MacleadCanadaXuxue Feng NEGOTIATION
Ivar PaprockiBrazilAmy Elsner UNQUALIFIED
Johnson SergiIndiaIvan Magalhaes NEW
Isabel BowleyIndiaXuxue Feng NEW
Juan WieserFranceElwin Sharvill PROPOSAL
Emily WhobreyIndiaIoni Bowcher NEW
Faith GillianJapanStephen Shaw RENEWAL
Arvin AlbaresAustraliaIoni Bowcher PROPOSAL
Costa DilliardAustraliaBernardo Dominic QUALIFIED
Maisha RulapaughArgentinaIvan Magalhaes NEW
Arvin AlbaresIndiaElwin Sharvill NEW
Julie StensethArgentinaStephen Shaw PROPOSAL
Greenwood BologniaRussiaOnyama Limba NEW
Arvin AlbaresUnited KingdomElwin Sharvill NEGOTIATION
Jeanfrancois VenereArgentinaAnna Fali NEGOTIATION
Sinclair WaycottFranceOnyama Limba RENEWAL
Morrow RutaUnited KingdomIvan Magalhaes NEGOTIATION
Alejandro PerinFranceIoni Bowcher UNQUALIFIED
Octavia MaletCanadaOnyama Limba QUALIFIED
Izzy GarufiGermanyIoni Bowcher PROPOSAL
Juan WieserFranceElwin Sharvill QUALIFIED
Ashley DoeCanadaXuxue Feng RENEWAL
Clifford RimBrazilIoni Bowcher PROPOSAL
Juan WieserItalyXuxue Feng NEGOTIATION
Isabel BowleyArgentinaElwin Sharvill UNQUALIFIED
Munro FerenczUnited KingdomIvan Magalhaes QUALIFIED
Murillo MaletIndiaAmy Elsner QUALIFIED
Ashley DoeIndiaAmy Elsner RENEWAL
Maisha RulapaughFranceXuxue Feng QUALIFIED
Izzy GarufiIndiaIvan Magalhaes NEW
Horizontal
NameCountryRepresentativeStatus
Kadeem FlosiIndiaStephen Shaw UNQUALIFIED
Ivar PaprockiArgentinaAmy Elsner NEW
Misaki RoysterAustraliaStephen Shaw PROPOSAL
Silvio SlusarskiJapanOnyama Limba QUALIFIED
Tony FollerUnited KingdomIoni Bowcher NEGOTIATION
Stacey MacleadUnited KingdomAsiya Javayant RENEWAL
Munro FerenczIndiaStephen Shaw NEW
Deepesh ChuiJapanAsiya Javayant UNQUALIFIED
Darci PoquetteJapanAnna Fali NEGOTIATION
Adams MorascaAustraliaIvan Magalhaes RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Isabel BowleyJapan2026-05-07Morlong Associates QUALIFIED64Ioni Bowcher
1001James ButtArgentina2026-05-27Buckley Miller Wright RENEWAL25Bernardo Dominic
1002Nicolas IturbideIndia2026-05-16Chemel, James L Cpa NEW2Ivan Magalhaes
1003Ivar PaprockiUnited Kingdom2026-05-17Feltz Printing Service NEW8Ioni Bowcher
1004Misaki RoysterGermany2026-05-05Dorl, James J Esq PROPOSAL30Ivan Magalhaes
1005Greenwood BologniaGermany2026-05-21Truhlar And Truhlar Attys NEW86Ioni Bowcher
1006Ricardo GauchoJapan2026-05-09Buckley Miller Wright NEW28Stephen Shaw
1007Jones VocelkaJapan2026-05-23Commercial Press QUALIFIED1Xuxue Feng
1008Kaitlin OstroskyGermany2026-05-31Printing Dimensions RENEWAL60Anna Fali
1009Claire TollnerSpain2026-05-22Rousseaux, Michael Esq RENEWAL35Anna Fali
1010Maisha RulapaughIndia2026-06-01Chemel, James L Cpa PROPOSAL53Asiya Javayant
1011Aditya KuskoRussia2026-05-17Rousseaux, Michael Esq RENEWAL67Asiya Javayant
1012Nicolas IturbideRussia2026-05-08Chapman, Ross E Esq NEW16Ioni Bowcher
1013Costa DilliardItaly2026-05-21Chemel, James L Cpa NEW12Ioni Bowcher
1014Sinclair WaycottCanada2026-05-17Dorl, James J Esq NEW18Ioni Bowcher
1015Rodrigues CampainGermany2026-05-20Chemel, James L Cpa NEW40Stephen Shaw
1016Emily WhobreyIndia2026-05-11Chanay, Jeffrey A Esq PROPOSAL4Stephen Shaw
1017Costa DilliardAustralia2026-05-04Morlong Associates RENEWAL67Onyama Limba
1018Misaki RoysterIndia2026-05-04Buckley Miller Wright NEW23Xuxue Feng
1019Octavia MaletIndia2026-05-18Commercial Press RENEWAL93Anna Fali
1020Faith GillianSpain2026-05-27Truhlar And Truhlar Attys NEW90Onyama Limba
1021Faith GillianSpain2026-05-17Rousseaux, Michael Esq RENEWAL16Xuxue Feng
1022Octavia MaletGermany2026-05-16Feltz Printing Service UNQUALIFIED95Anna Fali
1023Maisha RulapaughCanada2026-05-12Feiner Bros RENEWAL84Ioni Bowcher
1024Maisha RulapaughIndia2026-05-08Commercial Press NEW40Ivan Magalhaes
1025Aditya KuskoCanada2026-06-01Feltz Printing Service NEGOTIATION19Xuxue Feng
1026Jeanfrancois VenereCanada2026-05-04Benton, John B Jr RENEWAL75Amy Elsner
1027Tony FollerRussia2026-05-06Rousseaux, Michael Esq NEW37Bernardo Dominic
1028Chavez BriddickGermany2026-05-04Truhlar And Truhlar Attys NEW77Elwin Sharvill
1029Ricardo GauchoItaly2026-05-04Chemel, James L Cpa QUALIFIED54Xuxue Feng
1030Murillo MaletFrance2026-05-08Feltz Printing Service QUALIFIED32Stephen Shaw
1031Mujtaba NickaSpain2026-05-11Dorl, James J Esq QUALIFIED2Elwin Sharvill
1032Jefferson SchemmerCanada2026-05-29Feltz Printing Service RENEWAL44Stephen Shaw
1033Ricardo GauchoRussia2026-05-30Rousseaux, Michael Esq RENEWAL59Stephen Shaw
1034Darci PoquetteJapan2026-05-10King, Christopher A Esq PROPOSAL58Stephen Shaw
1035Leon OldroydArgentina2026-05-05Commercial Press UNQUALIFIED53Ivan Magalhaes
1036Kaitlin OstroskyAustralia2026-05-19Printing Dimensions UNQUALIFIED54Xuxue Feng
1037Aditya KuskoGermany2026-05-19Dorl, James J Esq PROPOSAL4Ivan Magalhaes
1038Leja CaldareraBrazil2026-05-06Feltz Printing Service RENEWAL33Bernardo Dominic
1039Rodrigues CampainFrance2026-05-29King, Christopher A Esq QUALIFIED13Amy Elsner
1040Leja CaldareraAustralia2026-05-28Feltz Printing Service NEGOTIATION71Bernardo Dominic
1041Ricardo GauchoArgentina2026-05-19Rangoni Of Florence RENEWAL92Ivan Magalhaes
1042David DarakjyCanada2026-05-16King, Christopher A Esq NEW83Bernardo Dominic
1043Ricardo GauchoCanada2026-05-13Truhlar And Truhlar Attys QUALIFIED26Anna Fali
1044Aruna FigeroaJapan2026-05-21Printing Dimensions QUALIFIED91Ioni Bowcher
1045Adams MorascaArgentina2026-05-25Benton, John B Jr NEW74Stephen Shaw
1046Faith GillianFrance2026-05-12Dorl, James J Esq PROPOSAL3Stephen Shaw
1047Ricardo GauchoJapan2026-05-29Dorl, James J Esq RENEWAL80Ivan Magalhaes
1048Octavia MaletAustralia2026-05-13Commercial Press NEGOTIATION30Anna Fali
1049Isabel BowleyArgentina2026-05-10Commercial Press RENEWAL85Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Stacey MacleadGermanyStephen Shaw PROPOSAL
Mujtaba NickaFranceAsiya Javayant NEW
Jennifer AmigonItalyOnyama Limba NEGOTIATION
Sinclair WaycottBrazilAsiya Javayant PROPOSAL
Kaitlin OstroskyFranceXuxue Feng UNQUALIFIED
Darci PoquetteBrazilAnna Fali QUALIFIED
Octavia MaletCanadaIoni Bowcher NEW
Smith GlickGermanyStephen Shaw NEGOTIATION
Murillo MaletSpainAmy Elsner NEW
Salvatore StockhamGermanyOnyama Limba QUALIFIED
Aruna FigeroaBrazilAsiya Javayant RENEWAL
Claire TollnerItalyAmy Elsner QUALIFIED
Misaki RoysterIndiaStephen Shaw UNQUALIFIED
Emily WhobreyArgentinaAnna Fali QUALIFIED
Izzy GarufiBrazilOnyama Limba NEW
Kadeem FlosiIndiaBernardo Dominic NEW
Arvin AlbaresBrazilOnyama Limba UNQUALIFIED
Misaki RoysterSpainBernardo Dominic PROPOSAL
Murillo MaletRussiaAmy Elsner RENEWAL
Jennifer AmigonSpainIoni Bowcher NEW
Julie StensethSpainElwin Sharvill UNQUALIFIED
Aika InouyeGermanyBernardo Dominic QUALIFIED
Leja CaldareraItalyIoni Bowcher NEW
Smith GlickCanadaOnyama Limba QUALIFIED
Jennifer AmigonIndiaIoni Bowcher UNQUALIFIED
Chavez BriddickCanadaOnyama Limba QUALIFIED
Jones VocelkaIndiaXuxue Feng NEGOTIATION
Jones VocelkaGermanyElwin Sharvill NEGOTIATION
Darci PoquetteSpainIoni Bowcher NEGOTIATION
Jennifer AmigonJapanElwin Sharvill QUALIFIED
Jennifer AmigonIndiaIvan Magalhaes PROPOSAL
Izzy GarufiAustraliaXuxue Feng UNQUALIFIED
Mujtaba NickaUnited KingdomStephen Shaw NEGOTIATION
Octavia MaletItalyStephen Shaw PROPOSAL
Chavez BriddickUnited KingdomAsiya Javayant QUALIFIED
Stacey MacleadUnited KingdomXuxue Feng NEW
Sinclair WaycottBrazilIvan Magalhaes PROPOSAL
Aditya KuskoGermanyAsiya Javayant NEGOTIATION
Jeanfrancois VenereFranceAnna Fali QUALIFIED
Munro FerenczGermanyIvan Magalhaes UNQUALIFIED
Aditya KuskoArgentinaIvan Magalhaes NEW
Maisha RulapaughBrazilBernardo Dominic PROPOSAL
Mayumi KolmetzUnited KingdomStephen Shaw QUALIFIED
Jeanfrancois VenereUnited KingdomIvan Magalhaes QUALIFIED
Jefferson SchemmerRussiaAmy Elsner UNQUALIFIED
Ricardo GauchoAustraliaElwin Sharvill NEW
Jeanfrancois VenereSpainStephen Shaw PROPOSAL
Maria MarrierItalyIvan Magalhaes QUALIFIED
Salvatore StockhamIndiaBernardo Dominic QUALIFIED
Silvio SlusarskiFranceStephen Shaw QUALIFIED
Frozen Columns
Name
Chavez Briddick
Aruna Figeroa
Jennifer Amigon
Octavia Malet
Octavia Malet
Alejandro Perin
Alejandro Perin
Claire Tollner
Adams Morasca
Sinclair Waycott
Faith Gillian
Kadeem Flosi
Alejandro Perin
Maria Marrier
Aruna Figeroa
Greenwood Bolognia
Clifford Rim
Juan Wieser
David Darakjy
Nicolas Iturbide
Misaki Royster
Murillo Malet
Jones Vocelka
Arvin Albares
Juan Wieser
Isabel Bowley
Jefferson Schemmer
Murillo Malet
Clifford Rim
Ivar Paprocki
Antonio Caudy
Cody Saylors
Kadeem Flosi
Jeanfrancois Venere
Kadeem Flosi
Isabel Bowley
Claire Tollner
Jones Vocelka
Alejandro Perin
Jennifer Amigon
Julie Stenseth
Emily Whobrey
Jennifer Amigon
Misaki Royster
Sinclair Waycott
Faith Gillian
Kadeem Flosi
Salvatore Stockham
Smith Glick
Wickens Nestle
IdCountryDate
1000Germany2026-05-09
1001India2026-05-15
1002Spain2026-05-09
1003Russia2026-05-06
1004Spain2026-05-13
1005Argentina2026-05-19
1006Germany2026-05-14
1007Italy2026-05-29
1008Italy2026-05-22
1009Argentina2026-05-13
1010France2026-05-25
1011Argentina2026-05-15
1012India2026-05-16
1013Canada2026-05-19
1014Italy2026-05-06
1015United Kingdom2026-05-10
1016United Kingdom2026-05-17
1017Canada2026-05-12
1018Germany2026-05-13
1019Russia2026-05-15
1020United Kingdom2026-05-19
1021Australia2026-05-04
1022United Kingdom2026-05-03
1023Canada2026-05-03
1024India2026-05-22
1025Brazil2026-05-20
1026Brazil2026-05-05
1027Germany2026-05-25
1028Canada2026-05-21
1029Argentina2026-05-26
1030Russia2026-05-05
1031Brazil2026-05-07
1032Argentina2026-05-15
1033Russia2026-05-06
1034Canada2026-05-20
1035Japan2026-05-19
1036Canada2026-05-04
1037Brazil2026-05-07
1038Spain2026-05-14
1039India2026-05-15
1040Russia2026-05-22
1041Argentina2026-05-14
1042Russia2026-06-01
1043Russia2026-05-23
1044Canada2026-05-25
1045Argentina2026-05-04
1046France2026-06-01
1047Australia2026-05-21
1048Russia2026-05-06
1049Argentina2026-05-05

On-Demand Data

NameIdCountryDate
Arvin Albares1000Argentina2026-06-01
Smith Glick1001Italy2026-05-18
Maria Marrier1002Germany2026-05-15
Darci Poquette1003Brazil2026-05-31
Morrow Ruta1004Germany2026-05-30
Smith Glick1005Russia2026-05-25
David Darakjy1006Australia2026-05-27
Ricardo Gaucho1007Spain2026-05-06
Aika Inouye1008United Kingdom2026-05-25
Greenwood Bolognia1009Canada2026-05-09
Aruna Figeroa1010Australia2026-05-26
Jeanfrancois Venere1011Canada2026-05-12
Stacey Maclead1012Australia2026-05-25
Aditya Kusko1013Japan2026-05-11
Leon Oldroyd1014Canada2026-05-05
Arvin Albares1015Japan2026-05-18
Wickens Nestle1016Japan2026-05-20
Costa Dilliard1017Brazil2026-05-04
Stacey Maclead1018Canada2026-05-11
Arvin Albares1019Japan2026-05-29
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kadeem FlosiItalyAsiya Javayant PROPOSAL
Deepesh ChuiJapanElwin Sharvill PROPOSAL
Jeanfrancois VenereCanadaIvan Magalhaes UNQUALIFIED
David DarakjyBrazilXuxue Feng RENEWAL
James ButtSpainAsiya Javayant NEW
Deepesh ChuiCanadaXuxue Feng NEW
Salvatore StockhamCanadaAnna Fali PROPOSAL
Silvio SlusarskiItalyStephen Shaw PROPOSAL
Leon OldroydIndiaStephen Shaw RENEWAL
Isabel BowleyRussiaAmy Elsner QUALIFIED
Nicolas IturbideGermanyIoni Bowcher PROPOSAL
Mayumi KolmetzIndiaBernardo Dominic NEW
Deepesh ChuiUnited KingdomXuxue Feng PROPOSAL
Antonio CaudyArgentinaAmy Elsner NEGOTIATION
Clifford RimGermanyXuxue Feng NEGOTIATION
Mujtaba NickaArgentinaIvan Magalhaes QUALIFIED
Mayumi KolmetzAustraliaAsiya Javayant RENEWAL
Ashley DoeJapanElwin Sharvill NEGOTIATION
Deepesh ChuiSpainBernardo Dominic RENEWAL
Arvin AlbaresCanadaAmy Elsner NEGOTIATION
Emily WhobreyFranceBernardo Dominic NEW
James ButtSpainAsiya Javayant UNQUALIFIED
Deepesh ChuiGermanyIvan Magalhaes QUALIFIED
Sinclair WaycottFranceElwin Sharvill RENEWAL
Jefferson SchemmerRussiaOnyama Limba UNQUALIFIED
Julie StensethIndiaIoni Bowcher QUALIFIED
Jones VocelkaCanadaAsiya Javayant NEGOTIATION
Rodrigues CampainFranceXuxue Feng NEGOTIATION
Deepesh ChuiAustraliaAmy Elsner UNQUALIFIED
Salvatore StockhamUnited KingdomXuxue Feng RENEWAL
Greenwood BologniaUnited KingdomIvan Magalhaes UNQUALIFIED
Stacey MacleadUnited KingdomOnyama Limba UNQUALIFIED
Jones VocelkaRussiaAsiya Javayant RENEWAL
Maria MarrierSpainElwin Sharvill NEW
Clifford RimIndiaIoni Bowcher NEGOTIATION
Julie StensethRussiaOnyama Limba RENEWAL
Leon OldroydAustraliaAnna Fali NEGOTIATION
David DarakjyIndiaXuxue Feng UNQUALIFIED
Izzy GarufiAustraliaOnyama Limba NEGOTIATION
Mujtaba NickaJapanOnyama Limba NEW

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