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
Kaitlin OstroskyCanadaIoni Bowcher QUALIFIED
Cody SaylorsCanadaAnna Fali PROPOSAL
Ricardo GauchoCanadaStephen Shaw PROPOSAL
Claire TollnerGermanyOnyama Limba QUALIFIED
Darci PoquetteArgentinaOnyama Limba NEW
Leja CaldareraArgentinaStephen Shaw NEW
Leja CaldareraUnited KingdomOnyama Limba NEGOTIATION
Greenwood BologniaCanadaOnyama Limba RENEWAL
Leon OldroydGermanyStephen Shaw QUALIFIED
Jeanfrancois VenereFranceAmy Elsner RENEWAL
Ricardo GauchoAustraliaOnyama Limba NEGOTIATION
Johnson SergiCanadaOnyama Limba RENEWAL
Adams MorascaGermanyOnyama Limba NEW
Izzy GarufiJapanIvan Magalhaes NEGOTIATION
Morrow RutaItalyIvan Magalhaes QUALIFIED
Aditya KuskoIndiaElwin Sharvill PROPOSAL
Arvin AlbaresCanadaAsiya Javayant PROPOSAL
Francesco ShinkoJapanOnyama Limba PROPOSAL
Emily WhobreyItalyXuxue Feng RENEWAL
Rodrigues CampainIndiaXuxue Feng QUALIFIED
Kadeem FlosiSpainXuxue Feng QUALIFIED
Izzy GarufiFranceAmy Elsner NEW
Sinclair WaycottItalyElwin Sharvill RENEWAL
Ivar PaprockiArgentinaOnyama Limba QUALIFIED
Aditya KuskoCanadaStephen Shaw RENEWAL
David DarakjyCanadaBernardo Dominic NEW
Ricardo GauchoArgentinaElwin Sharvill NEGOTIATION
Nicolas IturbideItalyXuxue Feng RENEWAL
Misaki RoysterUnited KingdomIoni Bowcher NEGOTIATION
James ButtAustraliaOnyama Limba NEW
Arvin AlbaresIndiaIvan Magalhaes QUALIFIED
Clifford RimSpainAmy Elsner PROPOSAL
Arvin AlbaresUnited KingdomIoni Bowcher NEGOTIATION
Antonio CaudyJapanStephen Shaw PROPOSAL
Adams MorascaItalyAnna Fali PROPOSAL
Kaitlin OstroskyFranceAnna Fali QUALIFIED
Rodrigues CampainFranceIvan Magalhaes QUALIFIED
Ashley DoeItalyXuxue Feng QUALIFIED
Ricardo GauchoGermanyIvan Magalhaes UNQUALIFIED
Isabel BowleyFranceOnyama Limba RENEWAL
Izzy GarufiJapanAmy Elsner RENEWAL
Leja CaldareraSpainIvan Magalhaes UNQUALIFIED
Isabel BowleyIndiaIvan Magalhaes RENEWAL
Misaki RoysterSpainStephen Shaw RENEWAL
Leja CaldareraAustraliaIoni Bowcher PROPOSAL
Sinclair WaycottRussiaBernardo Dominic UNQUALIFIED
Murillo MaletCanadaElwin Sharvill PROPOSAL
Isabel BowleyGermanyBernardo Dominic NEGOTIATION
Aditya KuskoIndiaIoni Bowcher NEGOTIATION
Leon OldroydBrazilXuxue Feng UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Kaitlin OstroskyFranceAnna Fali NEGOTIATION
Ricardo GauchoUnited KingdomXuxue Feng UNQUALIFIED
Mujtaba NickaSpainOnyama Limba NEW
Leja CaldareraCanadaIvan Magalhaes NEW
Ricardo GauchoFranceXuxue Feng NEW
Murillo MaletItalyIvan Magalhaes UNQUALIFIED
Greenwood BologniaRussiaXuxue Feng NEW
Leon OldroydItalyXuxue Feng UNQUALIFIED
Sinclair WaycottJapanOnyama Limba NEW
Claire TollnerJapanXuxue Feng NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jennifer AmigonFrance2026-06-12Commercial Press RENEWAL47Anna Fali
1001Mujtaba NickaCanada2026-06-02Morlong Associates QUALIFIED99Bernardo Dominic
1002Nicolas IturbideSpain2026-06-16Commercial Press UNQUALIFIED23Amy Elsner
1003Leon OldroydCanada2026-06-07Rousseaux, Michael Esq NEW86Ivan Magalhaes
1004Kadeem FlosiBrazil2026-05-26Commercial Press RENEWAL67Asiya Javayant
1005Francesco ShinkoCanada2026-05-26Dorl, James J Esq UNQUALIFIED18Bernardo Dominic
1006Antonio CaudyAustralia2026-05-19Rousseaux, Michael Esq RENEWAL45Xuxue Feng
1007Octavia MaletIndia2026-06-03Rangoni Of Florence PROPOSAL26Xuxue Feng
1008Leja CaldareraUnited Kingdom2026-06-07Feiner Bros RENEWAL41Elwin Sharvill
1009Silvio SlusarskiUnited Kingdom2026-06-15Dorl, James J Esq RENEWAL87Stephen Shaw
1010Clifford RimGermany2026-06-09Commercial Press QUALIFIED59Onyama Limba
1011Stacey MacleadJapan2026-06-16Chemel, James L Cpa UNQUALIFIED83Xuxue Feng
1012Aruna FigeroaJapan2026-06-14Chemel, James L Cpa NEGOTIATION42Ivan Magalhaes
1013Ivar PaprockiGermany2026-05-30King, Christopher A Esq QUALIFIED94Anna Fali
1014Clifford RimJapan2026-05-21Dorl, James J Esq UNQUALIFIED44Onyama Limba
1015Chavez BriddickCanada2026-05-20Rousseaux, Michael Esq NEGOTIATION68Anna Fali
1016Tony FollerItaly2026-06-17Commercial Press NEGOTIATION12Bernardo Dominic
1017Emily WhobreyRussia2026-05-23Rangoni Of Florence RENEWAL39Bernardo Dominic
1018David DarakjyRussia2026-06-11Commercial Press PROPOSAL31Elwin Sharvill
1019Mayumi KolmetzFrance2026-06-04Rousseaux, Michael Esq NEGOTIATION6Xuxue Feng
1020Maisha RulapaughRussia2026-06-09King, Christopher A Esq NEGOTIATION26Ioni Bowcher
1021Jones VocelkaFrance2026-06-02Dorl, James J Esq NEGOTIATION43Bernardo Dominic
1022Ashley DoeBrazil2026-05-22Rangoni Of Florence RENEWAL79Xuxue Feng
1023Ashley DoeUnited Kingdom2026-06-16Printing Dimensions UNQUALIFIED63Ioni Bowcher
1024Morrow RutaFrance2026-06-08Benton, John B Jr QUALIFIED55Anna Fali
1025Izzy GarufiArgentina2026-06-13Rousseaux, Michael Esq NEGOTIATION48Elwin Sharvill
1026Mayumi KolmetzFrance2026-05-21Benton, John B Jr PROPOSAL97Ivan Magalhaes
1027Johnson SergiGermany2026-06-17Chemel, James L Cpa RENEWAL65Bernardo Dominic
1028Johnson SergiRussia2026-05-28Morlong Associates UNQUALIFIED93Asiya Javayant
1029Ashley DoeIndia2026-05-21Commercial Press QUALIFIED90Elwin Sharvill
1030Julie StensethCanada2026-06-13Chanay, Jeffrey A Esq QUALIFIED24Bernardo Dominic
1031Mujtaba NickaBrazil2026-05-20Rangoni Of Florence NEGOTIATION14Bernardo Dominic
1032Izzy GarufiJapan2026-05-25Buckley Miller Wright NEGOTIATION45Onyama Limba
1033Julie StensethUnited Kingdom2026-05-31Printing Dimensions PROPOSAL19Amy Elsner
1034Tony FollerCanada2026-06-12Buckley Miller Wright QUALIFIED79Elwin Sharvill
1035Cody SaylorsCanada2026-05-19Rangoni Of Florence RENEWAL47Elwin Sharvill
1036Leon OldroydFrance2026-06-08Truhlar And Truhlar Attys UNQUALIFIED68Xuxue Feng
1037Juan WieserUnited Kingdom2026-05-26Feltz Printing Service RENEWAL11Ivan Magalhaes
1038David DarakjyCanada2026-05-31Feltz Printing Service NEGOTIATION22Anna Fali
1039Jennifer AmigonAustralia2026-05-25Chemel, James L Cpa NEW9Ivan Magalhaes
1040Octavia MaletRussia2026-05-28Buckley Miller Wright NEW57Ioni Bowcher
1041Arvin AlbaresIndia2026-05-30Chemel, James L Cpa RENEWAL48Amy Elsner
1042Kaitlin OstroskyGermany2026-05-28Rangoni Of Florence NEGOTIATION58Asiya Javayant
1043Wickens NestleJapan2026-06-09Feltz Printing Service PROPOSAL37Ivan Magalhaes
1044Morrow RutaAustralia2026-06-12Chanay, Jeffrey A Esq NEGOTIATION39Elwin Sharvill
1045Tony FollerAustralia2026-06-10Rangoni Of Florence NEGOTIATION20Ioni Bowcher
1046Jennifer AmigonJapan2026-06-10Printing Dimensions NEW44Ivan Magalhaes
1047Stacey MacleadUnited Kingdom2026-06-02Morlong Associates PROPOSAL29Asiya Javayant
1048Emily WhobreyItaly2026-06-01Buckley Miller Wright PROPOSAL58Xuxue Feng
1049Chavez BriddickUnited Kingdom2026-06-02Benton, John B Jr PROPOSAL7Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Maria MarrierBrazilElwin Sharvill PROPOSAL
Cody SaylorsJapanBernardo Dominic QUALIFIED
Julie StensethIndiaAmy Elsner NEW
Cody SaylorsFranceIoni Bowcher PROPOSAL
Misaki RoysterFranceAnna Fali PROPOSAL
Emily WhobreyIndiaAnna Fali RENEWAL
Rodrigues CampainBrazilBernardo Dominic NEW
Octavia MaletRussiaStephen Shaw UNQUALIFIED
Murillo MaletBrazilElwin Sharvill QUALIFIED
Salvatore StockhamBrazilElwin Sharvill PROPOSAL
Emily WhobreyItalyElwin Sharvill NEW
Deepesh ChuiIndiaXuxue Feng NEW
Isabel BowleyIndiaBernardo Dominic QUALIFIED
Juan WieserGermanyXuxue Feng NEW
Johnson SergiUnited KingdomBernardo Dominic UNQUALIFIED
Kadeem FlosiCanadaXuxue Feng NEW
Francesco ShinkoSpainIvan Magalhaes UNQUALIFIED
Chavez BriddickIndiaAnna Fali RENEWAL
Clifford RimGermanyElwin Sharvill PROPOSAL
Darci PoquetteUnited KingdomOnyama Limba PROPOSAL
Wickens NestleItalyIvan Magalhaes UNQUALIFIED
Alejandro PerinJapanAsiya Javayant RENEWAL
Julie StensethJapanAsiya Javayant NEGOTIATION
Costa DilliardSpainIoni Bowcher QUALIFIED
James ButtJapanElwin Sharvill UNQUALIFIED
Johnson SergiCanadaAmy Elsner PROPOSAL
Munro FerenczAustraliaAmy Elsner UNQUALIFIED
Costa DilliardSpainAmy Elsner QUALIFIED
Munro FerenczIndiaXuxue Feng QUALIFIED
Maisha RulapaughIndiaXuxue Feng PROPOSAL
Maria MarrierAustraliaOnyama Limba PROPOSAL
Munro FerenczSpainBernardo Dominic NEW
Faith GillianUnited KingdomElwin Sharvill NEGOTIATION
Nicolas IturbideRussiaBernardo Dominic PROPOSAL
Leja CaldareraGermanyStephen Shaw NEW
Maria MarrierJapanXuxue Feng PROPOSAL
Darci PoquetteSpainBernardo Dominic NEW
Kaitlin OstroskyBrazilAnna Fali UNQUALIFIED
Maisha RulapaughJapanAsiya Javayant PROPOSAL
Chavez BriddickSpainXuxue Feng NEGOTIATION
Emily WhobreyIndiaAsiya Javayant NEW
Maisha RulapaughItalyAmy Elsner PROPOSAL
Jefferson SchemmerUnited KingdomAnna Fali UNQUALIFIED
Juan WieserUnited KingdomAnna Fali PROPOSAL
Jones VocelkaAustraliaIoni Bowcher QUALIFIED
Smith GlickArgentinaAmy Elsner UNQUALIFIED
Francesco ShinkoCanadaIoni Bowcher UNQUALIFIED
Jeanfrancois VenereFranceStephen Shaw UNQUALIFIED
Aruna FigeroaGermanyIoni Bowcher RENEWAL
Clifford RimSpainAmy Elsner QUALIFIED
Frozen Columns
Name
Arvin Albares
Octavia Malet
Salvatore Stockham
Sinclair Waycott
Wickens Nestle
Munro Ferencz
Morrow Ruta
Adams Morasca
Silvio Slusarski
Greenwood Bolognia
Aika Inouye
Munro Ferencz
Emily Whobrey
Wickens Nestle
Kaitlin Ostrosky
Leon Oldroyd
Rodrigues Campain
Munro Ferencz
Smith Glick
Deepesh Chui
Faith Gillian
Alejandro Perin
David Darakjy
Misaki Royster
Sinclair Waycott
Kaitlin Ostrosky
Jones Vocelka
Juan Wieser
Nicolas Iturbide
Mujtaba Nicka
Aditya Kusko
Octavia Malet
Deepesh Chui
Ashley Doe
David Darakjy
Nicolas Iturbide
Deepesh Chui
Ivar Paprocki
Leja Caldarera
Ashley Doe
Kadeem Flosi
Munro Ferencz
Mujtaba Nicka
Kadeem Flosi
Jennifer Amigon
Isabel Bowley
James Butt
Johnson Sergi
Salvatore Stockham
Alejandro Perin
IdCountryDate
1000Russia2026-06-16
1001Spain2026-06-16
1002Spain2026-06-01
1003United Kingdom2026-05-27
1004Spain2026-06-12
1005France2026-06-09
1006Brazil2026-06-02
1007Italy2026-05-20
1008France2026-05-24
1009Brazil2026-05-24
1010Canada2026-06-10
1011Australia2026-05-29
1012Brazil2026-05-31
1013Germany2026-06-16
1014United Kingdom2026-06-12
1015Canada2026-05-28
1016Japan2026-05-24
1017Argentina2026-05-29
1018Argentina2026-06-09
1019Argentina2026-06-02
1020Spain2026-06-01
1021Spain2026-06-02
1022Russia2026-05-25
1023Italy2026-06-08
1024France2026-06-06
1025Brazil2026-05-21
1026France2026-06-06
1027India2026-06-15
1028Canada2026-06-03
1029Italy2026-06-13
1030Japan2026-05-27
1031Japan2026-06-12
1032Germany2026-06-05
1033Canada2026-06-09
1034Japan2026-06-02
1035Germany2026-06-07
1036Germany2026-06-12
1037Australia2026-05-31
1038United Kingdom2026-06-05
1039Argentina2026-06-13
1040India2026-06-15
1041Russia2026-06-02
1042United Kingdom2026-05-27
1043Germany2026-06-10
1044United Kingdom2026-05-26
1045Brazil2026-06-10
1046Argentina2026-05-28
1047Germany2026-06-07
1048Argentina2026-06-14
1049Japan2026-06-10

On-Demand Data

NameIdCountryDate
Aditya Kusko1000Australia2026-05-29
Clifford Rim1001Italy2026-05-29
Sinclair Waycott1002United Kingdom2026-05-22
Wickens Nestle1003Australia2026-06-08
Cody Saylors1004United Kingdom2026-06-02
Clifford Rim1005Brazil2026-06-08
Juan Wieser1006India2026-05-22
Mayumi Kolmetz1007Australia2026-06-10
Chavez Briddick1008Argentina2026-06-14
Mayumi Kolmetz1009Canada2026-06-02
Stacey Maclead1010Russia2026-05-25
Francesco Shinko1011Argentina2026-06-11
Aditya Kusko1012Canada2026-06-09
Johnson Sergi1013Italy2026-05-29
Nicolas Iturbide1014Canada2026-05-23
Juan Wieser1015Russia2026-06-16
Leja Caldarera1016Australia2026-06-15
Ivar Paprocki1017France2026-05-28
Johnson Sergi1018India2026-06-05
David Darakjy1019Japan2026-06-15
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Emily WhobreyFranceAmy Elsner RENEWAL
Costa DilliardFranceElwin Sharvill PROPOSAL
Aditya KuskoUnited KingdomIvan Magalhaes NEGOTIATION
Aditya KuskoJapanElwin Sharvill PROPOSAL
Clifford RimRussiaAmy Elsner NEW
Isabel BowleyItalyOnyama Limba UNQUALIFIED
Ivar PaprockiSpainIvan Magalhaes PROPOSAL
Chavez BriddickFranceAmy Elsner NEW
Faith GillianSpainAmy Elsner RENEWAL
Aditya KuskoFranceStephen Shaw RENEWAL
Ricardo GauchoBrazilElwin Sharvill UNQUALIFIED
Kadeem FlosiJapanAsiya Javayant RENEWAL
Alejandro PerinFranceStephen Shaw QUALIFIED
Octavia MaletRussiaIoni Bowcher PROPOSAL
Kaitlin OstroskyItalyIvan Magalhaes PROPOSAL
Adams MorascaJapanOnyama Limba UNQUALIFIED
Chavez BriddickJapanElwin Sharvill QUALIFIED
Darci PoquetteSpainElwin Sharvill PROPOSAL
David DarakjyArgentinaStephen Shaw RENEWAL
Nicolas IturbideArgentinaBernardo Dominic RENEWAL
Kadeem FlosiAustraliaXuxue Feng QUALIFIED
Francesco ShinkoUnited KingdomBernardo Dominic NEW
Kaitlin OstroskyRussiaBernardo Dominic UNQUALIFIED
Misaki RoysterArgentinaAsiya Javayant NEW
Wickens NestleBrazilOnyama Limba NEW
Maisha RulapaughFranceAnna Fali UNQUALIFIED
Munro FerenczAustraliaIoni Bowcher PROPOSAL
Stacey MacleadArgentinaElwin Sharvill RENEWAL
Ricardo GauchoAustraliaStephen Shaw PROPOSAL
Mayumi KolmetzRussiaIvan Magalhaes NEGOTIATION
Julie StensethAustraliaAnna Fali RENEWAL
Wickens NestleAustraliaIoni Bowcher UNQUALIFIED
Kaitlin OstroskyCanadaAmy Elsner PROPOSAL
Silvio SlusarskiSpainOnyama Limba NEGOTIATION
Emily WhobreyAustraliaElwin Sharvill UNQUALIFIED
Isabel BowleyAustraliaStephen Shaw QUALIFIED
Sinclair WaycottUnited KingdomIvan Magalhaes NEGOTIATION
David DarakjyCanadaOnyama Limba QUALIFIED
Antonio CaudyBrazilAmy Elsner RENEWAL
Johnson SergiSpainIvan Magalhaes QUALIFIED

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