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
Darci PoquetteItalyIoni Bowcher PROPOSAL
Ivar PaprockiItalyElwin Sharvill PROPOSAL
David DarakjyAustraliaElwin Sharvill QUALIFIED
Maisha RulapaughItalyAnna Fali NEW
Silvio SlusarskiUnited KingdomStephen Shaw NEW
Stacey MacleadAustraliaBernardo Dominic PROPOSAL
Kadeem FlosiGermanyAnna Fali UNQUALIFIED
Deepesh ChuiArgentinaAsiya Javayant RENEWAL
Arvin AlbaresAustraliaXuxue Feng UNQUALIFIED
Salvatore StockhamUnited KingdomElwin Sharvill NEGOTIATION
Cody SaylorsSpainBernardo Dominic PROPOSAL
Cody SaylorsFranceAsiya Javayant NEW
Ricardo GauchoRussiaIvan Magalhaes RENEWAL
Ashley DoeRussiaOnyama Limba NEGOTIATION
Izzy GarufiBrazilStephen Shaw PROPOSAL
Leon OldroydJapanAmy Elsner PROPOSAL
Greenwood BologniaCanadaOnyama Limba NEGOTIATION
James ButtUnited KingdomAsiya Javayant NEW
Ivar PaprockiJapanBernardo Dominic QUALIFIED
Isabel BowleyItalyElwin Sharvill RENEWAL
Izzy GarufiBrazilIoni Bowcher NEW
Silvio SlusarskiItalyOnyama Limba QUALIFIED
Adams MorascaRussiaStephen Shaw RENEWAL
Smith GlickJapanOnyama Limba UNQUALIFIED
Cody SaylorsGermanyAmy Elsner PROPOSAL
Nicolas IturbideIndiaElwin Sharvill NEW
Jones VocelkaGermanyIoni Bowcher UNQUALIFIED
Izzy GarufiJapanOnyama Limba NEGOTIATION
Costa DilliardRussiaIvan Magalhaes NEGOTIATION
Rodrigues CampainGermanyIoni Bowcher NEGOTIATION
Mayumi KolmetzArgentinaIvan Magalhaes RENEWAL
Rodrigues CampainGermanyAsiya Javayant UNQUALIFIED
Cody SaylorsSpainXuxue Feng QUALIFIED
Misaki RoysterBrazilIoni Bowcher PROPOSAL
Jennifer AmigonIndiaIvan Magalhaes RENEWAL
Leja CaldareraSpainAsiya Javayant NEW
Smith GlickArgentinaOnyama Limba RENEWAL
Nicolas IturbideArgentinaXuxue Feng UNQUALIFIED
Aika InouyeItalyBernardo Dominic NEGOTIATION
Cody SaylorsUnited KingdomAmy Elsner NEW
Greenwood BologniaArgentinaAnna Fali QUALIFIED
Morrow RutaBrazilOnyama Limba NEW
Izzy GarufiGermanyXuxue Feng QUALIFIED
Misaki RoysterUnited KingdomIoni Bowcher NEW
Claire TollnerBrazilAnna Fali RENEWAL
Cody SaylorsCanadaAnna Fali RENEWAL
Antonio CaudyUnited KingdomXuxue Feng UNQUALIFIED
Costa DilliardItalyBernardo Dominic PROPOSAL
Cody SaylorsFranceElwin Sharvill UNQUALIFIED
Alejandro PerinFranceElwin Sharvill NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Jeanfrancois VenereJapanAsiya Javayant NEGOTIATION
Aika InouyeFranceIvan Magalhaes QUALIFIED
Claire TollnerAustraliaIvan Magalhaes QUALIFIED
Salvatore StockhamAustraliaIvan Magalhaes NEGOTIATION
Sinclair WaycottArgentinaIoni Bowcher PROPOSAL
Johnson SergiUnited KingdomElwin Sharvill PROPOSAL
Adams MorascaItalyXuxue Feng NEGOTIATION
Jennifer AmigonArgentinaBernardo Dominic QUALIFIED
Aruna FigeroaUnited KingdomOnyama Limba UNQUALIFIED
Adams MorascaBrazilXuxue Feng UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Greenwood BologniaArgentina2025-07-24Feiner Bros RENEWAL47Amy Elsner
1001Juan WieserJapan2025-07-24Dorl, James J Esq QUALIFIED92Amy Elsner
1002Kaitlin OstroskyJapan2025-07-30Morlong Associates PROPOSAL62Ioni Bowcher
1003Deepesh ChuiGermany2025-08-07Morlong Associates UNQUALIFIED38Onyama Limba
1004Sinclair WaycottAustralia2025-07-27Commercial Press UNQUALIFIED63Asiya Javayant
1005Alejandro PerinItaly2025-07-21Benton, John B Jr RENEWAL27Stephen Shaw
1006Maria MarrierUnited Kingdom2025-08-09Rousseaux, Michael Esq PROPOSAL55Onyama Limba
1007Mujtaba NickaJapan2025-07-24Truhlar And Truhlar Attys NEW43Xuxue Feng
1008Darci PoquetteGermany2025-08-02Benton, John B Jr PROPOSAL36Xuxue Feng
1009Salvatore StockhamIndia2025-08-01Rangoni Of Florence PROPOSAL33Asiya Javayant
1010Aika InouyeCanada2025-07-21Rousseaux, Michael Esq RENEWAL50Ioni Bowcher
1011Costa DilliardGermany2025-07-29Rousseaux, Michael Esq UNQUALIFIED12Ivan Magalhaes
1012Jeanfrancois VenereBrazil2025-07-22Printing Dimensions UNQUALIFIED44Ioni Bowcher
1013Aika InouyeGermany2025-07-26Dorl, James J Esq PROPOSAL38Onyama Limba
1014Faith GillianArgentina2025-08-06Feltz Printing Service NEW42Onyama Limba
1015Ivar PaprockiItaly2025-08-03Chapman, Ross E Esq UNQUALIFIED24Anna Fali
1016Rodrigues CampainBrazil2025-08-07Benton, John B Jr NEW9Xuxue Feng
1017Kadeem FlosiItaly2025-08-05Chanay, Jeffrey A Esq NEW23Ivan Magalhaes
1018Leja CaldareraBrazil2025-07-26Dorl, James J Esq PROPOSAL11Onyama Limba
1019Smith GlickUnited Kingdom2025-07-25Chapman, Ross E Esq QUALIFIED88Onyama Limba
1020James ButtRussia2025-07-24Chemel, James L Cpa NEGOTIATION18Ivan Magalhaes
1021Francesco ShinkoAustralia2025-07-26Feiner Bros PROPOSAL18Stephen Shaw
1022Leja CaldareraJapan2025-08-08Rangoni Of Florence UNQUALIFIED1Elwin Sharvill
1023Mujtaba NickaItaly2025-08-04Feiner Bros RENEWAL2Onyama Limba
1024Stacey MacleadBrazil2025-08-11Morlong Associates NEGOTIATION36Asiya Javayant
1025Kadeem FlosiIndia2025-07-19Chemel, James L Cpa QUALIFIED95Ioni Bowcher
1026Aika InouyeFrance2025-08-01Chanay, Jeffrey A Esq PROPOSAL29Bernardo Dominic
1027Johnson SergiJapan2025-07-28Buckley Miller Wright NEGOTIATION64Onyama Limba
1028Ashley DoeUnited Kingdom2025-08-06Buckley Miller Wright NEGOTIATION80Anna Fali
1029Clifford RimAustralia2025-08-11Truhlar And Truhlar Attys NEW65Ivan Magalhaes
1030Cody SaylorsGermany2025-07-19Chemel, James L Cpa RENEWAL38Ivan Magalhaes
1031Izzy GarufiAustralia2025-07-16Commercial Press NEW17Ioni Bowcher
1032Cody SaylorsArgentina2025-08-12King, Christopher A Esq PROPOSAL67Xuxue Feng
1033Aika InouyeFrance2025-07-28Chapman, Ross E Esq PROPOSAL32Ioni Bowcher
1034Murillo MaletCanada2025-07-30Printing Dimensions PROPOSAL35Elwin Sharvill
1035Rodrigues CampainGermany2025-07-30Rousseaux, Michael Esq QUALIFIED5Bernardo Dominic
1036Jennifer AmigonIndia2025-08-06Benton, John B Jr UNQUALIFIED69Ioni Bowcher
1037Darci PoquetteArgentina2025-07-20King, Christopher A Esq UNQUALIFIED67Bernardo Dominic
1038Izzy GarufiIndia2025-07-16Rangoni Of Florence NEW26Stephen Shaw
1039Julie StensethJapan2025-07-27Rangoni Of Florence QUALIFIED20Ivan Magalhaes
1040Rodrigues CampainJapan2025-08-08Feltz Printing Service UNQUALIFIED10Stephen Shaw
1041Johnson SergiBrazil2025-08-10Printing Dimensions RENEWAL49Bernardo Dominic
1042Jones VocelkaBrazil2025-07-28Chemel, James L Cpa QUALIFIED15Asiya Javayant
1043Antonio CaudyIndia2025-07-20Feltz Printing Service QUALIFIED63Bernardo Dominic
1044Silvio SlusarskiCanada2025-08-06Chanay, Jeffrey A Esq PROPOSAL82Bernardo Dominic
1045Nicolas IturbideBrazil2025-08-11Printing Dimensions NEGOTIATION62Bernardo Dominic
1046Sinclair WaycottUnited Kingdom2025-07-14Buckley Miller Wright RENEWAL31Ivan Magalhaes
1047Claire TollnerFrance2025-07-22Dorl, James J Esq PROPOSAL44Asiya Javayant
1048Rodrigues CampainArgentina2025-07-20Benton, John B Jr PROPOSAL4Ivan Magalhaes
1049Cody SaylorsIndia2025-07-24Chanay, Jeffrey A Esq NEGOTIATION52Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Leon OldroydFranceElwin Sharvill PROPOSAL
Sinclair WaycottIndiaIoni Bowcher RENEWAL
Tony FollerCanadaAnna Fali QUALIFIED
Morrow RutaUnited KingdomAnna Fali PROPOSAL
Mujtaba NickaSpainOnyama Limba NEGOTIATION
Jones VocelkaRussiaAsiya Javayant QUALIFIED
Julie StensethSpainBernardo Dominic RENEWAL
Costa DilliardAustraliaStephen Shaw PROPOSAL
Aditya KuskoCanadaAsiya Javayant RENEWAL
Ricardo GauchoSpainOnyama Limba NEGOTIATION
Rodrigues CampainBrazilAsiya Javayant UNQUALIFIED
Adams MorascaIndiaIoni Bowcher NEGOTIATION
Mayumi KolmetzAustraliaStephen Shaw UNQUALIFIED
Claire TollnerJapanXuxue Feng NEGOTIATION
Cody SaylorsBrazilAnna Fali NEGOTIATION
Jeanfrancois VenereArgentinaXuxue Feng PROPOSAL
Mayumi KolmetzIndiaBernardo Dominic NEGOTIATION
Izzy GarufiRussiaXuxue Feng NEGOTIATION
Aditya KuskoRussiaIvan Magalhaes NEW
Sinclair WaycottJapanAsiya Javayant QUALIFIED
Jennifer AmigonArgentinaAnna Fali PROPOSAL
Jones VocelkaArgentinaAnna Fali NEW
Tony FollerAustraliaAnna Fali PROPOSAL
Clifford RimJapanAnna Fali RENEWAL
Izzy GarufiBrazilOnyama Limba NEGOTIATION
Antonio CaudyAustraliaIoni Bowcher PROPOSAL
Stacey MacleadBrazilAnna Fali UNQUALIFIED
Emily WhobreyBrazilAnna Fali NEW
Kaitlin OstroskyGermanyStephen Shaw UNQUALIFIED
Aditya KuskoAustraliaAmy Elsner NEGOTIATION
Deepesh ChuiGermanyAmy Elsner QUALIFIED
Emily WhobreyJapanStephen Shaw PROPOSAL
Tony FollerCanadaAnna Fali NEW
Octavia MaletIndiaXuxue Feng RENEWAL
Ricardo GauchoJapanElwin Sharvill NEW
Jeanfrancois VenereJapanElwin Sharvill UNQUALIFIED
Octavia MaletBrazilXuxue Feng NEGOTIATION
Arvin AlbaresJapanXuxue Feng UNQUALIFIED
Misaki RoysterIndiaIoni Bowcher UNQUALIFIED
Aika InouyeIndiaElwin Sharvill NEGOTIATION
Aruna FigeroaFranceElwin Sharvill RENEWAL
Claire TollnerCanadaBernardo Dominic PROPOSAL
Johnson SergiBrazilAnna Fali PROPOSAL
Emily WhobreyAustraliaIoni Bowcher RENEWAL
Morrow RutaSpainIoni Bowcher NEW
Costa DilliardGermanyXuxue Feng UNQUALIFIED
Mayumi KolmetzSpainStephen Shaw UNQUALIFIED
Julie StensethSpainAnna Fali NEW
Ivar PaprockiArgentinaIoni Bowcher QUALIFIED
Darci PoquetteCanadaAnna Fali NEGOTIATION
Frozen Columns
Name
Jennifer Amigon
David Darakjy
Misaki Royster
Aika Inouye
Chavez Briddick
Costa Dilliard
Alejandro Perin
Jennifer Amigon
James Butt
Deepesh Chui
Sinclair Waycott
Morrow Ruta
Aika Inouye
Sinclair Waycott
Francesco Shinko
Rodrigues Campain
Misaki Royster
Tony Foller
Johnson Sergi
Jennifer Amigon
Emily Whobrey
David Darakjy
Jennifer Amigon
Darci Poquette
Izzy Garufi
David Darakjy
Adams Morasca
Cody Saylors
Sinclair Waycott
Kaitlin Ostrosky
Juan Wieser
Tony Foller
Alejandro Perin
Morrow Ruta
Kaitlin Ostrosky
Ricardo Gaucho
James Butt
Leja Caldarera
Arvin Albares
Misaki Royster
Stacey Maclead
Misaki Royster
Jeanfrancois Venere
Deepesh Chui
Silvio Slusarski
Arvin Albares
Aditya Kusko
Kadeem Flosi
Smith Glick
Kaitlin Ostrosky
IdCountryDate
1000Argentina2025-08-08
1001Brazil2025-08-11
1002Canada2025-08-07
1003Spain2025-08-06
1004Brazil2025-07-27
1005Japan2025-07-24
1006France2025-08-01
1007United Kingdom2025-07-28
1008Germany2025-08-10
1009Canada2025-08-07
1010Germany2025-07-20
1011Russia2025-08-10
1012Italy2025-07-24
1013France2025-07-22
1014Brazil2025-07-21
1015Australia2025-07-15
1016Australia2025-07-26
1017Japan2025-08-07
1018Argentina2025-07-31
1019Australia2025-07-29
1020Germany2025-08-07
1021Italy2025-07-16
1022Brazil2025-07-23
1023Spain2025-07-19
1024France2025-07-14
1025Brazil2025-07-20
1026India2025-08-03
1027Spain2025-08-12
1028Japan2025-08-06
1029Spain2025-08-01
1030Japan2025-08-08
1031Germany2025-08-05
1032Argentina2025-08-06
1033Brazil2025-08-06
1034Japan2025-08-12
1035Germany2025-08-11
1036Canada2025-07-14
1037Argentina2025-07-27
1038Spain2025-08-05
1039Brazil2025-07-17
1040France2025-08-04
1041Brazil2025-07-21
1042Spain2025-07-26
1043Japan2025-07-22
1044United Kingdom2025-08-01
1045Argentina2025-07-16
1046Spain2025-07-26
1047India2025-08-08
1048India2025-07-17
1049India2025-07-27

On-Demand Data

NameIdCountryDate
Ashley Doe1000India2025-07-29
Faith Gillian1001Canada2025-08-04
Cody Saylors1002Germany2025-08-06
Alejandro Perin1003Japan2025-07-18
Julie Stenseth1004Russia2025-08-03
Silvio Slusarski1005Italy2025-08-12
Darci Poquette1006Argentina2025-08-05
Nicolas Iturbide1007Russia2025-08-03
Rodrigues Campain1008Canada2025-07-17
Mujtaba Nicka1009Italy2025-07-20
Munro Ferencz1010Russia2025-07-31
Leja Caldarera1011Brazil2025-08-07
Rodrigues Campain1012Canada2025-07-21
Costa Dilliard1013Argentina2025-07-16
Aruna Figeroa1014Canada2025-07-30
Arvin Albares1015Italy2025-08-02
Leon Oldroyd1016Argentina2025-07-20
Adams Morasca1017United Kingdom2025-08-11
Claire Tollner1018Italy2025-07-27
Aruna Figeroa1019Russia2025-08-01
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Silvio SlusarskiGermanyXuxue Feng PROPOSAL
Ricardo GauchoGermanyAnna Fali UNQUALIFIED
Jefferson SchemmerIndiaStephen Shaw NEGOTIATION
James ButtCanadaOnyama Limba NEW
Adams MorascaGermanyOnyama Limba RENEWAL
Deepesh ChuiAustraliaOnyama Limba RENEWAL
Juan WieserItalyIoni Bowcher NEGOTIATION
Leon OldroydItalyXuxue Feng QUALIFIED
Maria MarrierJapanAnna Fali QUALIFIED
Smith GlickCanadaXuxue Feng PROPOSAL
Nicolas IturbideJapanOnyama Limba RENEWAL
Isabel BowleyItalyAsiya Javayant QUALIFIED
Faith GillianRussiaIoni Bowcher NEW
Alejandro PerinItalyIoni Bowcher NEW
Morrow RutaJapanElwin Sharvill NEGOTIATION
Maria MarrierRussiaAnna Fali NEGOTIATION
Ashley DoeUnited KingdomXuxue Feng QUALIFIED
Aditya KuskoCanadaIvan Magalhaes NEW
Deepesh ChuiCanadaXuxue Feng NEGOTIATION
Adams MorascaSpainOnyama Limba PROPOSAL
Jones VocelkaAustraliaIoni Bowcher QUALIFIED
Aditya KuskoArgentinaIvan Magalhaes PROPOSAL
Nicolas IturbideIndiaIvan Magalhaes QUALIFIED
Clifford RimIndiaAmy Elsner QUALIFIED
Nicolas IturbideJapanAsiya Javayant NEGOTIATION
Leon OldroydCanadaAsiya Javayant PROPOSAL
Nicolas IturbideFranceXuxue Feng PROPOSAL
Julie StensethAustraliaIoni Bowcher QUALIFIED
Julie StensethSpainIvan Magalhaes RENEWAL
Jefferson SchemmerAustraliaAsiya Javayant NEGOTIATION
David DarakjyFranceOnyama Limba RENEWAL
Faith GillianJapanIoni Bowcher PROPOSAL
Costa DilliardSpainBernardo Dominic NEW
Johnson SergiGermanyIoni Bowcher PROPOSAL
Leja CaldareraSpainOnyama Limba QUALIFIED
Ivar PaprockiItalyIvan Magalhaes PROPOSAL
Kadeem FlosiIndiaAmy Elsner QUALIFIED
Leon OldroydJapanAmy Elsner UNQUALIFIED
Munro FerenczAustraliaAmy Elsner UNQUALIFIED
Kadeem FlosiJapanIvan Magalhaes UNQUALIFIED

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