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
Julie StensethUnited KingdomElwin Sharvill UNQUALIFIED
Mayumi KolmetzSpainXuxue Feng NEGOTIATION
Silvio SlusarskiIndiaAmy Elsner NEGOTIATION
James ButtUnited KingdomAmy Elsner NEW
Izzy GarufiCanadaAnna Fali UNQUALIFIED
Juan WieserArgentinaXuxue Feng QUALIFIED
Silvio SlusarskiGermanyOnyama Limba UNQUALIFIED
Francesco ShinkoSpainXuxue Feng NEW
Francesco ShinkoAustraliaAmy Elsner QUALIFIED
Arvin AlbaresItalyAmy Elsner NEGOTIATION
Mayumi KolmetzBrazilElwin Sharvill UNQUALIFIED
Morrow RutaUnited KingdomElwin Sharvill PROPOSAL
Emily WhobreyGermanyStephen Shaw QUALIFIED
Francesco ShinkoArgentinaBernardo Dominic RENEWAL
Mayumi KolmetzBrazilAmy Elsner UNQUALIFIED
Aditya KuskoBrazilBernardo Dominic UNQUALIFIED
Octavia MaletItalyElwin Sharvill UNQUALIFIED
Misaki RoysterItalyXuxue Feng NEW
Octavia MaletArgentinaElwin Sharvill NEW
Kadeem FlosiIndiaXuxue Feng QUALIFIED
Jeanfrancois VenereSpainStephen Shaw PROPOSAL
Aditya KuskoArgentinaElwin Sharvill UNQUALIFIED
Faith GillianSpainElwin Sharvill QUALIFIED
Aika InouyeUnited KingdomAmy Elsner NEGOTIATION
Jeanfrancois VenereIndiaElwin Sharvill NEGOTIATION
Munro FerenczGermanyXuxue Feng UNQUALIFIED
Julie StensethUnited KingdomAnna Fali NEGOTIATION
Rodrigues CampainBrazilIoni Bowcher UNQUALIFIED
Wickens NestleCanadaIoni Bowcher QUALIFIED
Mujtaba NickaFranceIoni Bowcher UNQUALIFIED
Silvio SlusarskiJapanAmy Elsner RENEWAL
Aditya KuskoGermanyElwin Sharvill NEW
Johnson SergiGermanyIoni Bowcher UNQUALIFIED
Smith GlickSpainAmy Elsner NEGOTIATION
Isabel BowleySpainAmy Elsner RENEWAL
Darci PoquetteAustraliaAmy Elsner RENEWAL
Misaki RoysterItalyAsiya Javayant PROPOSAL
Stacey MacleadArgentinaXuxue Feng QUALIFIED
Mujtaba NickaGermanyOnyama Limba NEGOTIATION
Octavia MaletGermanyIvan Magalhaes NEW
Clifford RimRussiaXuxue Feng PROPOSAL
Misaki RoysterAustraliaAmy Elsner RENEWAL
Izzy GarufiArgentinaIvan Magalhaes NEGOTIATION
Adams MorascaUnited KingdomBernardo Dominic QUALIFIED
Juan WieserBrazilAmy Elsner NEGOTIATION
Tony FollerItalyStephen Shaw QUALIFIED
Clifford RimArgentinaBernardo Dominic RENEWAL
Chavez BriddickGermanyAmy Elsner NEGOTIATION
Darci PoquetteItalyAsiya Javayant RENEWAL
Rodrigues CampainGermanyAmy Elsner QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Silvio SlusarskiCanadaOnyama Limba PROPOSAL
Aditya KuskoBrazilBernardo Dominic RENEWAL
Kadeem FlosiIndiaIoni Bowcher PROPOSAL
Silvio SlusarskiRussiaElwin Sharvill PROPOSAL
Greenwood BologniaItalyAsiya Javayant UNQUALIFIED
Aditya KuskoArgentinaXuxue Feng PROPOSAL
Adams MorascaSpainAsiya Javayant UNQUALIFIED
Silvio SlusarskiJapanIoni Bowcher UNQUALIFIED
Leon OldroydItalyAsiya Javayant UNQUALIFIED
Claire TollnerUnited KingdomStephen Shaw NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Greenwood BologniaItaly2026-04-11Morlong Associates NEW42Ivan Magalhaes
1001Aruna FigeroaGermany2026-04-13King, Christopher A Esq UNQUALIFIED10Ivan Magalhaes
1002Faith GillianBrazil2026-04-25Dorl, James J Esq NEW66Stephen Shaw
1003Leja CaldareraRussia2026-04-18Printing Dimensions PROPOSAL58Onyama Limba
1004Antonio CaudyArgentina2026-04-17Chanay, Jeffrey A Esq UNQUALIFIED12Ivan Magalhaes
1005Cody SaylorsBrazil2026-04-17Commercial Press NEW50Bernardo Dominic
1006Deepesh ChuiFrance2026-04-15Morlong Associates QUALIFIED2Anna Fali
1007Costa DilliardUnited Kingdom2026-04-29Commercial Press NEW57Bernardo Dominic
1008Silvio SlusarskiSpain2026-05-02King, Christopher A Esq UNQUALIFIED82Bernardo Dominic
1009Jones VocelkaCanada2026-04-08Chemel, James L Cpa RENEWAL53Anna Fali
1010Stacey MacleadCanada2026-04-10Benton, John B Jr QUALIFIED61Xuxue Feng
1011Misaki RoysterSpain2026-04-27Chapman, Ross E Esq RENEWAL71Ivan Magalhaes
1012Silvio SlusarskiFrance2026-04-15Buckley Miller Wright NEGOTIATION84Asiya Javayant
1013Ricardo GauchoFrance2026-04-11Morlong Associates UNQUALIFIED0Xuxue Feng
1014Izzy GarufiRussia2026-04-27Rousseaux, Michael Esq PROPOSAL44Onyama Limba
1015Chavez BriddickRussia2026-04-29King, Christopher A Esq RENEWAL29Elwin Sharvill
1016Costa DilliardItaly2026-04-22King, Christopher A Esq QUALIFIED64Xuxue Feng
1017Adams MorascaItaly2026-04-07Printing Dimensions RENEWAL74Ioni Bowcher
1018Leon OldroydRussia2026-04-26Rousseaux, Michael Esq QUALIFIED99Anna Fali
1019Arvin AlbaresJapan2026-04-11Truhlar And Truhlar Attys PROPOSAL27Xuxue Feng
1020Deepesh ChuiCanada2026-04-06Printing Dimensions QUALIFIED14Xuxue Feng
1021Maisha RulapaughItaly2026-04-14King, Christopher A Esq NEW3Bernardo Dominic
1022Juan WieserArgentina2026-04-26Rousseaux, Michael Esq NEGOTIATION31Amy Elsner
1023Faith GillianItaly2026-04-12Dorl, James J Esq NEW99Bernardo Dominic
1024Jefferson SchemmerGermany2026-04-12Rangoni Of Florence RENEWAL62Onyama Limba
1025Jennifer AmigonRussia2026-04-19Benton, John B Jr PROPOSAL95Ivan Magalhaes
1026Antonio CaudyRussia2026-04-15Rousseaux, Michael Esq PROPOSAL61Onyama Limba
1027Izzy GarufiItaly2026-04-22Commercial Press QUALIFIED12Stephen Shaw
1028Clifford RimIndia2026-04-21Chanay, Jeffrey A Esq RENEWAL59Ivan Magalhaes
1029Mayumi KolmetzBrazil2026-04-06Feltz Printing Service NEGOTIATION92Bernardo Dominic
1030Morrow RutaJapan2026-04-08Truhlar And Truhlar Attys RENEWAL21Onyama Limba
1031Juan WieserGermany2026-04-28Chanay, Jeffrey A Esq NEW77Xuxue Feng
1032Francesco ShinkoJapan2026-04-18Chemel, James L Cpa NEGOTIATION46Stephen Shaw
1033Jefferson SchemmerRussia2026-04-16Benton, John B Jr UNQUALIFIED49Ivan Magalhaes
1034Jones VocelkaIndia2026-04-15Rangoni Of Florence PROPOSAL36Amy Elsner
1035Kadeem FlosiUnited Kingdom2026-04-17Buckley Miller Wright PROPOSAL36Onyama Limba
1036Tony FollerRussia2026-04-11Feiner Bros QUALIFIED15Anna Fali
1037Izzy GarufiCanada2026-04-16Feltz Printing Service UNQUALIFIED22Onyama Limba
1038Aruna FigeroaArgentina2026-04-12Morlong Associates PROPOSAL37Asiya Javayant
1039Clifford RimSpain2026-04-05Dorl, James J Esq RENEWAL54Anna Fali
1040Clifford RimIndia2026-04-30Chanay, Jeffrey A Esq NEGOTIATION97Onyama Limba
1041Salvatore StockhamArgentina2026-04-11Feltz Printing Service UNQUALIFIED55Amy Elsner
1042Ricardo GauchoFrance2026-04-12Printing Dimensions PROPOSAL57Asiya Javayant
1043Deepesh ChuiAustralia2026-04-25Chanay, Jeffrey A Esq NEGOTIATION54Ivan Magalhaes
1044James ButtFrance2026-04-26Chemel, James L Cpa NEW89Xuxue Feng
1045Adams MorascaGermany2026-04-17Benton, John B Jr NEGOTIATION59Ioni Bowcher
1046Jefferson SchemmerCanada2026-05-03Rousseaux, Michael Esq UNQUALIFIED79Asiya Javayant
1047Smith GlickItaly2026-04-14Dorl, James J Esq RENEWAL92Ivan Magalhaes
1048Claire TollnerAustralia2026-04-15Rousseaux, Michael Esq NEGOTIATION95Ivan Magalhaes
1049Murillo MaletItaly2026-04-30Rangoni Of Florence NEW46Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Jennifer AmigonRussiaElwin Sharvill NEGOTIATION
Clifford RimUnited KingdomAnna Fali NEW
Claire TollnerIndiaIvan Magalhaes NEGOTIATION
Antonio CaudyUnited KingdomAmy Elsner PROPOSAL
Rodrigues CampainAustraliaAnna Fali QUALIFIED
Leja CaldareraUnited KingdomOnyama Limba PROPOSAL
Misaki RoysterSpainStephen Shaw PROPOSAL
Greenwood BologniaFranceOnyama Limba UNQUALIFIED
David DarakjyBrazilOnyama Limba RENEWAL
Mujtaba NickaGermanyOnyama Limba QUALIFIED
Adams MorascaGermanyIvan Magalhaes NEGOTIATION
Adams MorascaRussiaStephen Shaw QUALIFIED
Salvatore StockhamJapanIoni Bowcher UNQUALIFIED
Tony FollerIndiaAsiya Javayant NEGOTIATION
Izzy GarufiItalyElwin Sharvill RENEWAL
Antonio CaudyRussiaAsiya Javayant NEGOTIATION
James ButtGermanyAnna Fali RENEWAL
Arvin AlbaresAustraliaIvan Magalhaes UNQUALIFIED
Alejandro PerinUnited KingdomElwin Sharvill NEGOTIATION
Stacey MacleadUnited KingdomElwin Sharvill UNQUALIFIED
Sinclair WaycottJapanIoni Bowcher NEW
Aruna FigeroaJapanIvan Magalhaes NEGOTIATION
Rodrigues CampainUnited KingdomIvan Magalhaes PROPOSAL
Maria MarrierBrazilAsiya Javayant NEW
Adams MorascaCanadaElwin Sharvill PROPOSAL
Leon OldroydBrazilStephen Shaw NEGOTIATION
Murillo MaletUnited KingdomAsiya Javayant NEW
James ButtRussiaAmy Elsner RENEWAL
Morrow RutaFranceAnna Fali QUALIFIED
Arvin AlbaresCanadaAnna Fali QUALIFIED
Kadeem FlosiBrazilAnna Fali UNQUALIFIED
Claire TollnerSpainOnyama Limba UNQUALIFIED
Ivar PaprockiJapanOnyama Limba QUALIFIED
James ButtCanadaElwin Sharvill RENEWAL
Julie StensethAustraliaIoni Bowcher PROPOSAL
Misaki RoysterJapanAsiya Javayant UNQUALIFIED
David DarakjyAustraliaAmy Elsner QUALIFIED
Silvio SlusarskiIndiaAmy Elsner PROPOSAL
Rodrigues CampainSpainAsiya Javayant NEW
Maisha RulapaughCanadaAmy Elsner UNQUALIFIED
Kadeem FlosiIndiaStephen Shaw PROPOSAL
Jones VocelkaItalyXuxue Feng NEW
Juan WieserCanadaAnna Fali RENEWAL
Morrow RutaBrazilIvan Magalhaes QUALIFIED
Maisha RulapaughGermanyOnyama Limba QUALIFIED
Leon OldroydBrazilAsiya Javayant NEGOTIATION
Smith GlickIndiaIoni Bowcher UNQUALIFIED
Jennifer AmigonGermanyXuxue Feng QUALIFIED
Silvio SlusarskiUnited KingdomAsiya Javayant NEW
Ashley DoeSpainAmy Elsner QUALIFIED
Frozen Columns
Name
Aika Inouye
Clifford Rim
Juan Wieser
David Darakjy
Jones Vocelka
Darci Poquette
Jeanfrancois Venere
Ashley Doe
Sinclair Waycott
Claire Tollner
Greenwood Bolognia
Deepesh Chui
Deepesh Chui
Murillo Malet
Alejandro Perin
Salvatore Stockham
Octavia Malet
Leja Caldarera
Clifford Rim
Morrow Ruta
Rodrigues Campain
Tony Foller
Mayumi Kolmetz
Izzy Garufi
Greenwood Bolognia
Clifford Rim
Octavia Malet
Kadeem Flosi
Silvio Slusarski
Maria Marrier
Faith Gillian
Stacey Maclead
Greenwood Bolognia
Leon Oldroyd
Faith Gillian
Nicolas Iturbide
Cody Saylors
Stacey Maclead
Silvio Slusarski
Mayumi Kolmetz
Isabel Bowley
Deepesh Chui
Ashley Doe
Morrow Ruta
Cody Saylors
Juan Wieser
Arvin Albares
Rodrigues Campain
Jeanfrancois Venere
Adams Morasca
IdCountryDate
1000Italy2026-04-07
1001Argentina2026-04-16
1002Russia2026-05-01
1003Argentina2026-04-06
1004Japan2026-04-24
1005India2026-04-16
1006France2026-04-25
1007Russia2026-04-28
1008France2026-04-14
1009France2026-05-01
1010Canada2026-04-22
1011Canada2026-04-27
1012Italy2026-04-05
1013United Kingdom2026-04-12
1014Canada2026-04-14
1015Japan2026-04-26
1016Germany2026-04-14
1017Russia2026-04-24
1018Argentina2026-04-09
1019Australia2026-05-04
1020Spain2026-04-06
1021Germany2026-04-23
1022Argentina2026-05-01
1023Australia2026-04-30
1024France2026-04-22
1025Japan2026-04-19
1026Germany2026-05-03
1027India2026-04-12
1028Australia2026-04-22
1029Brazil2026-04-07
1030United Kingdom2026-04-15
1031United Kingdom2026-04-17
1032Spain2026-04-16
1033Germany2026-04-08
1034India2026-04-15
1035Canada2026-04-30
1036Germany2026-04-15
1037Canada2026-04-30
1038United Kingdom2026-05-02
1039France2026-04-09
1040Italy2026-05-02
1041India2026-04-06
1042France2026-04-24
1043Japan2026-05-03
1044Canada2026-04-28
1045Argentina2026-05-02
1046Germany2026-04-18
1047Argentina2026-04-11
1048Russia2026-04-09
1049France2026-04-30

On-Demand Data

NameIdCountryDate
Arvin Albares1000Germany2026-04-23
Mujtaba Nicka1001Canada2026-04-27
Ricardo Gaucho1002United Kingdom2026-05-04
Leja Caldarera1003United Kingdom2026-04-29
Morrow Ruta1004Australia2026-04-18
Mujtaba Nicka1005Argentina2026-04-13
Wickens Nestle1006Argentina2026-04-19
Clifford Rim1007Russia2026-05-01
Aruna Figeroa1008Japan2026-04-05
Clifford Rim1009Canada2026-04-15
Francesco Shinko1010Italy2026-04-20
Costa Dilliard1011Japan2026-04-17
Maisha Rulapaugh1012United Kingdom2026-04-29
Morrow Ruta1013Germany2026-04-13
Ivar Paprocki1014Russia2026-04-27
Murillo Malet1015Italy2026-04-14
Juan Wieser1016India2026-05-04
Aditya Kusko1017France2026-04-08
Leon Oldroyd1018United Kingdom2026-04-06
Faith Gillian1019Spain2026-04-17
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Mayumi KolmetzItalyElwin Sharvill QUALIFIED
Octavia MaletArgentinaAnna Fali UNQUALIFIED
Munro FerenczFranceOnyama Limba UNQUALIFIED
Mayumi KolmetzBrazilIoni Bowcher NEGOTIATION
James ButtArgentinaStephen Shaw UNQUALIFIED
Salvatore StockhamUnited KingdomOnyama Limba NEW
Jones VocelkaRussiaIoni Bowcher RENEWAL
Julie StensethBrazilIvan Magalhaes PROPOSAL
Misaki RoysterCanadaXuxue Feng NEGOTIATION
Jennifer AmigonSpainIvan Magalhaes NEW
Salvatore StockhamIndiaAsiya Javayant NEW
Deepesh ChuiIndiaXuxue Feng NEGOTIATION
Francesco ShinkoArgentinaAsiya Javayant UNQUALIFIED
Alejandro PerinFranceAmy Elsner PROPOSAL
Octavia MaletAustraliaElwin Sharvill QUALIFIED
Chavez BriddickUnited KingdomIvan Magalhaes RENEWAL
Smith GlickAustraliaElwin Sharvill UNQUALIFIED
Johnson SergiBrazilAsiya Javayant NEW
Cody SaylorsItalyAmy Elsner PROPOSAL
Wickens NestleSpainXuxue Feng QUALIFIED
Tony FollerJapanOnyama Limba UNQUALIFIED
Mayumi KolmetzGermanyIvan Magalhaes UNQUALIFIED
Aika InouyeItalyXuxue Feng UNQUALIFIED
Salvatore StockhamFranceOnyama Limba RENEWAL
Silvio SlusarskiFranceXuxue Feng PROPOSAL
Julie StensethGermanyElwin Sharvill UNQUALIFIED
Darci PoquetteArgentinaBernardo Dominic QUALIFIED
Isabel BowleyFranceIoni Bowcher NEW
Sinclair WaycottBrazilAsiya Javayant NEW
Darci PoquetteIndiaAsiya Javayant PROPOSAL
Munro FerenczUnited KingdomAnna Fali NEW
Jeanfrancois VenereBrazilOnyama Limba PROPOSAL
Darci PoquetteFranceElwin Sharvill NEGOTIATION
Jefferson SchemmerAustraliaStephen Shaw PROPOSAL
Stacey MacleadFranceAmy Elsner QUALIFIED
Ashley DoeSpainAmy Elsner RENEWAL
Greenwood BologniaGermanyIvan Magalhaes NEGOTIATION
Aruna FigeroaJapanOnyama Limba PROPOSAL
Johnson SergiAustraliaAmy Elsner RENEWAL
Tony FollerJapanOnyama Limba 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>