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
Arvin AlbaresBrazilXuxue Feng NEW
Stacey MacleadUnited KingdomAmy Elsner UNQUALIFIED
Stacey MacleadCanadaAmy Elsner QUALIFIED
Jefferson SchemmerFranceIvan Magalhaes NEW
Kaitlin OstroskyBrazilBernardo Dominic PROPOSAL
Julie StensethItalyElwin Sharvill RENEWAL
Jones VocelkaArgentinaOnyama Limba PROPOSAL
Silvio SlusarskiSpainBernardo Dominic PROPOSAL
Arvin AlbaresAustraliaStephen Shaw NEW
Darci PoquetteCanadaStephen Shaw QUALIFIED
Maisha RulapaughJapanXuxue Feng NEW
Francesco ShinkoIndiaStephen Shaw UNQUALIFIED
Claire TollnerIndiaElwin Sharvill RENEWAL
Salvatore StockhamRussiaBernardo Dominic UNQUALIFIED
Wickens NestleAustraliaOnyama Limba NEGOTIATION
Faith GillianIndiaBernardo Dominic UNQUALIFIED
David DarakjyGermanyXuxue Feng UNQUALIFIED
Jeanfrancois VenereRussiaAnna Fali NEW
Izzy GarufiGermanyElwin Sharvill UNQUALIFIED
Claire TollnerAustraliaAmy Elsner RENEWAL
Faith GillianIndiaIvan Magalhaes RENEWAL
Octavia MaletUnited KingdomElwin Sharvill NEGOTIATION
Johnson SergiIndiaIvan Magalhaes NEW
Stacey MacleadJapanIoni Bowcher PROPOSAL
Emily WhobreySpainElwin Sharvill NEGOTIATION
Sinclair WaycottCanadaBernardo Dominic UNQUALIFIED
Aditya KuskoCanadaBernardo Dominic NEW
Maria MarrierCanadaIoni Bowcher UNQUALIFIED
Kadeem FlosiItalyIoni Bowcher RENEWAL
Ivar PaprockiArgentinaAsiya Javayant QUALIFIED
Emily WhobreyUnited KingdomIoni Bowcher UNQUALIFIED
Jeanfrancois VenereBrazilOnyama Limba UNQUALIFIED
James ButtRussiaIvan Magalhaes RENEWAL
Jefferson SchemmerSpainAsiya Javayant NEGOTIATION
Julie StensethUnited KingdomStephen Shaw NEGOTIATION
Johnson SergiFranceStephen Shaw RENEWAL
Juan WieserJapanAnna Fali UNQUALIFIED
Adams MorascaRussiaXuxue Feng RENEWAL
Nicolas IturbideSpainAmy Elsner NEGOTIATION
Ricardo GauchoIndiaOnyama Limba NEGOTIATION
Wickens NestleCanadaOnyama Limba RENEWAL
Mujtaba NickaArgentinaAmy Elsner QUALIFIED
Izzy GarufiIndiaOnyama Limba NEGOTIATION
Wickens NestleItalyAmy Elsner RENEWAL
Costa DilliardFranceIvan Magalhaes PROPOSAL
Mujtaba NickaItalyAnna Fali PROPOSAL
Julie StensethIndiaAmy Elsner QUALIFIED
Silvio SlusarskiItalyAnna Fali UNQUALIFIED
Morrow RutaArgentinaAnna Fali RENEWAL
Leja CaldareraItalyAmy Elsner PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Costa DilliardSpainOnyama Limba RENEWAL
Clifford RimJapanIvan Magalhaes NEGOTIATION
Morrow RutaItalyElwin Sharvill PROPOSAL
Deepesh ChuiIndiaAmy Elsner NEGOTIATION
Johnson SergiFranceBernardo Dominic NEW
Aditya KuskoUnited KingdomAmy Elsner RENEWAL
Tony FollerItalyBernardo Dominic NEGOTIATION
Rodrigues CampainUnited KingdomAsiya Javayant UNQUALIFIED
Arvin AlbaresRussiaBernardo Dominic RENEWAL
Emily WhobreyRussiaIoni Bowcher QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jones VocelkaCanada2026-05-24Feiner Bros NEW1Amy Elsner
1001Kadeem FlosiSpain2026-05-19Rangoni Of Florence QUALIFIED92Amy Elsner
1002Jefferson SchemmerJapan2026-05-30Chanay, Jeffrey A Esq PROPOSAL83Bernardo Dominic
1003Aika InouyeItaly2026-05-30Dorl, James J Esq NEGOTIATION28Asiya Javayant
1004Jeanfrancois VenereArgentina2026-05-30Buckley Miller Wright NEW26Ivan Magalhaes
1005Chavez BriddickUnited Kingdom2026-06-07Commercial Press QUALIFIED45Amy Elsner
1006Jefferson SchemmerArgentina2026-06-11King, Christopher A Esq RENEWAL10Amy Elsner
1007Chavez BriddickArgentina2026-05-31Truhlar And Truhlar Attys RENEWAL86Anna Fali
1008Leja CaldareraAustralia2026-05-25Commercial Press RENEWAL82Amy Elsner
1009Emily WhobreyRussia2026-05-29Chanay, Jeffrey A Esq PROPOSAL95Xuxue Feng
1010Ricardo GauchoJapan2026-05-23Chapman, Ross E Esq QUALIFIED86Ioni Bowcher
1011Tony FollerRussia2026-05-28Morlong Associates NEW78Bernardo Dominic
1012Jefferson SchemmerCanada2026-06-01Morlong Associates NEW58Xuxue Feng
1013David DarakjyIndia2026-06-05Rousseaux, Michael Esq QUALIFIED99Ivan Magalhaes
1014Kadeem FlosiSpain2026-06-02Feltz Printing Service QUALIFIED78Anna Fali
1015Misaki RoysterRussia2026-05-27Dorl, James J Esq RENEWAL20Ivan Magalhaes
1016Greenwood BologniaCanada2026-05-24Feltz Printing Service RENEWAL62Onyama Limba
1017Salvatore StockhamArgentina2026-05-28King, Christopher A Esq RENEWAL57Ioni Bowcher
1018Emily WhobreyCanada2026-06-09Feltz Printing Service PROPOSAL40Stephen Shaw
1019Emily WhobreyBrazil2026-05-31Dorl, James J Esq NEGOTIATION49Bernardo Dominic
1020James ButtFrance2026-05-17Morlong Associates RENEWAL34Anna Fali
1021Sinclair WaycottBrazil2026-05-19King, Christopher A Esq QUALIFIED17Onyama Limba
1022Ashley DoeGermany2026-05-18Rangoni Of Florence NEGOTIATION42Bernardo Dominic
1023Jeanfrancois VenereArgentina2026-05-27Chapman, Ross E Esq NEGOTIATION5Elwin Sharvill
1024Kadeem FlosiGermany2026-06-09Buckley Miller Wright QUALIFIED55Xuxue Feng
1025Jennifer AmigonItaly2026-05-18Rousseaux, Michael Esq NEGOTIATION14Elwin Sharvill
1026Julie StensethIndia2026-05-23Dorl, James J Esq NEW66Elwin Sharvill
1027Julie StensethUnited Kingdom2026-06-02Commercial Press NEW98Xuxue Feng
1028Deepesh ChuiArgentina2026-05-19Truhlar And Truhlar Attys NEGOTIATION33Elwin Sharvill
1029Darci PoquetteAustralia2026-05-21Buckley Miller Wright RENEWAL85Amy Elsner
1030David DarakjyBrazil2026-05-14Chemel, James L Cpa UNQUALIFIED76Amy Elsner
1031Ricardo GauchoFrance2026-06-06Rousseaux, Michael Esq PROPOSAL46Onyama Limba
1032Darci PoquetteRussia2026-05-26Feiner Bros NEW58Anna Fali
1033Arvin AlbaresCanada2026-05-25Truhlar And Truhlar Attys PROPOSAL60Asiya Javayant
1034Greenwood BologniaIndia2026-06-04Rangoni Of Florence NEGOTIATION82Amy Elsner
1035Kadeem FlosiUnited Kingdom2026-05-18Chemel, James L Cpa UNQUALIFIED38Ioni Bowcher
1036Munro FerenczRussia2026-05-17Feiner Bros NEW24Stephen Shaw
1037Deepesh ChuiAustralia2026-05-29Dorl, James J Esq UNQUALIFIED96Ivan Magalhaes
1038Munro FerenczRussia2026-05-17Dorl, James J Esq NEGOTIATION92Amy Elsner
1039Cody SaylorsBrazil2026-05-23Chapman, Ross E Esq PROPOSAL36Ioni Bowcher
1040James ButtArgentina2026-06-09Rangoni Of Florence RENEWAL61Bernardo Dominic
1041Kadeem FlosiFrance2026-06-05Rangoni Of Florence RENEWAL88Xuxue Feng
1042Adams MorascaUnited Kingdom2026-05-17Truhlar And Truhlar Attys UNQUALIFIED22Amy Elsner
1043Ricardo GauchoSpain2026-06-02Chapman, Ross E Esq NEGOTIATION45Bernardo Dominic
1044Johnson SergiItaly2026-05-26Rangoni Of Florence NEGOTIATION79Bernardo Dominic
1045Jeanfrancois VenereBrazil2026-05-24Dorl, James J Esq NEW43Ivan Magalhaes
1046Munro FerenczCanada2026-05-27Dorl, James J Esq RENEWAL2Xuxue Feng
1047Julie StensethGermany2026-06-01Chanay, Jeffrey A Esq UNQUALIFIED13Ivan Magalhaes
1048Antonio CaudyBrazil2026-05-27Rousseaux, Michael Esq QUALIFIED37Elwin Sharvill
1049Alejandro PerinIndia2026-05-15King, Christopher A Esq PROPOSAL1Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Kadeem FlosiAustraliaIoni Bowcher PROPOSAL
Juan WieserBrazilAsiya Javayant PROPOSAL
Costa DilliardAustraliaIvan Magalhaes NEW
Leja CaldareraIndiaAmy Elsner RENEWAL
Smith GlickRussiaIoni Bowcher QUALIFIED
Jefferson SchemmerAustraliaIvan Magalhaes PROPOSAL
Aika InouyeArgentinaAmy Elsner RENEWAL
Misaki RoysterIndiaAnna Fali UNQUALIFIED
Leja CaldareraAustraliaIoni Bowcher NEGOTIATION
Tony FollerBrazilXuxue Feng NEGOTIATION
Maisha RulapaughCanadaElwin Sharvill RENEWAL
Misaki RoysterUnited KingdomAnna Fali NEW
Munro FerenczArgentinaAmy Elsner RENEWAL
David DarakjyItalyOnyama Limba QUALIFIED
Munro FerenczSpainBernardo Dominic NEW
Silvio SlusarskiAustraliaElwin Sharvill PROPOSAL
Octavia MaletItalyAsiya Javayant NEGOTIATION
Greenwood BologniaJapanXuxue Feng QUALIFIED
Maria MarrierRussiaAmy Elsner RENEWAL
Ricardo GauchoRussiaIoni Bowcher RENEWAL
Jefferson SchemmerUnited KingdomAmy Elsner RENEWAL
Kadeem FlosiBrazilAmy Elsner NEW
David DarakjyCanadaAmy Elsner NEGOTIATION
Antonio CaudyRussiaIoni Bowcher NEW
Morrow RutaUnited KingdomAsiya Javayant UNQUALIFIED
Antonio CaudyGermanyIvan Magalhaes RENEWAL
Mayumi KolmetzFranceAmy Elsner NEW
Johnson SergiBrazilAnna Fali NEGOTIATION
Jefferson SchemmerAustraliaXuxue Feng QUALIFIED
Stacey MacleadArgentinaIvan Magalhaes NEGOTIATION
Ricardo GauchoGermanyXuxue Feng PROPOSAL
Salvatore StockhamGermanyBernardo Dominic UNQUALIFIED
Silvio SlusarskiIndiaElwin Sharvill QUALIFIED
Jennifer AmigonItalyIoni Bowcher UNQUALIFIED
Mayumi KolmetzItalyXuxue Feng UNQUALIFIED
Isabel BowleyGermanyIoni Bowcher PROPOSAL
Aditya KuskoJapanAmy Elsner UNQUALIFIED
Leon OldroydBrazilIoni Bowcher UNQUALIFIED
Aruna FigeroaSpainIoni Bowcher PROPOSAL
Antonio CaudyCanadaAmy Elsner RENEWAL
Salvatore StockhamArgentinaElwin Sharvill NEGOTIATION
Wickens NestleArgentinaOnyama Limba RENEWAL
Misaki RoysterSpainOnyama Limba NEW
Costa DilliardUnited KingdomAmy Elsner RENEWAL
Leon OldroydGermanyAsiya Javayant RENEWAL
Mayumi KolmetzRussiaAmy Elsner UNQUALIFIED
Jeanfrancois VenereIndiaIoni Bowcher UNQUALIFIED
Emily WhobreySpainAmy Elsner NEGOTIATION
Ricardo GauchoIndiaAsiya Javayant RENEWAL
Ivar PaprockiJapanXuxue Feng NEW
Frozen Columns
Name
Maria Marrier
Morrow Ruta
Murillo Malet
Leon Oldroyd
Tony Foller
Misaki Royster
Smith Glick
Murillo Malet
Misaki Royster
Mayumi Kolmetz
Claire Tollner
Chavez Briddick
Costa Dilliard
Adams Morasca
Tony Foller
Aditya Kusko
Ivar Paprocki
Izzy Garufi
Clifford Rim
Tony Foller
Aika Inouye
Alejandro Perin
Kadeem Flosi
Octavia Malet
Deepesh Chui
Julie Stenseth
Emily Whobrey
Antonio Caudy
Deepesh Chui
Rodrigues Campain
Jennifer Amigon
Antonio Caudy
Emily Whobrey
Rodrigues Campain
Darci Poquette
Mayumi Kolmetz
Morrow Ruta
Mayumi Kolmetz
Wickens Nestle
Cody Saylors
Misaki Royster
Sinclair Waycott
Antonio Caudy
Rodrigues Campain
Maisha Rulapaugh
Stacey Maclead
Deepesh Chui
Mayumi Kolmetz
Silvio Slusarski
Darci Poquette
IdCountryDate
1000Spain2026-06-09
1001Italy2026-05-29
1002Germany2026-06-08
1003Italy2026-05-31
1004Russia2026-06-01
1005United Kingdom2026-05-24
1006United Kingdom2026-05-19
1007Spain2026-05-30
1008Canada2026-05-25
1009United Kingdom2026-05-31
1010Germany2026-06-04
1011Brazil2026-05-30
1012Argentina2026-05-30
1013Japan2026-05-26
1014Japan2026-05-15
1015France2026-05-31
1016Germany2026-05-17
1017Australia2026-05-18
1018Russia2026-06-03
1019Canada2026-05-14
1020Spain2026-05-31
1021Italy2026-05-25
1022Germany2026-05-29
1023Canada2026-05-14
1024Russia2026-06-10
1025United Kingdom2026-05-31
1026Argentina2026-05-27
1027Spain2026-06-09
1028Spain2026-06-05
1029Japan2026-06-08
1030Spain2026-06-01
1031Brazil2026-06-07
1032Germany2026-05-19
1033Brazil2026-05-26
1034Argentina2026-05-21
1035France2026-05-21
1036Brazil2026-05-27
1037Australia2026-06-09
1038Japan2026-05-29
1039Germany2026-06-07
1040France2026-05-29
1041India2026-05-13
1042Australia2026-05-26
1043United Kingdom2026-05-20
1044India2026-06-02
1045Canada2026-06-09
1046United Kingdom2026-05-29
1047Italy2026-05-20
1048Russia2026-05-27
1049France2026-06-03

On-Demand Data

NameIdCountryDate
Izzy Garufi1000Argentina2026-06-01
Mayumi Kolmetz1001Russia2026-06-01
Smith Glick1002Italy2026-05-31
Murillo Malet1003United Kingdom2026-06-08
David Darakjy1004India2026-05-23
Tony Foller1005India2026-05-16
Silvio Slusarski1006Japan2026-05-14
Aruna Figeroa1007India2026-06-02
Leon Oldroyd1008Argentina2026-06-06
Jefferson Schemmer1009Russia2026-05-21
Ivar Paprocki1010France2026-05-24
Maria Marrier1011Spain2026-05-18
Maisha Rulapaugh1012Spain2026-05-21
Greenwood Bolognia1013United Kingdom2026-05-16
Ivar Paprocki1014Spain2026-05-21
Claire Tollner1015India2026-06-02
Silvio Slusarski1016India2026-05-16
Aruna Figeroa1017India2026-05-30
Stacey Maclead1018Australia2026-05-18
Smith Glick1019United Kingdom2026-06-07
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Mujtaba NickaUnited KingdomElwin Sharvill PROPOSAL
Francesco ShinkoBrazilStephen Shaw UNQUALIFIED
Faith GillianBrazilAmy Elsner NEGOTIATION
Smith GlickIndiaIvan Magalhaes UNQUALIFIED
Morrow RutaJapanOnyama Limba QUALIFIED
Arvin AlbaresIndiaXuxue Feng PROPOSAL
Ivar PaprockiBrazilAnna Fali PROPOSAL
Rodrigues CampainCanadaIvan Magalhaes NEW
Rodrigues CampainSpainXuxue Feng PROPOSAL
Aika InouyeIndiaIoni Bowcher QUALIFIED
James ButtBrazilBernardo Dominic NEGOTIATION
Jones VocelkaJapanAsiya Javayant PROPOSAL
Jefferson SchemmerItalyAnna Fali NEW
Nicolas IturbideAustraliaAmy Elsner PROPOSAL
Jeanfrancois VenereItalyAsiya Javayant NEGOTIATION
Octavia MaletJapanXuxue Feng NEGOTIATION
Maria MarrierUnited KingdomIvan Magalhaes PROPOSAL
Smith GlickArgentinaOnyama Limba QUALIFIED
Leja CaldareraArgentinaIoni Bowcher NEGOTIATION
Aika InouyeCanadaStephen Shaw UNQUALIFIED
Juan WieserFranceIvan Magalhaes QUALIFIED
Aditya KuskoItalyIvan Magalhaes UNQUALIFIED
Francesco ShinkoRussiaXuxue Feng PROPOSAL
Silvio SlusarskiAustraliaIvan Magalhaes UNQUALIFIED
Greenwood BologniaBrazilAnna Fali UNQUALIFIED
Leja CaldareraItalyStephen Shaw QUALIFIED
Kadeem FlosiSpainAmy Elsner NEGOTIATION
Julie StensethArgentinaIoni Bowcher RENEWAL
Misaki RoysterIndiaAmy Elsner NEW
Deepesh ChuiRussiaElwin Sharvill UNQUALIFIED
Maria MarrierIndiaIoni Bowcher NEW
Adams MorascaJapanIvan Magalhaes RENEWAL
Morrow RutaSpainXuxue Feng RENEWAL
Tony FollerGermanyOnyama Limba RENEWAL
Ashley DoeUnited KingdomElwin Sharvill QUALIFIED
Silvio SlusarskiArgentinaIoni Bowcher PROPOSAL
Julie StensethJapanIvan Magalhaes PROPOSAL
Aika InouyeSpainBernardo Dominic UNQUALIFIED
Darci PoquetteFranceXuxue Feng NEW
Octavia MaletItalyElwin Sharvill 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>