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
Morrow RutaGermanyBernardo Dominic UNQUALIFIED
Faith GillianBrazilBernardo Dominic NEGOTIATION
Rodrigues CampainRussiaElwin Sharvill QUALIFIED
David DarakjyFranceAmy Elsner PROPOSAL
Jones VocelkaUnited KingdomOnyama Limba PROPOSAL
Maria MarrierJapanAnna Fali NEGOTIATION
Mayumi KolmetzSpainStephen Shaw PROPOSAL
Tony FollerUnited KingdomStephen Shaw NEGOTIATION
Ivar PaprockiBrazilAmy Elsner RENEWAL
Faith GillianItalyIoni Bowcher NEGOTIATION
Stacey MacleadCanadaOnyama Limba NEGOTIATION
Ashley DoeUnited KingdomIvan Magalhaes RENEWAL
Izzy GarufiArgentinaAmy Elsner QUALIFIED
Deepesh ChuiItalyBernardo Dominic NEW
Ivar PaprockiAustraliaAsiya Javayant NEGOTIATION
Arvin AlbaresGermanyBernardo Dominic NEGOTIATION
Ricardo GauchoAustraliaIvan Magalhaes RENEWAL
Aruna FigeroaBrazilIvan Magalhaes PROPOSAL
Misaki RoysterFranceStephen Shaw PROPOSAL
Silvio SlusarskiFranceStephen Shaw NEW
Nicolas IturbideArgentinaBernardo Dominic NEW
Murillo MaletJapanXuxue Feng PROPOSAL
Greenwood BologniaGermanyIvan Magalhaes NEGOTIATION
Chavez BriddickBrazilElwin Sharvill PROPOSAL
Morrow RutaIndiaStephen Shaw QUALIFIED
Emily WhobreySpainOnyama Limba NEGOTIATION
Sinclair WaycottAustraliaAmy Elsner NEGOTIATION
Leja CaldareraIndiaElwin Sharvill PROPOSAL
Cody SaylorsGermanyAnna Fali NEW
Silvio SlusarskiCanadaStephen Shaw NEW
Jeanfrancois VenereAustraliaStephen Shaw NEGOTIATION
Antonio CaudyAustraliaIoni Bowcher NEW
Aika InouyeIndiaAsiya Javayant NEW
Aruna FigeroaJapanStephen Shaw NEW
Octavia MaletSpainElwin Sharvill NEGOTIATION
Chavez BriddickSpainElwin Sharvill RENEWAL
Octavia MaletIndiaStephen Shaw RENEWAL
Jones VocelkaFranceXuxue Feng RENEWAL
Darci PoquetteCanadaOnyama Limba RENEWAL
Juan WieserJapanStephen Shaw QUALIFIED
Stacey MacleadGermanyStephen Shaw UNQUALIFIED
Julie StensethCanadaOnyama Limba NEGOTIATION
Leon OldroydArgentinaAnna Fali UNQUALIFIED
Jones VocelkaGermanyIvan Magalhaes QUALIFIED
Ivar PaprockiAustraliaBernardo Dominic UNQUALIFIED
Jones VocelkaItalyIvan Magalhaes UNQUALIFIED
Kadeem FlosiCanadaBernardo Dominic UNQUALIFIED
Isabel BowleyCanadaElwin Sharvill NEGOTIATION
Kadeem FlosiItalyIoni Bowcher NEGOTIATION
Adams MorascaGermanyIoni Bowcher NEW
Horizontal
NameCountryRepresentativeStatus
Misaki RoysterUnited KingdomIvan Magalhaes QUALIFIED
Wickens NestleCanadaBernardo Dominic PROPOSAL
Aruna FigeroaItalyStephen Shaw PROPOSAL
Francesco ShinkoSpainElwin Sharvill PROPOSAL
Isabel BowleyGermanyAnna Fali PROPOSAL
Smith GlickBrazilXuxue Feng NEW
Antonio CaudyCanadaIvan Magalhaes PROPOSAL
Leja CaldareraCanadaElwin Sharvill PROPOSAL
Silvio SlusarskiArgentinaElwin Sharvill NEGOTIATION
Juan WieserItalyIvan Magalhaes RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jefferson SchemmerUnited Kingdom2025-07-20Chemel, James L Cpa RENEWAL73Onyama Limba
1001James ButtFrance2025-08-08Buckley Miller Wright UNQUALIFIED33Stephen Shaw
1002Sinclair WaycottArgentina2025-08-10Buckley Miller Wright UNQUALIFIED89Bernardo Dominic
1003Jones VocelkaBrazil2025-08-02Feltz Printing Service RENEWAL11Anna Fali
1004Salvatore StockhamFrance2025-08-10Benton, John B Jr UNQUALIFIED67Stephen Shaw
1005Aditya KuskoAustralia2025-07-24Morlong Associates NEGOTIATION49Ioni Bowcher
1006Munro FerenczArgentina2025-08-01Dorl, James J Esq NEGOTIATION44Elwin Sharvill
1007Ivar PaprockiIndia2025-07-24Truhlar And Truhlar Attys UNQUALIFIED86Ivan Magalhaes
1008Emily WhobreyIndia2025-08-06Buckley Miller Wright QUALIFIED60Ioni Bowcher
1009Deepesh ChuiAustralia2025-07-26Rangoni Of Florence PROPOSAL9Asiya Javayant
1010Clifford RimJapan2025-08-07Truhlar And Truhlar Attys QUALIFIED81Anna Fali
1011Leja CaldareraJapan2025-08-15Feltz Printing Service NEW64Elwin Sharvill
1012Jones VocelkaGermany2025-08-04Dorl, James J Esq RENEWAL52Anna Fali
1013Ricardo GauchoArgentina2025-07-24Chemel, James L Cpa RENEWAL76Stephen Shaw
1014Ricardo GauchoGermany2025-07-18Rousseaux, Michael Esq QUALIFIED26Amy Elsner
1015Emily WhobreyCanada2025-08-02Rangoni Of Florence PROPOSAL47Anna Fali
1016Johnson SergiFrance2025-07-26Benton, John B Jr RENEWAL65Xuxue Feng
1017Clifford RimIndia2025-07-19Benton, John B Jr PROPOSAL42Ioni Bowcher
1018Wickens NestleRussia2025-07-22Rousseaux, Michael Esq RENEWAL74Xuxue Feng
1019Silvio SlusarskiSpain2025-07-28Chapman, Ross E Esq QUALIFIED34Ioni Bowcher
1020Salvatore StockhamBrazil2025-08-05Feiner Bros PROPOSAL93Onyama Limba
1021Adams MorascaCanada2025-07-31Rousseaux, Michael Esq RENEWAL68Xuxue Feng
1022Mayumi KolmetzFrance2025-08-04Feiner Bros RENEWAL35Xuxue Feng
1023Nicolas IturbideBrazil2025-07-23Feiner Bros NEW10Bernardo Dominic
1024Murillo MaletSpain2025-08-13Dorl, James J Esq PROPOSAL28Xuxue Feng
1025Francesco ShinkoUnited Kingdom2025-07-18Dorl, James J Esq NEW8Ivan Magalhaes
1026Ivar PaprockiSpain2025-07-17Printing Dimensions NEGOTIATION78Xuxue Feng
1027Arvin AlbaresFrance2025-08-06Morlong Associates NEGOTIATION6Stephen Shaw
1028Izzy GarufiFrance2025-07-18Chapman, Ross E Esq QUALIFIED63Elwin Sharvill
1029Jeanfrancois VenereIndia2025-08-08Dorl, James J Esq RENEWAL58Xuxue Feng
1030Wickens NestleIndia2025-08-01Benton, John B Jr NEW31Ivan Magalhaes
1031Rodrigues CampainAustralia2025-08-14Rangoni Of Florence QUALIFIED64Bernardo Dominic
1032Alejandro PerinRussia2025-07-30King, Christopher A Esq NEGOTIATION20Bernardo Dominic
1033Juan WieserJapan2025-08-09Chemel, James L Cpa QUALIFIED76Xuxue Feng
1034Jefferson SchemmerAustralia2025-07-22Truhlar And Truhlar Attys QUALIFIED88Xuxue Feng
1035Salvatore StockhamItaly2025-08-10Feltz Printing Service QUALIFIED48Elwin Sharvill
1036Ashley DoeSpain2025-07-29Chapman, Ross E Esq NEGOTIATION48Bernardo Dominic
1037Maria MarrierCanada2025-08-08Morlong Associates UNQUALIFIED70Onyama Limba
1038Darci PoquetteUnited Kingdom2025-08-13Commercial Press UNQUALIFIED91Elwin Sharvill
1039Deepesh ChuiIndia2025-07-23Rangoni Of Florence NEW91Bernardo Dominic
1040Alejandro PerinFrance2025-08-15Rangoni Of Florence PROPOSAL66Xuxue Feng
1041Rodrigues CampainBrazil2025-07-29Printing Dimensions NEGOTIATION4Asiya Javayant
1042Kadeem FlosiIndia2025-07-24Benton, John B Jr RENEWAL34Onyama Limba
1043Greenwood BologniaRussia2025-08-08Rangoni Of Florence QUALIFIED98Stephen Shaw
1044Murillo MaletItaly2025-07-18Dorl, James J Esq NEGOTIATION97Onyama Limba
1045Murillo MaletGermany2025-08-07Chanay, Jeffrey A Esq PROPOSAL45Onyama Limba
1046David DarakjyIndia2025-07-29Chapman, Ross E Esq NEW6Asiya Javayant
1047Deepesh ChuiGermany2025-07-23Morlong Associates RENEWAL21Anna Fali
1048Aika InouyeItaly2025-07-29Printing Dimensions UNQUALIFIED40Anna Fali
1049Antonio CaudyItaly2025-07-25Benton, John B Jr NEW51Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Silvio SlusarskiRussiaXuxue Feng QUALIFIED
David DarakjyArgentinaOnyama Limba UNQUALIFIED
Maisha RulapaughRussiaIvan Magalhaes PROPOSAL
Leja CaldareraUnited KingdomIvan Magalhaes PROPOSAL
Smith GlickItalyElwin Sharvill QUALIFIED
Julie StensethCanadaIoni Bowcher PROPOSAL
Jeanfrancois VenereGermanyAsiya Javayant UNQUALIFIED
Aditya KuskoJapanAmy Elsner RENEWAL
Greenwood BologniaFranceXuxue Feng NEW
Stacey MacleadSpainOnyama Limba NEGOTIATION
Ashley DoeCanadaAsiya Javayant PROPOSAL
Claire TollnerArgentinaIvan Magalhaes RENEWAL
Kaitlin OstroskyItalyStephen Shaw UNQUALIFIED
James ButtIndiaAnna Fali PROPOSAL
Rodrigues CampainAustraliaAsiya Javayant PROPOSAL
Tony FollerJapanIvan Magalhaes NEW
Cody SaylorsJapanElwin Sharvill NEW
Rodrigues CampainGermanyStephen Shaw NEW
Leon OldroydItalyStephen Shaw PROPOSAL
Octavia MaletAustraliaAsiya Javayant RENEWAL
Emily WhobreyIndiaBernardo Dominic NEGOTIATION
Julie StensethUnited KingdomAnna Fali PROPOSAL
Aruna FigeroaIndiaElwin Sharvill NEW
Francesco ShinkoSpainElwin Sharvill RENEWAL
Julie StensethUnited KingdomXuxue Feng PROPOSAL
Juan WieserItalyOnyama Limba RENEWAL
Salvatore StockhamGermanyXuxue Feng UNQUALIFIED
Jeanfrancois VenereCanadaStephen Shaw PROPOSAL
Morrow RutaAustraliaOnyama Limba NEW
Kadeem FlosiIndiaOnyama Limba PROPOSAL
Francesco ShinkoAustraliaIvan Magalhaes NEGOTIATION
Emily WhobreyArgentinaIoni Bowcher QUALIFIED
Maisha RulapaughBrazilBernardo Dominic UNQUALIFIED
Mayumi KolmetzIndiaAsiya Javayant UNQUALIFIED
Maisha RulapaughSpainXuxue Feng NEW
Costa DilliardBrazilAnna Fali NEW
Izzy GarufiItalyXuxue Feng UNQUALIFIED
Maisha RulapaughSpainAsiya Javayant QUALIFIED
Isabel BowleyUnited KingdomBernardo Dominic NEW
Alejandro PerinUnited KingdomAsiya Javayant PROPOSAL
Antonio CaudyItalyOnyama Limba UNQUALIFIED
Maisha RulapaughItalyXuxue Feng QUALIFIED
Maria MarrierBrazilBernardo Dominic UNQUALIFIED
Jennifer AmigonIndiaBernardo Dominic NEW
Isabel BowleyBrazilAmy Elsner PROPOSAL
Misaki RoysterSpainElwin Sharvill QUALIFIED
Ashley DoeFranceXuxue Feng RENEWAL
Deepesh ChuiItalyIoni Bowcher PROPOSAL
Faith GillianCanadaAsiya Javayant QUALIFIED
Jefferson SchemmerArgentinaXuxue Feng RENEWAL
Frozen Columns
Name
Arvin Albares
Murillo Malet
James Butt
Kadeem Flosi
Faith Gillian
Adams Morasca
Alejandro Perin
Wickens Nestle
Clifford Rim
Stacey Maclead
Jennifer Amigon
Juan Wieser
Chavez Briddick
Izzy Garufi
Jeanfrancois Venere
Octavia Malet
Sinclair Waycott
Antonio Caudy
Smith Glick
Jones Vocelka
Aruna Figeroa
James Butt
Nicolas Iturbide
Kadeem Flosi
Kadeem Flosi
James Butt
Rodrigues Campain
Aditya Kusko
Cody Saylors
Aruna Figeroa
Deepesh Chui
Ashley Doe
Ivar Paprocki
Stacey Maclead
Costa Dilliard
Kadeem Flosi
Kaitlin Ostrosky
Adams Morasca
Cody Saylors
Maria Marrier
Jeanfrancois Venere
Antonio Caudy
Ashley Doe
Arvin Albares
Nicolas Iturbide
Cody Saylors
Kaitlin Ostrosky
Maria Marrier
Adams Morasca
Arvin Albares
IdCountryDate
1000India2025-08-15
1001Russia2025-08-10
1002Germany2025-08-14
1003Argentina2025-08-04
1004Brazil2025-08-11
1005Spain2025-07-27
1006Japan2025-07-18
1007Japan2025-07-18
1008India2025-07-29
1009Spain2025-08-12
1010India2025-07-23
1011United Kingdom2025-07-25
1012Germany2025-07-31
1013Canada2025-08-03
1014India2025-07-18
1015India2025-07-21
1016Brazil2025-08-10
1017Australia2025-07-24
1018France2025-08-02
1019France2025-08-14
1020Canada2025-07-18
1021Australia2025-08-04
1022United Kingdom2025-08-04
1023Russia2025-07-22
1024Russia2025-07-18
1025Germany2025-08-06
1026Japan2025-07-19
1027Argentina2025-07-22
1028Canada2025-08-02
1029Brazil2025-07-22
1030Canada2025-07-19
1031Argentina2025-07-25
1032Brazil2025-07-29
1033Argentina2025-07-24
1034Italy2025-07-19
1035Argentina2025-07-21
1036France2025-07-28
1037France2025-07-25
1038Japan2025-08-12
1039Italy2025-07-20
1040United Kingdom2025-07-19
1041Germany2025-07-24
1042Japan2025-07-23
1043Argentina2025-07-23
1044Spain2025-07-30
1045Spain2025-07-26
1046India2025-07-19
1047Canada2025-07-28
1048Brazil2025-07-27
1049Canada2025-08-12

On-Demand Data

NameIdCountryDate
Maisha Rulapaugh1000Germany2025-07-21
Octavia Malet1001Australia2025-07-18
Cody Saylors1002Spain2025-08-10
Stacey Maclead1003France2025-07-28
Ivar Paprocki1004France2025-07-20
Mujtaba Nicka1005India2025-08-06
Julie Stenseth1006Canada2025-08-04
David Darakjy1007India2025-07-21
Deepesh Chui1008Germany2025-07-18
Leon Oldroyd1009Japan2025-07-17
Antonio Caudy1010Argentina2025-07-17
Francesco Shinko1011Russia2025-07-29
Sinclair Waycott1012United Kingdom2025-07-23
Salvatore Stockham1013United Kingdom2025-08-03
Greenwood Bolognia1014Spain2025-08-10
Octavia Malet1015Japan2025-07-29
Francesco Shinko1016Australia2025-07-25
Emily Whobrey1017Japan2025-08-02
Costa Dilliard1018Argentina2025-07-19
Darci Poquette1019Italy2025-07-17
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Murillo MaletArgentinaOnyama Limba NEGOTIATION
Nicolas IturbideCanadaStephen Shaw NEW
Nicolas IturbideGermanyAsiya Javayant NEGOTIATION
Munro FerenczAustraliaXuxue Feng NEGOTIATION
Cody SaylorsBrazilAsiya Javayant RENEWAL
Nicolas IturbideArgentinaBernardo Dominic NEW
Darci PoquetteFranceElwin Sharvill QUALIFIED
Emily WhobreyItalyXuxue Feng RENEWAL
Darci PoquetteIndiaXuxue Feng UNQUALIFIED
Tony FollerArgentinaAnna Fali PROPOSAL
Kadeem FlosiGermanyBernardo Dominic UNQUALIFIED
Jefferson SchemmerFranceIoni Bowcher PROPOSAL
Tony FollerGermanyElwin Sharvill UNQUALIFIED
Izzy GarufiFranceAsiya Javayant UNQUALIFIED
Silvio SlusarskiArgentinaBernardo Dominic NEW
Octavia MaletBrazilAsiya Javayant UNQUALIFIED
Deepesh ChuiBrazilAmy Elsner UNQUALIFIED
Costa DilliardItalyAnna Fali NEGOTIATION
Adams MorascaBrazilBernardo Dominic NEW
Greenwood BologniaGermanyAsiya Javayant NEW
Kadeem FlosiArgentinaAsiya Javayant NEGOTIATION
Leja CaldareraGermanyBernardo Dominic RENEWAL
Salvatore StockhamFranceAnna Fali UNQUALIFIED
Adams MorascaCanadaElwin Sharvill NEGOTIATION
David DarakjySpainAmy Elsner PROPOSAL
Ricardo GauchoArgentinaOnyama Limba RENEWAL
Smith GlickCanadaIvan Magalhaes QUALIFIED
Ivar PaprockiJapanBernardo Dominic UNQUALIFIED
Stacey MacleadItalyAsiya Javayant PROPOSAL
Ivar PaprockiArgentinaOnyama Limba PROPOSAL
Tony FollerBrazilAnna Fali RENEWAL
Adams MorascaUnited KingdomAsiya Javayant UNQUALIFIED
James ButtArgentinaIvan Magalhaes NEW
Greenwood BologniaCanadaStephen Shaw QUALIFIED
Julie StensethAustraliaAsiya Javayant NEGOTIATION
Clifford RimBrazilAsiya Javayant NEW
Antonio CaudyBrazilIoni Bowcher PROPOSAL
Emily WhobreyRussiaOnyama Limba QUALIFIED
Mujtaba NickaUnited KingdomIoni Bowcher QUALIFIED
Adams MorascaIndiaAmy Elsner 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>