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
Deepesh ChuiIndiaBernardo Dominic QUALIFIED
Alejandro PerinSpainElwin Sharvill PROPOSAL
Munro FerenczRussiaBernardo Dominic PROPOSAL
Ashley DoeAustraliaIoni Bowcher NEGOTIATION
Wickens NestleItalyIoni Bowcher QUALIFIED
Aruna FigeroaSpainBernardo Dominic PROPOSAL
Faith GillianUnited KingdomIoni Bowcher PROPOSAL
Ricardo GauchoRussiaXuxue Feng RENEWAL
Faith GillianFranceIvan Magalhaes RENEWAL
Ashley DoeSpainIoni Bowcher NEW
Maria MarrierGermanyStephen Shaw QUALIFIED
Isabel BowleyGermanyOnyama Limba NEW
Francesco ShinkoFranceBernardo Dominic NEW
Aruna FigeroaBrazilIvan Magalhaes QUALIFIED
Leja CaldareraSpainElwin Sharvill QUALIFIED
Izzy GarufiUnited KingdomAsiya Javayant QUALIFIED
Leja CaldareraIndiaIoni Bowcher NEGOTIATION
Julie StensethAustraliaBernardo Dominic NEW
Jennifer AmigonUnited KingdomAmy Elsner QUALIFIED
Ricardo GauchoSpainXuxue Feng UNQUALIFIED
Sinclair WaycottArgentinaIoni Bowcher QUALIFIED
Alejandro PerinJapanAnna Fali NEGOTIATION
Silvio SlusarskiIndiaBernardo Dominic PROPOSAL
Claire TollnerJapanIvan Magalhaes PROPOSAL
Stacey MacleadRussiaAsiya Javayant UNQUALIFIED
Leon OldroydGermanyIoni Bowcher UNQUALIFIED
Johnson SergiSpainStephen Shaw UNQUALIFIED
Maria MarrierAustraliaElwin Sharvill NEGOTIATION
Emily WhobreyJapanIvan Magalhaes PROPOSAL
Salvatore StockhamUnited KingdomAsiya Javayant RENEWAL
Claire TollnerRussiaAmy Elsner QUALIFIED
Tony FollerJapanAnna Fali PROPOSAL
Cody SaylorsCanadaBernardo Dominic RENEWAL
Murillo MaletFranceStephen Shaw NEGOTIATION
Octavia MaletAustraliaXuxue Feng UNQUALIFIED
Silvio SlusarskiJapanIvan Magalhaes NEW
Jones VocelkaUnited KingdomAsiya Javayant RENEWAL
Julie StensethJapanIvan Magalhaes PROPOSAL
Alejandro PerinJapanAsiya Javayant RENEWAL
Alejandro PerinBrazilIvan Magalhaes UNQUALIFIED
Claire TollnerSpainAmy Elsner QUALIFIED
Munro FerenczUnited KingdomOnyama Limba PROPOSAL
Izzy GarufiIndiaAsiya Javayant NEGOTIATION
Faith GillianUnited KingdomAsiya Javayant PROPOSAL
Silvio SlusarskiArgentinaElwin Sharvill QUALIFIED
Leon OldroydFranceXuxue Feng NEW
Cody SaylorsJapanIvan Magalhaes UNQUALIFIED
Jefferson SchemmerCanadaXuxue Feng NEGOTIATION
Jeanfrancois VenereGermanyIoni Bowcher RENEWAL
Costa DilliardBrazilXuxue Feng UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Arvin AlbaresFranceAmy Elsner UNQUALIFIED
Adams MorascaBrazilBernardo Dominic NEGOTIATION
Faith GillianGermanyXuxue Feng PROPOSAL
Kadeem FlosiBrazilAmy Elsner RENEWAL
Alejandro PerinItalyBernardo Dominic NEW
Deepesh ChuiSpainIvan Magalhaes NEW
Tony FollerJapanAmy Elsner PROPOSAL
Maisha RulapaughFranceOnyama Limba NEW
Ivar PaprockiSpainAmy Elsner NEGOTIATION
Aruna FigeroaAustraliaXuxue Feng NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Wickens NestleFrance2026-05-25Rousseaux, Michael Esq UNQUALIFIED8Stephen Shaw
1001James ButtGermany2026-05-30Commercial Press UNQUALIFIED28Anna Fali
1002James ButtArgentina2026-05-13Chapman, Ross E Esq NEGOTIATION9Amy Elsner
1003Aika InouyeRussia2026-05-28Truhlar And Truhlar Attys PROPOSAL8Ioni Bowcher
1004Aika InouyeArgentina2026-05-25Chemel, James L Cpa NEGOTIATION26Amy Elsner
1005Tony FollerItaly2026-05-22Truhlar And Truhlar Attys NEW91Amy Elsner
1006Aruna FigeroaItaly2026-05-16Benton, John B Jr PROPOSAL87Asiya Javayant
1007Alejandro PerinAustralia2026-06-07Buckley Miller Wright NEW20Ioni Bowcher
1008Francesco ShinkoGermany2026-06-03Morlong Associates RENEWAL8Onyama Limba
1009Misaki RoysterIndia2026-06-02Feltz Printing Service PROPOSAL27Onyama Limba
1010Maria MarrierSpain2026-06-07Benton, John B Jr UNQUALIFIED50Bernardo Dominic
1011Stacey MacleadRussia2026-06-05Truhlar And Truhlar Attys RENEWAL35Xuxue Feng
1012Alejandro PerinRussia2026-05-16Chemel, James L Cpa RENEWAL3Anna Fali
1013Silvio SlusarskiItaly2026-05-29Commercial Press UNQUALIFIED11Bernardo Dominic
1014Clifford RimSpain2026-05-23Printing Dimensions NEGOTIATION27Xuxue Feng
1015James ButtJapan2026-05-19Commercial Press NEGOTIATION79Stephen Shaw
1016Jeanfrancois VenereRussia2026-05-20Commercial Press PROPOSAL66Xuxue Feng
1017Maria MarrierBrazil2026-06-01Buckley Miller Wright QUALIFIED45Ioni Bowcher
1018Juan WieserRussia2026-05-14King, Christopher A Esq RENEWAL82Ivan Magalhaes
1019Leja CaldareraGermany2026-05-31Commercial Press NEGOTIATION64Onyama Limba
1020Jefferson SchemmerJapan2026-05-13Chemel, James L Cpa QUALIFIED20Bernardo Dominic
1021Maria MarrierBrazil2026-05-23Printing Dimensions QUALIFIED38Bernardo Dominic
1022Juan WieserBrazil2026-05-10Chapman, Ross E Esq UNQUALIFIED60Ivan Magalhaes
1023James ButtItaly2026-05-18Buckley Miller Wright UNQUALIFIED34Ivan Magalhaes
1024Salvatore StockhamUnited Kingdom2026-06-05Chanay, Jeffrey A Esq NEW18Onyama Limba
1025Maria MarrierRussia2026-06-03Benton, John B Jr QUALIFIED47Onyama Limba
1026Clifford RimIndia2026-06-03Morlong Associates NEGOTIATION66Ioni Bowcher
1027Darci PoquetteArgentina2026-06-06Commercial Press NEGOTIATION74Onyama Limba
1028Deepesh ChuiAustralia2026-05-31Printing Dimensions NEW68Ioni Bowcher
1029Salvatore StockhamSpain2026-05-18Feltz Printing Service NEW58Stephen Shaw
1030Ricardo GauchoCanada2026-06-01Rousseaux, Michael Esq NEGOTIATION77Elwin Sharvill
1031Chavez BriddickCanada2026-06-02Benton, John B Jr RENEWAL84Asiya Javayant
1032Salvatore StockhamBrazil2026-05-23Rousseaux, Michael Esq UNQUALIFIED64Anna Fali
1033Isabel BowleyGermany2026-06-05Dorl, James J Esq NEW53Bernardo Dominic
1034Jeanfrancois VenereFrance2026-05-21Feltz Printing Service QUALIFIED12Elwin Sharvill
1035Wickens NestleGermany2026-05-11Feiner Bros NEGOTIATION83Amy Elsner
1036Adams MorascaBrazil2026-05-16Rangoni Of Florence RENEWAL61Ioni Bowcher
1037Darci PoquetteBrazil2026-05-14Benton, John B Jr UNQUALIFIED96Ioni Bowcher
1038Greenwood BologniaFrance2026-06-04Chemel, James L Cpa NEGOTIATION58Bernardo Dominic
1039Claire TollnerItaly2026-06-01Feltz Printing Service NEW60Asiya Javayant
1040Ivar PaprockiSpain2026-05-09Truhlar And Truhlar Attys NEW14Stephen Shaw
1041Silvio SlusarskiCanada2026-05-22Feltz Printing Service NEGOTIATION6Elwin Sharvill
1042Claire TollnerJapan2026-05-18Morlong Associates PROPOSAL93Xuxue Feng
1043Ricardo GauchoCanada2026-05-17Printing Dimensions NEGOTIATION20Bernardo Dominic
1044Chavez BriddickAustralia2026-05-09Rousseaux, Michael Esq NEGOTIATION41Amy Elsner
1045Ricardo GauchoAustralia2026-05-20Commercial Press NEW32Amy Elsner
1046Maisha RulapaughAustralia2026-05-26Chanay, Jeffrey A Esq RENEWAL26Onyama Limba
1047Mujtaba NickaUnited Kingdom2026-06-06Printing Dimensions NEGOTIATION65Elwin Sharvill
1048Silvio SlusarskiBrazil2026-05-24Benton, John B Jr QUALIFIED7Bernardo Dominic
1049Mayumi KolmetzItaly2026-05-19Feiner Bros UNQUALIFIED32Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Kaitlin OstroskyArgentinaIvan Magalhaes PROPOSAL
Jeanfrancois VenereUnited KingdomAsiya Javayant PROPOSAL
Stacey MacleadGermanyIvan Magalhaes UNQUALIFIED
Jennifer AmigonArgentinaElwin Sharvill NEW
Rodrigues CampainItalyIoni Bowcher PROPOSAL
James ButtFranceAsiya Javayant NEGOTIATION
Faith GillianGermanyOnyama Limba NEGOTIATION
Alejandro PerinArgentinaBernardo Dominic QUALIFIED
Mujtaba NickaItalyElwin Sharvill PROPOSAL
Antonio CaudyGermanyAnna Fali QUALIFIED
Isabel BowleyBrazilIoni Bowcher RENEWAL
Jennifer AmigonSpainAnna Fali UNQUALIFIED
Murillo MaletItalyBernardo Dominic NEGOTIATION
Faith GillianItalyXuxue Feng NEGOTIATION
Costa DilliardFranceAnna Fali NEGOTIATION
Ivar PaprockiBrazilStephen Shaw UNQUALIFIED
Cody SaylorsSpainAnna Fali UNQUALIFIED
Silvio SlusarskiIndiaStephen Shaw NEW
Alejandro PerinFranceOnyama Limba UNQUALIFIED
Tony FollerItalyIoni Bowcher UNQUALIFIED
Jennifer AmigonItalyAsiya Javayant NEW
Faith GillianAustraliaElwin Sharvill RENEWAL
Salvatore StockhamRussiaAsiya Javayant UNQUALIFIED
Clifford RimBrazilBernardo Dominic QUALIFIED
Arvin AlbaresRussiaBernardo Dominic PROPOSAL
Stacey MacleadJapanAmy Elsner RENEWAL
Faith GillianUnited KingdomIvan Magalhaes NEGOTIATION
Mujtaba NickaCanadaIvan Magalhaes PROPOSAL
Deepesh ChuiBrazilAnna Fali NEGOTIATION
Kaitlin OstroskySpainBernardo Dominic RENEWAL
Juan WieserItalyAnna Fali NEW
Ivar PaprockiItalyElwin Sharvill RENEWAL
Ivar PaprockiUnited KingdomOnyama Limba QUALIFIED
Darci PoquetteSpainStephen Shaw PROPOSAL
Costa DilliardUnited KingdomXuxue Feng NEW
Mujtaba NickaUnited KingdomBernardo Dominic PROPOSAL
Jeanfrancois VenereIndiaStephen Shaw NEGOTIATION
Deepesh ChuiCanadaElwin Sharvill NEW
Claire TollnerGermanyElwin Sharvill QUALIFIED
Salvatore StockhamCanadaAnna Fali RENEWAL
Clifford RimItalyOnyama Limba RENEWAL
Ricardo GauchoItalyAsiya Javayant UNQUALIFIED
Leja CaldareraJapanStephen Shaw PROPOSAL
Rodrigues CampainIndiaOnyama Limba NEGOTIATION
Stacey MacleadSpainOnyama Limba UNQUALIFIED
Smith GlickArgentinaStephen Shaw RENEWAL
Morrow RutaUnited KingdomAnna Fali NEGOTIATION
Kadeem FlosiSpainOnyama Limba RENEWAL
Jennifer AmigonCanadaOnyama Limba QUALIFIED
Kaitlin OstroskyCanadaAsiya Javayant QUALIFIED
Frozen Columns
Name
Mayumi Kolmetz
Munro Ferencz
Kaitlin Ostrosky
Clifford Rim
Clifford Rim
Maisha Rulapaugh
Misaki Royster
Jones Vocelka
Arvin Albares
Deepesh Chui
Claire Tollner
Ivar Paprocki
James Butt
Alejandro Perin
Aika Inouye
Ashley Doe
Smith Glick
Kaitlin Ostrosky
Jefferson Schemmer
Clifford Rim
Claire Tollner
Stacey Maclead
Clifford Rim
Cody Saylors
Costa Dilliard
Misaki Royster
Aditya Kusko
Maisha Rulapaugh
Juan Wieser
Greenwood Bolognia
Sinclair Waycott
Jeanfrancois Venere
Octavia Malet
Darci Poquette
Johnson Sergi
Octavia Malet
Costa Dilliard
Morrow Ruta
David Darakjy
Leja Caldarera
Clifford Rim
Johnson Sergi
Jeanfrancois Venere
Aika Inouye
Claire Tollner
Aditya Kusko
Alejandro Perin
Silvio Slusarski
Rodrigues Campain
Chavez Briddick
IdCountryDate
1000Australia2026-05-09
1001Argentina2026-06-03
1002United Kingdom2026-06-02
1003Argentina2026-05-30
1004Brazil2026-05-31
1005Italy2026-05-30
1006Brazil2026-05-29
1007France2026-05-23
1008Australia2026-05-12
1009France2026-05-18
1010Italy2026-05-31
1011Australia2026-05-19
1012Italy2026-06-03
1013Brazil2026-05-27
1014Canada2026-05-23
1015United Kingdom2026-05-20
1016United Kingdom2026-06-05
1017United Kingdom2026-06-05
1018Brazil2026-05-20
1019Japan2026-05-12
1020United Kingdom2026-06-04
1021Spain2026-06-05
1022Argentina2026-06-01
1023Argentina2026-06-07
1024France2026-06-04
1025India2026-05-31
1026Russia2026-05-20
1027France2026-06-03
1028Argentina2026-05-21
1029Argentina2026-06-05
1030Russia2026-05-22
1031Spain2026-05-30
1032Italy2026-05-24
1033United Kingdom2026-05-14
1034Australia2026-05-19
1035Argentina2026-05-25
1036Italy2026-06-02
1037Italy2026-05-27
1038Spain2026-05-30
1039France2026-05-13
1040United Kingdom2026-05-18
1041Brazil2026-06-03
1042Russia2026-05-12
1043Brazil2026-05-20
1044France2026-05-16
1045France2026-06-06
1046France2026-05-20
1047United Kingdom2026-05-18
1048Italy2026-05-30
1049Canada2026-05-14

On-Demand Data

NameIdCountryDate
Faith Gillian1000Japan2026-05-10
Greenwood Bolognia1001Brazil2026-05-30
Rodrigues Campain1002India2026-05-15
Deepesh Chui1003Argentina2026-06-03
Jeanfrancois Venere1004Italy2026-06-01
Arvin Albares1005Argentina2026-05-18
Alejandro Perin1006Germany2026-05-17
Jefferson Schemmer1007Canada2026-05-30
Sinclair Waycott1008United Kingdom2026-05-14
Murillo Malet1009Brazil2026-05-25
Darci Poquette1010United Kingdom2026-05-14
Francesco Shinko1011Canada2026-05-20
Wickens Nestle1012Canada2026-05-13
Julie Stenseth1013India2026-05-24
Smith Glick1014Italy2026-05-23
Kadeem Flosi1015France2026-05-09
Isabel Bowley1016Australia2026-06-06
Clifford Rim1017Germany2026-05-27
Greenwood Bolognia1018Argentina2026-05-09
Salvatore Stockham1019Italy2026-06-04
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Antonio CaudyRussiaAnna Fali NEGOTIATION
Costa DilliardJapanXuxue Feng NEW
Leja CaldareraItalyIoni Bowcher UNQUALIFIED
Leon OldroydArgentinaAmy Elsner PROPOSAL
Izzy GarufiFranceAnna Fali NEGOTIATION
Emily WhobreyIndiaBernardo Dominic QUALIFIED
Cody SaylorsUnited KingdomIvan Magalhaes NEW
James ButtBrazilAsiya Javayant QUALIFIED
Alejandro PerinIndiaIoni Bowcher PROPOSAL
Juan WieserFranceAnna Fali QUALIFIED
Aika InouyeJapanStephen Shaw NEGOTIATION
Greenwood BologniaJapanStephen Shaw RENEWAL
Leon OldroydFranceElwin Sharvill UNQUALIFIED
Darci PoquetteBrazilIoni Bowcher NEW
Murillo MaletGermanyBernardo Dominic RENEWAL
Kaitlin OstroskyFranceIvan Magalhaes UNQUALIFIED
Smith GlickFranceAnna Fali PROPOSAL
Maria MarrierSpainElwin Sharvill NEW
Salvatore StockhamJapanOnyama Limba PROPOSAL
Jones VocelkaRussiaStephen Shaw NEW
Jennifer AmigonSpainIoni Bowcher QUALIFIED
Salvatore StockhamJapanOnyama Limba NEGOTIATION
James ButtArgentinaAsiya Javayant RENEWAL
Darci PoquetteCanadaOnyama Limba QUALIFIED
Costa DilliardCanadaStephen Shaw NEW
Silvio SlusarskiIndiaAnna Fali RENEWAL
Arvin AlbaresItalyAnna Fali RENEWAL
Mujtaba NickaRussiaStephen Shaw QUALIFIED
Tony FollerFranceIoni Bowcher RENEWAL
Antonio CaudyArgentinaAsiya Javayant PROPOSAL
Stacey MacleadCanadaAmy Elsner QUALIFIED
Nicolas IturbideAustraliaElwin Sharvill UNQUALIFIED
Ashley DoeUnited KingdomIvan Magalhaes RENEWAL
Izzy GarufiJapanStephen Shaw UNQUALIFIED
Sinclair WaycottBrazilBernardo Dominic NEGOTIATION
Murillo MaletArgentinaElwin Sharvill PROPOSAL
Ivar PaprockiAustraliaBernardo Dominic QUALIFIED
Kadeem FlosiItalyIvan Magalhaes UNQUALIFIED
Leja CaldareraCanadaIvan Magalhaes UNQUALIFIED
Sinclair WaycottBrazilAmy Elsner 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>