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
Arvin AlbaresRussiaIvan Magalhaes NEW
Juan WieserFranceElwin Sharvill PROPOSAL
Emily WhobreyRussiaOnyama Limba QUALIFIED
Juan WieserItalyAnna Fali RENEWAL
Kaitlin OstroskyFranceElwin Sharvill NEW
Aditya KuskoIndiaAnna Fali NEW
Stacey MacleadBrazilAsiya Javayant RENEWAL
Tony FollerArgentinaIvan Magalhaes RENEWAL
Tony FollerRussiaAmy Elsner PROPOSAL
Costa DilliardGermanyIvan Magalhaes RENEWAL
Leon OldroydFranceIoni Bowcher UNQUALIFIED
Johnson SergiCanadaAmy Elsner QUALIFIED
Emily WhobreyAustraliaOnyama Limba PROPOSAL
Leon OldroydBrazilBernardo Dominic PROPOSAL
Aditya KuskoSpainIoni Bowcher RENEWAL
Stacey MacleadFranceXuxue Feng NEGOTIATION
Munro FerenczFranceBernardo Dominic RENEWAL
Emily WhobreyFranceIoni Bowcher NEW
Sinclair WaycottCanadaIoni Bowcher UNQUALIFIED
Izzy GarufiRussiaOnyama Limba UNQUALIFIED
Jefferson SchemmerJapanIvan Magalhaes UNQUALIFIED
Arvin AlbaresJapanStephen Shaw QUALIFIED
Ricardo GauchoJapanStephen Shaw UNQUALIFIED
Salvatore StockhamGermanyAsiya Javayant PROPOSAL
Sinclair WaycottBrazilStephen Shaw RENEWAL
Aika InouyeUnited KingdomXuxue Feng NEGOTIATION
Rodrigues CampainItalyXuxue Feng NEGOTIATION
Julie StensethJapanStephen Shaw PROPOSAL
Faith GillianGermanyAnna Fali NEW
Jeanfrancois VenereCanadaElwin Sharvill NEGOTIATION
Jones VocelkaFranceAnna Fali RENEWAL
Maria MarrierSpainElwin Sharvill UNQUALIFIED
Maria MarrierItalyAsiya Javayant RENEWAL
Silvio SlusarskiFranceElwin Sharvill NEW
Arvin AlbaresGermanyAsiya Javayant PROPOSAL
Aika InouyeAustraliaBernardo Dominic UNQUALIFIED
Salvatore StockhamSpainXuxue Feng NEW
Greenwood BologniaCanadaXuxue Feng NEW
Jennifer AmigonGermanyXuxue Feng PROPOSAL
Wickens NestleItalyIoni Bowcher RENEWAL
Octavia MaletRussiaBernardo Dominic NEGOTIATION
Greenwood BologniaFranceIoni Bowcher PROPOSAL
Misaki RoysterCanadaXuxue Feng UNQUALIFIED
Murillo MaletBrazilOnyama Limba UNQUALIFIED
Jones VocelkaArgentinaBernardo Dominic UNQUALIFIED
Claire TollnerUnited KingdomIoni Bowcher PROPOSAL
Clifford RimUnited KingdomIvan Magalhaes RENEWAL
Rodrigues CampainFranceOnyama Limba RENEWAL
Murillo MaletItalyBernardo Dominic QUALIFIED
Jones VocelkaItalyIoni Bowcher QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Munro FerenczFranceAnna Fali QUALIFIED
Faith GillianFranceAnna Fali QUALIFIED
Costa DilliardArgentinaOnyama Limba NEGOTIATION
Ivar PaprockiIndiaXuxue Feng QUALIFIED
Silvio SlusarskiCanadaXuxue Feng RENEWAL
Mayumi KolmetzItalyBernardo Dominic UNQUALIFIED
Alejandro PerinItalyElwin Sharvill UNQUALIFIED
Alejandro PerinJapanBernardo Dominic NEGOTIATION
Julie StensethArgentinaAmy Elsner PROPOSAL
Maria MarrierItalyIvan Magalhaes RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Stacey MacleadGermany2026-05-24Buckley Miller Wright NEGOTIATION4Onyama Limba
1001Izzy GarufiItaly2026-05-31Buckley Miller Wright NEGOTIATION50Bernardo Dominic
1002Munro FerenczArgentina2026-06-10Feltz Printing Service NEGOTIATION21Amy Elsner
1003Maisha RulapaughBrazil2026-05-20Chemel, James L Cpa NEW84Stephen Shaw
1004Adams MorascaRussia2026-06-05Commercial Press RENEWAL88Stephen Shaw
1005Juan WieserArgentina2026-06-05Commercial Press PROPOSAL83Anna Fali
1006Leon OldroydSpain2026-06-11Chemel, James L Cpa NEGOTIATION45Asiya Javayant
1007Alejandro PerinBrazil2026-05-18Chanay, Jeffrey A Esq NEGOTIATION58Bernardo Dominic
1008Ricardo GauchoCanada2026-05-24Dorl, James J Esq PROPOSAL67Xuxue Feng
1009Kaitlin OstroskyRussia2026-05-31Commercial Press NEW16Onyama Limba
1010Sinclair WaycottRussia2026-05-26Chemel, James L Cpa UNQUALIFIED67Asiya Javayant
1011Maisha RulapaughBrazil2026-06-05Printing Dimensions PROPOSAL39Ioni Bowcher
1012Isabel BowleyUnited Kingdom2026-06-10Dorl, James J Esq QUALIFIED6Xuxue Feng
1013Ricardo GauchoIndia2026-05-26Buckley Miller Wright UNQUALIFIED7Amy Elsner
1014Claire TollnerArgentina2026-05-17Printing Dimensions RENEWAL45Asiya Javayant
1015Ricardo GauchoJapan2026-05-19Rousseaux, Michael Esq NEGOTIATION99Elwin Sharvill
1016Francesco ShinkoBrazil2026-06-14Feltz Printing Service UNQUALIFIED34Onyama Limba
1017Maisha RulapaughAustralia2026-05-28Truhlar And Truhlar Attys RENEWAL69Elwin Sharvill
1018Kadeem FlosiAustralia2026-06-13Rangoni Of Florence NEGOTIATION2Amy Elsner
1019Leja CaldareraGermany2026-06-13Feltz Printing Service PROPOSAL68Asiya Javayant
1020Maisha RulapaughGermany2026-06-04Benton, John B Jr PROPOSAL62Elwin Sharvill
1021Sinclair WaycottAustralia2026-06-02King, Christopher A Esq UNQUALIFIED19Amy Elsner
1022Darci PoquetteFrance2026-05-31Chemel, James L Cpa PROPOSAL96Elwin Sharvill
1023Ivar PaprockiRussia2026-05-31Chanay, Jeffrey A Esq UNQUALIFIED62Amy Elsner
1024Arvin AlbaresSpain2026-05-28Rousseaux, Michael Esq QUALIFIED99Stephen Shaw
1025Nicolas IturbideGermany2026-05-20Printing Dimensions QUALIFIED14Bernardo Dominic
1026Isabel BowleyUnited Kingdom2026-05-26Chemel, James L Cpa NEW93Onyama Limba
1027Clifford RimSpain2026-05-31Truhlar And Truhlar Attys NEGOTIATION6Bernardo Dominic
1028Ashley DoeSpain2026-06-01King, Christopher A Esq PROPOSAL45Ivan Magalhaes
1029Isabel BowleyRussia2026-05-23Benton, John B Jr NEW73Ioni Bowcher
1030Jones VocelkaJapan2026-06-09Buckley Miller Wright UNQUALIFIED0Ivan Magalhaes
1031Costa DilliardIndia2026-06-02Feiner Bros QUALIFIED37Anna Fali
1032Ashley DoeSpain2026-05-31Dorl, James J Esq QUALIFIED80Ioni Bowcher
1033Greenwood BologniaFrance2026-06-10Commercial Press UNQUALIFIED2Asiya Javayant
1034James ButtJapan2026-06-05Commercial Press RENEWAL98Ivan Magalhaes
1035Leja CaldareraAustralia2026-06-08King, Christopher A Esq PROPOSAL46Anna Fali
1036Johnson SergiBrazil2026-05-31Commercial Press QUALIFIED76Amy Elsner
1037Jefferson SchemmerIndia2026-05-20Truhlar And Truhlar Attys RENEWAL33Xuxue Feng
1038Greenwood BologniaJapan2026-06-11Rousseaux, Michael Esq NEGOTIATION2Bernardo Dominic
1039David DarakjyArgentina2026-06-03Chanay, Jeffrey A Esq UNQUALIFIED97Ioni Bowcher
1040Mujtaba NickaJapan2026-05-28Chemel, James L Cpa NEW96Asiya Javayant
1041Isabel BowleyBrazil2026-05-18Commercial Press NEGOTIATION63Xuxue Feng
1042Leja CaldareraRussia2026-05-29King, Christopher A Esq NEW42Bernardo Dominic
1043Antonio CaudyFrance2026-05-27Benton, John B Jr NEGOTIATION29Asiya Javayant
1044Tony FollerRussia2026-05-18Rousseaux, Michael Esq QUALIFIED26Stephen Shaw
1045Stacey MacleadIndia2026-05-20Rangoni Of Florence PROPOSAL51Ivan Magalhaes
1046Julie StensethBrazil2026-06-05Feiner Bros PROPOSAL73Ioni Bowcher
1047Chavez BriddickCanada2026-06-04Rangoni Of Florence PROPOSAL50Elwin Sharvill
1048Jeanfrancois VenereCanada2026-05-19Dorl, James J Esq NEW79Xuxue Feng
1049Leon OldroydRussia2026-05-31Rousseaux, Michael Esq NEGOTIATION14Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Chavez BriddickIndiaElwin Sharvill UNQUALIFIED
Jeanfrancois VenereGermanyIoni Bowcher UNQUALIFIED
Kadeem FlosiFranceIvan Magalhaes RENEWAL
Aika InouyeJapanAsiya Javayant UNQUALIFIED
James ButtGermanyOnyama Limba NEGOTIATION
Clifford RimCanadaStephen Shaw PROPOSAL
Mayumi KolmetzRussiaElwin Sharvill NEW
Isabel BowleyJapanIvan Magalhaes PROPOSAL
Jeanfrancois VenereBrazilOnyama Limba QUALIFIED
Maisha RulapaughUnited KingdomXuxue Feng UNQUALIFIED
Johnson SergiAustraliaAnna Fali RENEWAL
Adams MorascaRussiaIoni Bowcher NEGOTIATION
Morrow RutaGermanyAnna Fali NEW
Misaki RoysterBrazilIvan Magalhaes PROPOSAL
Maisha RulapaughItalyStephen Shaw NEW
Adams MorascaCanadaAnna Fali QUALIFIED
Johnson SergiJapanIoni Bowcher NEW
Greenwood BologniaGermanyAsiya Javayant PROPOSAL
Claire TollnerAustraliaAnna Fali NEGOTIATION
Salvatore StockhamAustraliaAmy Elsner UNQUALIFIED
Tony FollerJapanIvan Magalhaes UNQUALIFIED
Maisha RulapaughSpainXuxue Feng NEGOTIATION
Costa DilliardRussiaAmy Elsner RENEWAL
Cody SaylorsJapanIoni Bowcher QUALIFIED
Octavia MaletRussiaAmy Elsner NEGOTIATION
Silvio SlusarskiBrazilAmy Elsner QUALIFIED
Jeanfrancois VenereAustraliaIoni Bowcher NEW
Julie StensethIndiaElwin Sharvill PROPOSAL
Adams MorascaFranceIoni Bowcher NEW
Misaki RoysterArgentinaOnyama Limba UNQUALIFIED
Kadeem FlosiArgentinaAmy Elsner UNQUALIFIED
Ashley DoeGermanyAsiya Javayant PROPOSAL
James ButtJapanIoni Bowcher UNQUALIFIED
Costa DilliardFranceIoni Bowcher NEW
Julie StensethItalyOnyama Limba QUALIFIED
Emily WhobreyItalyAsiya Javayant QUALIFIED
Rodrigues CampainItalyElwin Sharvill UNQUALIFIED
Jones VocelkaBrazilStephen Shaw UNQUALIFIED
Salvatore StockhamAustraliaAmy Elsner QUALIFIED
Jeanfrancois VenereCanadaElwin Sharvill NEGOTIATION
Maisha RulapaughBrazilXuxue Feng NEGOTIATION
Jones VocelkaUnited KingdomIoni Bowcher RENEWAL
Johnson SergiJapanElwin Sharvill UNQUALIFIED
Sinclair WaycottJapanAnna Fali QUALIFIED
Deepesh ChuiUnited KingdomXuxue Feng UNQUALIFIED
Aika InouyeCanadaIoni Bowcher QUALIFIED
Juan WieserFranceStephen Shaw PROPOSAL
Salvatore StockhamRussiaOnyama Limba QUALIFIED
Costa DilliardArgentinaOnyama Limba UNQUALIFIED
Kaitlin OstroskyItalyAnna Fali NEW
Frozen Columns
Name
Clifford Rim
Darci Poquette
Salvatore Stockham
Antonio Caudy
Sinclair Waycott
Clifford Rim
Jeanfrancois Venere
Munro Ferencz
Maisha Rulapaugh
Darci Poquette
Silvio Slusarski
Leon Oldroyd
Mujtaba Nicka
Murillo Malet
Claire Tollner
Alejandro Perin
Leon Oldroyd
Julie Stenseth
Costa Dilliard
Aditya Kusko
Wickens Nestle
Izzy Garufi
Jones Vocelka
Costa Dilliard
Darci Poquette
Jennifer Amigon
Jones Vocelka
Kadeem Flosi
Faith Gillian
Arvin Albares
Antonio Caudy
Jennifer Amigon
Mujtaba Nicka
Stacey Maclead
Kaitlin Ostrosky
Darci Poquette
Jennifer Amigon
Jones Vocelka
Claire Tollner
Ivar Paprocki
Francesco Shinko
Jeanfrancois Venere
Cody Saylors
Silvio Slusarski
Mujtaba Nicka
Aditya Kusko
Alejandro Perin
Francesco Shinko
Kadeem Flosi
Smith Glick
IdCountryDate
1000Brazil2026-05-24
1001Brazil2026-06-10
1002Australia2026-06-10
1003Argentina2026-05-30
1004Spain2026-06-13
1005Canada2026-05-31
1006India2026-05-23
1007Spain2026-05-21
1008United Kingdom2026-05-25
1009Brazil2026-05-27
1010Brazil2026-06-08
1011India2026-06-05
1012Canada2026-06-02
1013Italy2026-06-14
1014United Kingdom2026-06-13
1015France2026-06-09
1016Spain2026-06-02
1017Argentina2026-06-01
1018Australia2026-05-23
1019Australia2026-05-23
1020Spain2026-05-22
1021Argentina2026-05-24
1022Brazil2026-05-16
1023Germany2026-05-30
1024United Kingdom2026-06-14
1025United Kingdom2026-06-03
1026India2026-06-14
1027Australia2026-05-17
1028Japan2026-05-19
1029Brazil2026-05-31
1030Italy2026-05-23
1031France2026-06-05
1032Spain2026-06-07
1033India2026-05-24
1034Brazil2026-06-12
1035Australia2026-06-09
1036Italy2026-05-26
1037France2026-05-19
1038Spain2026-05-21
1039Spain2026-06-08
1040India2026-06-14
1041Brazil2026-05-19
1042Germany2026-06-04
1043Spain2026-06-07
1044France2026-06-05
1045Argentina2026-06-09
1046Russia2026-06-14
1047Russia2026-06-10
1048Japan2026-05-21
1049Italy2026-05-21

On-Demand Data

NameIdCountryDate
Jennifer Amigon1000United Kingdom2026-06-07
Jefferson Schemmer1001Germany2026-06-01
Ashley Doe1002France2026-05-19
Cody Saylors1003Italy2026-05-20
Aditya Kusko1004Canada2026-06-03
Munro Ferencz1005Canada2026-06-02
Murillo Malet1006France2026-05-19
Jennifer Amigon1007Russia2026-05-27
Arvin Albares1008Italy2026-05-25
Mujtaba Nicka1009Brazil2026-05-16
Mayumi Kolmetz1010Argentina2026-06-11
Clifford Rim1011Japan2026-06-10
Claire Tollner1012Brazil2026-05-20
Cody Saylors1013Argentina2026-05-19
Faith Gillian1014Japan2026-05-23
Chavez Briddick1015Canada2026-06-06
Darci Poquette1016Russia2026-05-28
David Darakjy1017Brazil2026-05-18
Tony Foller1018Germany2026-05-28
Octavia Malet1019Brazil2026-06-01
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Rodrigues CampainIndiaIvan Magalhaes RENEWAL
Smith GlickFranceBernardo Dominic QUALIFIED
Rodrigues CampainJapanStephen Shaw RENEWAL
Aruna FigeroaUnited KingdomAsiya Javayant NEW
Aditya KuskoUnited KingdomIoni Bowcher RENEWAL
Francesco ShinkoFranceAsiya Javayant UNQUALIFIED
Jefferson SchemmerSpainAnna Fali UNQUALIFIED
Morrow RutaBrazilBernardo Dominic NEW
Tony FollerRussiaBernardo Dominic NEW
Antonio CaudyFranceElwin Sharvill NEW
Tony FollerArgentinaXuxue Feng UNQUALIFIED
Jeanfrancois VenereArgentinaElwin Sharvill PROPOSAL
Sinclair WaycottSpainBernardo Dominic NEGOTIATION
Isabel BowleyUnited KingdomStephen Shaw QUALIFIED
Cody SaylorsArgentinaElwin Sharvill QUALIFIED
Octavia MaletRussiaAnna Fali PROPOSAL
Maria MarrierSpainOnyama Limba PROPOSAL
Mayumi KolmetzUnited KingdomAsiya Javayant QUALIFIED
Johnson SergiArgentinaAsiya Javayant QUALIFIED
Jefferson SchemmerArgentinaAmy Elsner NEW
Stacey MacleadCanadaStephen Shaw NEGOTIATION
Cody SaylorsRussiaAmy Elsner UNQUALIFIED
Ricardo GauchoItalyIvan Magalhaes NEGOTIATION
Maria MarrierAustraliaIvan Magalhaes PROPOSAL
Nicolas IturbideRussiaXuxue Feng PROPOSAL
Greenwood BologniaBrazilIvan Magalhaes QUALIFIED
Adams MorascaSpainAsiya Javayant NEW
Mayumi KolmetzItalyElwin Sharvill NEGOTIATION
Aruna FigeroaBrazilBernardo Dominic QUALIFIED
Smith GlickIndiaStephen Shaw QUALIFIED
Wickens NestleItalyStephen Shaw PROPOSAL
James ButtAustraliaElwin Sharvill PROPOSAL
Alejandro PerinAustraliaIoni Bowcher NEW
Darci PoquetteRussiaAmy Elsner RENEWAL
Adams MorascaGermanyAmy Elsner UNQUALIFIED
Greenwood BologniaJapanAnna Fali NEGOTIATION
Maria MarrierUnited KingdomElwin Sharvill QUALIFIED
Isabel BowleyIndiaIvan Magalhaes PROPOSAL
James ButtFranceOnyama Limba QUALIFIED
Jones VocelkaArgentinaIoni Bowcher NEGOTIATION

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