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
Silvio SlusarskiCanadaBernardo Dominic NEGOTIATION
Johnson SergiIndiaOnyama Limba RENEWAL
Ashley DoeCanadaStephen Shaw NEGOTIATION
Mayumi KolmetzItalyStephen Shaw NEGOTIATION
Juan WieserGermanyAsiya Javayant UNQUALIFIED
Juan WieserItalyAsiya Javayant UNQUALIFIED
Kaitlin OstroskyUnited KingdomIvan Magalhaes NEW
Julie StensethAustraliaStephen Shaw UNQUALIFIED
Juan WieserJapanAnna Fali UNQUALIFIED
Claire TollnerJapanAsiya Javayant NEGOTIATION
Rodrigues CampainSpainAsiya Javayant NEW
Greenwood BologniaItalyAnna Fali NEW
Antonio CaudyArgentinaIoni Bowcher PROPOSAL
Aruna FigeroaUnited KingdomStephen Shaw UNQUALIFIED
Aika InouyeItalyXuxue Feng NEGOTIATION
Alejandro PerinIndiaAsiya Javayant UNQUALIFIED
Antonio CaudyAustraliaElwin Sharvill UNQUALIFIED
Johnson SergiGermanyIvan Magalhaes PROPOSAL
Mayumi KolmetzFranceAnna Fali QUALIFIED
Jones VocelkaBrazilAmy Elsner NEGOTIATION
Cody SaylorsFranceIvan Magalhaes NEGOTIATION
Aditya KuskoFranceAnna Fali QUALIFIED
Kadeem FlosiIndiaBernardo Dominic UNQUALIFIED
Kadeem FlosiItalyOnyama Limba PROPOSAL
Johnson SergiFranceIvan Magalhaes NEW
Chavez BriddickCanadaAmy Elsner PROPOSAL
Sinclair WaycottJapanBernardo Dominic UNQUALIFIED
Arvin AlbaresRussiaStephen Shaw NEW
Emily WhobreyCanadaOnyama Limba NEW
Darci PoquetteGermanyAnna Fali RENEWAL
Aditya KuskoIndiaBernardo Dominic UNQUALIFIED
Rodrigues CampainIndiaAsiya Javayant UNQUALIFIED
Greenwood BologniaBrazilBernardo Dominic RENEWAL
Smith GlickSpainBernardo Dominic RENEWAL
Julie StensethBrazilAsiya Javayant NEGOTIATION
Octavia MaletIndiaIoni Bowcher RENEWAL
Alejandro PerinBrazilStephen Shaw PROPOSAL
Nicolas IturbideBrazilXuxue Feng PROPOSAL
Maisha RulapaughAustraliaElwin Sharvill NEW
Kaitlin OstroskyGermanyAnna Fali RENEWAL
Leja CaldareraRussiaIvan Magalhaes UNQUALIFIED
Munro FerenczCanadaIoni Bowcher RENEWAL
Greenwood BologniaFranceOnyama Limba NEGOTIATION
Mujtaba NickaSpainXuxue Feng NEGOTIATION
Antonio CaudySpainXuxue Feng NEGOTIATION
Leja CaldareraCanadaAnna Fali UNQUALIFIED
Morrow RutaCanadaElwin Sharvill QUALIFIED
Adams MorascaAustraliaAmy Elsner NEW
Rodrigues CampainCanadaElwin Sharvill UNQUALIFIED
Salvatore StockhamArgentinaIvan Magalhaes UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Cody SaylorsBrazilAnna Fali PROPOSAL
Aditya KuskoItalyStephen Shaw RENEWAL
Mujtaba NickaBrazilElwin Sharvill UNQUALIFIED
Adams MorascaFranceAsiya Javayant UNQUALIFIED
Isabel BowleyGermanyAmy Elsner NEW
Johnson SergiJapanBernardo Dominic RENEWAL
Ashley DoeGermanyElwin Sharvill RENEWAL
Darci PoquetteRussiaBernardo Dominic NEGOTIATION
Faith GillianSpainXuxue Feng NEGOTIATION
Isabel BowleyFranceXuxue Feng NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Murillo MaletRussia2025-09-29Morlong Associates NEGOTIATION90Anna Fali
1001Ivar PaprockiIndia2025-09-18Chanay, Jeffrey A Esq NEGOTIATION11Asiya Javayant
1002Alejandro PerinArgentina2025-10-01Rangoni Of Florence PROPOSAL15Anna Fali
1003Francesco ShinkoAustralia2025-10-02Chemel, James L Cpa QUALIFIED26Ioni Bowcher
1004Jennifer AmigonUnited Kingdom2025-09-15Feiner Bros RENEWAL55Xuxue Feng
1005Murillo MaletBrazil2025-09-27Dorl, James J Esq QUALIFIED94Ivan Magalhaes
1006Leon OldroydItaly2025-10-03Chapman, Ross E Esq QUALIFIED49Xuxue Feng
1007Aruna FigeroaItaly2025-10-03Buckley Miller Wright UNQUALIFIED13Bernardo Dominic
1008Ricardo GauchoRussia2025-09-30Rangoni Of Florence UNQUALIFIED74Onyama Limba
1009Morrow RutaFrance2025-09-10Chapman, Ross E Esq NEGOTIATION98Anna Fali
1010David DarakjyItaly2025-09-07Feltz Printing Service RENEWAL18Ioni Bowcher
1011Francesco ShinkoItaly2025-09-10Rangoni Of Florence NEW63Asiya Javayant
1012Munro FerenczArgentina2025-09-07Truhlar And Truhlar Attys UNQUALIFIED22Amy Elsner
1013Aruna FigeroaCanada2025-09-17Rousseaux, Michael Esq PROPOSAL4Ioni Bowcher
1014Isabel BowleyIndia2025-10-06Feltz Printing Service NEGOTIATION69Stephen Shaw
1015Adams MorascaIndia2025-09-13Feltz Printing Service PROPOSAL77Ioni Bowcher
1016Alejandro PerinGermany2025-09-22Commercial Press UNQUALIFIED35Anna Fali
1017Aruna FigeroaSpain2025-09-26Rangoni Of Florence RENEWAL12Ivan Magalhaes
1018Misaki RoysterJapan2025-10-05Chanay, Jeffrey A Esq QUALIFIED72Anna Fali
1019Clifford RimAustralia2025-09-20Dorl, James J Esq NEGOTIATION71Bernardo Dominic
1020Greenwood BologniaCanada2025-09-08King, Christopher A Esq UNQUALIFIED92Xuxue Feng
1021Ivar PaprockiIndia2025-09-27Rangoni Of Florence QUALIFIED77Elwin Sharvill
1022Isabel BowleySpain2025-09-24Feltz Printing Service UNQUALIFIED53Xuxue Feng
1023Mujtaba NickaArgentina2025-09-08Benton, John B Jr NEW28Xuxue Feng
1024Alejandro PerinGermany2025-09-09Dorl, James J Esq NEGOTIATION92Amy Elsner
1025Jones VocelkaFrance2025-09-15Printing Dimensions RENEWAL77Bernardo Dominic
1026Antonio CaudyGermany2025-09-17Rangoni Of Florence NEGOTIATION89Asiya Javayant
1027Greenwood BologniaUnited Kingdom2025-10-01Chanay, Jeffrey A Esq UNQUALIFIED21Asiya Javayant
1028Greenwood BologniaCanada2025-09-17Chapman, Ross E Esq RENEWAL33Ioni Bowcher
1029Isabel BowleyArgentina2025-09-11Benton, John B Jr NEGOTIATION80Bernardo Dominic
1030Nicolas IturbideAustralia2025-09-15Rangoni Of Florence NEGOTIATION12Stephen Shaw
1031Clifford RimRussia2025-09-12Morlong Associates UNQUALIFIED10Ivan Magalhaes
1032Octavia MaletItaly2025-09-26Chemel, James L Cpa QUALIFIED28Anna Fali
1033Johnson SergiItaly2025-09-10Chemel, James L Cpa NEGOTIATION97Bernardo Dominic
1034Costa DilliardCanada2025-09-09Chanay, Jeffrey A Esq NEW92Elwin Sharvill
1035Ivar PaprockiCanada2025-09-13Truhlar And Truhlar Attys RENEWAL81Anna Fali
1036Octavia MaletItaly2025-09-23Morlong Associates PROPOSAL78Ivan Magalhaes
1037Julie StensethSpain2025-10-04Commercial Press UNQUALIFIED0Ivan Magalhaes
1038Smith GlickIndia2025-10-05Buckley Miller Wright NEW39Xuxue Feng
1039Jeanfrancois VenereRussia2025-09-10Feltz Printing Service QUALIFIED40Asiya Javayant
1040Silvio SlusarskiBrazil2025-09-12Rousseaux, Michael Esq NEW58Anna Fali
1041Julie StensethItaly2025-09-29Feltz Printing Service UNQUALIFIED75Amy Elsner
1042Clifford RimUnited Kingdom2025-09-13Dorl, James J Esq UNQUALIFIED64Stephen Shaw
1043Wickens NestleItaly2025-09-21Chemel, James L Cpa UNQUALIFIED6Xuxue Feng
1044Rodrigues CampainSpain2025-09-08Feiner Bros NEW51Ivan Magalhaes
1045Aditya KuskoSpain2025-09-24Dorl, James J Esq NEGOTIATION0Ivan Magalhaes
1046Costa DilliardUnited Kingdom2025-09-25Rousseaux, Michael Esq UNQUALIFIED63Ivan Magalhaes
1047Aruna FigeroaRussia2025-10-03Commercial Press PROPOSAL58Onyama Limba
1048Octavia MaletJapan2025-10-02Truhlar And Truhlar Attys PROPOSAL21Stephen Shaw
1049Alejandro PerinFrance2025-09-09Buckley Miller Wright NEGOTIATION19Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Jefferson SchemmerCanadaXuxue Feng RENEWAL
Ashley DoeUnited KingdomIoni Bowcher PROPOSAL
Smith GlickGermanyBernardo Dominic NEW
Greenwood BologniaRussiaAmy Elsner UNQUALIFIED
Ricardo GauchoCanadaXuxue Feng UNQUALIFIED
David DarakjySpainXuxue Feng QUALIFIED
Maria MarrierUnited KingdomElwin Sharvill PROPOSAL
Aditya KuskoJapanElwin Sharvill RENEWAL
David DarakjyRussiaElwin Sharvill RENEWAL
Jefferson SchemmerSpainAnna Fali RENEWAL
Stacey MacleadCanadaOnyama Limba NEGOTIATION
Rodrigues CampainFranceIoni Bowcher RENEWAL
Emily WhobreyFranceAmy Elsner QUALIFIED
Salvatore StockhamSpainOnyama Limba PROPOSAL
Murillo MaletBrazilXuxue Feng QUALIFIED
Silvio SlusarskiJapanStephen Shaw NEW
Alejandro PerinJapanIvan Magalhaes QUALIFIED
Greenwood BologniaUnited KingdomIoni Bowcher QUALIFIED
Stacey MacleadRussiaAsiya Javayant NEW
Nicolas IturbideFranceOnyama Limba NEW
Julie StensethSpainElwin Sharvill RENEWAL
Aika InouyeFranceAmy Elsner PROPOSAL
Emily WhobreyUnited KingdomStephen Shaw UNQUALIFIED
Emily WhobreyFranceOnyama Limba PROPOSAL
Johnson SergiAustraliaElwin Sharvill NEW
Mayumi KolmetzCanadaAsiya Javayant NEW
Ricardo GauchoCanadaIvan Magalhaes RENEWAL
Costa DilliardCanadaIoni Bowcher PROPOSAL
Isabel BowleyJapanIoni Bowcher NEGOTIATION
Mayumi KolmetzArgentinaIvan Magalhaes RENEWAL
Munro FerenczItalyOnyama Limba NEGOTIATION
Jefferson SchemmerCanadaStephen Shaw NEW
Murillo MaletSpainAnna Fali PROPOSAL
Arvin AlbaresBrazilElwin Sharvill NEW
Morrow RutaBrazilXuxue Feng UNQUALIFIED
Ivar PaprockiIndiaXuxue Feng UNQUALIFIED
Murillo MaletSpainIoni Bowcher NEW
Aditya KuskoUnited KingdomBernardo Dominic PROPOSAL
Aika InouyeIndiaXuxue Feng NEGOTIATION
Aika InouyeUnited KingdomElwin Sharvill PROPOSAL
Emily WhobreyCanadaStephen Shaw PROPOSAL
Antonio CaudyUnited KingdomAmy Elsner QUALIFIED
Misaki RoysterSpainXuxue Feng NEW
Mayumi KolmetzSpainAmy Elsner RENEWAL
Rodrigues CampainIndiaIvan Magalhaes NEGOTIATION
Ashley DoeAustraliaIoni Bowcher QUALIFIED
Salvatore StockhamGermanyIoni Bowcher UNQUALIFIED
Claire TollnerArgentinaElwin Sharvill NEW
Maisha RulapaughRussiaElwin Sharvill PROPOSAL
Aruna FigeroaJapanIvan Magalhaes UNQUALIFIED
Frozen Columns
Name
Greenwood Bolognia
Maisha Rulapaugh
Ricardo Gaucho
Leon Oldroyd
Deepesh Chui
Clifford Rim
Arvin Albares
Emily Whobrey
Faith Gillian
Claire Tollner
Aruna Figeroa
James Butt
Darci Poquette
Johnson Sergi
Izzy Garufi
Jeanfrancois Venere
Leja Caldarera
Cody Saylors
Ricardo Gaucho
Rodrigues Campain
Francesco Shinko
Deepesh Chui
Mayumi Kolmetz
Misaki Royster
Kaitlin Ostrosky
Misaki Royster
Mujtaba Nicka
Misaki Royster
Francesco Shinko
Octavia Malet
Nicolas Iturbide
Isabel Bowley
Izzy Garufi
Emily Whobrey
David Darakjy
Leja Caldarera
Ashley Doe
Chavez Briddick
Mujtaba Nicka
Sinclair Waycott
David Darakjy
Ashley Doe
Costa Dilliard
Octavia Malet
Misaki Royster
Francesco Shinko
Mujtaba Nicka
Greenwood Bolognia
Greenwood Bolognia
Smith Glick
IdCountryDate
1000United Kingdom2025-09-30
1001United Kingdom2025-09-18
1002Italy2025-10-01
1003United Kingdom2025-09-13
1004Germany2025-10-05
1005United Kingdom2025-09-28
1006Brazil2025-09-20
1007Spain2025-09-25
1008Spain2025-10-05
1009Argentina2025-09-27
1010United Kingdom2025-09-10
1011Australia2025-09-17
1012Spain2025-09-29
1013France2025-09-13
1014United Kingdom2025-10-05
1015Argentina2025-09-27
1016Spain2025-10-02
1017Italy2025-09-13
1018India2025-10-02
1019Argentina2025-09-07
1020Japan2025-09-27
1021Canada2025-10-01
1022Japan2025-09-22
1023Germany2025-09-19
1024Canada2025-09-11
1025Japan2025-09-26
1026Germany2025-09-29
1027France2025-09-21
1028Japan2025-09-14
1029Brazil2025-10-04
1030Brazil2025-09-11
1031Spain2025-09-19
1032Italy2025-09-14
1033Germany2025-09-25
1034Japan2025-09-30
1035Argentina2025-10-03
1036Germany2025-10-04
1037Japan2025-09-13
1038Germany2025-09-26
1039India2025-10-05
1040Russia2025-10-04
1041Spain2025-09-15
1042Japan2025-09-12
1043Australia2025-09-12
1044Japan2025-09-18
1045Italy2025-10-06
1046France2025-09-16
1047France2025-09-25
1048Canada2025-09-26
1049Brazil2025-09-18

On-Demand Data

NameIdCountryDate
Salvatore Stockham1000Argentina2025-09-16
Maisha Rulapaugh1001Spain2025-10-01
Arvin Albares1002France2025-09-23
Adams Morasca1003Australia2025-09-22
Tony Foller1004United Kingdom2025-10-02
Aditya Kusko1005India2025-09-27
Kaitlin Ostrosky1006Spain2025-09-20
Faith Gillian1007Canada2025-09-12
Izzy Garufi1008Germany2025-09-08
Kaitlin Ostrosky1009Russia2025-09-30
Deepesh Chui1010Spain2025-09-14
David Darakjy1011Canada2025-09-11
Rodrigues Campain1012Spain2025-09-16
Julie Stenseth1013Japan2025-09-22
Nicolas Iturbide1014Italy2025-09-17
Juan Wieser1015Brazil2025-09-16
Greenwood Bolognia1016Germany2025-09-30
Juan Wieser1017India2025-10-04
Sinclair Waycott1018United Kingdom2025-10-06
Silvio Slusarski1019Germany2025-10-03
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kaitlin OstroskySpainAmy Elsner QUALIFIED
Jennifer AmigonCanadaIoni Bowcher RENEWAL
Jeanfrancois VenereAustraliaIoni Bowcher UNQUALIFIED
Ricardo GauchoIndiaXuxue Feng QUALIFIED
Arvin AlbaresCanadaAnna Fali NEW
Maria MarrierSpainIoni Bowcher UNQUALIFIED
Kadeem FlosiUnited KingdomAmy Elsner NEGOTIATION
Francesco ShinkoRussiaAnna Fali UNQUALIFIED
Deepesh ChuiAustraliaAnna Fali QUALIFIED
Jennifer AmigonUnited KingdomXuxue Feng UNQUALIFIED
Jones VocelkaBrazilStephen Shaw UNQUALIFIED
Faith GillianCanadaAmy Elsner QUALIFIED
Rodrigues CampainRussiaAnna Fali UNQUALIFIED
Aruna FigeroaAustraliaElwin Sharvill PROPOSAL
Mujtaba NickaIndiaXuxue Feng QUALIFIED
Aruna FigeroaRussiaIoni Bowcher UNQUALIFIED
Johnson SergiUnited KingdomOnyama Limba NEGOTIATION
Isabel BowleyIndiaIoni Bowcher NEGOTIATION
Stacey MacleadBrazilIoni Bowcher NEW
Maisha RulapaughJapanIoni Bowcher QUALIFIED
Faith GillianAustraliaIvan Magalhaes QUALIFIED
David DarakjyArgentinaAmy Elsner RENEWAL
Salvatore StockhamCanadaIvan Magalhaes QUALIFIED
Jeanfrancois VenereIndiaIvan Magalhaes QUALIFIED
Aruna FigeroaRussiaOnyama Limba QUALIFIED
Ashley DoeGermanyOnyama Limba RENEWAL
Alejandro PerinIndiaAmy Elsner UNQUALIFIED
Greenwood BologniaSpainElwin Sharvill NEGOTIATION
Sinclair WaycottAustraliaIvan Magalhaes UNQUALIFIED
Francesco ShinkoAustraliaStephen Shaw RENEWAL
Cody SaylorsRussiaXuxue Feng UNQUALIFIED
Chavez BriddickCanadaOnyama Limba RENEWAL
Juan WieserFranceAmy Elsner UNQUALIFIED
Salvatore StockhamBrazilAnna Fali PROPOSAL
Misaki RoysterIndiaElwin Sharvill PROPOSAL
Clifford RimArgentinaAsiya Javayant NEW
Darci PoquetteItalyOnyama Limba UNQUALIFIED
Kadeem FlosiItalyXuxue Feng UNQUALIFIED
Mayumi KolmetzCanadaAsiya Javayant NEGOTIATION
Nicolas IturbideRussiaAnna Fali NEW

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