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
Leon OldroydAustraliaAmy Elsner QUALIFIED
Deepesh ChuiGermanyElwin Sharvill QUALIFIED
Ivar PaprockiArgentinaIvan Magalhaes RENEWAL
Aika InouyeIndiaStephen Shaw PROPOSAL
Leja CaldareraItalyOnyama Limba PROPOSAL
Jones VocelkaJapanBernardo Dominic NEGOTIATION
Alejandro PerinItalyAmy Elsner UNQUALIFIED
Munro FerenczAustraliaXuxue Feng RENEWAL
Ashley DoeAustraliaIoni Bowcher QUALIFIED
Jennifer AmigonArgentinaXuxue Feng QUALIFIED
Jennifer AmigonJapanElwin Sharvill NEW
Darci PoquetteGermanyOnyama Limba PROPOSAL
Francesco ShinkoGermanyAsiya Javayant NEGOTIATION
Claire TollnerBrazilBernardo Dominic QUALIFIED
Aruna FigeroaBrazilAmy Elsner PROPOSAL
Aruna FigeroaAustraliaXuxue Feng PROPOSAL
Jones VocelkaFranceElwin Sharvill NEW
Juan WieserJapanBernardo Dominic RENEWAL
Izzy GarufiIndiaBernardo Dominic UNQUALIFIED
David DarakjyRussiaAsiya Javayant NEW
Cody SaylorsFranceBernardo Dominic PROPOSAL
Mayumi KolmetzCanadaAnna Fali RENEWAL
Aditya KuskoFranceStephen Shaw NEW
Izzy GarufiIndiaBernardo Dominic NEW
Johnson SergiGermanyAsiya Javayant QUALIFIED
Isabel BowleyGermanyIvan Magalhaes NEW
Mujtaba NickaIndiaAnna Fali RENEWAL
Cody SaylorsSpainIoni Bowcher QUALIFIED
Silvio SlusarskiBrazilIoni Bowcher RENEWAL
Juan WieserRussiaElwin Sharvill RENEWAL
Isabel BowleyBrazilOnyama Limba RENEWAL
Mujtaba NickaRussiaAmy Elsner NEGOTIATION
Antonio CaudyFranceIoni Bowcher PROPOSAL
Kaitlin OstroskyJapanOnyama Limba RENEWAL
Morrow RutaGermanyIvan Magalhaes NEW
Faith GillianItalyIoni Bowcher NEW
Munro FerenczBrazilElwin Sharvill NEGOTIATION
Mayumi KolmetzSpainBernardo Dominic QUALIFIED
Cody SaylorsSpainAmy Elsner UNQUALIFIED
Tony FollerIndiaElwin Sharvill RENEWAL
Octavia MaletSpainAnna Fali RENEWAL
Munro FerenczGermanyStephen Shaw UNQUALIFIED
James ButtUnited KingdomIvan Magalhaes RENEWAL
James ButtCanadaAmy Elsner NEW
Stacey MacleadJapanAsiya Javayant NEGOTIATION
Johnson SergiItalyAnna Fali UNQUALIFIED
Isabel BowleyBrazilAmy Elsner PROPOSAL
Mujtaba NickaUnited KingdomXuxue Feng NEW
Johnson SergiFranceXuxue Feng NEGOTIATION
Aruna FigeroaIndiaAnna Fali NEW
Horizontal
NameCountryRepresentativeStatus
Aditya KuskoBrazilStephen Shaw UNQUALIFIED
Aika InouyeFranceAsiya Javayant PROPOSAL
Misaki RoysterItalyIoni Bowcher NEGOTIATION
Murillo MaletUnited KingdomAnna Fali NEGOTIATION
Adams MorascaJapanBernardo Dominic PROPOSAL
Tony FollerUnited KingdomXuxue Feng QUALIFIED
Ashley DoeCanadaIoni Bowcher NEGOTIATION
Francesco ShinkoIndiaAmy Elsner NEGOTIATION
Aditya KuskoArgentinaIvan Magalhaes PROPOSAL
Smith GlickBrazilAmy Elsner NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jennifer AmigonUnited Kingdom2025-09-06Benton, John B Jr NEW18Xuxue Feng
1001Leon OldroydIndia2025-08-18Chemel, James L Cpa UNQUALIFIED33Ivan Magalhaes
1002Salvatore StockhamJapan2025-09-02Benton, John B Jr NEW86Stephen Shaw
1003Ricardo GauchoCanada2025-08-16Chanay, Jeffrey A Esq QUALIFIED66Ioni Bowcher
1004Tony FollerSpain2025-08-26Chemel, James L Cpa NEGOTIATION84Amy Elsner
1005Aditya KuskoArgentina2025-08-16Chanay, Jeffrey A Esq RENEWAL45Stephen Shaw
1006Aika InouyeIndia2025-09-03Truhlar And Truhlar Attys NEW57Ivan Magalhaes
1007Rodrigues CampainUnited Kingdom2025-08-16Feltz Printing Service RENEWAL63Amy Elsner
1008Jones VocelkaCanada2025-09-02Dorl, James J Esq UNQUALIFIED51Ivan Magalhaes
1009Salvatore StockhamGermany2025-09-02Printing Dimensions PROPOSAL41Ioni Bowcher
1010Jennifer AmigonGermany2025-08-22Feltz Printing Service PROPOSAL58Ivan Magalhaes
1011Cody SaylorsCanada2025-08-18Buckley Miller Wright PROPOSAL19Elwin Sharvill
1012Emily WhobreyItaly2025-09-05Rousseaux, Michael Esq PROPOSAL82Bernardo Dominic
1013Izzy GarufiRussia2025-08-13King, Christopher A Esq PROPOSAL6Amy Elsner
1014Aruna FigeroaFrance2025-08-17Buckley Miller Wright QUALIFIED84Ivan Magalhaes
1015Kaitlin OstroskyFrance2025-09-03Dorl, James J Esq PROPOSAL43Stephen Shaw
1016Salvatore StockhamCanada2025-08-21Chemel, James L Cpa UNQUALIFIED44Bernardo Dominic
1017Arvin AlbaresJapan2025-08-12Benton, John B Jr NEW88Asiya Javayant
1018Sinclair WaycottBrazil2025-08-18Chapman, Ross E Esq PROPOSAL87Ioni Bowcher
1019Silvio SlusarskiGermany2025-08-09Morlong Associates NEGOTIATION49Ioni Bowcher
1020Greenwood BologniaUnited Kingdom2025-09-06Rangoni Of Florence PROPOSAL59Anna Fali
1021Jones VocelkaSpain2025-09-03Benton, John B Jr RENEWAL4Ivan Magalhaes
1022Sinclair WaycottArgentina2025-09-01Chapman, Ross E Esq NEGOTIATION81Bernardo Dominic
1023Claire TollnerAustralia2025-08-12Chanay, Jeffrey A Esq PROPOSAL27Amy Elsner
1024Kadeem FlosiIndia2025-08-15Rousseaux, Michael Esq QUALIFIED81Ivan Magalhaes
1025David DarakjyRussia2025-08-27Truhlar And Truhlar Attys RENEWAL9Amy Elsner
1026Adams MorascaRussia2025-08-09Commercial Press QUALIFIED34Ioni Bowcher
1027Smith GlickArgentina2025-08-22Chanay, Jeffrey A Esq PROPOSAL28Amy Elsner
1028Rodrigues CampainIndia2025-09-03Chapman, Ross E Esq QUALIFIED82Ioni Bowcher
1029Chavez BriddickArgentina2025-08-23Truhlar And Truhlar Attys NEW8Ivan Magalhaes
1030Jeanfrancois VenereRussia2025-08-12Rousseaux, Michael Esq QUALIFIED77Anna Fali
1031Murillo MaletIndia2025-09-07Rangoni Of Florence NEGOTIATION53Stephen Shaw
1032Isabel BowleyRussia2025-08-10Chemel, James L Cpa QUALIFIED53Anna Fali
1033Aika InouyeCanada2025-08-19Commercial Press UNQUALIFIED79Anna Fali
1034Leon OldroydArgentina2025-08-31Chemel, James L Cpa UNQUALIFIED87Elwin Sharvill
1035Ricardo GauchoAustralia2025-08-11Dorl, James J Esq RENEWAL26Bernardo Dominic
1036Francesco ShinkoGermany2025-08-13Chanay, Jeffrey A Esq PROPOSAL43Asiya Javayant
1037Aika InouyeRussia2025-08-15King, Christopher A Esq UNQUALIFIED26Stephen Shaw
1038Arvin AlbaresArgentina2025-08-31King, Christopher A Esq PROPOSAL43Ivan Magalhaes
1039Ashley DoeCanada2025-08-25Morlong Associates RENEWAL15Anna Fali
1040Claire TollnerFrance2025-08-27Morlong Associates NEW67Elwin Sharvill
1041Mayumi KolmetzJapan2025-08-29Feiner Bros RENEWAL85Onyama Limba
1042Arvin AlbaresItaly2025-08-13Rousseaux, Michael Esq NEW5Ivan Magalhaes
1043Stacey MacleadIndia2025-08-12Benton, John B Jr NEW46Ivan Magalhaes
1044Jones VocelkaJapan2025-08-11Morlong Associates PROPOSAL31Amy Elsner
1045Darci PoquetteBrazil2025-08-14Chapman, Ross E Esq RENEWAL27Elwin Sharvill
1046Deepesh ChuiBrazil2025-08-21Chemel, James L Cpa RENEWAL26Ivan Magalhaes
1047Aika InouyeAustralia2025-08-13Chapman, Ross E Esq NEGOTIATION3Elwin Sharvill
1048Leja CaldareraSpain2025-08-13Feiner Bros NEGOTIATION57Anna Fali
1049Antonio CaudyBrazil2025-08-14Rousseaux, Michael Esq NEW74Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Misaki RoysterItalyElwin Sharvill NEGOTIATION
James ButtGermanyBernardo Dominic QUALIFIED
David DarakjyFranceBernardo Dominic QUALIFIED
Stacey MacleadCanadaElwin Sharvill NEGOTIATION
Clifford RimArgentinaIvan Magalhaes QUALIFIED
Deepesh ChuiArgentinaAsiya Javayant NEW
Silvio SlusarskiRussiaAnna Fali PROPOSAL
Aruna FigeroaRussiaBernardo Dominic NEGOTIATION
Darci PoquetteGermanyAsiya Javayant QUALIFIED
Leon OldroydAustraliaStephen Shaw UNQUALIFIED
Costa DilliardIndiaXuxue Feng NEW
Smith GlickBrazilXuxue Feng PROPOSAL
Cody SaylorsAustraliaIvan Magalhaes QUALIFIED
Isabel BowleyFranceElwin Sharvill QUALIFIED
Tony FollerCanadaIvan Magalhaes UNQUALIFIED
Mujtaba NickaCanadaStephen Shaw RENEWAL
Salvatore StockhamCanadaAnna Fali QUALIFIED
Jeanfrancois VenereGermanyOnyama Limba QUALIFIED
Rodrigues CampainAustraliaAnna Fali NEGOTIATION
Munro FerenczRussiaXuxue Feng RENEWAL
Misaki RoysterJapanIvan Magalhaes QUALIFIED
Antonio CaudyItalyElwin Sharvill RENEWAL
Julie StensethArgentinaStephen Shaw PROPOSAL
Chavez BriddickIndiaStephen Shaw NEGOTIATION
Izzy GarufiAustraliaBernardo Dominic UNQUALIFIED
Jennifer AmigonIndiaXuxue Feng UNQUALIFIED
Ivar PaprockiBrazilStephen Shaw QUALIFIED
Ivar PaprockiAustraliaAmy Elsner RENEWAL
Nicolas IturbideSpainElwin Sharvill NEGOTIATION
Ricardo GauchoIndiaIvan Magalhaes QUALIFIED
Ivar PaprockiBrazilBernardo Dominic NEW
Aditya KuskoRussiaIvan Magalhaes PROPOSAL
Antonio CaudyBrazilElwin Sharvill QUALIFIED
Jeanfrancois VenereArgentinaXuxue Feng RENEWAL
Sinclair WaycottIndiaStephen Shaw NEW
Leja CaldareraFranceIoni Bowcher PROPOSAL
Julie StensethGermanyXuxue Feng RENEWAL
Wickens NestleSpainBernardo Dominic NEGOTIATION
Wickens NestleItalyAmy Elsner PROPOSAL
Faith GillianFranceXuxue Feng NEW
Leon OldroydRussiaAnna Fali QUALIFIED
Nicolas IturbideRussiaIoni Bowcher RENEWAL
Ricardo GauchoArgentinaBernardo Dominic RENEWAL
Darci PoquetteItalyElwin Sharvill NEGOTIATION
Rodrigues CampainItalyAsiya Javayant UNQUALIFIED
Maria MarrierUnited KingdomIvan Magalhaes PROPOSAL
Chavez BriddickBrazilXuxue Feng NEGOTIATION
Ashley DoeBrazilAmy Elsner PROPOSAL
Rodrigues CampainItalyBernardo Dominic RENEWAL
Deepesh ChuiItalyIoni Bowcher QUALIFIED
Frozen Columns
Name
Stacey Maclead
Aruna Figeroa
Aika Inouye
Salvatore Stockham
Greenwood Bolognia
Sinclair Waycott
Wickens Nestle
Greenwood Bolognia
Tony Foller
Munro Ferencz
Antonio Caudy
Alejandro Perin
Leja Caldarera
Greenwood Bolognia
Ricardo Gaucho
Rodrigues Campain
Costa Dilliard
Ricardo Gaucho
David Darakjy
Claire Tollner
Octavia Malet
Leon Oldroyd
Sinclair Waycott
Adams Morasca
Deepesh Chui
Kaitlin Ostrosky
Clifford Rim
Aruna Figeroa
Greenwood Bolognia
Ricardo Gaucho
Chavez Briddick
Rodrigues Campain
Ricardo Gaucho
Claire Tollner
Alejandro Perin
Emily Whobrey
Aika Inouye
Isabel Bowley
Smith Glick
Mujtaba Nicka
Misaki Royster
James Butt
Octavia Malet
Juan Wieser
Faith Gillian
Kaitlin Ostrosky
David Darakjy
Maria Marrier
Nicolas Iturbide
Smith Glick
IdCountryDate
1000Germany2025-09-03
1001Brazil2025-08-17
1002Brazil2025-09-07
1003Spain2025-08-17
1004India2025-08-26
1005Russia2025-08-20
1006United Kingdom2025-08-09
1007India2025-08-22
1008India2025-08-20
1009Russia2025-09-07
1010Argentina2025-08-09
1011Australia2025-08-30
1012Canada2025-08-10
1013France2025-08-27
1014United Kingdom2025-08-29
1015United Kingdom2025-08-30
1016Brazil2025-08-10
1017Brazil2025-08-26
1018Spain2025-08-12
1019Argentina2025-08-14
1020Canada2025-08-13
1021Japan2025-08-14
1022Brazil2025-08-23
1023Japan2025-08-10
1024Germany2025-09-06
1025Italy2025-09-07
1026Canada2025-08-18
1027Spain2025-09-03
1028Russia2025-08-15
1029Brazil2025-08-20
1030Australia2025-09-02
1031India2025-08-21
1032Argentina2025-08-12
1033Russia2025-08-24
1034United Kingdom2025-09-07
1035Canada2025-08-19
1036United Kingdom2025-09-04
1037Italy2025-08-22
1038Australia2025-08-13
1039Japan2025-08-23
1040Japan2025-09-01
1041Australia2025-08-31
1042Italy2025-08-16
1043Germany2025-08-10
1044Australia2025-08-10
1045India2025-08-17
1046Argentina2025-09-07
1047Canada2025-09-04
1048France2025-08-25
1049Argentina2025-08-22

On-Demand Data

NameIdCountryDate
Tony Foller1000United Kingdom2025-09-02
Nicolas Iturbide1001India2025-08-31
Jefferson Schemmer1002Argentina2025-08-29
Costa Dilliard1003Brazil2025-09-07
Mayumi Kolmetz1004Germany2025-08-26
Greenwood Bolognia1005Canada2025-08-16
Jefferson Schemmer1006Germany2025-09-02
Munro Ferencz1007Spain2025-08-13
Deepesh Chui1008Australia2025-08-18
Jones Vocelka1009Italy2025-09-05
Murillo Malet1010Argentina2025-09-04
Aika Inouye1011Canada2025-08-21
Maisha Rulapaugh1012Australia2025-08-21
Mujtaba Nicka1013Brazil2025-08-23
Silvio Slusarski1014Germany2025-09-04
Juan Wieser1015Germany2025-08-18
Munro Ferencz1016Russia2025-08-17
Rodrigues Campain1017France2025-08-14
Mujtaba Nicka1018Germany2025-08-24
Claire Tollner1019Russia2025-09-01
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kaitlin OstroskyJapanXuxue Feng NEGOTIATION
James ButtBrazilBernardo Dominic NEW
Cody SaylorsArgentinaIvan Magalhaes NEGOTIATION
James ButtJapanAnna Fali NEW
Rodrigues CampainItalyOnyama Limba UNQUALIFIED
Izzy GarufiIndiaStephen Shaw NEGOTIATION
Arvin AlbaresIndiaXuxue Feng PROPOSAL
Deepesh ChuiItalyAnna Fali RENEWAL
Ivar PaprockiRussiaAmy Elsner RENEWAL
David DarakjyUnited KingdomIvan Magalhaes QUALIFIED
Morrow RutaBrazilElwin Sharvill PROPOSAL
Julie StensethJapanAnna Fali NEW
Claire TollnerRussiaAnna Fali QUALIFIED
David DarakjyIndiaIvan Magalhaes NEW
Cody SaylorsItalyBernardo Dominic QUALIFIED
Nicolas IturbideUnited KingdomIoni Bowcher UNQUALIFIED
Greenwood BologniaSpainOnyama Limba PROPOSAL
Munro FerenczFranceAnna Fali NEGOTIATION
Misaki RoysterJapanXuxue Feng RENEWAL
Faith GillianFranceIvan Magalhaes NEGOTIATION
Maria MarrierJapanStephen Shaw RENEWAL
Julie StensethSpainAmy Elsner QUALIFIED
Jeanfrancois VenereIndiaIvan Magalhaes UNQUALIFIED
Jennifer AmigonJapanAmy Elsner UNQUALIFIED
Izzy GarufiIndiaIoni Bowcher NEGOTIATION
Morrow RutaUnited KingdomAnna Fali NEW
Mujtaba NickaItalyIoni Bowcher UNQUALIFIED
Aditya KuskoRussiaIoni Bowcher UNQUALIFIED
Arvin AlbaresRussiaBernardo Dominic RENEWAL
Johnson SergiUnited KingdomXuxue Feng NEGOTIATION
Jeanfrancois VenereIndiaBernardo Dominic NEW
Claire TollnerAustraliaBernardo Dominic NEW
Silvio SlusarskiAustraliaXuxue Feng UNQUALIFIED
Francesco ShinkoSpainBernardo Dominic NEW
Mayumi KolmetzUnited KingdomIoni Bowcher UNQUALIFIED
Izzy GarufiFranceIvan Magalhaes QUALIFIED
Izzy GarufiUnited KingdomIvan Magalhaes NEW
Ivar PaprockiArgentinaStephen Shaw NEW
Aruna FigeroaBrazilIvan Magalhaes RENEWAL
Antonio CaudyArgentinaAnna Fali NEGOTIATION

<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>