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
Ricardo GauchoRussiaIvan Magalhaes PROPOSAL
Isabel BowleyFranceStephen Shaw NEW
Leja CaldareraItalyStephen Shaw UNQUALIFIED
Tony FollerRussiaIoni Bowcher RENEWAL
Ashley DoeRussiaStephen Shaw RENEWAL
Munro FerenczSpainOnyama Limba NEGOTIATION
Morrow RutaAustraliaOnyama Limba NEGOTIATION
Morrow RutaAustraliaBernardo Dominic NEW
Kadeem FlosiGermanyAsiya Javayant UNQUALIFIED
Aruna FigeroaCanadaXuxue Feng UNQUALIFIED
Francesco ShinkoFranceXuxue Feng NEGOTIATION
Jennifer AmigonFranceStephen Shaw NEGOTIATION
Mayumi KolmetzCanadaXuxue Feng QUALIFIED
Isabel BowleyAustraliaStephen Shaw NEGOTIATION
Aditya KuskoFranceAnna Fali NEGOTIATION
Misaki RoysterBrazilAnna Fali RENEWAL
Faith GillianItalyAsiya Javayant NEGOTIATION
David DarakjyArgentinaElwin Sharvill UNQUALIFIED
Leon OldroydFranceElwin Sharvill UNQUALIFIED
Aditya KuskoArgentinaAnna Fali QUALIFIED
Ashley DoeUnited KingdomAmy Elsner NEGOTIATION
Wickens NestleArgentinaIoni Bowcher QUALIFIED
Rodrigues CampainRussiaAsiya Javayant NEW
Ricardo GauchoBrazilXuxue Feng UNQUALIFIED
Stacey MacleadRussiaStephen Shaw QUALIFIED
Smith GlickFranceIvan Magalhaes UNQUALIFIED
Isabel BowleyItalyBernardo Dominic RENEWAL
Mujtaba NickaIndiaIvan Magalhaes UNQUALIFIED
Antonio CaudyUnited KingdomIvan Magalhaes NEGOTIATION
Leja CaldareraUnited KingdomAmy Elsner QUALIFIED
Johnson SergiArgentinaIoni Bowcher PROPOSAL
Claire TollnerFranceIoni Bowcher NEGOTIATION
Ashley DoeItalyIoni Bowcher RENEWAL
Aika InouyeSpainAsiya Javayant PROPOSAL
Claire TollnerBrazilIvan Magalhaes NEW
Murillo MaletIndiaStephen Shaw QUALIFIED
Antonio CaudyIndiaOnyama Limba QUALIFIED
Clifford RimCanadaStephen Shaw NEW
Leon OldroydFranceAmy Elsner UNQUALIFIED
Juan WieserBrazilAnna Fali PROPOSAL
Julie StensethItalyBernardo Dominic RENEWAL
Claire TollnerFranceStephen Shaw UNQUALIFIED
Francesco ShinkoBrazilOnyama Limba RENEWAL
Smith GlickCanadaAmy Elsner RENEWAL
Costa DilliardUnited KingdomAmy Elsner QUALIFIED
Aika InouyeGermanyBernardo Dominic PROPOSAL
Stacey MacleadSpainIvan Magalhaes NEGOTIATION
Munro FerenczArgentinaXuxue Feng UNQUALIFIED
Aditya KuskoUnited KingdomXuxue Feng UNQUALIFIED
James ButtArgentinaOnyama Limba UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Darci PoquetteFranceAnna Fali RENEWAL
Nicolas IturbideItalyIoni Bowcher NEGOTIATION
Nicolas IturbideJapanBernardo Dominic NEW
Ivar PaprockiJapanElwin Sharvill QUALIFIED
Emily WhobreyGermanyIvan Magalhaes QUALIFIED
Faith GillianIndiaIvan Magalhaes PROPOSAL
Morrow RutaSpainAsiya Javayant QUALIFIED
Clifford RimIndiaIvan Magalhaes QUALIFIED
Aditya KuskoFranceBernardo Dominic QUALIFIED
Emily WhobreyRussiaXuxue Feng NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Claire TollnerJapan2025-08-17Dorl, James J Esq PROPOSAL96Ioni Bowcher
1001Johnson SergiSpain2025-07-25Rousseaux, Michael Esq UNQUALIFIED55Anna Fali
1002Johnson SergiArgentina2025-08-02Chemel, James L Cpa UNQUALIFIED95Xuxue Feng
1003Murillo MaletIndia2025-08-05Chapman, Ross E Esq UNQUALIFIED79Elwin Sharvill
1004Julie StensethJapan2025-08-08Rousseaux, Michael Esq QUALIFIED19Amy Elsner
1005Kadeem FlosiSpain2025-07-22Truhlar And Truhlar Attys NEGOTIATION15Stephen Shaw
1006Adams MorascaArgentina2025-08-08Feltz Printing Service UNQUALIFIED63Xuxue Feng
1007Aika InouyeBrazil2025-08-08Commercial Press NEGOTIATION76Ioni Bowcher
1008Julie StensethIndia2025-07-21King, Christopher A Esq RENEWAL69Elwin Sharvill
1009Stacey MacleadSpain2025-07-30Benton, John B Jr NEGOTIATION24Xuxue Feng
1010Arvin AlbaresArgentina2025-08-17Chapman, Ross E Esq QUALIFIED72Amy Elsner
1011Johnson SergiIndia2025-08-10Printing Dimensions PROPOSAL6Asiya Javayant
1012Clifford RimBrazil2025-08-15Commercial Press NEW15Ivan Magalhaes
1013Faith GillianJapan2025-07-31King, Christopher A Esq PROPOSAL26Elwin Sharvill
1014Maisha RulapaughIndia2025-08-19Buckley Miller Wright NEW58Amy Elsner
1015Sinclair WaycottAustralia2025-08-07Feltz Printing Service RENEWAL25Asiya Javayant
1016Jennifer AmigonBrazil2025-08-18Dorl, James J Esq QUALIFIED46Elwin Sharvill
1017Ivar PaprockiGermany2025-08-11Truhlar And Truhlar Attys QUALIFIED19Anna Fali
1018Sinclair WaycottCanada2025-07-23Feiner Bros RENEWAL78Amy Elsner
1019Claire TollnerFrance2025-08-07Feiner Bros UNQUALIFIED73Amy Elsner
1020Izzy GarufiSpain2025-08-07Feltz Printing Service NEW74Amy Elsner
1021Sinclair WaycottGermany2025-08-12Chapman, Ross E Esq QUALIFIED34Stephen Shaw
1022Cody SaylorsAustralia2025-08-15Chemel, James L Cpa RENEWAL62Xuxue Feng
1023Johnson SergiCanada2025-07-25Rangoni Of Florence PROPOSAL50Stephen Shaw
1024Kaitlin OstroskyItaly2025-07-26Buckley Miller Wright UNQUALIFIED98Ioni Bowcher
1025Aruna FigeroaItaly2025-07-21Feltz Printing Service RENEWAL52Amy Elsner
1026Jones VocelkaArgentina2025-08-13Truhlar And Truhlar Attys NEGOTIATION56Stephen Shaw
1027Rodrigues CampainJapan2025-07-25Rangoni Of Florence PROPOSAL85Asiya Javayant
1028Arvin AlbaresCanada2025-08-16King, Christopher A Esq QUALIFIED23Anna Fali
1029Adams MorascaUnited Kingdom2025-08-05Chemel, James L Cpa NEW85Stephen Shaw
1030Stacey MacleadCanada2025-07-31Rangoni Of Florence RENEWAL5Xuxue Feng
1031Juan WieserIndia2025-07-29King, Christopher A Esq NEW83Stephen Shaw
1032Johnson SergiRussia2025-07-21Buckley Miller Wright NEGOTIATION49Onyama Limba
1033Jefferson SchemmerUnited Kingdom2025-08-14Truhlar And Truhlar Attys PROPOSAL48Anna Fali
1034Jennifer AmigonCanada2025-08-11Rousseaux, Michael Esq UNQUALIFIED16Anna Fali
1035Leja CaldareraBrazil2025-08-13Rangoni Of Florence NEGOTIATION64Ivan Magalhaes
1036Francesco ShinkoItaly2025-08-16Feiner Bros QUALIFIED38Elwin Sharvill
1037Cody SaylorsGermany2025-07-26King, Christopher A Esq NEW81Amy Elsner
1038Maisha RulapaughItaly2025-08-10Chanay, Jeffrey A Esq PROPOSAL5Amy Elsner
1039Alejandro PerinAustralia2025-08-18Benton, John B Jr RENEWAL86Stephen Shaw
1040Greenwood BologniaFrance2025-07-30Benton, John B Jr RENEWAL21Onyama Limba
1041Adams MorascaUnited Kingdom2025-08-14Benton, John B Jr UNQUALIFIED43Xuxue Feng
1042Costa DilliardIndia2025-08-12Benton, John B Jr RENEWAL40Asiya Javayant
1043Isabel BowleyIndia2025-07-24Feiner Bros RENEWAL29Onyama Limba
1044Johnson SergiUnited Kingdom2025-08-06Printing Dimensions UNQUALIFIED16Ioni Bowcher
1045Silvio SlusarskiJapan2025-08-13Chemel, James L Cpa RENEWAL29Ivan Magalhaes
1046Adams MorascaArgentina2025-08-11King, Christopher A Esq PROPOSAL10Elwin Sharvill
1047Aruna FigeroaUnited Kingdom2025-08-07Rangoni Of Florence UNQUALIFIED78Asiya Javayant
1048Alejandro PerinRussia2025-08-08Chemel, James L Cpa PROPOSAL36Stephen Shaw
1049Leja CaldareraBrazil2025-08-07Dorl, James J Esq NEGOTIATION6Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Leon OldroydJapanXuxue Feng PROPOSAL
Morrow RutaGermanyAnna Fali RENEWAL
Leja CaldareraAustraliaXuxue Feng PROPOSAL
Jennifer AmigonJapanAsiya Javayant RENEWAL
Alejandro PerinItalyBernardo Dominic NEGOTIATION
Greenwood BologniaArgentinaIvan Magalhaes NEGOTIATION
Misaki RoysterRussiaIvan Magalhaes QUALIFIED
Silvio SlusarskiItalyAnna Fali PROPOSAL
Murillo MaletArgentinaAnna Fali NEW
Silvio SlusarskiRussiaIvan Magalhaes PROPOSAL
Clifford RimUnited KingdomAnna Fali PROPOSAL
Claire TollnerGermanyBernardo Dominic QUALIFIED
Chavez BriddickFranceIoni Bowcher PROPOSAL
Darci PoquetteSpainBernardo Dominic NEW
Maria MarrierGermanyOnyama Limba QUALIFIED
Aditya KuskoSpainXuxue Feng NEW
Maisha RulapaughItalyBernardo Dominic NEW
Chavez BriddickArgentinaIvan Magalhaes QUALIFIED
Adams MorascaAustraliaIvan Magalhaes NEW
Ashley DoeIndiaAsiya Javayant PROPOSAL
David DarakjyCanadaStephen Shaw NEGOTIATION
Johnson SergiGermanyAmy Elsner UNQUALIFIED
Nicolas IturbideSpainElwin Sharvill UNQUALIFIED
James ButtItalyIvan Magalhaes NEW
Izzy GarufiIndiaBernardo Dominic UNQUALIFIED
Salvatore StockhamCanadaIvan Magalhaes PROPOSAL
Cody SaylorsUnited KingdomAnna Fali QUALIFIED
Adams MorascaUnited KingdomElwin Sharvill NEW
Salvatore StockhamBrazilAsiya Javayant QUALIFIED
Nicolas IturbideGermanyAnna Fali RENEWAL
Deepesh ChuiFranceIvan Magalhaes RENEWAL
Octavia MaletSpainAnna Fali UNQUALIFIED
Cody SaylorsFranceIvan Magalhaes NEGOTIATION
Adams MorascaAustraliaAsiya Javayant PROPOSAL
Emily WhobreyGermanyElwin Sharvill UNQUALIFIED
Emily WhobreyBrazilIvan Magalhaes RENEWAL
Nicolas IturbideAustraliaIoni Bowcher UNQUALIFIED
Jones VocelkaArgentinaOnyama Limba NEW
Tony FollerSpainElwin Sharvill NEGOTIATION
Sinclair WaycottUnited KingdomElwin Sharvill UNQUALIFIED
David DarakjySpainStephen Shaw QUALIFIED
Misaki RoysterFranceIvan Magalhaes NEW
Aruna FigeroaAustraliaElwin Sharvill UNQUALIFIED
Misaki RoysterCanadaAsiya Javayant RENEWAL
Silvio SlusarskiUnited KingdomAmy Elsner PROPOSAL
Kadeem FlosiItalyStephen Shaw RENEWAL
Julie StensethFranceBernardo Dominic PROPOSAL
Chavez BriddickCanadaOnyama Limba NEW
Rodrigues CampainAustraliaOnyama Limba QUALIFIED
Rodrigues CampainJapanIoni Bowcher NEGOTIATION
Frozen Columns
Name
Faith Gillian
Aruna Figeroa
David Darakjy
Salvatore Stockham
Mayumi Kolmetz
Leon Oldroyd
Claire Tollner
Faith Gillian
Nicolas Iturbide
Mayumi Kolmetz
Darci Poquette
Salvatore Stockham
Alejandro Perin
Maria Marrier
Adams Morasca
Isabel Bowley
Greenwood Bolognia
Stacey Maclead
Cody Saylors
Munro Ferencz
Aditya Kusko
Jones Vocelka
Francesco Shinko
Salvatore Stockham
Murillo Malet
Francesco Shinko
Darci Poquette
Ricardo Gaucho
Mayumi Kolmetz
James Butt
Antonio Caudy
Kaitlin Ostrosky
Mayumi Kolmetz
Faith Gillian
Aditya Kusko
Isabel Bowley
Francesco Shinko
Cody Saylors
Izzy Garufi
Emily Whobrey
Emily Whobrey
Morrow Ruta
Wickens Nestle
Misaki Royster
Murillo Malet
Tony Foller
Jennifer Amigon
Murillo Malet
Maria Marrier
Isabel Bowley
IdCountryDate
1000Argentina2025-07-26
1001Canada2025-08-01
1002France2025-08-11
1003Canada2025-08-01
1004Spain2025-08-08
1005Germany2025-08-07
1006Argentina2025-07-29
1007Italy2025-08-10
1008Canada2025-08-09
1009France2025-08-11
1010France2025-08-11
1011United Kingdom2025-08-01
1012Canada2025-07-26
1013Spain2025-07-30
1014India2025-08-02
1015Argentina2025-08-04
1016France2025-07-21
1017India2025-08-13
1018Spain2025-08-11
1019Brazil2025-08-04
1020Japan2025-08-05
1021Brazil2025-08-03
1022Canada2025-08-18
1023Brazil2025-08-11
1024France2025-07-24
1025Russia2025-08-12
1026United Kingdom2025-08-19
1027India2025-07-31
1028Spain2025-07-24
1029Spain2025-08-09
1030India2025-08-10
1031Spain2025-07-25
1032Canada2025-08-18
1033Australia2025-08-12
1034Japan2025-08-13
1035Russia2025-07-30
1036Japan2025-08-12
1037Russia2025-08-17
1038Argentina2025-08-01
1039Argentina2025-08-02
1040Canada2025-07-24
1041Russia2025-08-03
1042Russia2025-08-19
1043United Kingdom2025-08-17
1044France2025-08-13
1045Australia2025-08-09
1046Russia2025-07-30
1047Germany2025-08-17
1048Brazil2025-07-21
1049India2025-08-10

On-Demand Data

NameIdCountryDate
Izzy Garufi1000Argentina2025-08-13
Nicolas Iturbide1001Japan2025-08-04
Wickens Nestle1002Russia2025-08-18
Greenwood Bolognia1003United Kingdom2025-08-16
Sinclair Waycott1004Canada2025-07-31
Costa Dilliard1005Argentina2025-08-04
Aruna Figeroa1006Russia2025-08-06
Leon Oldroyd1007Spain2025-08-18
Leja Caldarera1008Australia2025-08-08
Aditya Kusko1009Australia2025-07-31
Faith Gillian1010Brazil2025-08-04
Munro Ferencz1011Germany2025-07-30
Izzy Garufi1012Canada2025-08-03
Jefferson Schemmer1013Germany2025-08-01
Darci Poquette1014Spain2025-07-22
Chavez Briddick1015Argentina2025-07-22
Jennifer Amigon1016France2025-08-05
Ashley Doe1017France2025-08-03
Juan Wieser1018Argentina2025-08-14
Arvin Albares1019India2025-08-03
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Murillo MaletRussiaXuxue Feng PROPOSAL
Nicolas IturbideCanadaBernardo Dominic NEW
Claire TollnerJapanIvan Magalhaes RENEWAL
Mayumi KolmetzAustraliaStephen Shaw QUALIFIED
Claire TollnerSpainBernardo Dominic QUALIFIED
Leon OldroydFranceOnyama Limba NEGOTIATION
Octavia MaletAustraliaXuxue Feng RENEWAL
Maisha RulapaughRussiaAmy Elsner NEW
Adams MorascaRussiaXuxue Feng NEW
Tony FollerRussiaAnna Fali UNQUALIFIED
Aika InouyeJapanBernardo Dominic NEW
Sinclair WaycottSpainBernardo Dominic RENEWAL
Maria MarrierFranceAsiya Javayant NEW
David DarakjyFranceOnyama Limba UNQUALIFIED
Jefferson SchemmerUnited KingdomBernardo Dominic QUALIFIED
Alejandro PerinSpainAnna Fali UNQUALIFIED
Stacey MacleadIndiaOnyama Limba RENEWAL
Costa DilliardJapanIvan Magalhaes NEGOTIATION
Emily WhobreySpainElwin Sharvill QUALIFIED
Leja CaldareraItalyIoni Bowcher RENEWAL
Antonio CaudyFranceBernardo Dominic UNQUALIFIED
Cody SaylorsSpainXuxue Feng NEW
Jennifer AmigonSpainAsiya Javayant NEW
Antonio CaudyArgentinaIvan Magalhaes UNQUALIFIED
Alejandro PerinAustraliaAsiya Javayant NEGOTIATION
Alejandro PerinCanadaBernardo Dominic RENEWAL
Ashley DoeBrazilAmy Elsner RENEWAL
Faith GillianGermanyIoni Bowcher NEW
Ivar PaprockiCanadaElwin Sharvill QUALIFIED
Claire TollnerSpainXuxue Feng NEGOTIATION
Greenwood BologniaItalyIoni Bowcher PROPOSAL
Ricardo GauchoAustraliaStephen Shaw QUALIFIED
Leon OldroydSpainAmy Elsner PROPOSAL
James ButtAustraliaAnna Fali NEGOTIATION
Jones VocelkaRussiaAmy Elsner NEW
Adams MorascaIndiaElwin Sharvill NEGOTIATION
Juan WieserArgentinaIoni Bowcher NEGOTIATION
Tony FollerSpainBernardo Dominic QUALIFIED
Ricardo GauchoFranceAnna Fali UNQUALIFIED
Salvatore StockhamSpainBernardo Dominic 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>