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
Stacey MacleadJapanIvan Magalhaes NEW
Francesco ShinkoAustraliaIoni Bowcher RENEWAL
Ricardo GauchoUnited KingdomAsiya Javayant PROPOSAL
Octavia MaletRussiaAsiya Javayant QUALIFIED
Ivar PaprockiSpainAnna Fali UNQUALIFIED
Maria MarrierIndiaStephen Shaw NEW
Deepesh ChuiUnited KingdomAsiya Javayant PROPOSAL
Jeanfrancois VenereCanadaXuxue Feng QUALIFIED
Nicolas IturbideIndiaIoni Bowcher QUALIFIED
Jones VocelkaFranceXuxue Feng NEW
Octavia MaletArgentinaStephen Shaw NEW
Nicolas IturbideBrazilElwin Sharvill PROPOSAL
Antonio CaudyItalyAnna Fali RENEWAL
Jefferson SchemmerBrazilOnyama Limba NEGOTIATION
Wickens NestleItalyAmy Elsner NEGOTIATION
Wickens NestleAustraliaStephen Shaw PROPOSAL
Aditya KuskoJapanElwin Sharvill PROPOSAL
Silvio SlusarskiCanadaBernardo Dominic RENEWAL
Chavez BriddickAustraliaIoni Bowcher NEGOTIATION
Mayumi KolmetzItalyAmy Elsner PROPOSAL
Arvin AlbaresAustraliaIoni Bowcher PROPOSAL
Murillo MaletFranceAnna Fali QUALIFIED
Leon OldroydGermanyXuxue Feng RENEWAL
Smith GlickGermanyIoni Bowcher QUALIFIED
Alejandro PerinAustraliaAmy Elsner PROPOSAL
Smith GlickBrazilXuxue Feng PROPOSAL
David DarakjyRussiaElwin Sharvill QUALIFIED
Smith GlickFranceAnna Fali PROPOSAL
Juan WieserSpainOnyama Limba NEGOTIATION
David DarakjyRussiaElwin Sharvill RENEWAL
Kadeem FlosiGermanyAsiya Javayant RENEWAL
Cody SaylorsGermanyAmy Elsner NEGOTIATION
Faith GillianGermanyOnyama Limba NEW
Antonio CaudyGermanyIvan Magalhaes NEGOTIATION
Silvio SlusarskiAustraliaAnna Fali NEW
Faith GillianAustraliaIvan Magalhaes NEW
Nicolas IturbideItalyIvan Magalhaes UNQUALIFIED
Costa DilliardIndiaIoni Bowcher UNQUALIFIED
Jones VocelkaRussiaBernardo Dominic UNQUALIFIED
Adams MorascaCanadaBernardo Dominic QUALIFIED
Jones VocelkaIndiaXuxue Feng RENEWAL
David DarakjyUnited KingdomElwin Sharvill NEGOTIATION
Arvin AlbaresJapanElwin Sharvill UNQUALIFIED
Francesco ShinkoIndiaAnna Fali NEGOTIATION
Cody SaylorsAustraliaAnna Fali QUALIFIED
Clifford RimIndiaAsiya Javayant NEGOTIATION
Maria MarrierSpainAmy Elsner QUALIFIED
Costa DilliardArgentinaBernardo Dominic UNQUALIFIED
Alejandro PerinRussiaIvan Magalhaes QUALIFIED
Wickens NestleUnited KingdomBernardo Dominic QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Salvatore StockhamJapanAsiya Javayant QUALIFIED
Rodrigues CampainJapanIvan Magalhaes PROPOSAL
Julie StensethGermanyXuxue Feng NEGOTIATION
Sinclair WaycottBrazilAsiya Javayant RENEWAL
Julie StensethArgentinaIvan Magalhaes PROPOSAL
Ashley DoeUnited KingdomStephen Shaw PROPOSAL
Alejandro PerinArgentinaAnna Fali PROPOSAL
Alejandro PerinBrazilIvan Magalhaes NEW
Silvio SlusarskiUnited KingdomIoni Bowcher NEGOTIATION
Clifford RimBrazilIoni Bowcher QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Claire TollnerCanada2025-03-31Dorl, James J Esq NEGOTIATION66Anna Fali
1001Morrow RutaAustralia2025-03-09Chapman, Ross E Esq NEW70Xuxue Feng
1002Leon OldroydRussia2025-03-26Rangoni Of Florence NEGOTIATION17Ioni Bowcher
1003Murillo MaletCanada2025-03-17Chapman, Ross E Esq QUALIFIED81Asiya Javayant
1004Cody SaylorsSpain2025-03-19Benton, John B Jr PROPOSAL93Xuxue Feng
1005Leon OldroydRussia2025-03-23Commercial Press RENEWAL95Asiya Javayant
1006Stacey MacleadAustralia2025-03-05Rangoni Of Florence NEW83Amy Elsner
1007Misaki RoysterUnited Kingdom2025-03-17Chanay, Jeffrey A Esq RENEWAL34Ivan Magalhaes
1008Leja CaldareraRussia2025-03-11Benton, John B Jr NEGOTIATION83Onyama Limba
1009Aditya KuskoSpain2025-03-07King, Christopher A Esq QUALIFIED54Stephen Shaw
1010Murillo MaletArgentina2025-03-26King, Christopher A Esq QUALIFIED6Elwin Sharvill
1011Stacey MacleadCanada2025-03-30Dorl, James J Esq PROPOSAL67Ioni Bowcher
1012Francesco ShinkoCanada2025-03-28Rousseaux, Michael Esq NEGOTIATION2Ivan Magalhaes
1013Antonio CaudyGermany2025-03-26Chemel, James L Cpa PROPOSAL56Xuxue Feng
1014Leon OldroydArgentina2025-03-08Chemel, James L Cpa NEGOTIATION93Amy Elsner
1015Adams MorascaCanada2025-03-11Dorl, James J Esq RENEWAL4Stephen Shaw
1016Rodrigues CampainItaly2025-03-11Chemel, James L Cpa UNQUALIFIED65Stephen Shaw
1017Izzy GarufiItaly2025-03-05Chanay, Jeffrey A Esq QUALIFIED69Anna Fali
1018Jeanfrancois VenereJapan2025-03-23Benton, John B Jr NEW70Asiya Javayant
1019Ricardo GauchoArgentina2025-03-05Morlong Associates NEGOTIATION51Bernardo Dominic
1020Aruna FigeroaUnited Kingdom2025-04-01Chemel, James L Cpa UNQUALIFIED18Xuxue Feng
1021Chavez BriddickRussia2025-03-08King, Christopher A Esq NEGOTIATION6Xuxue Feng
1022Aruna FigeroaGermany2025-03-18Buckley Miller Wright NEW55Stephen Shaw
1023Antonio CaudyIndia2025-03-27Chanay, Jeffrey A Esq UNQUALIFIED12Ivan Magalhaes
1024Aika InouyeRussia2025-03-18Rousseaux, Michael Esq PROPOSAL38Anna Fali
1025Kaitlin OstroskyBrazil2025-03-08Morlong Associates UNQUALIFIED7Onyama Limba
1026Greenwood BologniaFrance2025-03-28Rangoni Of Florence UNQUALIFIED23Elwin Sharvill
1027Juan WieserGermany2025-03-27Rousseaux, Michael Esq NEW62Bernardo Dominic
1028Jennifer AmigonRussia2025-03-06Rousseaux, Michael Esq PROPOSAL78Onyama Limba
1029Antonio CaudyIndia2025-03-22Benton, John B Jr NEGOTIATION95Amy Elsner
1030Juan WieserArgentina2025-03-10Rousseaux, Michael Esq PROPOSAL24Asiya Javayant
1031Cody SaylorsAustralia2025-03-07King, Christopher A Esq PROPOSAL30Elwin Sharvill
1032Nicolas IturbideItaly2025-03-06Feltz Printing Service UNQUALIFIED78Amy Elsner
1033Alejandro PerinUnited Kingdom2025-04-02Rousseaux, Michael Esq UNQUALIFIED54Elwin Sharvill
1034Kaitlin OstroskyFrance2025-03-14Rangoni Of Florence NEGOTIATION7Stephen Shaw
1035Jefferson SchemmerCanada2025-03-26Dorl, James J Esq QUALIFIED75Elwin Sharvill
1036Nicolas IturbideGermany2025-03-28Chemel, James L Cpa NEW55Xuxue Feng
1037Alejandro PerinArgentina2025-03-29Feltz Printing Service UNQUALIFIED40Stephen Shaw
1038Arvin AlbaresGermany2025-03-15Chapman, Ross E Esq NEGOTIATION74Bernardo Dominic
1039Jones VocelkaAustralia2025-03-12Commercial Press NEGOTIATION74Elwin Sharvill
1040Tony FollerArgentina2025-03-10Chemel, James L Cpa NEW72Onyama Limba
1041Leja CaldareraSpain2025-03-13Chemel, James L Cpa RENEWAL4Asiya Javayant
1042Silvio SlusarskiArgentina2025-03-08Truhlar And Truhlar Attys UNQUALIFIED5Anna Fali
1043Cody SaylorsUnited Kingdom2025-03-10Feltz Printing Service NEW62Ioni Bowcher
1044Arvin AlbaresIndia2025-03-29Printing Dimensions PROPOSAL6Ivan Magalhaes
1045Salvatore StockhamSpain2025-03-16Benton, John B Jr UNQUALIFIED49Xuxue Feng
1046Arvin AlbaresRussia2025-03-09Truhlar And Truhlar Attys UNQUALIFIED73Elwin Sharvill
1047Antonio CaudyAustralia2025-03-23Chapman, Ross E Esq NEW47Ivan Magalhaes
1048Antonio CaudyCanada2025-03-16Commercial Press RENEWAL91Asiya Javayant
1049Faith GillianAustralia2025-03-11Rangoni Of Florence NEGOTIATION89Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Tony FollerCanadaIoni Bowcher UNQUALIFIED
Octavia MaletFranceAnna Fali PROPOSAL
Antonio CaudyBrazilElwin Sharvill NEGOTIATION
Aika InouyeSpainStephen Shaw PROPOSAL
Leon OldroydJapanStephen Shaw NEW
Leja CaldareraBrazilOnyama Limba NEGOTIATION
Smith GlickArgentinaAsiya Javayant QUALIFIED
Alejandro PerinIndiaStephen Shaw UNQUALIFIED
Jeanfrancois VenereAustraliaAsiya Javayant NEGOTIATION
Juan WieserRussiaBernardo Dominic PROPOSAL
Aika InouyeIndiaBernardo Dominic PROPOSAL
Izzy GarufiRussiaAnna Fali NEGOTIATION
Cody SaylorsGermanyXuxue Feng QUALIFIED
Costa DilliardUnited KingdomXuxue Feng PROPOSAL
Octavia MaletUnited KingdomAnna Fali PROPOSAL
Mujtaba NickaSpainOnyama Limba UNQUALIFIED
Nicolas IturbideSpainStephen Shaw RENEWAL
Maisha RulapaughItalyElwin Sharvill RENEWAL
Jones VocelkaCanadaXuxue Feng QUALIFIED
Jones VocelkaIndiaBernardo Dominic UNQUALIFIED
Ivar PaprockiFranceStephen Shaw RENEWAL
Aruna FigeroaCanadaAnna Fali PROPOSAL
Darci PoquetteUnited KingdomBernardo Dominic NEW
Mujtaba NickaAustraliaAmy Elsner RENEWAL
Leon OldroydBrazilIvan Magalhaes UNQUALIFIED
Maria MarrierFranceXuxue Feng UNQUALIFIED
David DarakjyFranceAsiya Javayant PROPOSAL
Faith GillianIndiaBernardo Dominic QUALIFIED
Darci PoquetteCanadaAnna Fali NEW
Greenwood BologniaUnited KingdomBernardo Dominic PROPOSAL
Jefferson SchemmerGermanyIoni Bowcher PROPOSAL
Johnson SergiUnited KingdomOnyama Limba NEW
Juan WieserCanadaAnna Fali NEW
Alejandro PerinBrazilElwin Sharvill QUALIFIED
Wickens NestleIndiaStephen Shaw NEGOTIATION
Tony FollerGermanyIvan Magalhaes RENEWAL
Cody SaylorsGermanyOnyama Limba NEGOTIATION
Arvin AlbaresIndiaIvan Magalhaes NEW
Jefferson SchemmerItalyStephen Shaw RENEWAL
Clifford RimBrazilIoni Bowcher UNQUALIFIED
Jennifer AmigonItalyBernardo Dominic NEGOTIATION
Silvio SlusarskiArgentinaBernardo Dominic RENEWAL
Emily WhobreyArgentinaStephen Shaw PROPOSAL
Murillo MaletFranceAmy Elsner UNQUALIFIED
Sinclair WaycottUnited KingdomAnna Fali RENEWAL
Rodrigues CampainAustraliaElwin Sharvill NEW
Johnson SergiBrazilOnyama Limba RENEWAL
Morrow RutaUnited KingdomElwin Sharvill NEGOTIATION
Aruna FigeroaUnited KingdomOnyama Limba RENEWAL
Ivar PaprockiGermanyAsiya Javayant NEGOTIATION
Frozen Columns
Name
Jefferson Schemmer
Cody Saylors
Nicolas Iturbide
Maria Marrier
Silvio Slusarski
Emily Whobrey
Jones Vocelka
Johnson Sergi
Greenwood Bolognia
Sinclair Waycott
Arvin Albares
Misaki Royster
Aika Inouye
Adams Morasca
Deepesh Chui
Sinclair Waycott
Johnson Sergi
Sinclair Waycott
Silvio Slusarski
Adams Morasca
Claire Tollner
Adams Morasca
Nicolas Iturbide
Johnson Sergi
Jefferson Schemmer
Octavia Malet
Silvio Slusarski
Smith Glick
Juan Wieser
Octavia Malet
Jones Vocelka
Izzy Garufi
Morrow Ruta
Rodrigues Campain
Jefferson Schemmer
Darci Poquette
Murillo Malet
Salvatore Stockham
Aruna Figeroa
Jones Vocelka
Cody Saylors
Sinclair Waycott
Juan Wieser
Smith Glick
Darci Poquette
Claire Tollner
Claire Tollner
Cody Saylors
Johnson Sergi
Jeanfrancois Venere
IdCountryDate
1000Italy2025-03-15
1001Germany2025-03-25
1002Australia2025-03-06
1003Australia2025-03-31
1004Brazil2025-03-23
1005Germany2025-03-26
1006Japan2025-03-13
1007Canada2025-03-25
1008Argentina2025-03-14
1009Australia2025-03-13
1010France2025-03-25
1011Canada2025-03-21
1012India2025-03-15
1013Spain2025-03-06
1014Italy2025-03-12
1015Canada2025-04-02
1016Germany2025-03-22
1017Germany2025-03-26
1018Italy2025-03-07
1019Italy2025-03-28
1020Germany2025-03-16
1021Canada2025-04-01
1022Japan2025-03-07
1023United Kingdom2025-03-29
1024Brazil2025-03-28
1025France2025-04-02
1026Argentina2025-03-09
1027Brazil2025-03-12
1028Argentina2025-03-20
1029Italy2025-03-17
1030Brazil2025-03-30
1031Australia2025-03-06
1032Canada2025-03-29
1033Russia2025-03-30
1034Argentina2025-03-06
1035France2025-03-17
1036Germany2025-03-17
1037Australia2025-03-13
1038India2025-03-05
1039United Kingdom2025-03-29
1040Canada2025-03-24
1041Spain2025-04-02
1042Germany2025-03-30
1043Germany2025-03-14
1044Australia2025-03-20
1045Germany2025-04-02
1046Brazil2025-03-27
1047Italy2025-03-20
1048Italy2025-03-27
1049Spain2025-03-26

On-Demand Data

NameIdCountryDate
Silvio Slusarski1000Italy2025-03-25
Maria Marrier1001Japan2025-03-05
Claire Tollner1002India2025-03-08
Kaitlin Ostrosky1003Italy2025-03-20
Smith Glick1004India2025-03-04
Adams Morasca1005Italy2025-03-23
Maisha Rulapaugh1006France2025-03-07
Stacey Maclead1007France2025-03-24
Misaki Royster1008France2025-03-17
Jones Vocelka1009Argentina2025-03-05
Tony Foller1010Germany2025-03-14
Salvatore Stockham1011Russia2025-03-07
Sinclair Waycott1012Spain2025-03-13
Darci Poquette1013Brazil2025-04-01
Jennifer Amigon1014India2025-03-16
Maisha Rulapaugh1015Argentina2025-03-10
Francesco Shinko1016United Kingdom2025-03-10
Maisha Rulapaugh1017Spain2025-03-22
Tony Foller1018Australia2025-04-01
Kadeem Flosi1019Canada2025-03-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Leja CaldareraFranceIvan Magalhaes NEGOTIATION
Isabel BowleyBrazilAmy Elsner NEW
Sinclair WaycottJapanAnna Fali QUALIFIED
Kadeem FlosiFranceStephen Shaw QUALIFIED
Leon OldroydSpainIoni Bowcher RENEWAL
Jefferson SchemmerJapanXuxue Feng QUALIFIED
Johnson SergiUnited KingdomXuxue Feng NEGOTIATION
Wickens NestleRussiaStephen Shaw NEGOTIATION
Adams MorascaBrazilOnyama Limba QUALIFIED
Cody SaylorsAustraliaBernardo Dominic PROPOSAL
Aruna FigeroaUnited KingdomBernardo Dominic QUALIFIED
Kadeem FlosiUnited KingdomAsiya Javayant PROPOSAL
Julie StensethUnited KingdomAsiya Javayant QUALIFIED
Morrow RutaGermanyOnyama Limba QUALIFIED
Ashley DoeFranceAnna Fali QUALIFIED
Deepesh ChuiFranceXuxue Feng QUALIFIED
Adams MorascaUnited KingdomAnna Fali PROPOSAL
Octavia MaletRussiaIvan Magalhaes NEGOTIATION
Darci PoquetteAustraliaOnyama Limba UNQUALIFIED
Rodrigues CampainGermanyIoni Bowcher QUALIFIED
Mujtaba NickaFranceElwin Sharvill PROPOSAL
Octavia MaletGermanyXuxue Feng UNQUALIFIED
Claire TollnerAustraliaBernardo Dominic NEGOTIATION
Darci PoquetteAustraliaXuxue Feng UNQUALIFIED
Chavez BriddickArgentinaBernardo Dominic NEGOTIATION
Mayumi KolmetzGermanyOnyama Limba UNQUALIFIED
Izzy GarufiGermanyXuxue Feng PROPOSAL
Costa DilliardIndiaStephen Shaw UNQUALIFIED
Adams MorascaItalyIvan Magalhaes NEW
Misaki RoysterCanadaElwin Sharvill NEGOTIATION
Ashley DoeCanadaStephen Shaw RENEWAL
Jennifer AmigonUnited KingdomAsiya Javayant RENEWAL
Aika InouyeJapanAsiya Javayant UNQUALIFIED
Claire TollnerSpainOnyama Limba QUALIFIED
Morrow RutaAustraliaStephen Shaw UNQUALIFIED
Arvin AlbaresRussiaIvan Magalhaes UNQUALIFIED
Jennifer AmigonIndiaAsiya Javayant PROPOSAL
Mujtaba NickaGermanyElwin Sharvill NEGOTIATION
Jeanfrancois VenereGermanyAnna Fali UNQUALIFIED
Silvio SlusarskiJapanAsiya Javayant RENEWAL

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