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
Darci PoquetteCanadaStephen Shaw PROPOSAL
Nicolas IturbideJapanIoni Bowcher NEW
David DarakjyJapanXuxue Feng RENEWAL
Kaitlin OstroskySpainAsiya Javayant PROPOSAL
Greenwood BologniaCanadaOnyama Limba RENEWAL
Francesco ShinkoSpainBernardo Dominic NEW
Cody SaylorsIndiaAmy Elsner UNQUALIFIED
Julie StensethItalyAnna Fali QUALIFIED
Misaki RoysterGermanyBernardo Dominic QUALIFIED
Chavez BriddickItalyAnna Fali QUALIFIED
Deepesh ChuiAustraliaXuxue Feng NEW
Arvin AlbaresBrazilStephen Shaw PROPOSAL
Alejandro PerinIndiaBernardo Dominic QUALIFIED
Deepesh ChuiGermanyIvan Magalhaes QUALIFIED
Morrow RutaCanadaAnna Fali NEGOTIATION
Deepesh ChuiArgentinaAnna Fali PROPOSAL
Aditya KuskoFranceIoni Bowcher QUALIFIED
Leja CaldareraFranceIoni Bowcher PROPOSAL
Antonio CaudyGermanyStephen Shaw UNQUALIFIED
Arvin AlbaresIndiaIvan Magalhaes NEW
Munro FerenczAustraliaAmy Elsner NEGOTIATION
Maisha RulapaughArgentinaOnyama Limba NEW
Jefferson SchemmerJapanAsiya Javayant NEW
Arvin AlbaresGermanyAmy Elsner RENEWAL
Faith GillianItalyStephen Shaw NEW
Francesco ShinkoBrazilXuxue Feng NEGOTIATION
Mujtaba NickaCanadaOnyama Limba NEGOTIATION
Murillo MaletIndiaIvan Magalhaes PROPOSAL
Stacey MacleadBrazilAsiya Javayant RENEWAL
Misaki RoysterSpainIoni Bowcher PROPOSAL
Mujtaba NickaUnited KingdomAmy Elsner RENEWAL
Francesco ShinkoJapanStephen Shaw NEGOTIATION
Isabel BowleySpainIvan Magalhaes PROPOSAL
Leon OldroydIndiaOnyama Limba NEGOTIATION
Arvin AlbaresGermanyElwin Sharvill RENEWAL
Salvatore StockhamCanadaIoni Bowcher QUALIFIED
Wickens NestleItalyAnna Fali QUALIFIED
Maisha RulapaughAustraliaXuxue Feng RENEWAL
Maisha RulapaughJapanOnyama Limba UNQUALIFIED
Rodrigues CampainFranceIvan Magalhaes NEW
Aika InouyeIndiaIoni Bowcher NEGOTIATION
Ivar PaprockiIndiaElwin Sharvill NEGOTIATION
Maisha RulapaughIndiaIvan Magalhaes NEW
Mujtaba NickaItalyXuxue Feng QUALIFIED
Jennifer AmigonJapanXuxue Feng NEW
Jeanfrancois VenereIndiaXuxue Feng NEW
Francesco ShinkoJapanIvan Magalhaes NEGOTIATION
Leon OldroydCanadaAsiya Javayant NEGOTIATION
Kadeem FlosiGermanyOnyama Limba PROPOSAL
David DarakjyFranceIvan Magalhaes QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Ivar PaprockiFranceIoni Bowcher QUALIFIED
Munro FerenczBrazilIoni Bowcher RENEWAL
Nicolas IturbideSpainStephen Shaw UNQUALIFIED
Darci PoquetteBrazilAnna Fali NEGOTIATION
Misaki RoysterBrazilStephen Shaw RENEWAL
Arvin AlbaresIndiaElwin Sharvill UNQUALIFIED
Maisha RulapaughBrazilXuxue Feng RENEWAL
Ricardo GauchoArgentinaBernardo Dominic UNQUALIFIED
Jones VocelkaGermanyBernardo Dominic RENEWAL
Chavez BriddickItalyAnna Fali NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Smith GlickGermany2026-05-19Rousseaux, Michael Esq PROPOSAL8Xuxue Feng
1001Kaitlin OstroskyCanada2026-06-11Chapman, Ross E Esq QUALIFIED41Ioni Bowcher
1002Maria MarrierArgentina2026-05-17King, Christopher A Esq NEW54Stephen Shaw
1003Sinclair WaycottIndia2026-06-10Rousseaux, Michael Esq NEW37Ioni Bowcher
1004Morrow RutaAustralia2026-05-16Morlong Associates NEGOTIATION78Asiya Javayant
1005Kaitlin OstroskyArgentina2026-05-16Feiner Bros PROPOSAL89Anna Fali
1006Rodrigues CampainGermany2026-05-21Rousseaux, Michael Esq UNQUALIFIED8Ivan Magalhaes
1007Antonio CaudyRussia2026-05-17Chemel, James L Cpa PROPOSAL54Ivan Magalhaes
1008Emily WhobreyAustralia2026-05-17Chapman, Ross E Esq NEGOTIATION13Amy Elsner
1009Francesco ShinkoBrazil2026-06-10Buckley Miller Wright UNQUALIFIED70Anna Fali
1010Greenwood BologniaSpain2026-06-11Rousseaux, Michael Esq UNQUALIFIED62Stephen Shaw
1011Claire TollnerBrazil2026-06-10Buckley Miller Wright NEGOTIATION76Bernardo Dominic
1012Salvatore StockhamCanada2026-06-08Printing Dimensions UNQUALIFIED9Amy Elsner
1013Mujtaba NickaArgentina2026-05-29Chanay, Jeffrey A Esq NEGOTIATION62Elwin Sharvill
1014Octavia MaletItaly2026-06-02Rangoni Of Florence NEGOTIATION37Stephen Shaw
1015Arvin AlbaresJapan2026-05-20King, Christopher A Esq NEGOTIATION51Elwin Sharvill
1016Ricardo GauchoRussia2026-06-11Chapman, Ross E Esq PROPOSAL14Ioni Bowcher
1017Kadeem FlosiGermany2026-05-27Dorl, James J Esq QUALIFIED29Onyama Limba
1018Claire TollnerBrazil2026-06-01Buckley Miller Wright RENEWAL44Anna Fali
1019Faith GillianArgentina2026-05-19Rangoni Of Florence NEW69Onyama Limba
1020Leon OldroydFrance2026-05-19Rousseaux, Michael Esq UNQUALIFIED41Elwin Sharvill
1021Julie StensethBrazil2026-05-21Feltz Printing Service UNQUALIFIED74Bernardo Dominic
1022Ashley DoeFrance2026-06-09King, Christopher A Esq QUALIFIED39Amy Elsner
1023Deepesh ChuiSpain2026-05-20Dorl, James J Esq QUALIFIED3Bernardo Dominic
1024Aika InouyeArgentina2026-05-20Feltz Printing Service PROPOSAL1Amy Elsner
1025Clifford RimIndia2026-05-24Printing Dimensions UNQUALIFIED33Anna Fali
1026Claire TollnerArgentina2026-06-10Morlong Associates NEW34Xuxue Feng
1027Deepesh ChuiBrazil2026-05-31Buckley Miller Wright UNQUALIFIED39Amy Elsner
1028Tony FollerBrazil2026-05-31Morlong Associates NEGOTIATION60Amy Elsner
1029Octavia MaletSpain2026-06-09Chapman, Ross E Esq QUALIFIED39Xuxue Feng
1030Kadeem FlosiArgentina2026-06-02Buckley Miller Wright PROPOSAL6Xuxue Feng
1031Alejandro PerinGermany2026-06-05Buckley Miller Wright QUALIFIED99Elwin Sharvill
1032Ashley DoeItaly2026-05-29Morlong Associates PROPOSAL90Ivan Magalhaes
1033Chavez BriddickBrazil2026-06-05Chanay, Jeffrey A Esq QUALIFIED46Stephen Shaw
1034Julie StensethArgentina2026-05-18Rousseaux, Michael Esq NEW39Asiya Javayant
1035Tony FollerCanada2026-05-18Rangoni Of Florence RENEWAL84Ivan Magalhaes
1036Nicolas IturbideFrance2026-05-14Rousseaux, Michael Esq RENEWAL34Elwin Sharvill
1037Alejandro PerinArgentina2026-06-05Rousseaux, Michael Esq PROPOSAL18Ivan Magalhaes
1038Kadeem FlosiItaly2026-06-10Commercial Press NEGOTIATION1Xuxue Feng
1039Kaitlin OstroskyCanada2026-05-21Chapman, Ross E Esq UNQUALIFIED15Xuxue Feng
1040Salvatore StockhamArgentina2026-05-16Dorl, James J Esq QUALIFIED55Bernardo Dominic
1041Johnson SergiFrance2026-06-08Chanay, Jeffrey A Esq UNQUALIFIED82Xuxue Feng
1042Jennifer AmigonBrazil2026-05-28Dorl, James J Esq QUALIFIED94Amy Elsner
1043Chavez BriddickItaly2026-05-14Chanay, Jeffrey A Esq NEW19Anna Fali
1044Juan WieserGermany2026-06-09Rangoni Of Florence RENEWAL6Ioni Bowcher
1045Faith GillianJapan2026-06-02Printing Dimensions NEGOTIATION18Anna Fali
1046Antonio CaudyRussia2026-06-01Chapman, Ross E Esq PROPOSAL84Asiya Javayant
1047Smith GlickArgentina2026-05-24Rousseaux, Michael Esq RENEWAL1Ioni Bowcher
1048Wickens NestleItaly2026-06-07Printing Dimensions PROPOSAL23Amy Elsner
1049James ButtBrazil2026-06-09King, Christopher A Esq RENEWAL32Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Munro FerenczItalyAsiya Javayant NEGOTIATION
Deepesh ChuiItalyIvan Magalhaes NEGOTIATION
Costa DilliardAustraliaElwin Sharvill NEW
Arvin AlbaresBrazilAnna Fali NEGOTIATION
Aruna FigeroaCanadaStephen Shaw UNQUALIFIED
Kadeem FlosiGermanyElwin Sharvill QUALIFIED
Deepesh ChuiAustraliaAmy Elsner NEGOTIATION
Cody SaylorsRussiaBernardo Dominic NEGOTIATION
Salvatore StockhamFranceAnna Fali NEGOTIATION
Chavez BriddickSpainIvan Magalhaes NEGOTIATION
Murillo MaletFranceAsiya Javayant NEGOTIATION
Faith GillianGermanyXuxue Feng NEGOTIATION
Darci PoquetteArgentinaIvan Magalhaes NEW
Izzy GarufiRussiaBernardo Dominic PROPOSAL
Adams MorascaUnited KingdomIoni Bowcher UNQUALIFIED
Munro FerenczItalyAsiya Javayant PROPOSAL
Greenwood BologniaRussiaAnna Fali QUALIFIED
Adams MorascaGermanyElwin Sharvill NEW
Munro FerenczJapanXuxue Feng RENEWAL
Kadeem FlosiAustraliaAsiya Javayant PROPOSAL
Johnson SergiUnited KingdomAmy Elsner NEW
Claire TollnerJapanAsiya Javayant NEW
Emily WhobreyItalyOnyama Limba NEW
Aditya KuskoCanadaIvan Magalhaes NEGOTIATION
Leja CaldareraIndiaIoni Bowcher NEW
Sinclair WaycottSpainIvan Magalhaes UNQUALIFIED
Mujtaba NickaItalyAmy Elsner UNQUALIFIED
Maria MarrierAustraliaAmy Elsner UNQUALIFIED
Rodrigues CampainFranceIvan Magalhaes QUALIFIED
Julie StensethIndiaAsiya Javayant PROPOSAL
Jennifer AmigonFranceXuxue Feng UNQUALIFIED
David DarakjySpainIoni Bowcher NEW
Ivar PaprockiAustraliaAsiya Javayant QUALIFIED
Jennifer AmigonBrazilXuxue Feng RENEWAL
Adams MorascaAustraliaOnyama Limba NEW
Murillo MaletFranceIoni Bowcher NEW
Juan WieserCanadaBernardo Dominic RENEWAL
Aruna FigeroaGermanyIvan Magalhaes NEGOTIATION
Tony FollerAustraliaAsiya Javayant UNQUALIFIED
Darci PoquetteArgentinaIvan Magalhaes PROPOSAL
Wickens NestleRussiaIoni Bowcher UNQUALIFIED
Salvatore StockhamIndiaStephen Shaw NEGOTIATION
Mayumi KolmetzBrazilAmy Elsner UNQUALIFIED
Deepesh ChuiArgentinaAnna Fali NEW
Aditya KuskoItalyIoni Bowcher NEGOTIATION
Sinclair WaycottRussiaElwin Sharvill PROPOSAL
Kaitlin OstroskyAustraliaAmy Elsner NEGOTIATION
Juan WieserAustraliaXuxue Feng UNQUALIFIED
Jeanfrancois VenereArgentinaOnyama Limba QUALIFIED
Misaki RoysterAustraliaStephen Shaw PROPOSAL
Frozen Columns
Name
Claire Tollner
Greenwood Bolognia
Munro Ferencz
Antonio Caudy
Ashley Doe
Misaki Royster
Sinclair Waycott
Mujtaba Nicka
Silvio Slusarski
Silvio Slusarski
Sinclair Waycott
Alejandro Perin
Ashley Doe
Stacey Maclead
Misaki Royster
David Darakjy
Jefferson Schemmer
Claire Tollner
Kaitlin Ostrosky
Mujtaba Nicka
Julie Stenseth
Francesco Shinko
Mujtaba Nicka
Maria Marrier
Claire Tollner
Johnson Sergi
Chavez Briddick
Leon Oldroyd
Leon Oldroyd
Greenwood Bolognia
Arvin Albares
Aditya Kusko
Alejandro Perin
Murillo Malet
Wickens Nestle
Cody Saylors
Cody Saylors
Claire Tollner
Izzy Garufi
Munro Ferencz
Stacey Maclead
Nicolas Iturbide
Clifford Rim
Smith Glick
Maria Marrier
Deepesh Chui
Francesco Shinko
Aruna Figeroa
Maria Marrier
Mujtaba Nicka
IdCountryDate
1000Russia2026-05-31
1001Argentina2026-05-25
1002Italy2026-06-11
1003Argentina2026-05-14
1004Brazil2026-05-21
1005India2026-05-27
1006Germany2026-06-02
1007France2026-05-14
1008United Kingdom2026-05-23
1009Italy2026-05-27
1010India2026-05-28
1011Argentina2026-05-20
1012Brazil2026-05-28
1013India2026-05-15
1014Germany2026-06-09
1015Brazil2026-05-30
1016Italy2026-05-26
1017Italy2026-05-15
1018Brazil2026-05-19
1019Germany2026-05-22
1020Argentina2026-06-05
1021France2026-06-01
1022India2026-05-19
1023Brazil2026-06-06
1024Argentina2026-05-15
1025France2026-06-04
1026Brazil2026-06-10
1027Argentina2026-05-21
1028United Kingdom2026-05-16
1029Germany2026-06-05
1030United Kingdom2026-05-24
1031United Kingdom2026-05-27
1032Spain2026-05-27
1033Japan2026-05-28
1034Russia2026-05-18
1035Canada2026-05-24
1036Germany2026-06-06
1037Germany2026-06-03
1038Russia2026-05-22
1039United Kingdom2026-05-22
1040Argentina2026-05-30
1041Russia2026-05-23
1042France2026-05-28
1043Brazil2026-06-03
1044Spain2026-05-14
1045Australia2026-05-24
1046Spain2026-05-31
1047Japan2026-05-29
1048Australia2026-05-23
1049Australia2026-06-07

On-Demand Data

NameIdCountryDate
Mujtaba Nicka1000Germany2026-05-16
Deepesh Chui1001Argentina2026-05-26
Claire Tollner1002Russia2026-05-16
Maisha Rulapaugh1003Brazil2026-05-31
Leon Oldroyd1004Spain2026-06-04
Adams Morasca1005Australia2026-05-18
Greenwood Bolognia1006Italy2026-06-09
Octavia Malet1007Japan2026-05-30
Aditya Kusko1008Australia2026-05-26
Wickens Nestle1009Argentina2026-06-02
Ashley Doe1010France2026-06-02
Octavia Malet1011United Kingdom2026-05-20
Faith Gillian1012Germany2026-05-22
Murillo Malet1013United Kingdom2026-06-04
Tony Foller1014India2026-06-08
Francesco Shinko1015Russia2026-06-06
Leja Caldarera1016Australia2026-05-19
Morrow Ruta1017Russia2026-05-19
Rodrigues Campain1018India2026-05-21
Wickens Nestle1019Germany2026-05-24
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kadeem FlosiJapanAnna Fali NEW
Stacey MacleadJapanAsiya Javayant RENEWAL
Smith GlickIndiaAsiya Javayant QUALIFIED
Silvio SlusarskiIndiaBernardo Dominic PROPOSAL
David DarakjyJapanAsiya Javayant NEGOTIATION
Rodrigues CampainBrazilAsiya Javayant QUALIFIED
Isabel BowleyJapanStephen Shaw NEGOTIATION
Nicolas IturbideUnited KingdomBernardo Dominic QUALIFIED
Sinclair WaycottArgentinaIvan Magalhaes RENEWAL
Ashley DoeUnited KingdomAnna Fali NEW
Kadeem FlosiGermanyStephen Shaw QUALIFIED
Mujtaba NickaRussiaAsiya Javayant PROPOSAL
Emily WhobreyUnited KingdomAnna Fali UNQUALIFIED
Greenwood BologniaItalyIvan Magalhaes NEGOTIATION
Jefferson SchemmerAustraliaAsiya Javayant NEGOTIATION
David DarakjyBrazilOnyama Limba RENEWAL
Misaki RoysterGermanyXuxue Feng NEGOTIATION
Kaitlin OstroskyRussiaIoni Bowcher NEW
Isabel BowleyJapanIvan Magalhaes RENEWAL
Aika InouyeAustraliaXuxue Feng NEGOTIATION
Faith GillianCanadaAnna Fali RENEWAL
Darci PoquetteItalyStephen Shaw UNQUALIFIED
Chavez BriddickJapanStephen Shaw NEGOTIATION
Isabel BowleyJapanIvan Magalhaes QUALIFIED
Jefferson SchemmerItalyElwin Sharvill UNQUALIFIED
Darci PoquetteArgentinaBernardo Dominic UNQUALIFIED
Kadeem FlosiIndiaIoni Bowcher RENEWAL
Johnson SergiUnited KingdomOnyama Limba PROPOSAL
Jones VocelkaAustraliaOnyama Limba RENEWAL
Izzy GarufiGermanyAnna Fali NEGOTIATION
Tony FollerSpainOnyama Limba RENEWAL
Maisha RulapaughArgentinaAmy Elsner QUALIFIED
Jennifer AmigonArgentinaAmy Elsner UNQUALIFIED
Kaitlin OstroskyArgentinaOnyama Limba QUALIFIED
Antonio CaudyCanadaOnyama Limba NEGOTIATION
Sinclair WaycottSpainOnyama Limba NEW
Antonio CaudyItalyXuxue Feng QUALIFIED
Murillo MaletSpainAsiya Javayant RENEWAL
Isabel BowleyCanadaXuxue Feng RENEWAL
Misaki RoysterGermanyXuxue Feng 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>