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
Tony FollerCanadaIoni Bowcher RENEWAL
Leon OldroydCanadaIoni Bowcher UNQUALIFIED
Greenwood BologniaCanadaIoni Bowcher NEW
Clifford RimJapanBernardo Dominic PROPOSAL
Faith GillianItalyIoni Bowcher PROPOSAL
Izzy GarufiBrazilXuxue Feng NEW
Stacey MacleadBrazilXuxue Feng QUALIFIED
Jennifer AmigonSpainStephen Shaw QUALIFIED
Greenwood BologniaGermanyOnyama Limba NEW
Ricardo GauchoUnited KingdomStephen Shaw RENEWAL
Mujtaba NickaRussiaIvan Magalhaes RENEWAL
Mayumi KolmetzItalyOnyama Limba UNQUALIFIED
Wickens NestleFranceXuxue Feng PROPOSAL
Emily WhobreyGermanyAmy Elsner QUALIFIED
Sinclair WaycottFranceBernardo Dominic UNQUALIFIED
Greenwood BologniaArgentinaIoni Bowcher NEW
Ricardo GauchoArgentinaXuxue Feng UNQUALIFIED
Juan WieserArgentinaBernardo Dominic NEW
Wickens NestleUnited KingdomBernardo Dominic RENEWAL
Juan WieserAustraliaXuxue Feng UNQUALIFIED
Johnson SergiGermanyElwin Sharvill RENEWAL
Alejandro PerinGermanyIvan Magalhaes PROPOSAL
Maria MarrierRussiaAsiya Javayant QUALIFIED
Mujtaba NickaBrazilStephen Shaw NEGOTIATION
Greenwood BologniaItalyAmy Elsner UNQUALIFIED
Stacey MacleadGermanyOnyama Limba RENEWAL
Costa DilliardUnited KingdomElwin Sharvill RENEWAL
Silvio SlusarskiFranceIoni Bowcher RENEWAL
Maria MarrierFranceIoni Bowcher PROPOSAL
Antonio CaudyBrazilIoni Bowcher NEW
Antonio CaudyCanadaBernardo Dominic QUALIFIED
Costa DilliardFranceBernardo Dominic NEW
James ButtGermanyAnna Fali NEW
Aruna FigeroaItalyOnyama Limba QUALIFIED
Arvin AlbaresAustraliaIoni Bowcher PROPOSAL
Nicolas IturbideFranceAnna Fali NEGOTIATION
James ButtItalyStephen Shaw RENEWAL
Ivar PaprockiFranceBernardo Dominic NEGOTIATION
Silvio SlusarskiSpainAnna Fali UNQUALIFIED
Chavez BriddickJapanIvan Magalhaes NEGOTIATION
Aika InouyeFranceIvan Magalhaes QUALIFIED
Rodrigues CampainRussiaIvan Magalhaes PROPOSAL
Salvatore StockhamArgentinaStephen Shaw RENEWAL
Deepesh ChuiRussiaAsiya Javayant NEGOTIATION
Munro FerenczIndiaAsiya Javayant PROPOSAL
Kadeem FlosiArgentinaIoni Bowcher NEGOTIATION
Rodrigues CampainCanadaAmy Elsner PROPOSAL
Kaitlin OstroskyFranceXuxue Feng NEGOTIATION
Jennifer AmigonBrazilAmy Elsner NEW
Antonio CaudyArgentinaAmy Elsner UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Aika InouyeRussiaAnna Fali UNQUALIFIED
Costa DilliardItalyAmy Elsner NEGOTIATION
Ricardo GauchoUnited KingdomBernardo Dominic RENEWAL
Tony FollerCanadaIvan Magalhaes UNQUALIFIED
Kaitlin OstroskyAustraliaIoni Bowcher UNQUALIFIED
Aruna FigeroaSpainXuxue Feng QUALIFIED
Maria MarrierRussiaAmy Elsner NEGOTIATION
Sinclair WaycottJapanIoni Bowcher RENEWAL
Adams MorascaRussiaStephen Shaw QUALIFIED
Ashley DoeSpainIvan Magalhaes PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jeanfrancois VenereAustralia2025-09-14Chemel, James L Cpa RENEWAL28Stephen Shaw
1001Cody SaylorsFrance2025-08-25King, Christopher A Esq RENEWAL84Amy Elsner
1002David DarakjyFrance2025-09-12Rangoni Of Florence RENEWAL22Amy Elsner
1003Jones VocelkaIndia2025-08-21Buckley Miller Wright NEGOTIATION89Elwin Sharvill
1004Antonio CaudyItaly2025-09-07Chapman, Ross E Esq UNQUALIFIED82Ivan Magalhaes
1005Ricardo GauchoBrazil2025-09-08Dorl, James J Esq RENEWAL36Ioni Bowcher
1006Octavia MaletIndia2025-09-01Printing Dimensions RENEWAL77Bernardo Dominic
1007Greenwood BologniaJapan2025-09-09Rangoni Of Florence PROPOSAL72Onyama Limba
1008Francesco ShinkoJapan2025-08-24Dorl, James J Esq QUALIFIED7Xuxue Feng
1009Salvatore StockhamRussia2025-08-26Benton, John B Jr QUALIFIED26Ivan Magalhaes
1010Smith GlickBrazil2025-08-17King, Christopher A Esq NEGOTIATION65Elwin Sharvill
1011Silvio SlusarskiArgentina2025-09-06Feltz Printing Service NEW77Amy Elsner
1012Jennifer AmigonFrance2025-08-17Commercial Press NEGOTIATION33Onyama Limba
1013Nicolas IturbideSpain2025-09-09Chemel, James L Cpa UNQUALIFIED88Ioni Bowcher
1014Faith GillianAustralia2025-08-28Rousseaux, Michael Esq PROPOSAL93Bernardo Dominic
1015Morrow RutaArgentina2025-08-18Truhlar And Truhlar Attys NEGOTIATION76Ivan Magalhaes
1016Maria MarrierItaly2025-08-21Chemel, James L Cpa QUALIFIED12Ioni Bowcher
1017David DarakjyGermany2025-08-22Printing Dimensions RENEWAL10Bernardo Dominic
1018Smith GlickJapan2025-09-10Commercial Press NEGOTIATION14Anna Fali
1019Jeanfrancois VenereItaly2025-08-30Truhlar And Truhlar Attys PROPOSAL30Asiya Javayant
1020Claire TollnerIndia2025-09-14Benton, John B Jr PROPOSAL23Amy Elsner
1021Clifford RimArgentina2025-09-05Feiner Bros NEGOTIATION29Asiya Javayant
1022Sinclair WaycottSpain2025-09-01King, Christopher A Esq NEW80Asiya Javayant
1023Aika InouyeUnited Kingdom2025-08-30Chemel, James L Cpa RENEWAL83Xuxue Feng
1024Kaitlin OstroskyIndia2025-08-25Benton, John B Jr NEW46Amy Elsner
1025David DarakjyArgentina2025-08-23King, Christopher A Esq QUALIFIED28Anna Fali
1026Munro FerenczSpain2025-08-19Rangoni Of Florence NEW19Ioni Bowcher
1027Faith GillianSpain2025-09-14Truhlar And Truhlar Attys QUALIFIED52Onyama Limba
1028Mujtaba NickaBrazil2025-08-19Chemel, James L Cpa QUALIFIED15Anna Fali
1029Costa DilliardAustralia2025-09-15Printing Dimensions PROPOSAL81Xuxue Feng
1030Morrow RutaFrance2025-09-13Feiner Bros UNQUALIFIED88Ivan Magalhaes
1031Aika InouyeCanada2025-08-26Rousseaux, Michael Esq QUALIFIED24Onyama Limba
1032Julie StensethSpain2025-08-18Chemel, James L Cpa RENEWAL18Onyama Limba
1033Murillo MaletFrance2025-08-31Buckley Miller Wright RENEWAL21Ioni Bowcher
1034Morrow RutaArgentina2025-09-04Rousseaux, Michael Esq UNQUALIFIED29Stephen Shaw
1035Mayumi KolmetzJapan2025-09-04Morlong Associates UNQUALIFIED34Ivan Magalhaes
1036Emily WhobreyUnited Kingdom2025-09-09Rangoni Of Florence RENEWAL41Anna Fali
1037Kadeem FlosiIndia2025-09-04Benton, John B Jr QUALIFIED26Ioni Bowcher
1038Costa DilliardFrance2025-09-06Rousseaux, Michael Esq NEW95Asiya Javayant
1039Wickens NestleItaly2025-08-23King, Christopher A Esq NEGOTIATION34Asiya Javayant
1040Aruna FigeroaFrance2025-08-17Rousseaux, Michael Esq RENEWAL58Asiya Javayant
1041Darci PoquetteBrazil2025-08-22Chemel, James L Cpa RENEWAL95Bernardo Dominic
1042Mayumi KolmetzUnited Kingdom2025-08-26Chanay, Jeffrey A Esq UNQUALIFIED47Asiya Javayant
1043Clifford RimGermany2025-08-31Chemel, James L Cpa UNQUALIFIED91Amy Elsner
1044David DarakjyIndia2025-08-21Morlong Associates QUALIFIED89Elwin Sharvill
1045Greenwood BologniaJapan2025-09-06Chanay, Jeffrey A Esq RENEWAL67Elwin Sharvill
1046Julie StensethFrance2025-08-18Rousseaux, Michael Esq NEW38Ivan Magalhaes
1047Leja CaldareraIndia2025-08-24Commercial Press PROPOSAL24Ivan Magalhaes
1048Antonio CaudyIndia2025-09-01Commercial Press PROPOSAL52Anna Fali
1049Cody SaylorsCanada2025-08-21Benton, John B Jr NEGOTIATION77Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Arvin AlbaresGermanyElwin Sharvill QUALIFIED
Morrow RutaBrazilAmy Elsner PROPOSAL
Jennifer AmigonFranceIoni Bowcher NEW
Nicolas IturbideArgentinaAmy Elsner NEW
Mujtaba NickaItalyAmy Elsner UNQUALIFIED
Ricardo GauchoRussiaAmy Elsner PROPOSAL
Jones VocelkaArgentinaBernardo Dominic NEGOTIATION
Morrow RutaIndiaOnyama Limba UNQUALIFIED
Kadeem FlosiAustraliaBernardo Dominic RENEWAL
Julie StensethFranceAnna Fali QUALIFIED
Emily WhobreyFranceAnna Fali NEW
Adams MorascaUnited KingdomOnyama Limba UNQUALIFIED
David DarakjyBrazilIvan Magalhaes PROPOSAL
Juan WieserArgentinaXuxue Feng QUALIFIED
Alejandro PerinCanadaAsiya Javayant QUALIFIED
Aika InouyeJapanStephen Shaw UNQUALIFIED
Adams MorascaGermanyAsiya Javayant RENEWAL
Smith GlickAustraliaIvan Magalhaes RENEWAL
Costa DilliardJapanStephen Shaw UNQUALIFIED
Ricardo GauchoJapanAmy Elsner NEW
Isabel BowleyArgentinaStephen Shaw UNQUALIFIED
Kaitlin OstroskyGermanyAsiya Javayant NEGOTIATION
Salvatore StockhamJapanAnna Fali QUALIFIED
Faith GillianAustraliaAmy Elsner QUALIFIED
Ashley DoeIndiaIvan Magalhaes QUALIFIED
Munro FerenczUnited KingdomStephen Shaw PROPOSAL
James ButtArgentinaOnyama Limba NEGOTIATION
Ivar PaprockiSpainElwin Sharvill NEW
Chavez BriddickIndiaOnyama Limba RENEWAL
Julie StensethAustraliaElwin Sharvill NEW
Juan WieserAustraliaStephen Shaw PROPOSAL
Julie StensethFranceAsiya Javayant PROPOSAL
James ButtGermanyAnna Fali QUALIFIED
Isabel BowleySpainStephen Shaw PROPOSAL
Leja CaldareraUnited KingdomOnyama Limba NEGOTIATION
Antonio CaudyGermanyStephen Shaw UNQUALIFIED
Juan WieserBrazilXuxue Feng RENEWAL
Wickens NestleIndiaIvan Magalhaes QUALIFIED
Chavez BriddickSpainAmy Elsner PROPOSAL
Morrow RutaJapanStephen Shaw UNQUALIFIED
Tony FollerIndiaBernardo Dominic QUALIFIED
Rodrigues CampainGermanyIvan Magalhaes NEGOTIATION
Smith GlickItalyAsiya Javayant RENEWAL
Silvio SlusarskiCanadaXuxue Feng NEGOTIATION
Cody SaylorsIndiaIvan Magalhaes PROPOSAL
Emily WhobreyAustraliaOnyama Limba PROPOSAL
Ivar PaprockiArgentinaAmy Elsner PROPOSAL
Leja CaldareraGermanyOnyama Limba PROPOSAL
Kaitlin OstroskyGermanyOnyama Limba NEW
Salvatore StockhamArgentinaElwin Sharvill NEGOTIATION
Frozen Columns
Name
Clifford Rim
Rodrigues Campain
Jeanfrancois Venere
Salvatore Stockham
Morrow Ruta
Aruna Figeroa
Ricardo Gaucho
Kaitlin Ostrosky
James Butt
Deepesh Chui
Alejandro Perin
Jennifer Amigon
Wickens Nestle
Mujtaba Nicka
Mayumi Kolmetz
Jeanfrancois Venere
Deepesh Chui
Costa Dilliard
Stacey Maclead
Maria Marrier
Darci Poquette
Jennifer Amigon
Ivar Paprocki
Smith Glick
Jefferson Schemmer
Greenwood Bolognia
Ivar Paprocki
Salvatore Stockham
Aditya Kusko
Aika Inouye
Ashley Doe
Darci Poquette
Alejandro Perin
Aruna Figeroa
Aruna Figeroa
Mujtaba Nicka
Mujtaba Nicka
Cody Saylors
Nicolas Iturbide
Johnson Sergi
Emily Whobrey
Cody Saylors
Jennifer Amigon
James Butt
David Darakjy
Sinclair Waycott
Isabel Bowley
Jones Vocelka
Cody Saylors
James Butt
IdCountryDate
1000Italy2025-09-06
1001United Kingdom2025-08-31
1002Canada2025-08-17
1003United Kingdom2025-08-20
1004Spain2025-08-21
1005France2025-08-25
1006Canada2025-08-22
1007Japan2025-08-24
1008Italy2025-09-04
1009Canada2025-08-20
1010Brazil2025-09-05
1011Australia2025-09-07
1012Germany2025-09-06
1013Australia2025-09-09
1014Japan2025-08-27
1015Italy2025-09-14
1016Italy2025-09-02
1017Spain2025-09-01
1018Italy2025-08-31
1019Brazil2025-09-13
1020Argentina2025-08-21
1021Brazil2025-09-07
1022India2025-09-11
1023India2025-08-18
1024Italy2025-08-27
1025Italy2025-08-25
1026Australia2025-09-03
1027India2025-08-27
1028Canada2025-09-09
1029India2025-08-20
1030Japan2025-09-13
1031Japan2025-08-22
1032Canada2025-08-29
1033Australia2025-08-18
1034Australia2025-09-04
1035Australia2025-09-05
1036Canada2025-09-05
1037Germany2025-09-12
1038Italy2025-08-23
1039Russia2025-09-12
1040Japan2025-08-21
1041France2025-09-08
1042Japan2025-08-22
1043Russia2025-09-02
1044Japan2025-09-05
1045India2025-08-28
1046France2025-08-23
1047Spain2025-09-12
1048France2025-09-08
1049Germany2025-09-14

On-Demand Data

NameIdCountryDate
Kadeem Flosi1000Italy2025-09-01
Chavez Briddick1001Italy2025-09-02
Rodrigues Campain1002Germany2025-08-29
Jeanfrancois Venere1003France2025-08-26
Emily Whobrey1004Japan2025-08-26
Ricardo Gaucho1005Japan2025-09-02
Johnson Sergi1006Russia2025-09-14
Kaitlin Ostrosky1007Russia2025-08-17
Emily Whobrey1008Brazil2025-09-05
Emily Whobrey1009Brazil2025-09-07
Julie Stenseth1010Russia2025-08-27
Greenwood Bolognia1011India2025-09-01
Alejandro Perin1012Italy2025-08-20
Mujtaba Nicka1013Japan2025-09-01
Morrow Ruta1014France2025-08-29
Sinclair Waycott1015Spain2025-08-20
Leja Caldarera1016India2025-08-31
Izzy Garufi1017India2025-09-06
Sinclair Waycott1018Russia2025-08-29
Aruna Figeroa1019Brazil2025-09-06
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Silvio SlusarskiCanadaBernardo Dominic NEGOTIATION
Leon OldroydUnited KingdomBernardo Dominic PROPOSAL
Clifford RimUnited KingdomElwin Sharvill UNQUALIFIED
Cody SaylorsGermanyAnna Fali RENEWAL
Adams MorascaCanadaElwin Sharvill QUALIFIED
Antonio CaudyJapanIvan Magalhaes NEW
Adams MorascaArgentinaStephen Shaw NEW
Murillo MaletBrazilBernardo Dominic QUALIFIED
Maisha RulapaughJapanAmy Elsner PROPOSAL
Ivar PaprockiGermanyStephen Shaw PROPOSAL
Aditya KuskoItalyIoni Bowcher NEGOTIATION
Cody SaylorsCanadaIvan Magalhaes QUALIFIED
Nicolas IturbideGermanyAsiya Javayant UNQUALIFIED
Misaki RoysterArgentinaOnyama Limba NEGOTIATION
Maisha RulapaughUnited KingdomXuxue Feng RENEWAL
Aika InouyeItalyXuxue Feng PROPOSAL
Ivar PaprockiIndiaOnyama Limba RENEWAL
Kadeem FlosiGermanyBernardo Dominic RENEWAL
Mujtaba NickaAustraliaAsiya Javayant NEW
Ivar PaprockiIndiaIoni Bowcher UNQUALIFIED
Chavez BriddickFranceXuxue Feng RENEWAL
Munro FerenczGermanyIoni Bowcher NEGOTIATION
Mujtaba NickaSpainXuxue Feng RENEWAL
Costa DilliardBrazilAsiya Javayant UNQUALIFIED
James ButtFranceXuxue Feng PROPOSAL
Maisha RulapaughUnited KingdomElwin Sharvill PROPOSAL
Smith GlickSpainStephen Shaw UNQUALIFIED
Aika InouyeArgentinaElwin Sharvill PROPOSAL
Izzy GarufiIndiaAnna Fali NEGOTIATION
Adams MorascaArgentinaAsiya Javayant PROPOSAL
Emily WhobreyItalyAnna Fali PROPOSAL
Jeanfrancois VenereBrazilAmy Elsner PROPOSAL
Darci PoquetteArgentinaBernardo Dominic RENEWAL
Julie StensethIndiaIoni Bowcher RENEWAL
Cody SaylorsRussiaXuxue Feng RENEWAL
Aditya KuskoBrazilIoni Bowcher RENEWAL
Alejandro PerinBrazilAmy Elsner NEGOTIATION
Sinclair WaycottUnited KingdomAmy Elsner UNQUALIFIED
Nicolas IturbideBrazilXuxue Feng QUALIFIED
Aruna FigeroaArgentinaAnna Fali 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>