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
Adams MorascaUnited KingdomAmy Elsner RENEWAL
Kaitlin OstroskyFranceAsiya Javayant PROPOSAL
James ButtBrazilAsiya Javayant NEW
Francesco ShinkoGermanyIoni Bowcher UNQUALIFIED
Jennifer AmigonSpainBernardo Dominic UNQUALIFIED
Antonio CaudyJapanStephen Shaw NEGOTIATION
Claire TollnerFranceStephen Shaw RENEWAL
Ivar PaprockiRussiaAmy Elsner RENEWAL
Cody SaylorsSpainIvan Magalhaes UNQUALIFIED
Leja CaldareraFranceElwin Sharvill RENEWAL
Greenwood BologniaRussiaIoni Bowcher UNQUALIFIED
Murillo MaletRussiaOnyama Limba NEGOTIATION
Faith GillianUnited KingdomIvan Magalhaes NEW
Jefferson SchemmerGermanyElwin Sharvill QUALIFIED
Izzy GarufiGermanyStephen Shaw NEGOTIATION
Isabel BowleyGermanyAsiya Javayant PROPOSAL
Ashley DoeJapanElwin Sharvill NEW
Chavez BriddickIndiaBernardo Dominic RENEWAL
David DarakjyAustraliaAsiya Javayant UNQUALIFIED
Johnson SergiBrazilElwin Sharvill QUALIFIED
Maria MarrierUnited KingdomStephen Shaw NEW
Arvin AlbaresItalyAsiya Javayant PROPOSAL
Costa DilliardCanadaAsiya Javayant RENEWAL
Alejandro PerinJapanAnna Fali UNQUALIFIED
Kaitlin OstroskyArgentinaAsiya Javayant NEGOTIATION
Jeanfrancois VenereJapanStephen Shaw RENEWAL
Salvatore StockhamCanadaBernardo Dominic RENEWAL
Emily WhobreyJapanAnna Fali RENEWAL
Juan WieserBrazilBernardo Dominic NEW
Aruna FigeroaItalyXuxue Feng PROPOSAL
Isabel BowleySpainStephen Shaw QUALIFIED
Silvio SlusarskiUnited KingdomXuxue Feng NEW
Wickens NestleItalyAmy Elsner QUALIFIED
Cody SaylorsFranceBernardo Dominic NEW
Wickens NestleSpainOnyama Limba UNQUALIFIED
James ButtJapanOnyama Limba NEGOTIATION
Jeanfrancois VenereGermanyBernardo Dominic RENEWAL
Jones VocelkaFranceIoni Bowcher NEGOTIATION
David DarakjyItalyIvan Magalhaes NEW
Aruna FigeroaGermanyBernardo Dominic NEGOTIATION
Octavia MaletArgentinaIvan Magalhaes PROPOSAL
Sinclair WaycottIndiaStephen Shaw NEGOTIATION
Leja CaldareraFranceOnyama Limba UNQUALIFIED
Stacey MacleadGermanyBernardo Dominic UNQUALIFIED
Sinclair WaycottSpainAsiya Javayant PROPOSAL
Faith GillianCanadaIoni Bowcher NEGOTIATION
Julie StensethRussiaStephen Shaw PROPOSAL
Clifford RimArgentinaAsiya Javayant QUALIFIED
Mayumi KolmetzRussiaOnyama Limba NEW
Tony FollerGermanyElwin Sharvill RENEWAL
Horizontal
NameCountryRepresentativeStatus
Cody SaylorsAustraliaIoni Bowcher NEW
Murillo MaletRussiaStephen Shaw PROPOSAL
Jones VocelkaIndiaAsiya Javayant NEGOTIATION
Aruna FigeroaSpainOnyama Limba NEGOTIATION
Francesco ShinkoGermanyBernardo Dominic NEW
Chavez BriddickCanadaStephen Shaw RENEWAL
Ricardo GauchoItalyAmy Elsner PROPOSAL
Jeanfrancois VenereSpainXuxue Feng NEGOTIATION
Antonio CaudyGermanyBernardo Dominic PROPOSAL
Morrow RutaArgentinaAsiya Javayant RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000James ButtArgentina2025-08-11Chemel, James L Cpa UNQUALIFIED3Anna Fali
1001Misaki RoysterRussia2025-08-22Morlong Associates PROPOSAL74Ivan Magalhaes
1002Nicolas IturbideRussia2025-08-24Dorl, James J Esq NEW42Bernardo Dominic
1003Deepesh ChuiSpain2025-08-07Chapman, Ross E Esq NEW85Ivan Magalhaes
1004Tony FollerGermany2025-08-06Commercial Press PROPOSAL3Bernardo Dominic
1005Greenwood BologniaJapan2025-08-23Benton, John B Jr QUALIFIED73Ioni Bowcher
1006Sinclair WaycottJapan2025-08-28Rangoni Of Florence PROPOSAL75Xuxue Feng
1007Stacey MacleadAustralia2025-08-05Chanay, Jeffrey A Esq PROPOSAL25Ivan Magalhaes
1008Wickens NestleBrazil2025-08-29Chapman, Ross E Esq RENEWAL55Asiya Javayant
1009Murillo MaletBrazil2025-08-12Buckley Miller Wright UNQUALIFIED77Xuxue Feng
1010Darci PoquetteRussia2025-08-07Feltz Printing Service PROPOSAL68Amy Elsner
1011Stacey MacleadItaly2025-08-13Rousseaux, Michael Esq RENEWAL81Amy Elsner
1012Juan WieserCanada2025-08-15Commercial Press RENEWAL5Onyama Limba
1013Chavez BriddickRussia2025-08-27Commercial Press NEGOTIATION24Onyama Limba
1014Murillo MaletGermany2025-08-30Rangoni Of Florence PROPOSAL99Ioni Bowcher
1015Maisha RulapaughSpain2025-09-01Rousseaux, Michael Esq NEW60Elwin Sharvill
1016Emily WhobreyRussia2025-08-23Dorl, James J Esq QUALIFIED85Xuxue Feng
1017Octavia MaletRussia2025-08-04Chemel, James L Cpa UNQUALIFIED67Ioni Bowcher
1018Jennifer AmigonIndia2025-08-25Chanay, Jeffrey A Esq PROPOSAL59Asiya Javayant
1019Octavia MaletArgentina2025-08-11Commercial Press NEW84Ioni Bowcher
1020Emily WhobreySpain2025-08-08Dorl, James J Esq RENEWAL71Bernardo Dominic
1021Misaki RoysterRussia2025-08-21Truhlar And Truhlar Attys RENEWAL29Xuxue Feng
1022Greenwood BologniaIndia2025-08-10Rousseaux, Michael Esq NEGOTIATION85Amy Elsner
1023Clifford RimCanada2025-08-25Chanay, Jeffrey A Esq NEGOTIATION49Ioni Bowcher
1024Isabel BowleyRussia2025-08-10Buckley Miller Wright RENEWAL2Ivan Magalhaes
1025Chavez BriddickBrazil2025-08-07Chapman, Ross E Esq RENEWAL24Xuxue Feng
1026Clifford RimSpain2025-08-18Commercial Press NEW52Xuxue Feng
1027Juan WieserAustralia2025-08-19Chanay, Jeffrey A Esq PROPOSAL96Anna Fali
1028Julie StensethAustralia2025-08-06Feiner Bros QUALIFIED8Xuxue Feng
1029Salvatore StockhamIndia2025-08-08Chapman, Ross E Esq UNQUALIFIED71Ioni Bowcher
1030Munro FerenczIndia2025-08-10Chanay, Jeffrey A Esq RENEWAL98Xuxue Feng
1031Adams MorascaItaly2025-08-25Chanay, Jeffrey A Esq NEW72Anna Fali
1032Jennifer AmigonAustralia2025-08-26Chemel, James L Cpa NEW17Ioni Bowcher
1033Nicolas IturbideSpain2025-08-20Buckley Miller Wright NEW16Xuxue Feng
1034Juan WieserFrance2025-08-10Rousseaux, Michael Esq NEGOTIATION33Ivan Magalhaes
1035Wickens NestleRussia2025-08-29Chemel, James L Cpa NEGOTIATION47Xuxue Feng
1036Izzy GarufiSpain2025-08-26Rangoni Of Florence NEW15Ivan Magalhaes
1037Alejandro PerinSpain2025-08-13Benton, John B Jr NEGOTIATION24Xuxue Feng
1038Ivar PaprockiFrance2025-08-21Truhlar And Truhlar Attys QUALIFIED90Anna Fali
1039Sinclair WaycottAustralia2025-08-28King, Christopher A Esq NEW69Stephen Shaw
1040Costa DilliardIndia2025-08-21Feltz Printing Service UNQUALIFIED13Stephen Shaw
1041Rodrigues CampainArgentina2025-08-25Feltz Printing Service RENEWAL83Anna Fali
1042Smith GlickSpain2025-08-04Rousseaux, Michael Esq UNQUALIFIED13Elwin Sharvill
1043Jefferson SchemmerIndia2025-08-29Chanay, Jeffrey A Esq UNQUALIFIED51Asiya Javayant
1044David DarakjyAustralia2025-08-19Feltz Printing Service NEGOTIATION63Amy Elsner
1045Greenwood BologniaGermany2025-08-13Printing Dimensions NEW33Asiya Javayant
1046Aditya KuskoUnited Kingdom2025-08-16Chanay, Jeffrey A Esq NEGOTIATION38Xuxue Feng
1047Adams MorascaUnited Kingdom2025-08-05Morlong Associates NEGOTIATION81Anna Fali
1048Rodrigues CampainItaly2025-08-23Dorl, James J Esq QUALIFIED56Onyama Limba
1049Stacey MacleadBrazil2025-08-20Buckley Miller Wright RENEWAL9Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Wickens NestleSpainBernardo Dominic NEW
Ivar PaprockiSpainIoni Bowcher NEW
Stacey MacleadRussiaOnyama Limba RENEWAL
Tony FollerAustraliaAmy Elsner UNQUALIFIED
Adams MorascaUnited KingdomIvan Magalhaes QUALIFIED
Misaki RoysterJapanBernardo Dominic NEGOTIATION
Leja CaldareraGermanyAsiya Javayant PROPOSAL
Aruna FigeroaUnited KingdomOnyama Limba RENEWAL
Aruna FigeroaBrazilElwin Sharvill RENEWAL
David DarakjyGermanyIoni Bowcher RENEWAL
Jennifer AmigonArgentinaXuxue Feng RENEWAL
Cody SaylorsCanadaOnyama Limba QUALIFIED
Francesco ShinkoBrazilStephen Shaw UNQUALIFIED
Adams MorascaBrazilIoni Bowcher UNQUALIFIED
Stacey MacleadSpainIvan Magalhaes NEGOTIATION
Rodrigues CampainJapanOnyama Limba UNQUALIFIED
Munro FerenczAustraliaOnyama Limba PROPOSAL
Jennifer AmigonBrazilXuxue Feng PROPOSAL
Francesco ShinkoItalyXuxue Feng NEW
Murillo MaletBrazilOnyama Limba NEGOTIATION
Munro FerenczFranceOnyama Limba NEW
Silvio SlusarskiBrazilIoni Bowcher UNQUALIFIED
Misaki RoysterIndiaElwin Sharvill NEW
Aruna FigeroaJapanIoni Bowcher NEGOTIATION
Jeanfrancois VenereBrazilElwin Sharvill PROPOSAL
Chavez BriddickIndiaXuxue Feng PROPOSAL
Izzy GarufiJapanBernardo Dominic NEGOTIATION
Isabel BowleyIndiaStephen Shaw NEGOTIATION
Greenwood BologniaArgentinaAmy Elsner NEGOTIATION
Sinclair WaycottSpainAsiya Javayant PROPOSAL
Munro FerenczUnited KingdomOnyama Limba PROPOSAL
Alejandro PerinArgentinaAmy Elsner RENEWAL
Leon OldroydIndiaXuxue Feng RENEWAL
Leja CaldareraIndiaBernardo Dominic NEW
Misaki RoysterGermanyIvan Magalhaes PROPOSAL
Izzy GarufiAustraliaAmy Elsner NEGOTIATION
Faith GillianFranceAsiya Javayant NEW
Leja CaldareraSpainAmy Elsner NEGOTIATION
Ashley DoeBrazilAsiya Javayant NEW
Adams MorascaJapanAsiya Javayant QUALIFIED
Kadeem FlosiBrazilXuxue Feng NEW
Sinclair WaycottBrazilElwin Sharvill QUALIFIED
Chavez BriddickJapanElwin Sharvill NEW
Tony FollerSpainBernardo Dominic NEW
Nicolas IturbideUnited KingdomIoni Bowcher QUALIFIED
Smith GlickBrazilAsiya Javayant NEW
Ivar PaprockiGermanyIvan Magalhaes RENEWAL
Salvatore StockhamAustraliaAsiya Javayant RENEWAL
Clifford RimGermanyIoni Bowcher NEGOTIATION
Silvio SlusarskiSpainBernardo Dominic RENEWAL
Frozen Columns
Name
Munro Ferencz
David Darakjy
Aditya Kusko
Jefferson Schemmer
Silvio Slusarski
Cody Saylors
Salvatore Stockham
Maisha Rulapaugh
Mayumi Kolmetz
Jeanfrancois Venere
Mayumi Kolmetz
Emily Whobrey
Octavia Malet
Nicolas Iturbide
David Darakjy
Isabel Bowley
Johnson Sergi
Faith Gillian
Nicolas Iturbide
Claire Tollner
Misaki Royster
Silvio Slusarski
Emily Whobrey
Mujtaba Nicka
Emily Whobrey
Leon Oldroyd
Murillo Malet
Smith Glick
Francesco Shinko
Maisha Rulapaugh
Sinclair Waycott
Aditya Kusko
Chavez Briddick
Ricardo Gaucho
David Darakjy
Misaki Royster
Jones Vocelka
Silvio Slusarski
Juan Wieser
Greenwood Bolognia
Adams Morasca
Stacey Maclead
Rodrigues Campain
Jones Vocelka
Darci Poquette
Jeanfrancois Venere
Jeanfrancois Venere
Maisha Rulapaugh
Sinclair Waycott
Juan Wieser
IdCountryDate
1000Argentina2025-08-21
1001France2025-08-14
1002Argentina2025-09-02
1003Italy2025-08-21
1004France2025-08-25
1005India2025-08-26
1006France2025-08-05
1007Canada2025-08-22
1008Spain2025-08-31
1009Italy2025-08-25
1010Russia2025-08-28
1011Canada2025-08-04
1012Russia2025-08-31
1013Canada2025-08-13
1014Canada2025-08-11
1015Argentina2025-08-06
1016India2025-08-27
1017Spain2025-08-11
1018Brazil2025-08-26
1019Japan2025-09-02
1020Australia2025-08-08
1021Spain2025-08-29
1022Japan2025-08-12
1023Canada2025-08-31
1024Spain2025-08-15
1025Brazil2025-08-05
1026United Kingdom2025-08-12
1027Canada2025-08-04
1028Australia2025-08-14
1029Japan2025-08-17
1030Australia2025-08-16
1031United Kingdom2025-08-04
1032India2025-08-22
1033United Kingdom2025-09-01
1034United Kingdom2025-08-12
1035Germany2025-08-08
1036Italy2025-08-08
1037Australia2025-08-18
1038Russia2025-08-09
1039Australia2025-08-11
1040Spain2025-08-12
1041Spain2025-08-27
1042Russia2025-08-06
1043Brazil2025-08-18
1044Italy2025-08-21
1045United Kingdom2025-09-02
1046Canada2025-08-12
1047Russia2025-08-25
1048India2025-09-02
1049Canada2025-08-14

On-Demand Data

NameIdCountryDate
Silvio Slusarski1000Spain2025-08-29
Aika Inouye1001Argentina2025-08-18
Deepesh Chui1002Spain2025-09-01
Jeanfrancois Venere1003Australia2025-08-09
Arvin Albares1004United Kingdom2025-08-07
Costa Dilliard1005Russia2025-08-24
Leon Oldroyd1006Canada2025-08-14
Smith Glick1007United Kingdom2025-09-02
Izzy Garufi1008Italy2025-08-27
Izzy Garufi1009Germany2025-08-23
Ricardo Gaucho1010Canada2025-08-04
Faith Gillian1011Brazil2025-08-22
Smith Glick1012Australia2025-08-30
Emily Whobrey1013United Kingdom2025-08-31
Izzy Garufi1014Germany2025-08-20
Mayumi Kolmetz1015Brazil2025-08-23
Costa Dilliard1016Australia2025-08-20
Ricardo Gaucho1017Spain2025-08-22
Nicolas Iturbide1018Germany2025-08-30
Claire Tollner1019France2025-08-30
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Smith GlickAustraliaAsiya Javayant QUALIFIED
Mujtaba NickaBrazilStephen Shaw NEGOTIATION
Julie StensethCanadaIoni Bowcher RENEWAL
Munro FerenczBrazilAnna Fali QUALIFIED
Adams MorascaAustraliaAnna Fali QUALIFIED
Mujtaba NickaArgentinaIoni Bowcher UNQUALIFIED
Aruna FigeroaGermanyIoni Bowcher QUALIFIED
Sinclair WaycottRussiaElwin Sharvill QUALIFIED
Darci PoquetteCanadaIvan Magalhaes UNQUALIFIED
Claire TollnerUnited KingdomElwin Sharvill NEW
Ricardo GauchoJapanAmy Elsner RENEWAL
Costa DilliardBrazilAmy Elsner NEW
Mujtaba NickaArgentinaAnna Fali NEW
Smith GlickBrazilAsiya Javayant NEGOTIATION
Aika InouyeUnited KingdomBernardo Dominic UNQUALIFIED
Mujtaba NickaBrazilAmy Elsner QUALIFIED
Chavez BriddickFranceOnyama Limba NEW
Alejandro PerinIndiaElwin Sharvill QUALIFIED
Kaitlin OstroskyItalyAmy Elsner RENEWAL
Murillo MaletFranceIvan Magalhaes QUALIFIED
Salvatore StockhamItalyAnna Fali QUALIFIED
Darci PoquetteUnited KingdomOnyama Limba QUALIFIED
Aika InouyeSpainXuxue Feng RENEWAL
Leon OldroydJapanIoni Bowcher NEW
Francesco ShinkoUnited KingdomAmy Elsner PROPOSAL
Stacey MacleadAustraliaStephen Shaw UNQUALIFIED
Julie StensethBrazilElwin Sharvill QUALIFIED
Stacey MacleadBrazilIoni Bowcher RENEWAL
Antonio CaudyArgentinaElwin Sharvill PROPOSAL
Darci PoquetteSpainAnna Fali NEGOTIATION
Aditya KuskoIndiaAmy Elsner PROPOSAL
Izzy GarufiItalyStephen Shaw QUALIFIED
Leja CaldareraGermanyOnyama Limba NEW
Jones VocelkaItalyAmy Elsner PROPOSAL
Faith GillianItalyIvan Magalhaes RENEWAL
Deepesh ChuiFranceAmy Elsner UNQUALIFIED
Jones VocelkaArgentinaBernardo Dominic PROPOSAL
Wickens NestleJapanOnyama Limba PROPOSAL
Kaitlin OstroskyJapanAmy Elsner RENEWAL
Morrow RutaCanadaElwin Sharvill 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>