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 MorascaSpainIoni Bowcher NEW
Jefferson SchemmerFranceAsiya Javayant NEGOTIATION
Munro FerenczSpainIoni Bowcher NEGOTIATION
Aika InouyeUnited KingdomIoni Bowcher NEGOTIATION
Ashley DoeItalyXuxue Feng NEGOTIATION
Murillo MaletItalyIvan Magalhaes NEW
Juan WieserRussiaOnyama Limba UNQUALIFIED
Cody SaylorsFranceAsiya Javayant PROPOSAL
Kaitlin OstroskyGermanyAsiya Javayant UNQUALIFIED
Clifford RimFranceXuxue Feng UNQUALIFIED
Kadeem FlosiSpainBernardo Dominic QUALIFIED
Stacey MacleadAustraliaIoni Bowcher NEGOTIATION
Francesco ShinkoUnited KingdomStephen Shaw RENEWAL
Jennifer AmigonUnited KingdomXuxue Feng NEGOTIATION
Smith GlickFranceBernardo Dominic UNQUALIFIED
Mujtaba NickaBrazilBernardo Dominic NEW
Wickens NestleItalyAmy Elsner NEW
Julie StensethJapanAmy Elsner NEGOTIATION
Arvin AlbaresIndiaOnyama Limba NEGOTIATION
Aditya KuskoJapanAmy Elsner NEW
Adams MorascaRussiaOnyama Limba PROPOSAL
Ricardo GauchoBrazilIvan Magalhaes NEW
Chavez BriddickArgentinaOnyama Limba PROPOSAL
Antonio CaudySpainXuxue Feng QUALIFIED
Adams MorascaGermanyXuxue Feng RENEWAL
Leon OldroydCanadaXuxue Feng UNQUALIFIED
Murillo MaletCanadaStephen Shaw NEW
Jefferson SchemmerCanadaIoni Bowcher NEGOTIATION
James ButtArgentinaStephen Shaw QUALIFIED
Claire TollnerUnited KingdomAmy Elsner QUALIFIED
Jefferson SchemmerGermanyStephen Shaw RENEWAL
Antonio CaudyItalyAsiya Javayant UNQUALIFIED
Maria MarrierIndiaOnyama Limba NEGOTIATION
Octavia MaletRussiaIvan Magalhaes NEW
Rodrigues CampainArgentinaElwin Sharvill UNQUALIFIED
Nicolas IturbideBrazilOnyama Limba NEW
Tony FollerIndiaIvan Magalhaes QUALIFIED
Jennifer AmigonJapanOnyama Limba QUALIFIED
Aditya KuskoFranceAmy Elsner RENEWAL
James ButtRussiaIoni Bowcher NEW
Maisha RulapaughSpainIoni Bowcher PROPOSAL
Claire TollnerArgentinaAmy Elsner PROPOSAL
Darci PoquetteSpainAsiya Javayant UNQUALIFIED
Johnson SergiGermanyElwin Sharvill RENEWAL
Leja CaldareraAustraliaIvan Magalhaes QUALIFIED
Greenwood BologniaRussiaAsiya Javayant UNQUALIFIED
Isabel BowleyBrazilAmy Elsner PROPOSAL
Wickens NestleFranceAmy Elsner UNQUALIFIED
Ricardo GauchoBrazilAsiya Javayant QUALIFIED
Darci PoquetteIndiaBernardo Dominic PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Nicolas IturbideJapanIvan Magalhaes NEW
Darci PoquetteItalyElwin Sharvill UNQUALIFIED
Ricardo GauchoIndiaAsiya Javayant QUALIFIED
Johnson SergiSpainBernardo Dominic QUALIFIED
Sinclair WaycottJapanXuxue Feng RENEWAL
Greenwood BologniaSpainStephen Shaw NEGOTIATION
Juan WieserIndiaStephen Shaw PROPOSAL
David DarakjyBrazilElwin Sharvill NEW
Juan WieserItalyIoni Bowcher NEW
Ricardo GauchoBrazilAsiya Javayant PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Costa DilliardGermany2026-04-14Rangoni Of Florence RENEWAL60Anna Fali
1001Faith GillianSpain2026-04-19Chemel, James L Cpa PROPOSAL5Onyama Limba
1002Adams MorascaAustralia2026-05-04Chanay, Jeffrey A Esq NEGOTIATION18Anna Fali
1003Silvio SlusarskiFrance2026-04-10Chemel, James L Cpa UNQUALIFIED90Amy Elsner
1004Isabel BowleyCanada2026-04-27Truhlar And Truhlar Attys PROPOSAL40Amy Elsner
1005Misaki RoysterUnited Kingdom2026-04-22Dorl, James J Esq UNQUALIFIED42Amy Elsner
1006Adams MorascaFrance2026-04-20King, Christopher A Esq PROPOSAL64Ivan Magalhaes
1007Kaitlin OstroskyFrance2026-05-02Feltz Printing Service UNQUALIFIED33Stephen Shaw
1008Aditya KuskoAustralia2026-04-20Feiner Bros NEGOTIATION5Ivan Magalhaes
1009Ashley DoeJapan2026-04-14Rousseaux, Michael Esq PROPOSAL21Onyama Limba
1010James ButtIndia2026-05-03Printing Dimensions UNQUALIFIED51Xuxue Feng
1011Misaki RoysterAustralia2026-04-13Chemel, James L Cpa NEGOTIATION34Xuxue Feng
1012Mujtaba NickaAustralia2026-05-08Rangoni Of Florence PROPOSAL28Xuxue Feng
1013Leon OldroydItaly2026-04-30Chanay, Jeffrey A Esq NEW75Bernardo Dominic
1014Deepesh ChuiUnited Kingdom2026-04-14Truhlar And Truhlar Attys RENEWAL93Ioni Bowcher
1015Sinclair WaycottFrance2026-05-02Truhlar And Truhlar Attys QUALIFIED65Elwin Sharvill
1016Cody SaylorsJapan2026-04-27Truhlar And Truhlar Attys NEW84Elwin Sharvill
1017Claire TollnerItaly2026-04-29Dorl, James J Esq NEW46Xuxue Feng
1018Isabel BowleyBrazil2026-04-24Printing Dimensions RENEWAL99Xuxue Feng
1019Johnson SergiIndia2026-05-01Feltz Printing Service NEGOTIATION17Ivan Magalhaes
1020Rodrigues CampainIndia2026-05-03Morlong Associates PROPOSAL63Amy Elsner
1021Tony FollerBrazil2026-05-05Commercial Press RENEWAL4Ioni Bowcher
1022Francesco ShinkoBrazil2026-05-07King, Christopher A Esq NEW10Ivan Magalhaes
1023Ashley DoeIndia2026-05-05Rousseaux, Michael Esq NEGOTIATION99Bernardo Dominic
1024Jefferson SchemmerJapan2026-05-02Buckley Miller Wright NEW99Stephen Shaw
1025Mujtaba NickaRussia2026-05-02Feiner Bros UNQUALIFIED76Onyama Limba
1026Maria MarrierUnited Kingdom2026-05-03Printing Dimensions NEW85Asiya Javayant
1027Arvin AlbaresIndia2026-04-19Morlong Associates UNQUALIFIED50Asiya Javayant
1028Izzy GarufiFrance2026-04-10Chanay, Jeffrey A Esq UNQUALIFIED14Xuxue Feng
1029Ivar PaprockiUnited Kingdom2026-04-29Rousseaux, Michael Esq UNQUALIFIED1Onyama Limba
1030Antonio CaudyArgentina2026-04-13Benton, John B Jr RENEWAL80Xuxue Feng
1031Mujtaba NickaRussia2026-04-14Printing Dimensions PROPOSAL39Ioni Bowcher
1032Faith GillianArgentina2026-04-30Commercial Press NEGOTIATION87Asiya Javayant
1033James ButtItaly2026-04-22Rangoni Of Florence NEGOTIATION6Anna Fali
1034Costa DilliardFrance2026-04-21Rousseaux, Michael Esq RENEWAL83Anna Fali
1035Kadeem FlosiGermany2026-05-01Feltz Printing Service QUALIFIED28Bernardo Dominic
1036Maisha RulapaughGermany2026-04-20Chemel, James L Cpa NEW35Xuxue Feng
1037Isabel BowleyRussia2026-05-04Feiner Bros QUALIFIED5Ivan Magalhaes
1038Sinclair WaycottRussia2026-04-16Morlong Associates RENEWAL18Asiya Javayant
1039Maria MarrierIndia2026-04-24Buckley Miller Wright NEGOTIATION76Bernardo Dominic
1040Morrow RutaSpain2026-04-26Chemel, James L Cpa RENEWAL0Stephen Shaw
1041Costa DilliardAustralia2026-04-24Printing Dimensions RENEWAL59Onyama Limba
1042Murillo MaletItaly2026-05-06Truhlar And Truhlar Attys QUALIFIED49Stephen Shaw
1043Francesco ShinkoSpain2026-04-21Commercial Press UNQUALIFIED9Ivan Magalhaes
1044Leja CaldareraFrance2026-05-08Rangoni Of Florence NEW25Ioni Bowcher
1045Isabel BowleySpain2026-04-15Printing Dimensions UNQUALIFIED22Asiya Javayant
1046Jeanfrancois VenereFrance2026-04-12Chanay, Jeffrey A Esq QUALIFIED70Anna Fali
1047Morrow RutaItaly2026-04-24Feltz Printing Service NEGOTIATION52Elwin Sharvill
1048Smith GlickArgentina2026-04-17Dorl, James J Esq NEGOTIATION26Ivan Magalhaes
1049Johnson SergiAustralia2026-05-08Feiner Bros QUALIFIED55Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Jefferson SchemmerCanadaStephen Shaw PROPOSAL
Mayumi KolmetzUnited KingdomBernardo Dominic NEGOTIATION
Maria MarrierSpainIoni Bowcher NEW
Ashley DoeArgentinaElwin Sharvill PROPOSAL
Ricardo GauchoAustraliaIvan Magalhaes QUALIFIED
Misaki RoysterIndiaIoni Bowcher UNQUALIFIED
Costa DilliardArgentinaIoni Bowcher QUALIFIED
Tony FollerCanadaStephen Shaw UNQUALIFIED
Misaki RoysterAustraliaStephen Shaw PROPOSAL
Smith GlickRussiaIvan Magalhaes PROPOSAL
Costa DilliardBrazilBernardo Dominic RENEWAL
Kadeem FlosiJapanAsiya Javayant QUALIFIED
Sinclair WaycottRussiaIoni Bowcher UNQUALIFIED
Maisha RulapaughArgentinaOnyama Limba RENEWAL
Rodrigues CampainArgentinaBernardo Dominic QUALIFIED
Misaki RoysterUnited KingdomXuxue Feng QUALIFIED
Leon OldroydGermanyIoni Bowcher UNQUALIFIED
Ricardo GauchoGermanyBernardo Dominic UNQUALIFIED
James ButtAustraliaXuxue Feng UNQUALIFIED
Jones VocelkaItalyStephen Shaw RENEWAL
Jennifer AmigonArgentinaIvan Magalhaes NEGOTIATION
Juan WieserItalyElwin Sharvill UNQUALIFIED
Sinclair WaycottUnited KingdomIoni Bowcher NEGOTIATION
Chavez BriddickArgentinaBernardo Dominic QUALIFIED
Mujtaba NickaSpainStephen Shaw PROPOSAL
Salvatore StockhamRussiaBernardo Dominic QUALIFIED
Tony FollerRussiaAmy Elsner RENEWAL
Deepesh ChuiUnited KingdomAmy Elsner UNQUALIFIED
Juan WieserGermanyOnyama Limba RENEWAL
Aruna FigeroaArgentinaOnyama Limba UNQUALIFIED
Costa DilliardRussiaXuxue Feng UNQUALIFIED
Cody SaylorsIndiaStephen Shaw UNQUALIFIED
Claire TollnerSpainAmy Elsner RENEWAL
Costa DilliardCanadaAmy Elsner RENEWAL
Francesco ShinkoArgentinaStephen Shaw NEGOTIATION
James ButtRussiaAmy Elsner NEGOTIATION
Chavez BriddickUnited KingdomAmy Elsner UNQUALIFIED
Octavia MaletItalyIvan Magalhaes NEGOTIATION
Ricardo GauchoGermanyAmy Elsner NEW
Morrow RutaCanadaElwin Sharvill NEGOTIATION
Murillo MaletItalyOnyama Limba NEW
Ashley DoeIndiaAmy Elsner NEW
Costa DilliardFranceAsiya Javayant NEGOTIATION
Mujtaba NickaItalyElwin Sharvill RENEWAL
Maria MarrierCanadaBernardo Dominic QUALIFIED
Rodrigues CampainJapanAmy Elsner NEW
Leja CaldareraJapanStephen Shaw NEW
Tony FollerJapanAsiya Javayant RENEWAL
Murillo MaletGermanyBernardo Dominic NEGOTIATION
Claire TollnerUnited KingdomBernardo Dominic PROPOSAL
Frozen Columns
Name
Claire Tollner
Greenwood Bolognia
Jeanfrancois Venere
Aika Inouye
Rodrigues Campain
Tony Foller
Morrow Ruta
Leja Caldarera
Julie Stenseth
Greenwood Bolognia
Greenwood Bolognia
Silvio Slusarski
Aditya Kusko
Deepesh Chui
Silvio Slusarski
Wickens Nestle
Mayumi Kolmetz
Ivar Paprocki
Isabel Bowley
Leja Caldarera
Kaitlin Ostrosky
Silvio Slusarski
Juan Wieser
Francesco Shinko
Rodrigues Campain
Jennifer Amigon
Ashley Doe
Cody Saylors
Deepesh Chui
Ashley Doe
Aditya Kusko
Jefferson Schemmer
Murillo Malet
Octavia Malet
Misaki Royster
Leja Caldarera
Tony Foller
Salvatore Stockham
Kadeem Flosi
Octavia Malet
Wickens Nestle
Stacey Maclead
Johnson Sergi
Stacey Maclead
Murillo Malet
Claire Tollner
Salvatore Stockham
Jefferson Schemmer
Wickens Nestle
Tony Foller
IdCountryDate
1000Italy2026-04-11
1001India2026-05-09
1002Germany2026-04-28
1003Italy2026-04-14
1004Italy2026-05-02
1005India2026-04-26
1006Germany2026-05-03
1007Brazil2026-04-10
1008Argentina2026-04-14
1009United Kingdom2026-04-13
1010Australia2026-04-29
1011Italy2026-04-25
1012France2026-05-04
1013Australia2026-05-02
1014Canada2026-04-14
1015United Kingdom2026-04-22
1016Australia2026-04-24
1017Argentina2026-04-30
1018Germany2026-05-01
1019Japan2026-05-06
1020France2026-04-20
1021Italy2026-04-26
1022Italy2026-04-18
1023Argentina2026-05-03
1024Canada2026-05-04
1025Spain2026-04-27
1026Argentina2026-04-11
1027Russia2026-04-26
1028Russia2026-05-08
1029Argentina2026-04-23
1030Argentina2026-04-15
1031Australia2026-05-05
1032Russia2026-05-06
1033Italy2026-05-04
1034Spain2026-04-27
1035India2026-04-16
1036Australia2026-04-15
1037Argentina2026-04-10
1038India2026-04-28
1039France2026-04-16
1040Australia2026-05-02
1041Argentina2026-05-08
1042Argentina2026-04-15
1043India2026-04-29
1044Spain2026-04-30
1045Australia2026-04-20
1046Canada2026-05-09
1047Germany2026-04-26
1048Spain2026-04-30
1049Australia2026-04-22

On-Demand Data

NameIdCountryDate
Maria Marrier1000Italy2026-04-26
Darci Poquette1001Argentina2026-04-11
Sinclair Waycott1002Russia2026-05-06
Maria Marrier1003Canada2026-04-22
Leon Oldroyd1004Spain2026-04-17
Claire Tollner1005United Kingdom2026-04-27
Greenwood Bolognia1006Brazil2026-04-22
Mujtaba Nicka1007Italy2026-04-30
Rodrigues Campain1008Germany2026-05-07
Darci Poquette1009Canada2026-05-03
Cody Saylors1010India2026-04-11
Darci Poquette1011Italy2026-04-11
Kaitlin Ostrosky1012Italy2026-05-09
Isabel Bowley1013Italy2026-05-05
Antonio Caudy1014Japan2026-04-25
Leon Oldroyd1015Germany2026-05-06
Chavez Briddick1016Canada2026-05-09
Emily Whobrey1017Argentina2026-05-08
Greenwood Bolognia1018Canada2026-04-28
Darci Poquette1019India2026-04-17
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Costa DilliardGermanyStephen Shaw UNQUALIFIED
Darci PoquetteArgentinaIoni Bowcher RENEWAL
Adams MorascaUnited KingdomIoni Bowcher NEW
Murillo MaletRussiaStephen Shaw QUALIFIED
Aruna FigeroaArgentinaAsiya Javayant NEW
Juan WieserCanadaAmy Elsner PROPOSAL
Alejandro PerinCanadaAsiya Javayant UNQUALIFIED
Arvin AlbaresJapanStephen Shaw PROPOSAL
Nicolas IturbideGermanyAmy Elsner NEW
Clifford RimCanadaElwin Sharvill UNQUALIFIED
Smith GlickGermanyAnna Fali PROPOSAL
Adams MorascaJapanElwin Sharvill UNQUALIFIED
Cody SaylorsIndiaOnyama Limba RENEWAL
Leja CaldareraIndiaElwin Sharvill PROPOSAL
Clifford RimRussiaOnyama Limba RENEWAL
Julie StensethGermanyIvan Magalhaes RENEWAL
Morrow RutaItalyAmy Elsner UNQUALIFIED
Faith GillianArgentinaAmy Elsner NEGOTIATION
Deepesh ChuiRussiaAsiya Javayant NEW
Wickens NestleBrazilAsiya Javayant NEW
Aruna FigeroaArgentinaIvan Magalhaes QUALIFIED
Clifford RimUnited KingdomAsiya Javayant NEW
Isabel BowleyFranceOnyama Limba PROPOSAL
Antonio CaudyItalyStephen Shaw NEW
James ButtArgentinaXuxue Feng NEW
Maria MarrierArgentinaStephen Shaw UNQUALIFIED
Sinclair WaycottGermanyXuxue Feng PROPOSAL
Ashley DoeFranceElwin Sharvill QUALIFIED
Octavia MaletCanadaBernardo Dominic RENEWAL
Kadeem FlosiRussiaElwin Sharvill UNQUALIFIED
Wickens NestleBrazilBernardo Dominic QUALIFIED
Silvio SlusarskiFranceStephen Shaw PROPOSAL
Octavia MaletUnited KingdomIoni Bowcher UNQUALIFIED
Costa DilliardAustraliaOnyama Limba QUALIFIED
Darci PoquetteArgentinaIoni Bowcher NEGOTIATION
Emily WhobreyUnited KingdomStephen Shaw UNQUALIFIED
Murillo MaletFranceAnna Fali UNQUALIFIED
Antonio CaudyBrazilIvan Magalhaes NEGOTIATION
Adams MorascaAustraliaAmy Elsner QUALIFIED
Nicolas IturbideItalyBernardo Dominic 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>