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
Smith GlickIndiaStephen Shaw RENEWAL
Greenwood BologniaFranceStephen Shaw PROPOSAL
Clifford RimUnited KingdomOnyama Limba NEW
Sinclair WaycottUnited KingdomStephen Shaw RENEWAL
Juan WieserCanadaAnna Fali QUALIFIED
Ricardo GauchoRussiaStephen Shaw NEW
Aika InouyeArgentinaAsiya Javayant PROPOSAL
Isabel BowleyFranceAnna Fali NEW
Maisha RulapaughSpainBernardo Dominic UNQUALIFIED
Sinclair WaycottUnited KingdomAsiya Javayant UNQUALIFIED
Isabel BowleyBrazilXuxue Feng QUALIFIED
James ButtBrazilAsiya Javayant PROPOSAL
Claire TollnerGermanyAmy Elsner PROPOSAL
David DarakjyUnited KingdomIoni Bowcher QUALIFIED
Francesco ShinkoItalyOnyama Limba NEW
Jones VocelkaGermanyAnna Fali PROPOSAL
Morrow RutaJapanOnyama Limba PROPOSAL
Cody SaylorsIndiaIvan Magalhaes NEGOTIATION
Johnson SergiJapanIoni Bowcher NEW
Arvin AlbaresRussiaAnna Fali PROPOSAL
Mayumi KolmetzUnited KingdomElwin Sharvill UNQUALIFIED
Jefferson SchemmerCanadaXuxue Feng PROPOSAL
Maria MarrierRussiaOnyama Limba NEGOTIATION
Mayumi KolmetzIndiaXuxue Feng UNQUALIFIED
Ashley DoeAustraliaOnyama Limba RENEWAL
Aika InouyeRussiaBernardo Dominic UNQUALIFIED
Mayumi KolmetzGermanyAsiya Javayant NEW
Mayumi KolmetzArgentinaElwin Sharvill QUALIFIED
Julie StensethAustraliaXuxue Feng UNQUALIFIED
Morrow RutaJapanBernardo Dominic NEGOTIATION
Arvin AlbaresIndiaAnna Fali NEGOTIATION
Julie StensethAustraliaElwin Sharvill NEW
Salvatore StockhamAustraliaAsiya Javayant NEW
Aditya KuskoCanadaXuxue Feng NEGOTIATION
Kaitlin OstroskyCanadaAnna Fali NEW
Tony FollerFranceIvan Magalhaes UNQUALIFIED
Morrow RutaArgentinaIoni Bowcher NEW
Antonio CaudyIndiaXuxue Feng NEW
Silvio SlusarskiArgentinaAsiya Javayant NEW
Wickens NestleRussiaAnna Fali QUALIFIED
Aika InouyeJapanBernardo Dominic UNQUALIFIED
Arvin AlbaresGermanyIoni Bowcher NEW
Juan WieserSpainAmy Elsner QUALIFIED
Adams MorascaCanadaOnyama Limba UNQUALIFIED
Sinclair WaycottJapanAnna Fali RENEWAL
Adams MorascaCanadaStephen Shaw UNQUALIFIED
Adams MorascaGermanyOnyama Limba QUALIFIED
Sinclair WaycottUnited KingdomElwin Sharvill NEW
Chavez BriddickIndiaIvan Magalhaes RENEWAL
Maria MarrierItalyIoni Bowcher UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Jeanfrancois VenereIndiaBernardo Dominic UNQUALIFIED
Wickens NestleJapanAmy Elsner QUALIFIED
Kadeem FlosiSpainAnna Fali QUALIFIED
Ashley DoeBrazilAsiya Javayant UNQUALIFIED
Ricardo GauchoItalyIvan Magalhaes NEGOTIATION
Tony FollerFranceElwin Sharvill PROPOSAL
Kaitlin OstroskyArgentinaOnyama Limba UNQUALIFIED
Smith GlickArgentinaAmy Elsner NEW
Clifford RimBrazilAnna Fali RENEWAL
Morrow RutaJapanStephen Shaw QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Murillo MaletIndia2025-09-26Chapman, Ross E Esq PROPOSAL25Elwin Sharvill
1001Mayumi KolmetzIndia2025-10-15Feltz Printing Service QUALIFIED93Asiya Javayant
1002Octavia MaletArgentina2025-10-08Truhlar And Truhlar Attys PROPOSAL75Xuxue Feng
1003Munro FerenczBrazil2025-09-23Dorl, James J Esq PROPOSAL72Ivan Magalhaes
1004Octavia MaletAustralia2025-10-16Dorl, James J Esq NEW92Bernardo Dominic
1005Aika InouyeBrazil2025-09-28Truhlar And Truhlar Attys RENEWAL59Stephen Shaw
1006Chavez BriddickArgentina2025-09-27Feltz Printing Service RENEWAL63Ioni Bowcher
1007Izzy GarufiIndia2025-09-28Rousseaux, Michael Esq RENEWAL53Ioni Bowcher
1008Ivar PaprockiRussia2025-10-07Chanay, Jeffrey A Esq NEW61Bernardo Dominic
1009Ivar PaprockiItaly2025-10-04Buckley Miller Wright NEW3Stephen Shaw
1010Aditya KuskoFrance2025-10-01Dorl, James J Esq UNQUALIFIED41Elwin Sharvill
1011Francesco ShinkoGermany2025-10-13Dorl, James J Esq NEW80Ivan Magalhaes
1012Sinclair WaycottUnited Kingdom2025-10-09Benton, John B Jr PROPOSAL82Ioni Bowcher
1013Stacey MacleadAustralia2025-10-08Rousseaux, Michael Esq RENEWAL87Ivan Magalhaes
1014Deepesh ChuiSpain2025-10-16Truhlar And Truhlar Attys PROPOSAL11Asiya Javayant
1015Smith GlickCanada2025-09-23Printing Dimensions RENEWAL38Onyama Limba
1016Kaitlin OstroskySpain2025-10-11Buckley Miller Wright QUALIFIED43Amy Elsner
1017Nicolas IturbideCanada2025-09-21King, Christopher A Esq PROPOSAL95Elwin Sharvill
1018Tony FollerSpain2025-10-03Buckley Miller Wright UNQUALIFIED47Bernardo Dominic
1019Claire TollnerUnited Kingdom2025-10-06Buckley Miller Wright PROPOSAL9Stephen Shaw
1020Isabel BowleyUnited Kingdom2025-10-04Morlong Associates NEGOTIATION78Ivan Magalhaes
1021Salvatore StockhamRussia2025-09-27Feltz Printing Service NEGOTIATION50Stephen Shaw
1022Greenwood BologniaFrance2025-10-10Chemel, James L Cpa QUALIFIED40Anna Fali
1023Nicolas IturbideArgentina2025-10-11Truhlar And Truhlar Attys RENEWAL94Onyama Limba
1024Misaki RoysterItaly2025-10-13Truhlar And Truhlar Attys RENEWAL44Anna Fali
1025Francesco ShinkoBrazil2025-09-30Commercial Press NEW48Ivan Magalhaes
1026James ButtIndia2025-10-18Truhlar And Truhlar Attys NEW44Anna Fali
1027Francesco ShinkoSpain2025-10-18Buckley Miller Wright NEGOTIATION89Ioni Bowcher
1028Darci PoquetteAustralia2025-10-19Rousseaux, Michael Esq RENEWAL30Xuxue Feng
1029Salvatore StockhamAustralia2025-10-10Rangoni Of Florence NEGOTIATION36Xuxue Feng
1030Mayumi KolmetzIndia2025-10-17Buckley Miller Wright NEGOTIATION59Anna Fali
1031Jennifer AmigonIndia2025-10-12Printing Dimensions NEGOTIATION26Anna Fali
1032Greenwood BologniaGermany2025-10-15King, Christopher A Esq RENEWAL32Xuxue Feng
1033Wickens NestleArgentina2025-10-06Truhlar And Truhlar Attys QUALIFIED9Xuxue Feng
1034Silvio SlusarskiJapan2025-09-29Benton, John B Jr NEGOTIATION64Anna Fali
1035Claire TollnerCanada2025-09-23Feltz Printing Service QUALIFIED65Elwin Sharvill
1036Jefferson SchemmerIndia2025-10-09Rangoni Of Florence UNQUALIFIED67Amy Elsner
1037Jones VocelkaIndia2025-10-08Chapman, Ross E Esq PROPOSAL73Ivan Magalhaes
1038Maisha RulapaughCanada2025-10-05Chanay, Jeffrey A Esq QUALIFIED10Anna Fali
1039Ricardo GauchoCanada2025-10-10Dorl, James J Esq PROPOSAL62Amy Elsner
1040Leja CaldareraGermany2025-10-09Rousseaux, Michael Esq NEGOTIATION51Anna Fali
1041Adams MorascaArgentina2025-10-06Dorl, James J Esq RENEWAL88Ioni Bowcher
1042Costa DilliardItaly2025-10-16Morlong Associates PROPOSAL9Asiya Javayant
1043Adams MorascaItaly2025-10-16Printing Dimensions QUALIFIED83Ivan Magalhaes
1044Maisha RulapaughSpain2025-10-04Rousseaux, Michael Esq RENEWAL32Amy Elsner
1045Aditya KuskoRussia2025-09-22Rangoni Of Florence QUALIFIED39Stephen Shaw
1046Darci PoquetteArgentina2025-10-19Rousseaux, Michael Esq RENEWAL22Onyama Limba
1047Mujtaba NickaRussia2025-10-15Morlong Associates RENEWAL94Xuxue Feng
1048Greenwood BologniaAustralia2025-10-04Benton, John B Jr QUALIFIED3Asiya Javayant
1049Kaitlin OstroskyBrazil2025-10-19Rangoni Of Florence UNQUALIFIED13Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Chavez BriddickIndiaAsiya Javayant NEW
Aruna FigeroaItalyAsiya Javayant QUALIFIED
Wickens NestleFranceIvan Magalhaes RENEWAL
Jones VocelkaBrazilStephen Shaw PROPOSAL
Greenwood BologniaArgentinaXuxue Feng NEW
Chavez BriddickRussiaIoni Bowcher NEGOTIATION
Claire TollnerRussiaAnna Fali RENEWAL
Deepesh ChuiJapanOnyama Limba PROPOSAL
Morrow RutaItalyIoni Bowcher QUALIFIED
Maisha RulapaughItalyXuxue Feng NEGOTIATION
Aruna FigeroaAustraliaIoni Bowcher NEGOTIATION
Antonio CaudyGermanyBernardo Dominic QUALIFIED
Ivar PaprockiBrazilOnyama Limba PROPOSAL
Isabel BowleyBrazilIoni Bowcher NEGOTIATION
Isabel BowleyCanadaOnyama Limba QUALIFIED
Cody SaylorsSpainAsiya Javayant NEGOTIATION
Leja CaldareraBrazilAnna Fali UNQUALIFIED
Leja CaldareraJapanBernardo Dominic PROPOSAL
Jennifer AmigonJapanIvan Magalhaes PROPOSAL
Juan WieserBrazilIvan Magalhaes UNQUALIFIED
Francesco ShinkoRussiaElwin Sharvill QUALIFIED
Smith GlickIndiaAsiya Javayant NEW
Antonio CaudyUnited KingdomIvan Magalhaes NEW
Murillo MaletCanadaIoni Bowcher PROPOSAL
Morrow RutaItalyElwin Sharvill RENEWAL
Cody SaylorsCanadaElwin Sharvill QUALIFIED
Costa DilliardBrazilXuxue Feng NEW
Aditya KuskoItalyAsiya Javayant UNQUALIFIED
Costa DilliardJapanOnyama Limba NEW
Wickens NestleItalyIvan Magalhaes PROPOSAL
Rodrigues CampainSpainOnyama Limba NEW
Ivar PaprockiItalyAmy Elsner UNQUALIFIED
Isabel BowleyAustraliaStephen Shaw QUALIFIED
Morrow RutaUnited KingdomAnna Fali NEGOTIATION
Aruna FigeroaGermanyAmy Elsner UNQUALIFIED
Munro FerenczRussiaIoni Bowcher UNQUALIFIED
Francesco ShinkoSpainAmy Elsner QUALIFIED
James ButtJapanAmy Elsner RENEWAL
Isabel BowleyItalyAnna Fali RENEWAL
Mayumi KolmetzArgentinaAsiya Javayant NEGOTIATION
James ButtUnited KingdomAnna Fali NEW
Greenwood BologniaIndiaElwin Sharvill UNQUALIFIED
David DarakjyRussiaOnyama Limba NEGOTIATION
Juan WieserUnited KingdomAsiya Javayant UNQUALIFIED
Isabel BowleyCanadaIvan Magalhaes QUALIFIED
Antonio CaudyFranceBernardo Dominic PROPOSAL
Aditya KuskoSpainAmy Elsner QUALIFIED
Sinclair WaycottUnited KingdomIoni Bowcher NEGOTIATION
Mayumi KolmetzSpainOnyama Limba NEW
Tony FollerIndiaAmy Elsner UNQUALIFIED
Frozen Columns
Name
Adams Morasca
Sinclair Waycott
Izzy Garufi
Costa Dilliard
Antonio Caudy
Costa Dilliard
Costa Dilliard
Aditya Kusko
Leon Oldroyd
Julie Stenseth
Jefferson Schemmer
Nicolas Iturbide
Emily Whobrey
Jennifer Amigon
Izzy Garufi
Jennifer Amigon
Rodrigues Campain
Tony Foller
James Butt
David Darakjy
Salvatore Stockham
Tony Foller
Aditya Kusko
Aruna Figeroa
Emily Whobrey
Juan Wieser
Ivar Paprocki
Arvin Albares
Maria Marrier
Isabel Bowley
Silvio Slusarski
Jones Vocelka
Francesco Shinko
Alejandro Perin
Francesco Shinko
Ivar Paprocki
Nicolas Iturbide
Ashley Doe
Leja Caldarera
Juan Wieser
Adams Morasca
Ricardo Gaucho
Jones Vocelka
David Darakjy
Smith Glick
Salvatore Stockham
Julie Stenseth
Maisha Rulapaugh
Deepesh Chui
Leja Caldarera
IdCountryDate
1000Australia2025-10-15
1001Russia2025-10-18
1002United Kingdom2025-10-14
1003Argentina2025-10-09
1004Russia2025-10-15
1005United Kingdom2025-10-06
1006Germany2025-10-15
1007Canada2025-10-05
1008Argentina2025-10-02
1009France2025-09-28
1010Australia2025-10-01
1011India2025-10-11
1012Japan2025-10-17
1013India2025-10-08
1014Russia2025-09-21
1015Japan2025-10-09
1016Italy2025-10-19
1017Germany2025-10-03
1018Russia2025-09-20
1019Japan2025-10-17
1020Canada2025-10-11
1021Italy2025-09-22
1022Brazil2025-10-18
1023India2025-10-19
1024Brazil2025-10-01
1025Germany2025-09-30
1026United Kingdom2025-10-03
1027Spain2025-10-18
1028Spain2025-09-23
1029Italy2025-10-19
1030France2025-09-28
1031United Kingdom2025-09-21
1032Germany2025-09-24
1033Brazil2025-10-03
1034India2025-09-22
1035France2025-10-14
1036United Kingdom2025-10-07
1037Australia2025-09-30
1038India2025-09-30
1039Canada2025-09-29
1040Australia2025-10-13
1041Italy2025-10-10
1042Canada2025-10-08
1043Italy2025-10-08
1044Germany2025-10-15
1045France2025-10-15
1046Canada2025-09-25
1047Canada2025-09-28
1048Argentina2025-10-16
1049Japan2025-09-30

On-Demand Data

NameIdCountryDate
David Darakjy1000Canada2025-10-08
Munro Ferencz1001Australia2025-10-13
Juan Wieser1002Australia2025-10-13
Wickens Nestle1003India2025-09-20
Ashley Doe1004Italy2025-10-18
Jeanfrancois Venere1005Spain2025-09-20
Aika Inouye1006Germany2025-10-01
Jennifer Amigon1007India2025-09-24
Francesco Shinko1008India2025-10-06
Emily Whobrey1009Brazil2025-10-02
Isabel Bowley1010Canada2025-09-21
Wickens Nestle1011Germany2025-10-14
Arvin Albares1012India2025-10-01
Smith Glick1013United Kingdom2025-10-17
Ashley Doe1014United Kingdom2025-10-18
Jennifer Amigon1015Spain2025-09-28
Stacey Maclead1016Russia2025-09-27
Costa Dilliard1017Germany2025-09-29
Aditya Kusko1018Spain2025-09-28
Jeanfrancois Venere1019Canada2025-10-10
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Antonio CaudyJapanIoni Bowcher QUALIFIED
Wickens NestleGermanyAnna Fali NEW
Deepesh ChuiItalyElwin Sharvill PROPOSAL
Costa DilliardIndiaElwin Sharvill NEW
Chavez BriddickFranceIvan Magalhaes RENEWAL
Antonio CaudyCanadaElwin Sharvill PROPOSAL
Mayumi KolmetzGermanyAsiya Javayant QUALIFIED
Clifford RimGermanyAsiya Javayant QUALIFIED
David DarakjyFranceAmy Elsner NEW
Darci PoquetteItalyElwin Sharvill RENEWAL
Aditya KuskoRussiaBernardo Dominic NEW
Antonio CaudyAustraliaXuxue Feng QUALIFIED
Kaitlin OstroskyItalyAnna Fali PROPOSAL
Johnson SergiArgentinaElwin Sharvill UNQUALIFIED
Aruna FigeroaArgentinaElwin Sharvill UNQUALIFIED
Maisha RulapaughItalyAnna Fali UNQUALIFIED
Francesco ShinkoSpainStephen Shaw RENEWAL
Smith GlickArgentinaXuxue Feng PROPOSAL
Salvatore StockhamBrazilElwin Sharvill NEW
Greenwood BologniaIndiaOnyama Limba NEW
Deepesh ChuiItalyElwin Sharvill NEGOTIATION
Munro FerenczGermanyAnna Fali QUALIFIED
Juan WieserIndiaBernardo Dominic RENEWAL
Kaitlin OstroskyFranceAmy Elsner UNQUALIFIED
Chavez BriddickCanadaAnna Fali QUALIFIED
Misaki RoysterUnited KingdomXuxue Feng QUALIFIED
Claire TollnerCanadaAsiya Javayant RENEWAL
Ashley DoeCanadaBernardo Dominic PROPOSAL
Aruna FigeroaGermanyAsiya Javayant QUALIFIED
Cody SaylorsBrazilElwin Sharvill PROPOSAL
Tony FollerArgentinaOnyama Limba NEGOTIATION
Maria MarrierAustraliaAsiya Javayant UNQUALIFIED
Juan WieserGermanyOnyama Limba UNQUALIFIED
Jennifer AmigonJapanIoni Bowcher NEW
Kaitlin OstroskyGermanyIoni Bowcher QUALIFIED
Kadeem FlosiJapanAnna Fali NEGOTIATION
Kadeem FlosiGermanyElwin Sharvill UNQUALIFIED
Claire TollnerJapanIvan Magalhaes NEGOTIATION
Adams MorascaItalyOnyama Limba PROPOSAL
Tony FollerCanadaElwin Sharvill RENEWAL

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