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
Jeanfrancois VenereItalyAsiya Javayant NEW
Kadeem FlosiArgentinaElwin Sharvill RENEWAL
Rodrigues CampainSpainAsiya Javayant RENEWAL
Mayumi KolmetzItalyElwin Sharvill UNQUALIFIED
Cody SaylorsIndiaXuxue Feng RENEWAL
Cody SaylorsArgentinaXuxue Feng NEGOTIATION
Smith GlickJapanIvan Magalhaes UNQUALIFIED
Julie StensethAustraliaAnna Fali NEGOTIATION
Deepesh ChuiSpainOnyama Limba NEW
Tony FollerSpainAmy Elsner UNQUALIFIED
Clifford RimFranceIvan Magalhaes RENEWAL
Claire TollnerGermanyStephen Shaw QUALIFIED
Jennifer AmigonSpainXuxue Feng QUALIFIED
Aditya KuskoItalyOnyama Limba NEW
Kaitlin OstroskyJapanXuxue Feng NEW
Jeanfrancois VenereBrazilAmy Elsner UNQUALIFIED
Deepesh ChuiJapanOnyama Limba QUALIFIED
Francesco ShinkoSpainIvan Magalhaes QUALIFIED
Morrow RutaFranceBernardo Dominic RENEWAL
Costa DilliardArgentinaXuxue Feng NEGOTIATION
Antonio CaudyIndiaAmy Elsner QUALIFIED
Aika InouyeSpainIvan Magalhaes PROPOSAL
Juan WieserArgentinaOnyama Limba NEGOTIATION
Leja CaldareraFranceIoni Bowcher NEW
Wickens NestleFranceOnyama Limba UNQUALIFIED
Sinclair WaycottRussiaIoni Bowcher NEW
Nicolas IturbideIndiaElwin Sharvill NEGOTIATION
Smith GlickIndiaAsiya Javayant NEGOTIATION
Aruna FigeroaUnited KingdomBernardo Dominic UNQUALIFIED
Maria MarrierGermanyBernardo Dominic NEGOTIATION
Cody SaylorsIndiaIoni Bowcher NEW
Arvin AlbaresCanadaAsiya Javayant NEGOTIATION
Kadeem FlosiCanadaIoni Bowcher UNQUALIFIED
Adams MorascaSpainBernardo Dominic RENEWAL
Greenwood BologniaAustraliaAsiya Javayant NEW
Maisha RulapaughCanadaAnna Fali UNQUALIFIED
Smith GlickArgentinaBernardo Dominic PROPOSAL
Claire TollnerAustraliaIoni Bowcher NEGOTIATION
Aditya KuskoCanadaAnna Fali NEW
Darci PoquetteGermanyAnna Fali NEGOTIATION
Deepesh ChuiFranceIoni Bowcher PROPOSAL
Maria MarrierGermanyXuxue Feng PROPOSAL
Aruna FigeroaJapanElwin Sharvill NEW
Costa DilliardItalyIoni Bowcher UNQUALIFIED
Maisha RulapaughJapanAmy Elsner PROPOSAL
Alejandro PerinCanadaBernardo Dominic UNQUALIFIED
Silvio SlusarskiSpainOnyama Limba NEW
Leja CaldareraArgentinaElwin Sharvill UNQUALIFIED
James ButtCanadaXuxue Feng NEW
Aika InouyeArgentinaStephen Shaw QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Rodrigues CampainAustraliaAnna Fali NEW
Nicolas IturbideRussiaStephen Shaw RENEWAL
Tony FollerIndiaStephen Shaw PROPOSAL
Darci PoquetteGermanyAnna Fali NEGOTIATION
Kadeem FlosiArgentinaBernardo Dominic UNQUALIFIED
Aruna FigeroaGermanyStephen Shaw RENEWAL
Murillo MaletGermanyIvan Magalhaes NEW
Jeanfrancois VenereIndiaAsiya Javayant QUALIFIED
Kaitlin OstroskySpainAmy Elsner NEGOTIATION
Emily WhobreyIndiaAnna Fali UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Arvin AlbaresAustralia2025-08-04Benton, John B Jr PROPOSAL63Elwin Sharvill
1001Jeanfrancois VenereUnited Kingdom2025-08-15Chapman, Ross E Esq NEGOTIATION64Onyama Limba
1002Salvatore StockhamArgentina2025-07-24Feiner Bros UNQUALIFIED82Anna Fali
1003Rodrigues CampainFrance2025-08-08Feiner Bros UNQUALIFIED92Stephen Shaw
1004Kadeem FlosiArgentina2025-08-20Chapman, Ross E Esq PROPOSAL77Stephen Shaw
1005Claire TollnerBrazil2025-07-29Printing Dimensions NEW26Stephen Shaw
1006Maria MarrierJapan2025-08-02Morlong Associates NEW59Elwin Sharvill
1007Tony FollerBrazil2025-07-25Feltz Printing Service UNQUALIFIED18Anna Fali
1008Mayumi KolmetzCanada2025-07-22Chemel, James L Cpa PROPOSAL91Amy Elsner
1009Stacey MacleadCanada2025-08-20Commercial Press NEW48Ioni Bowcher
1010Nicolas IturbideFrance2025-07-24Feiner Bros PROPOSAL37Xuxue Feng
1011Cody SaylorsRussia2025-08-07Chapman, Ross E Esq RENEWAL3Ivan Magalhaes
1012Jennifer AmigonRussia2025-08-17Truhlar And Truhlar Attys NEW69Elwin Sharvill
1013Ashley DoeJapan2025-08-01Morlong Associates QUALIFIED99Elwin Sharvill
1014Maria MarrierBrazil2025-07-28Morlong Associates NEW63Bernardo Dominic
1015Jeanfrancois VenereAustralia2025-08-07Feltz Printing Service NEW2Amy Elsner
1016Maria MarrierItaly2025-07-28Rousseaux, Michael Esq NEGOTIATION11Stephen Shaw
1017Smith GlickCanada2025-08-07Commercial Press QUALIFIED87Xuxue Feng
1018Arvin AlbaresJapan2025-07-29Rangoni Of Florence NEGOTIATION82Amy Elsner
1019Sinclair WaycottIndia2025-08-03Printing Dimensions NEW31Ivan Magalhaes
1020Morrow RutaJapan2025-07-29Benton, John B Jr NEGOTIATION97Onyama Limba
1021Alejandro PerinGermany2025-08-06Rangoni Of Florence RENEWAL78Xuxue Feng
1022Munro FerenczIndia2025-08-17King, Christopher A Esq NEW16Onyama Limba
1023Mayumi KolmetzUnited Kingdom2025-07-28King, Christopher A Esq PROPOSAL82Ivan Magalhaes
1024Cody SaylorsBrazil2025-07-31Dorl, James J Esq RENEWAL20Xuxue Feng
1025Adams MorascaRussia2025-07-22King, Christopher A Esq NEGOTIATION11Asiya Javayant
1026Arvin AlbaresJapan2025-07-29Dorl, James J Esq PROPOSAL39Stephen Shaw
1027Francesco ShinkoCanada2025-07-30Rousseaux, Michael Esq UNQUALIFIED14Ioni Bowcher
1028Darci PoquetteCanada2025-08-01Truhlar And Truhlar Attys PROPOSAL78Amy Elsner
1029Smith GlickAustralia2025-08-20Feltz Printing Service QUALIFIED43Onyama Limba
1030Isabel BowleyGermany2025-08-05Feltz Printing Service NEW80Elwin Sharvill
1031Alejandro PerinCanada2025-08-14Dorl, James J Esq UNQUALIFIED49Amy Elsner
1032Clifford RimArgentina2025-07-29Chemel, James L Cpa NEW1Asiya Javayant
1033Isabel BowleySpain2025-08-12Printing Dimensions RENEWAL26Anna Fali
1034Antonio CaudyRussia2025-08-03Chanay, Jeffrey A Esq NEW18Bernardo Dominic
1035Jefferson SchemmerItaly2025-08-07Truhlar And Truhlar Attys UNQUALIFIED14Ivan Magalhaes
1036Murillo MaletRussia2025-07-31Benton, John B Jr RENEWAL71Ivan Magalhaes
1037Wickens NestleAustralia2025-08-19Benton, John B Jr QUALIFIED76Xuxue Feng
1038Morrow RutaGermany2025-08-08Chemel, James L Cpa QUALIFIED23Stephen Shaw
1039Maisha RulapaughFrance2025-08-18Morlong Associates QUALIFIED86Onyama Limba
1040Ricardo GauchoCanada2025-07-29Rangoni Of Florence QUALIFIED7Ioni Bowcher
1041Tony FollerCanada2025-08-14King, Christopher A Esq RENEWAL96Onyama Limba
1042Misaki RoysterBrazil2025-08-18Feltz Printing Service NEW20Anna Fali
1043Darci PoquetteCanada2025-07-27Buckley Miller Wright UNQUALIFIED53Elwin Sharvill
1044Smith GlickBrazil2025-08-20Feiner Bros RENEWAL19Amy Elsner
1045Leja CaldareraRussia2025-08-04Rangoni Of Florence QUALIFIED20Stephen Shaw
1046Kaitlin OstroskyBrazil2025-08-02Feiner Bros RENEWAL8Stephen Shaw
1047Izzy GarufiArgentina2025-08-15Truhlar And Truhlar Attys UNQUALIFIED17Ioni Bowcher
1048Jennifer AmigonBrazil2025-08-17Buckley Miller Wright QUALIFIED3Onyama Limba
1049Morrow RutaAustralia2025-07-29Feltz Printing Service PROPOSAL59Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Faith GillianCanadaOnyama Limba NEGOTIATION
Tony FollerGermanyAnna Fali UNQUALIFIED
Stacey MacleadArgentinaIvan Magalhaes UNQUALIFIED
Octavia MaletFranceAnna Fali NEGOTIATION
Leon OldroydUnited KingdomBernardo Dominic RENEWAL
Aruna FigeroaAustraliaAsiya Javayant PROPOSAL
Francesco ShinkoItalyIvan Magalhaes RENEWAL
Jennifer AmigonJapanAsiya Javayant NEGOTIATION
Octavia MaletGermanyElwin Sharvill PROPOSAL
David DarakjyGermanyIvan Magalhaes NEGOTIATION
Greenwood BologniaJapanIoni Bowcher QUALIFIED
Jefferson SchemmerUnited KingdomOnyama Limba RENEWAL
Misaki RoysterBrazilAnna Fali QUALIFIED
Jefferson SchemmerBrazilAmy Elsner UNQUALIFIED
Kadeem FlosiArgentinaAmy Elsner PROPOSAL
Jeanfrancois VenereArgentinaXuxue Feng NEGOTIATION
Chavez BriddickAustraliaBernardo Dominic NEW
Darci PoquetteItalyAsiya Javayant RENEWAL
Maisha RulapaughJapanBernardo Dominic NEW
Izzy GarufiJapanBernardo Dominic NEGOTIATION
Kadeem FlosiCanadaXuxue Feng NEW
Izzy GarufiJapanIoni Bowcher PROPOSAL
Mujtaba NickaSpainElwin Sharvill QUALIFIED
Arvin AlbaresFranceOnyama Limba QUALIFIED
Jeanfrancois VenereItalyStephen Shaw RENEWAL
Leon OldroydGermanyOnyama Limba RENEWAL
Wickens NestleJapanIvan Magalhaes RENEWAL
Mayumi KolmetzJapanIoni Bowcher UNQUALIFIED
Mayumi KolmetzSpainOnyama Limba NEGOTIATION
Sinclair WaycottBrazilIoni Bowcher UNQUALIFIED
Octavia MaletRussiaIvan Magalhaes QUALIFIED
Ricardo GauchoGermanyIoni Bowcher PROPOSAL
Maria MarrierBrazilStephen Shaw RENEWAL
Alejandro PerinAustraliaAnna Fali QUALIFIED
Antonio CaudyArgentinaIvan Magalhaes RENEWAL
Maisha RulapaughIndiaXuxue Feng NEGOTIATION
Cody SaylorsSpainOnyama Limba QUALIFIED
Aruna FigeroaSpainIvan Magalhaes RENEWAL
Alejandro PerinBrazilAnna Fali UNQUALIFIED
Sinclair WaycottArgentinaIvan Magalhaes RENEWAL
David DarakjyAustraliaBernardo Dominic PROPOSAL
Murillo MaletJapanAmy Elsner NEGOTIATION
Ricardo GauchoJapanOnyama Limba NEW
Greenwood BologniaCanadaAnna Fali NEGOTIATION
Octavia MaletCanadaIoni Bowcher QUALIFIED
Mujtaba NickaJapanElwin Sharvill QUALIFIED
Leja CaldareraIndiaElwin Sharvill RENEWAL
Ricardo GauchoRussiaIoni Bowcher QUALIFIED
Murillo MaletFranceBernardo Dominic UNQUALIFIED
Emily WhobreyItalyIoni Bowcher RENEWAL
Frozen Columns
Name
David Darakjy
Greenwood Bolognia
Murillo Malet
Sinclair Waycott
Salvatore Stockham
Leja Caldarera
Faith Gillian
Silvio Slusarski
Emily Whobrey
Misaki Royster
Ricardo Gaucho
Leon Oldroyd
Kaitlin Ostrosky
Smith Glick
Isabel Bowley
Kadeem Flosi
Darci Poquette
Stacey Maclead
Leon Oldroyd
Nicolas Iturbide
Tony Foller
Murillo Malet
Mujtaba Nicka
Silvio Slusarski
Morrow Ruta
Jefferson Schemmer
Leon Oldroyd
Darci Poquette
Ivar Paprocki
Ivar Paprocki
Costa Dilliard
Izzy Garufi
Francesco Shinko
Juan Wieser
Morrow Ruta
Emily Whobrey
Maria Marrier
Greenwood Bolognia
Jennifer Amigon
Francesco Shinko
Isabel Bowley
Antonio Caudy
Alejandro Perin
Murillo Malet
Clifford Rim
Emily Whobrey
Aditya Kusko
Adams Morasca
Mayumi Kolmetz
Munro Ferencz
IdCountryDate
1000Argentina2025-08-19
1001Spain2025-08-15
1002Australia2025-07-27
1003Italy2025-08-11
1004United Kingdom2025-07-22
1005Russia2025-08-03
1006France2025-07-23
1007Russia2025-08-03
1008Germany2025-08-18
1009Brazil2025-08-03
1010Canada2025-08-06
1011Canada2025-08-03
1012France2025-08-11
1013Canada2025-08-19
1014Brazil2025-08-06
1015Australia2025-08-13
1016Australia2025-08-15
1017France2025-07-25
1018Australia2025-08-01
1019Argentina2025-08-02
1020Canada2025-07-23
1021Italy2025-07-26
1022Spain2025-08-07
1023Brazil2025-07-26
1024Russia2025-08-19
1025Canada2025-08-12
1026Russia2025-08-11
1027United Kingdom2025-07-27
1028Argentina2025-08-18
1029Brazil2025-08-12
1030United Kingdom2025-07-31
1031Japan2025-07-29
1032Canada2025-07-24
1033Canada2025-07-29
1034Russia2025-08-18
1035United Kingdom2025-08-16
1036Australia2025-07-31
1037Spain2025-07-22
1038India2025-08-08
1039United Kingdom2025-07-30
1040Argentina2025-08-10
1041Germany2025-08-03
1042Argentina2025-08-11
1043Argentina2025-08-04
1044Brazil2025-07-26
1045France2025-08-01
1046Argentina2025-08-20
1047Canada2025-08-20
1048France2025-08-14
1049Italy2025-08-04

On-Demand Data

NameIdCountryDate
Alejandro Perin1000Spain2025-07-24
Jennifer Amigon1001Japan2025-08-11
Leon Oldroyd1002Spain2025-08-14
Morrow Ruta1003Australia2025-08-17
Emily Whobrey1004United Kingdom2025-08-20
Francesco Shinko1005Argentina2025-07-28
Leja Caldarera1006Brazil2025-07-25
Maisha Rulapaugh1007Australia2025-08-10
Kaitlin Ostrosky1008India2025-08-17
Costa Dilliard1009Italy2025-07-29
Julie Stenseth1010Germany2025-08-15
Misaki Royster1011Italy2025-08-11
Julie Stenseth1012Russia2025-08-16
Julie Stenseth1013Spain2025-08-04
Clifford Rim1014Japan2025-08-17
Leja Caldarera1015United Kingdom2025-07-28
Sinclair Waycott1016Argentina2025-08-11
Murillo Malet1017Spain2025-08-10
Claire Tollner1018Russia2025-08-02
Maisha Rulapaugh1019Australia2025-07-24
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Mujtaba NickaBrazilIoni Bowcher UNQUALIFIED
Jefferson SchemmerSpainAnna Fali UNQUALIFIED
Leja CaldareraItalyXuxue Feng NEW
Alejandro PerinSpainOnyama Limba NEW
Stacey MacleadArgentinaStephen Shaw PROPOSAL
Claire TollnerGermanyIvan Magalhaes NEGOTIATION
Leon OldroydFranceAmy Elsner QUALIFIED
Emily WhobreyUnited KingdomXuxue Feng PROPOSAL
Leja CaldareraFranceIvan Magalhaes NEGOTIATION
Costa DilliardUnited KingdomIoni Bowcher QUALIFIED
Kaitlin OstroskyJapanAmy Elsner UNQUALIFIED
Silvio SlusarskiFranceIvan Magalhaes UNQUALIFIED
Claire TollnerArgentinaIvan Magalhaes UNQUALIFIED
Jeanfrancois VenereBrazilElwin Sharvill NEW
Smith GlickAustraliaXuxue Feng QUALIFIED
Morrow RutaFranceIvan Magalhaes RENEWAL
Cody SaylorsCanadaXuxue Feng NEW
Cody SaylorsAustraliaElwin Sharvill QUALIFIED
Leon OldroydJapanBernardo Dominic UNQUALIFIED
Jones VocelkaFranceAmy Elsner NEW
Munro FerenczItalyXuxue Feng NEGOTIATION
Jennifer AmigonGermanyAnna Fali QUALIFIED
Jefferson SchemmerUnited KingdomStephen Shaw RENEWAL
Isabel BowleyUnited KingdomXuxue Feng NEW
Aditya KuskoAustraliaOnyama Limba UNQUALIFIED
Smith GlickIndiaIoni Bowcher NEGOTIATION
Antonio CaudyItalyIoni Bowcher UNQUALIFIED
Leja CaldareraGermanyStephen Shaw NEW
Maisha RulapaughRussiaStephen Shaw NEW
Johnson SergiIndiaXuxue Feng NEW
Alejandro PerinArgentinaBernardo Dominic QUALIFIED
Clifford RimUnited KingdomIvan Magalhaes NEW
Deepesh ChuiFranceElwin Sharvill QUALIFIED
Jones VocelkaArgentinaIvan Magalhaes UNQUALIFIED
Maisha RulapaughCanadaStephen Shaw PROPOSAL
Aruna FigeroaBrazilXuxue Feng QUALIFIED
Isabel BowleyAustraliaIoni Bowcher NEW
Aika InouyeIndiaIvan Magalhaes NEW
Aditya KuskoItalyBernardo Dominic UNQUALIFIED
Aruna FigeroaAustraliaIoni Bowcher 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>