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
Aruna FigeroaAustraliaAmy Elsner RENEWAL
Maisha RulapaughUnited KingdomAsiya Javayant NEW
Mayumi KolmetzGermanyOnyama Limba RENEWAL
Francesco ShinkoGermanyElwin Sharvill QUALIFIED
Adams MorascaIndiaXuxue Feng NEGOTIATION
Aditya KuskoAustraliaOnyama Limba UNQUALIFIED
Aruna FigeroaIndiaAmy Elsner UNQUALIFIED
Julie StensethFranceElwin Sharvill UNQUALIFIED
Kadeem FlosiItalyXuxue Feng NEGOTIATION
Alejandro PerinSpainBernardo Dominic UNQUALIFIED
Aruna FigeroaGermanyIoni Bowcher NEGOTIATION
Sinclair WaycottCanadaXuxue Feng NEW
Jefferson SchemmerRussiaIoni Bowcher RENEWAL
Ashley DoeIndiaElwin Sharvill RENEWAL
Greenwood BologniaJapanAsiya Javayant UNQUALIFIED
Maisha RulapaughBrazilBernardo Dominic QUALIFIED
Aika InouyeUnited KingdomAmy Elsner QUALIFIED
Aditya KuskoFranceAsiya Javayant NEGOTIATION
Ashley DoeSpainElwin Sharvill NEW
Sinclair WaycottAustraliaAnna Fali UNQUALIFIED
Chavez BriddickIndiaAsiya Javayant RENEWAL
Juan WieserCanadaXuxue Feng QUALIFIED
Alejandro PerinJapanAsiya Javayant PROPOSAL
James ButtCanadaIoni Bowcher RENEWAL
Ivar PaprockiRussiaXuxue Feng NEW
Salvatore StockhamAustraliaElwin Sharvill PROPOSAL
Ashley DoeFranceIoni Bowcher UNQUALIFIED
Costa DilliardBrazilAmy Elsner NEW
Maria MarrierBrazilXuxue Feng NEGOTIATION
Mujtaba NickaBrazilAnna Fali NEGOTIATION
Rodrigues CampainSpainOnyama Limba UNQUALIFIED
Cody SaylorsBrazilElwin Sharvill UNQUALIFIED
Julie StensethRussiaXuxue Feng QUALIFIED
Francesco ShinkoRussiaBernardo Dominic NEW
Aruna FigeroaGermanyStephen Shaw PROPOSAL
Maria MarrierIndiaElwin Sharvill UNQUALIFIED
Jennifer AmigonArgentinaElwin Sharvill UNQUALIFIED
Wickens NestleUnited KingdomAnna Fali RENEWAL
Johnson SergiJapanBernardo Dominic NEGOTIATION
Misaki RoysterAustraliaIvan Magalhaes RENEWAL
Salvatore StockhamFranceAmy Elsner NEGOTIATION
Francesco ShinkoUnited KingdomElwin Sharvill NEGOTIATION
Francesco ShinkoBrazilIvan Magalhaes NEW
Rodrigues CampainArgentinaAnna Fali PROPOSAL
Greenwood BologniaFranceAmy Elsner QUALIFIED
Darci PoquetteSpainAmy Elsner NEW
Jennifer AmigonRussiaAmy Elsner RENEWAL
Smith GlickUnited KingdomAsiya Javayant NEGOTIATION
Faith GillianArgentinaBernardo Dominic UNQUALIFIED
Kadeem FlosiIndiaIvan Magalhaes RENEWAL
Horizontal
NameCountryRepresentativeStatus
Ashley DoeIndiaBernardo Dominic RENEWAL
Murillo MaletJapanOnyama Limba RENEWAL
Stacey MacleadRussiaOnyama Limba RENEWAL
Greenwood BologniaUnited KingdomXuxue Feng NEW
David DarakjyIndiaAmy Elsner UNQUALIFIED
Ricardo GauchoIndiaElwin Sharvill UNQUALIFIED
Greenwood BologniaAustraliaOnyama Limba QUALIFIED
Deepesh ChuiBrazilBernardo Dominic NEW
Jefferson SchemmerUnited KingdomBernardo Dominic RENEWAL
Adams MorascaFranceIvan Magalhaes PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Munro FerenczCanada2026-05-24Rangoni Of Florence RENEWAL74Ioni Bowcher
1001Ivar PaprockiCanada2026-05-21Buckley Miller Wright QUALIFIED84Amy Elsner
1002Octavia MaletCanada2026-06-03Dorl, James J Esq RENEWAL23Stephen Shaw
1003Izzy GarufiGermany2026-06-01Truhlar And Truhlar Attys QUALIFIED61Ioni Bowcher
1004Jennifer AmigonGermany2026-05-25Benton, John B Jr NEGOTIATION91Xuxue Feng
1005Salvatore StockhamRussia2026-05-19Benton, John B Jr QUALIFIED78Elwin Sharvill
1006Aditya KuskoAustralia2026-05-12Rousseaux, Michael Esq NEGOTIATION94Ivan Magalhaes
1007Ricardo GauchoJapan2026-05-23Chapman, Ross E Esq PROPOSAL4Asiya Javayant
1008Rodrigues CampainJapan2026-06-09Printing Dimensions RENEWAL36Bernardo Dominic
1009Maria MarrierCanada2026-06-06Chemel, James L Cpa QUALIFIED46Xuxue Feng
1010Munro FerenczAustralia2026-05-19Feltz Printing Service NEW93Xuxue Feng
1011Maria MarrierBrazil2026-06-06Feltz Printing Service UNQUALIFIED69Asiya Javayant
1012Sinclair WaycottJapan2026-05-14Printing Dimensions RENEWAL41Elwin Sharvill
1013Ivar PaprockiIndia2026-05-14Morlong Associates NEGOTIATION1Bernardo Dominic
1014Aika InouyeBrazil2026-05-12Commercial Press PROPOSAL11Amy Elsner
1015Smith GlickGermany2026-06-05Dorl, James J Esq NEGOTIATION45Elwin Sharvill
1016Deepesh ChuiCanada2026-05-28Truhlar And Truhlar Attys NEGOTIATION74Asiya Javayant
1017Rodrigues CampainCanada2026-05-27Rangoni Of Florence NEW79Ioni Bowcher
1018Morrow RutaIndia2026-06-02Rousseaux, Michael Esq RENEWAL36Ivan Magalhaes
1019Jennifer AmigonAustralia2026-05-31Chemel, James L Cpa PROPOSAL79Asiya Javayant
1020David DarakjyBrazil2026-06-06Dorl, James J Esq UNQUALIFIED78Bernardo Dominic
1021Emily WhobreyRussia2026-05-14Morlong Associates NEW28Ioni Bowcher
1022Rodrigues CampainItaly2026-06-04Buckley Miller Wright RENEWAL0Ioni Bowcher
1023Silvio SlusarskiSpain2026-05-12Rangoni Of Florence NEW36Elwin Sharvill
1024Octavia MaletJapan2026-05-24Rousseaux, Michael Esq QUALIFIED79Elwin Sharvill
1025Misaki RoysterBrazil2026-06-07Chanay, Jeffrey A Esq NEGOTIATION66Onyama Limba
1026Ivar PaprockiBrazil2026-05-27King, Christopher A Esq NEW2Elwin Sharvill
1027Mujtaba NickaItaly2026-05-16Truhlar And Truhlar Attys UNQUALIFIED13Asiya Javayant
1028Octavia MaletIndia2026-06-07Dorl, James J Esq NEGOTIATION5Asiya Javayant
1029Aika InouyeItaly2026-06-05Rangoni Of Florence NEW0Ioni Bowcher
1030Salvatore StockhamCanada2026-05-18Rangoni Of Florence UNQUALIFIED16Amy Elsner
1031Jennifer AmigonGermany2026-06-01Chapman, Ross E Esq QUALIFIED54Xuxue Feng
1032Antonio CaudyUnited Kingdom2026-05-30Benton, John B Jr NEW90Ioni Bowcher
1033Chavez BriddickCanada2026-06-01Feltz Printing Service UNQUALIFIED14Amy Elsner
1034Tony FollerRussia2026-06-02Feiner Bros RENEWAL37Bernardo Dominic
1035Stacey MacleadIndia2026-05-21Chemel, James L Cpa QUALIFIED68Anna Fali
1036Chavez BriddickAustralia2026-06-08Feiner Bros PROPOSAL39Xuxue Feng
1037Leon OldroydRussia2026-05-27Rousseaux, Michael Esq PROPOSAL79Elwin Sharvill
1038Johnson SergiCanada2026-05-25Chemel, James L Cpa NEGOTIATION18Elwin Sharvill
1039Leon OldroydUnited Kingdom2026-05-26Printing Dimensions NEW93Amy Elsner
1040Jefferson SchemmerSpain2026-06-07Dorl, James J Esq NEGOTIATION35Xuxue Feng
1041Darci PoquetteJapan2026-06-02Feltz Printing Service NEW55Elwin Sharvill
1042Jeanfrancois VenereFrance2026-05-12Morlong Associates QUALIFIED58Anna Fali
1043Wickens NestleArgentina2026-05-29Chemel, James L Cpa NEW4Onyama Limba
1044Juan WieserSpain2026-06-05Chanay, Jeffrey A Esq UNQUALIFIED91Ioni Bowcher
1045Ivar PaprockiItaly2026-05-12Commercial Press RENEWAL16Stephen Shaw
1046Ashley DoeJapan2026-06-03Commercial Press NEW24Xuxue Feng
1047Clifford RimArgentina2026-05-14Truhlar And Truhlar Attys NEGOTIATION93Onyama Limba
1048Izzy GarufiAustralia2026-05-12Rousseaux, Michael Esq RENEWAL56Anna Fali
1049Antonio CaudyItaly2026-05-26Rousseaux, Michael Esq QUALIFIED34Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Greenwood BologniaAustraliaIvan Magalhaes NEGOTIATION
Greenwood BologniaBrazilXuxue Feng RENEWAL
Stacey MacleadGermanyAmy Elsner NEW
Costa DilliardBrazilIvan Magalhaes QUALIFIED
Johnson SergiRussiaBernardo Dominic UNQUALIFIED
Mujtaba NickaItalyElwin Sharvill UNQUALIFIED
Jones VocelkaCanadaAsiya Javayant UNQUALIFIED
Murillo MaletFranceStephen Shaw QUALIFIED
Antonio CaudyItalyAnna Fali UNQUALIFIED
Jefferson SchemmerArgentinaBernardo Dominic UNQUALIFIED
Deepesh ChuiRussiaElwin Sharvill QUALIFIED
Sinclair WaycottIndiaXuxue Feng NEW
Leja CaldareraIndiaAsiya Javayant UNQUALIFIED
Darci PoquetteCanadaIoni Bowcher UNQUALIFIED
Arvin AlbaresIndiaOnyama Limba UNQUALIFIED
Silvio SlusarskiUnited KingdomXuxue Feng NEW
Antonio CaudyBrazilAsiya Javayant UNQUALIFIED
Clifford RimRussiaXuxue Feng QUALIFIED
Cody SaylorsBrazilOnyama Limba PROPOSAL
Nicolas IturbideAustraliaIvan Magalhaes UNQUALIFIED
Salvatore StockhamAustraliaIvan Magalhaes RENEWAL
Cody SaylorsSpainAsiya Javayant UNQUALIFIED
Mujtaba NickaJapanAmy Elsner RENEWAL
Leon OldroydSpainStephen Shaw PROPOSAL
Ricardo GauchoBrazilOnyama Limba NEW
Maisha RulapaughRussiaElwin Sharvill QUALIFIED
Kaitlin OstroskySpainStephen Shaw RENEWAL
Jefferson SchemmerGermanyXuxue Feng NEGOTIATION
Leja CaldareraBrazilAmy Elsner NEW
David DarakjyUnited KingdomIvan Magalhaes QUALIFIED
Claire TollnerUnited KingdomAnna Fali PROPOSAL
Darci PoquetteBrazilStephen Shaw UNQUALIFIED
Salvatore StockhamIndiaIvan Magalhaes QUALIFIED
Smith GlickCanadaOnyama Limba NEW
Morrow RutaFranceXuxue Feng RENEWAL
Juan WieserFranceOnyama Limba NEGOTIATION
Jones VocelkaSpainStephen Shaw NEGOTIATION
Alejandro PerinFranceAsiya Javayant QUALIFIED
Silvio SlusarskiBrazilBernardo Dominic PROPOSAL
Leon OldroydFranceIoni Bowcher NEGOTIATION
Misaki RoysterUnited KingdomXuxue Feng NEW
Chavez BriddickAustraliaIvan Magalhaes RENEWAL
Costa DilliardGermanyAnna Fali NEGOTIATION
Izzy GarufiGermanyAnna Fali NEGOTIATION
Salvatore StockhamItalyOnyama Limba RENEWAL
Ivar PaprockiBrazilElwin Sharvill UNQUALIFIED
Kaitlin OstroskyUnited KingdomIoni Bowcher RENEWAL
Octavia MaletFranceIoni Bowcher NEGOTIATION
Clifford RimItalyIoni Bowcher NEW
Claire TollnerBrazilOnyama Limba NEGOTIATION
Frozen Columns
Name
Deepesh Chui
Leon Oldroyd
Clifford Rim
Cody Saylors
Smith Glick
Izzy Garufi
Kadeem Flosi
Chavez Briddick
Octavia Malet
Arvin Albares
Faith Gillian
Mujtaba Nicka
Kaitlin Ostrosky
Ashley Doe
Rodrigues Campain
Izzy Garufi
Claire Tollner
David Darakjy
Morrow Ruta
Maisha Rulapaugh
Izzy Garufi
James Butt
Maisha Rulapaugh
Aruna Figeroa
Jones Vocelka
Faith Gillian
Maisha Rulapaugh
Ashley Doe
Deepesh Chui
Darci Poquette
Julie Stenseth
Nicolas Iturbide
David Darakjy
Cody Saylors
Antonio Caudy
Emily Whobrey
Antonio Caudy
James Butt
Silvio Slusarski
Ricardo Gaucho
Cody Saylors
Maria Marrier
Ashley Doe
Aditya Kusko
Ivar Paprocki
Greenwood Bolognia
Izzy Garufi
Ashley Doe
Ashley Doe
Jennifer Amigon
IdCountryDate
1000United Kingdom2026-06-03
1001France2026-05-25
1002Spain2026-06-05
1003Australia2026-05-21
1004Canada2026-05-14
1005France2026-05-23
1006Italy2026-06-06
1007Canada2026-06-01
1008United Kingdom2026-05-30
1009France2026-06-08
1010Germany2026-06-02
1011Australia2026-05-21
1012Argentina2026-06-09
1013Australia2026-05-19
1014Spain2026-05-25
1015Russia2026-06-08
1016United Kingdom2026-06-08
1017Argentina2026-05-23
1018Italy2026-05-19
1019Argentina2026-06-02
1020Russia2026-06-01
1021Spain2026-06-10
1022Argentina2026-05-14
1023Brazil2026-05-18
1024Japan2026-05-20
1025Australia2026-06-04
1026Germany2026-05-31
1027Brazil2026-05-25
1028Japan2026-05-14
1029Japan2026-06-09
1030Australia2026-05-22
1031India2026-06-10
1032Canada2026-05-23
1033Germany2026-06-08
1034Argentina2026-05-30
1035Italy2026-05-15
1036Germany2026-05-15
1037Argentina2026-05-18
1038Canada2026-05-12
1039France2026-06-02
1040Italy2026-05-28
1041Australia2026-05-22
1042Australia2026-05-22
1043Argentina2026-05-26
1044United Kingdom2026-05-26
1045Japan2026-05-24
1046Australia2026-05-26
1047France2026-06-02
1048Canada2026-05-19
1049France2026-05-29

On-Demand Data

NameIdCountryDate
Murillo Malet1000Australia2026-06-08
Morrow Ruta1001India2026-06-02
Mayumi Kolmetz1002France2026-06-02
Juan Wieser1003France2026-06-04
Darci Poquette1004Russia2026-05-25
Munro Ferencz1005Italy2026-06-09
Arvin Albares1006France2026-05-14
Jones Vocelka1007Argentina2026-06-09
Kadeem Flosi1008Italy2026-05-16
Rodrigues Campain1009United Kingdom2026-05-19
Faith Gillian1010Brazil2026-05-15
Cody Saylors1011Canada2026-06-02
Nicolas Iturbide1012France2026-05-15
Chavez Briddick1013Australia2026-05-27
James Butt1014France2026-05-12
Antonio Caudy1015Spain2026-05-25
Greenwood Bolognia1016France2026-05-24
Wickens Nestle1017Russia2026-06-01
James Butt1018Japan2026-05-15
Faith Gillian1019India2026-06-02
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Morrow RutaUnited KingdomStephen Shaw NEGOTIATION
Maria MarrierBrazilStephen Shaw NEW
Mujtaba NickaAustraliaStephen Shaw RENEWAL
Murillo MaletFranceStephen Shaw QUALIFIED
Smith GlickBrazilBernardo Dominic RENEWAL
Aika InouyeBrazilBernardo Dominic UNQUALIFIED
Izzy GarufiJapanAnna Fali NEGOTIATION
Deepesh ChuiSpainIvan Magalhaes PROPOSAL
Deepesh ChuiCanadaIvan Magalhaes NEW
Aruna FigeroaRussiaIvan Magalhaes QUALIFIED
Jones VocelkaJapanIoni Bowcher NEGOTIATION
Kaitlin OstroskyBrazilIoni Bowcher NEGOTIATION
Maisha RulapaughRussiaIvan Magalhaes NEGOTIATION
Arvin AlbaresRussiaBernardo Dominic PROPOSAL
Leon OldroydGermanyIoni Bowcher NEW
David DarakjyFranceIoni Bowcher PROPOSAL
Juan WieserSpainAsiya Javayant QUALIFIED
Ivar PaprockiJapanOnyama Limba QUALIFIED
Arvin AlbaresBrazilIoni Bowcher QUALIFIED
Silvio SlusarskiJapanAnna Fali PROPOSAL
Johnson SergiCanadaXuxue Feng RENEWAL
Kaitlin OstroskyGermanyAsiya Javayant NEW
Darci PoquetteRussiaAmy Elsner NEGOTIATION
Rodrigues CampainFranceStephen Shaw UNQUALIFIED
Claire TollnerFranceBernardo Dominic PROPOSAL
Silvio SlusarskiAustraliaXuxue Feng QUALIFIED
Francesco ShinkoIndiaIoni Bowcher RENEWAL
James ButtUnited KingdomIvan Magalhaes UNQUALIFIED
Sinclair WaycottCanadaAmy Elsner NEGOTIATION
Adams MorascaIndiaElwin Sharvill QUALIFIED
Deepesh ChuiIndiaXuxue Feng UNQUALIFIED
Greenwood BologniaRussiaElwin Sharvill NEGOTIATION
Antonio CaudyBrazilIvan Magalhaes NEGOTIATION
Aruna FigeroaArgentinaBernardo Dominic QUALIFIED
Wickens NestleUnited KingdomXuxue Feng PROPOSAL
Wickens NestleAustraliaStephen Shaw UNQUALIFIED
Leon OldroydGermanyAmy Elsner UNQUALIFIED
Isabel BowleyUnited KingdomStephen Shaw RENEWAL
Chavez BriddickAustraliaStephen Shaw NEGOTIATION
Deepesh ChuiSpainBernardo Dominic 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>