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
Aditya KuskoJapanElwin Sharvill UNQUALIFIED
Stacey MacleadIndiaElwin Sharvill NEGOTIATION
Mayumi KolmetzGermanyIoni Bowcher NEW
Rodrigues CampainCanadaIoni Bowcher PROPOSAL
Munro FerenczUnited KingdomIoni Bowcher NEGOTIATION
Murillo MaletFranceBernardo Dominic QUALIFIED
Isabel BowleyFranceAsiya Javayant NEGOTIATION
Juan WieserCanadaOnyama Limba QUALIFIED
Silvio SlusarskiBrazilIoni Bowcher PROPOSAL
Jeanfrancois VenereBrazilIoni Bowcher NEGOTIATION
Ashley DoeAustraliaIvan Magalhaes NEGOTIATION
Antonio CaudyIndiaIvan Magalhaes PROPOSAL
Chavez BriddickArgentinaElwin Sharvill NEGOTIATION
Antonio CaudyJapanXuxue Feng RENEWAL
Murillo MaletRussiaAmy Elsner NEGOTIATION
Murillo MaletFranceAnna Fali PROPOSAL
James ButtRussiaOnyama Limba NEGOTIATION
Deepesh ChuiRussiaIoni Bowcher QUALIFIED
Morrow RutaSpainXuxue Feng NEW
Rodrigues CampainAustraliaAnna Fali NEGOTIATION
Isabel BowleyFranceIoni Bowcher NEW
Tony FollerArgentinaBernardo Dominic NEW
Deepesh ChuiItalyBernardo Dominic RENEWAL
Wickens NestleCanadaIvan Magalhaes NEW
Darci PoquetteIndiaAnna Fali PROPOSAL
Ricardo GauchoItalyIoni Bowcher UNQUALIFIED
Leja CaldareraCanadaStephen Shaw RENEWAL
Izzy GarufiBrazilOnyama Limba NEGOTIATION
Murillo MaletSpainXuxue Feng QUALIFIED
Arvin AlbaresBrazilAsiya Javayant RENEWAL
Tony FollerItalyAnna Fali NEW
Leon OldroydAustraliaIvan Magalhaes RENEWAL
Jefferson SchemmerItalyIoni Bowcher UNQUALIFIED
Rodrigues CampainArgentinaAnna Fali QUALIFIED
Tony FollerSpainAnna Fali UNQUALIFIED
Jeanfrancois VenereRussiaStephen Shaw QUALIFIED
Arvin AlbaresSpainOnyama Limba NEGOTIATION
Smith GlickIndiaIoni Bowcher QUALIFIED
Emily WhobreyItalyOnyama Limba UNQUALIFIED
Chavez BriddickArgentinaBernardo Dominic RENEWAL
Aditya KuskoArgentinaAnna Fali RENEWAL
Alejandro PerinArgentinaIvan Magalhaes RENEWAL
Jennifer AmigonItalyAsiya Javayant RENEWAL
Aika InouyeIndiaElwin Sharvill NEGOTIATION
Rodrigues CampainIndiaIoni Bowcher UNQUALIFIED
Jennifer AmigonCanadaIoni Bowcher NEGOTIATION
Cody SaylorsArgentinaIvan Magalhaes PROPOSAL
Cody SaylorsFranceAnna Fali RENEWAL
Mayumi KolmetzItalyAmy Elsner RENEWAL
Kaitlin OstroskySpainAsiya Javayant PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Jennifer AmigonUnited KingdomAnna Fali NEGOTIATION
Tony FollerJapanBernardo Dominic UNQUALIFIED
Greenwood BologniaGermanyIvan Magalhaes PROPOSAL
Chavez BriddickGermanyIvan Magalhaes UNQUALIFIED
Faith GillianItalyBernardo Dominic QUALIFIED
Murillo MaletUnited KingdomXuxue Feng NEW
Ashley DoeJapanElwin Sharvill RENEWAL
Munro FerenczUnited KingdomAsiya Javayant NEGOTIATION
Ashley DoeAustraliaAsiya Javayant PROPOSAL
Nicolas IturbideBrazilAnna Fali QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ashley DoeAustralia2026-05-29Benton, John B Jr UNQUALIFIED52Ioni Bowcher
1001Jones VocelkaIndia2026-06-03Printing Dimensions NEGOTIATION69Asiya Javayant
1002Darci PoquetteGermany2026-05-30King, Christopher A Esq PROPOSAL39Ioni Bowcher
1003Aditya KuskoUnited Kingdom2026-05-31Chemel, James L Cpa PROPOSAL6Xuxue Feng
1004Stacey MacleadIndia2026-06-07Morlong Associates PROPOSAL94Stephen Shaw
1005Octavia MaletJapan2026-06-03Chapman, Ross E Esq RENEWAL55Onyama Limba
1006Mujtaba NickaUnited Kingdom2026-05-26Printing Dimensions NEW44Amy Elsner
1007Juan WieserCanada2026-05-26Chanay, Jeffrey A Esq NEGOTIATION32Elwin Sharvill
1008David DarakjyRussia2026-05-22Morlong Associates UNQUALIFIED7Elwin Sharvill
1009Ricardo GauchoItaly2026-05-25Feltz Printing Service NEW79Asiya Javayant
1010Sinclair WaycottUnited Kingdom2026-06-02Morlong Associates RENEWAL76Ioni Bowcher
1011Munro FerenczItaly2026-06-03Truhlar And Truhlar Attys NEGOTIATION18Ioni Bowcher
1012Greenwood BologniaBrazil2026-06-06Chemel, James L Cpa NEGOTIATION24Bernardo Dominic
1013Octavia MaletSpain2026-06-20Morlong Associates PROPOSAL79Anna Fali
1014Wickens NestleSpain2026-06-17Dorl, James J Esq RENEWAL34Ioni Bowcher
1015Darci PoquetteItaly2026-05-27King, Christopher A Esq QUALIFIED29Bernardo Dominic
1016Maria MarrierRussia2026-06-07Truhlar And Truhlar Attys NEGOTIATION99Anna Fali
1017Wickens NestleCanada2026-06-08Printing Dimensions RENEWAL32Anna Fali
1018Ricardo GauchoItaly2026-05-26Buckley Miller Wright NEW68Anna Fali
1019Ivar PaprockiAustralia2026-06-16Benton, John B Jr PROPOSAL25Amy Elsner
1020Francesco ShinkoSpain2026-06-05Printing Dimensions NEGOTIATION23Amy Elsner
1021Costa DilliardItaly2026-06-02Morlong Associates UNQUALIFIED96Asiya Javayant
1022Rodrigues CampainGermany2026-06-11Dorl, James J Esq PROPOSAL68Amy Elsner
1023Izzy GarufiGermany2026-06-18King, Christopher A Esq NEGOTIATION43Amy Elsner
1024Salvatore StockhamIndia2026-06-03Morlong Associates PROPOSAL59Stephen Shaw
1025Isabel BowleyGermany2026-06-20Chemel, James L Cpa NEGOTIATION87Bernardo Dominic
1026Munro FerenczBrazil2026-06-10Rangoni Of Florence QUALIFIED53Asiya Javayant
1027Aditya KuskoIndia2026-06-18Printing Dimensions PROPOSAL90Ioni Bowcher
1028Clifford RimAustralia2026-06-03King, Christopher A Esq NEGOTIATION79Asiya Javayant
1029James ButtItaly2026-05-23Rangoni Of Florence PROPOSAL28Elwin Sharvill
1030Julie StensethGermany2026-05-31Benton, John B Jr RENEWAL98Elwin Sharvill
1031Morrow RutaJapan2026-06-14Rousseaux, Michael Esq PROPOSAL58Ivan Magalhaes
1032Kaitlin OstroskyFrance2026-06-14Buckley Miller Wright PROPOSAL33Xuxue Feng
1033Aruna FigeroaJapan2026-05-31Chapman, Ross E Esq PROPOSAL28Stephen Shaw
1034Alejandro PerinAustralia2026-06-06Rousseaux, Michael Esq NEW69Anna Fali
1035Wickens NestleUnited Kingdom2026-06-19Chemel, James L Cpa NEW87Ivan Magalhaes
1036Octavia MaletBrazil2026-06-11Chapman, Ross E Esq UNQUALIFIED56Ioni Bowcher
1037Aruna FigeroaUnited Kingdom2026-05-31Feltz Printing Service QUALIFIED56Xuxue Feng
1038Julie StensethJapan2026-06-19Feltz Printing Service RENEWAL90Anna Fali
1039Aika InouyeItaly2026-06-05Truhlar And Truhlar Attys NEW5Bernardo Dominic
1040Misaki RoysterJapan2026-06-14Buckley Miller Wright RENEWAL15Xuxue Feng
1041Julie StensethBrazil2026-06-18Chapman, Ross E Esq NEW2Stephen Shaw
1042Wickens NestleFrance2026-06-10Rousseaux, Michael Esq UNQUALIFIED44Stephen Shaw
1043Munro FerenczItaly2026-06-06Feiner Bros NEW56Anna Fali
1044James ButtCanada2026-06-18Chapman, Ross E Esq QUALIFIED49Anna Fali
1045Antonio CaudyGermany2026-05-30Rangoni Of Florence UNQUALIFIED94Elwin Sharvill
1046Deepesh ChuiAustralia2026-05-22Truhlar And Truhlar Attys PROPOSAL18Onyama Limba
1047Arvin AlbaresCanada2026-05-31Benton, John B Jr PROPOSAL62Asiya Javayant
1048Francesco ShinkoFrance2026-06-19Benton, John B Jr QUALIFIED78Asiya Javayant
1049Kadeem FlosiFrance2026-06-04Chemel, James L Cpa NEGOTIATION12Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Mujtaba NickaArgentinaIvan Magalhaes UNQUALIFIED
Maria MarrierIndiaElwin Sharvill NEW
Izzy GarufiArgentinaIoni Bowcher QUALIFIED
Aruna FigeroaFranceAnna Fali QUALIFIED
Chavez BriddickAustraliaAnna Fali QUALIFIED
Isabel BowleyIndiaXuxue Feng QUALIFIED
Mujtaba NickaBrazilStephen Shaw UNQUALIFIED
Nicolas IturbideSpainElwin Sharvill PROPOSAL
Ashley DoeCanadaIoni Bowcher QUALIFIED
Chavez BriddickUnited KingdomIoni Bowcher QUALIFIED
Rodrigues CampainAustraliaIvan Magalhaes NEW
Antonio CaudyItalyAnna Fali UNQUALIFIED
Faith GillianJapanAmy Elsner UNQUALIFIED
Emily WhobreySpainBernardo Dominic QUALIFIED
Adams MorascaUnited KingdomIoni Bowcher NEGOTIATION
Claire TollnerArgentinaElwin Sharvill UNQUALIFIED
Stacey MacleadGermanyAmy Elsner NEW
Sinclair WaycottIndiaElwin Sharvill RENEWAL
Jennifer AmigonBrazilElwin Sharvill RENEWAL
Rodrigues CampainIndiaOnyama Limba UNQUALIFIED
Ivar PaprockiIndiaOnyama Limba NEW
Aditya KuskoSpainBernardo Dominic NEW
Leja CaldareraCanadaStephen Shaw UNQUALIFIED
Jennifer AmigonFranceAsiya Javayant NEGOTIATION
Rodrigues CampainCanadaOnyama Limba QUALIFIED
Jones VocelkaArgentinaStephen Shaw PROPOSAL
Juan WieserArgentinaStephen Shaw UNQUALIFIED
Octavia MaletSpainIvan Magalhaes NEW
Ashley DoeBrazilIoni Bowcher NEGOTIATION
Kaitlin OstroskyAustraliaBernardo Dominic RENEWAL
Deepesh ChuiArgentinaAnna Fali RENEWAL
Aditya KuskoFranceElwin Sharvill RENEWAL
Morrow RutaCanadaElwin Sharvill RENEWAL
David DarakjyFranceAsiya Javayant RENEWAL
Clifford RimFranceXuxue Feng UNQUALIFIED
Maria MarrierBrazilBernardo Dominic NEW
Francesco ShinkoIndiaAsiya Javayant RENEWAL
Faith GillianSpainAnna Fali PROPOSAL
Aika InouyeIndiaIvan Magalhaes PROPOSAL
Francesco ShinkoCanadaAnna Fali QUALIFIED
Stacey MacleadRussiaAsiya Javayant PROPOSAL
Mujtaba NickaIndiaBernardo Dominic QUALIFIED
Johnson SergiAustraliaAnna Fali QUALIFIED
Faith GillianGermanyElwin Sharvill QUALIFIED
Silvio SlusarskiJapanElwin Sharvill QUALIFIED
Mujtaba NickaArgentinaIoni Bowcher PROPOSAL
Deepesh ChuiSpainBernardo Dominic UNQUALIFIED
Julie StensethArgentinaIvan Magalhaes NEW
Jefferson SchemmerUnited KingdomXuxue Feng QUALIFIED
Julie StensethItalyElwin Sharvill NEW
Frozen Columns
Name
Misaki Royster
Maisha Rulapaugh
Julie Stenseth
Octavia Malet
Silvio Slusarski
Nicolas Iturbide
Izzy Garufi
Stacey Maclead
Misaki Royster
Jeanfrancois Venere
Nicolas Iturbide
Kaitlin Ostrosky
Maisha Rulapaugh
Jennifer Amigon
Costa Dilliard
Nicolas Iturbide
Izzy Garufi
Claire Tollner
Salvatore Stockham
Faith Gillian
Alejandro Perin
Aika Inouye
Tony Foller
Maria Marrier
Izzy Garufi
Julie Stenseth
Emily Whobrey
Octavia Malet
David Darakjy
Aika Inouye
Jeanfrancois Venere
Stacey Maclead
David Darakjy
Cody Saylors
Greenwood Bolognia
Octavia Malet
Claire Tollner
Antonio Caudy
Rodrigues Campain
Johnson Sergi
Arvin Albares
Rodrigues Campain
Jones Vocelka
Alejandro Perin
Greenwood Bolognia
Rodrigues Campain
Leon Oldroyd
Leja Caldarera
Murillo Malet
Silvio Slusarski
IdCountryDate
1000Russia2026-06-15
1001Canada2026-06-05
1002Argentina2026-06-18
1003Australia2026-06-18
1004Australia2026-06-02
1005Italy2026-06-20
1006Spain2026-05-29
1007Brazil2026-06-19
1008India2026-06-02
1009Japan2026-06-15
1010India2026-06-04
1011Brazil2026-06-20
1012Australia2026-06-11
1013Brazil2026-05-27
1014Italy2026-06-09
1015India2026-06-17
1016Japan2026-05-25
1017Canada2026-05-23
1018India2026-06-04
1019Argentina2026-06-16
1020Japan2026-06-08
1021Russia2026-05-25
1022Russia2026-05-30
1023India2026-05-28
1024Canada2026-06-02
1025Italy2026-06-10
1026France2026-06-13
1027Argentina2026-06-04
1028France2026-05-24
1029Canada2026-05-25
1030Russia2026-05-27
1031United Kingdom2026-05-22
1032Russia2026-06-08
1033United Kingdom2026-05-29
1034India2026-06-19
1035Argentina2026-06-08
1036Argentina2026-05-27
1037France2026-06-09
1038Russia2026-06-05
1039Russia2026-06-08
1040France2026-05-31
1041India2026-06-14
1042Brazil2026-06-11
1043Japan2026-06-02
1044Germany2026-05-31
1045Brazil2026-06-06
1046Italy2026-06-17
1047France2026-05-28
1048Australia2026-05-27
1049Canada2026-06-02

On-Demand Data

NameIdCountryDate
Isabel Bowley1000Argentina2026-06-10
Costa Dilliard1001Australia2026-06-20
Arvin Albares1002France2026-06-16
Ricardo Gaucho1003Canada2026-06-14
Octavia Malet1004Italy2026-05-24
Rodrigues Campain1005India2026-06-16
Kaitlin Ostrosky1006France2026-06-13
Ashley Doe1007Argentina2026-06-05
Tony Foller1008Germany2026-06-09
Kaitlin Ostrosky1009Australia2026-05-31
Izzy Garufi1010India2026-06-14
Faith Gillian1011Australia2026-05-29
Greenwood Bolognia1012Australia2026-06-14
Jeanfrancois Venere1013Germany2026-06-12
Antonio Caudy1014Japan2026-06-14
Ricardo Gaucho1015France2026-05-22
Kaitlin Ostrosky1016Canada2026-06-09
Johnson Sergi1017Spain2026-06-16
Deepesh Chui1018Canada2026-06-17
Ashley Doe1019Brazil2026-05-23
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kadeem FlosiArgentinaStephen Shaw UNQUALIFIED
Arvin AlbaresJapanIoni Bowcher UNQUALIFIED
Smith GlickCanadaStephen Shaw QUALIFIED
Adams MorascaJapanIvan Magalhaes NEGOTIATION
Morrow RutaFranceXuxue Feng NEW
Tony FollerItalyAmy Elsner UNQUALIFIED
Darci PoquetteGermanyIvan Magalhaes UNQUALIFIED
Tony FollerUnited KingdomXuxue Feng PROPOSAL
Mayumi KolmetzItalyAsiya Javayant UNQUALIFIED
Johnson SergiGermanyElwin Sharvill NEGOTIATION
Antonio CaudyArgentinaStephen Shaw PROPOSAL
Emily WhobreyFranceAmy Elsner RENEWAL
Jennifer AmigonFranceAsiya Javayant UNQUALIFIED
Wickens NestleCanadaStephen Shaw RENEWAL
Darci PoquetteRussiaIvan Magalhaes QUALIFIED
Adams MorascaBrazilAsiya Javayant NEW
Maria MarrierJapanAsiya Javayant QUALIFIED
Chavez BriddickJapanOnyama Limba UNQUALIFIED
Ricardo GauchoCanadaAmy Elsner NEW
Ricardo GauchoRussiaAnna Fali NEGOTIATION
Sinclair WaycottCanadaAsiya Javayant RENEWAL
Ivar PaprockiGermanyAsiya Javayant UNQUALIFIED
Julie StensethItalyAmy Elsner QUALIFIED
Ricardo GauchoFranceOnyama Limba NEW
Tony FollerAustraliaElwin Sharvill NEGOTIATION
David DarakjyUnited KingdomStephen Shaw QUALIFIED
Kadeem FlosiUnited KingdomStephen Shaw UNQUALIFIED
Leja CaldareraRussiaAnna Fali UNQUALIFIED
Johnson SergiUnited KingdomStephen Shaw PROPOSAL
Nicolas IturbideJapanXuxue Feng NEW
Kadeem FlosiJapanIoni Bowcher QUALIFIED
Murillo MaletAustraliaIoni Bowcher PROPOSAL
Costa DilliardUnited KingdomAmy Elsner NEGOTIATION
Isabel BowleySpainBernardo Dominic PROPOSAL
Ivar PaprockiArgentinaBernardo Dominic NEW
Antonio CaudyAustraliaOnyama Limba NEW
Aditya KuskoItalyAnna Fali NEW
Adams MorascaItalyBernardo Dominic RENEWAL
Adams MorascaUnited KingdomIvan Magalhaes PROPOSAL
Julie StensethFranceStephen Shaw 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>