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
Francesco ShinkoFranceAnna Fali RENEWAL
Octavia MaletUnited KingdomBernardo Dominic RENEWAL
Munro FerenczCanadaOnyama Limba RENEWAL
Antonio CaudyItalyAmy Elsner PROPOSAL
Sinclair WaycottRussiaBernardo Dominic NEW
Claire TollnerArgentinaOnyama Limba RENEWAL
Juan WieserAustraliaAnna Fali NEGOTIATION
Arvin AlbaresArgentinaOnyama Limba RENEWAL
Jones VocelkaRussiaXuxue Feng PROPOSAL
Emily WhobreyUnited KingdomIoni Bowcher UNQUALIFIED
Jeanfrancois VenereJapanOnyama Limba QUALIFIED
Munro FerenczFranceOnyama Limba NEW
Jennifer AmigonSpainAsiya Javayant QUALIFIED
David DarakjyCanadaIvan Magalhaes QUALIFIED
Silvio SlusarskiCanadaAnna Fali PROPOSAL
Aruna FigeroaJapanElwin Sharvill NEW
Murillo MaletSpainStephen Shaw UNQUALIFIED
Murillo MaletSpainIvan Magalhaes NEW
David DarakjyFranceBernardo Dominic RENEWAL
Claire TollnerIndiaAsiya Javayant QUALIFIED
Maisha RulapaughGermanyAsiya Javayant NEGOTIATION
Ricardo GauchoRussiaAsiya Javayant NEW
Leon OldroydSpainElwin Sharvill UNQUALIFIED
Nicolas IturbideCanadaAmy Elsner NEGOTIATION
Rodrigues CampainRussiaElwin Sharvill PROPOSAL
Isabel BowleyIndiaIoni Bowcher NEGOTIATION
Nicolas IturbideRussiaAsiya Javayant RENEWAL
Sinclair WaycottBrazilElwin Sharvill NEGOTIATION
Sinclair WaycottCanadaAnna Fali NEGOTIATION
Aditya KuskoJapanAnna Fali NEW
Murillo MaletUnited KingdomAsiya Javayant NEW
Misaki RoysterAustraliaIvan Magalhaes UNQUALIFIED
Johnson SergiItalyAnna Fali NEW
Smith GlickArgentinaElwin Sharvill NEW
Greenwood BologniaJapanOnyama Limba NEW
Darci PoquetteUnited KingdomIoni Bowcher QUALIFIED
Kaitlin OstroskyAustraliaAsiya Javayant NEW
Murillo MaletCanadaStephen Shaw UNQUALIFIED
Julie StensethAustraliaBernardo Dominic RENEWAL
Ivar PaprockiFranceIvan Magalhaes NEGOTIATION
Munro FerenczCanadaIoni Bowcher NEGOTIATION
Maisha RulapaughIndiaElwin Sharvill PROPOSAL
Jennifer AmigonUnited KingdomAnna Fali NEW
Stacey MacleadBrazilIoni Bowcher QUALIFIED
Mayumi KolmetzItalyStephen Shaw RENEWAL
Munro FerenczFranceStephen Shaw RENEWAL
Jeanfrancois VenereSpainIoni Bowcher NEW
Chavez BriddickBrazilAmy Elsner PROPOSAL
Smith GlickBrazilAnna Fali NEW
Tony FollerSpainAsiya Javayant RENEWAL
Horizontal
NameCountryRepresentativeStatus
Octavia MaletItalyAsiya Javayant RENEWAL
Nicolas IturbideGermanyElwin Sharvill PROPOSAL
Isabel BowleyItalyElwin Sharvill UNQUALIFIED
Murillo MaletSpainAsiya Javayant QUALIFIED
Emily WhobreyFranceAnna Fali NEGOTIATION
Aruna FigeroaItalyStephen Shaw QUALIFIED
Ivar PaprockiSpainIoni Bowcher RENEWAL
Claire TollnerGermanyIvan Magalhaes RENEWAL
Sinclair WaycottSpainXuxue Feng NEGOTIATION
Aruna FigeroaItalyXuxue Feng PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Rodrigues CampainItaly2026-05-12Dorl, James J Esq QUALIFIED78Elwin Sharvill
1001Faith GillianAustralia2026-05-07Truhlar And Truhlar Attys NEW40Stephen Shaw
1002Tony FollerFrance2026-04-19Rousseaux, Michael Esq PROPOSAL2Xuxue Feng
1003Cody SaylorsAustralia2026-04-17Feltz Printing Service RENEWAL71Elwin Sharvill
1004Morrow RutaBrazil2026-05-07King, Christopher A Esq NEW22Stephen Shaw
1005Claire TollnerAustralia2026-04-20Rousseaux, Michael Esq RENEWAL72Amy Elsner
1006Francesco ShinkoGermany2026-05-11Feltz Printing Service NEW4Ioni Bowcher
1007Kaitlin OstroskyUnited Kingdom2026-05-13Buckley Miller Wright NEGOTIATION25Xuxue Feng
1008Murillo MaletCanada2026-05-12Morlong Associates RENEWAL11Onyama Limba
1009Jones VocelkaSpain2026-04-15Rousseaux, Michael Esq PROPOSAL19Amy Elsner
1010Aditya KuskoFrance2026-04-18Truhlar And Truhlar Attys QUALIFIED33Bernardo Dominic
1011Izzy GarufiRussia2026-05-12Morlong Associates UNQUALIFIED18Onyama Limba
1012Clifford RimAustralia2026-04-24Chanay, Jeffrey A Esq PROPOSAL28Onyama Limba
1013Tony FollerBrazil2026-04-26Chanay, Jeffrey A Esq NEGOTIATION44Ivan Magalhaes
1014Kaitlin OstroskyRussia2026-04-26Buckley Miller Wright NEGOTIATION83Ivan Magalhaes
1015Jones VocelkaBrazil2026-05-02Chemel, James L Cpa QUALIFIED68Bernardo Dominic
1016Leja CaldareraUnited Kingdom2026-05-06Printing Dimensions NEGOTIATION66Ioni Bowcher
1017Ashley DoeGermany2026-05-11Chemel, James L Cpa NEGOTIATION56Stephen Shaw
1018Faith GillianItaly2026-05-04King, Christopher A Esq PROPOSAL23Asiya Javayant
1019Juan WieserFrance2026-05-08Chemel, James L Cpa QUALIFIED90Amy Elsner
1020Claire TollnerIndia2026-04-20Benton, John B Jr NEW99Onyama Limba
1021Stacey MacleadUnited Kingdom2026-05-14Morlong Associates QUALIFIED26Stephen Shaw
1022Ricardo GauchoCanada2026-04-22Morlong Associates UNQUALIFIED29Amy Elsner
1023Ivar PaprockiJapan2026-04-29Buckley Miller Wright UNQUALIFIED13Onyama Limba
1024Stacey MacleadGermany2026-05-06Chemel, James L Cpa NEW3Stephen Shaw
1025Izzy GarufiAustralia2026-05-10King, Christopher A Esq NEGOTIATION37Anna Fali
1026Julie StensethIndia2026-05-10Truhlar And Truhlar Attys RENEWAL22Ioni Bowcher
1027Kaitlin OstroskyArgentina2026-04-27Chanay, Jeffrey A Esq NEGOTIATION20Asiya Javayant
1028Ricardo GauchoAustralia2026-05-10Buckley Miller Wright NEGOTIATION6Xuxue Feng
1029Deepesh ChuiJapan2026-05-13Morlong Associates RENEWAL30Anna Fali
1030Tony FollerSpain2026-05-04Chapman, Ross E Esq NEW79Amy Elsner
1031Jeanfrancois VenereItaly2026-05-03Truhlar And Truhlar Attys PROPOSAL84Ioni Bowcher
1032Chavez BriddickFrance2026-04-16Chemel, James L Cpa UNQUALIFIED13Ioni Bowcher
1033James ButtCanada2026-04-30Feiner Bros NEGOTIATION54Anna Fali
1034Juan WieserIndia2026-05-05Feiner Bros QUALIFIED74Elwin Sharvill
1035Jefferson SchemmerRussia2026-05-01Commercial Press QUALIFIED9Ivan Magalhaes
1036Ricardo GauchoSpain2026-04-21Feiner Bros NEW50Anna Fali
1037Alejandro PerinIndia2026-05-03King, Christopher A Esq NEW72Ioni Bowcher
1038Emily WhobreyCanada2026-05-01Rangoni Of Florence PROPOSAL61Ioni Bowcher
1039Ivar PaprockiCanada2026-05-12Rousseaux, Michael Esq PROPOSAL1Asiya Javayant
1040Darci PoquetteGermany2026-04-20Printing Dimensions NEGOTIATION55Ivan Magalhaes
1041Ivar PaprockiJapan2026-05-04Buckley Miller Wright PROPOSAL60Amy Elsner
1042Mujtaba NickaIndia2026-04-27Chapman, Ross E Esq NEW7Elwin Sharvill
1043Maisha RulapaughCanada2026-05-10Truhlar And Truhlar Attys NEW54Anna Fali
1044Cody SaylorsSpain2026-05-10Feiner Bros NEGOTIATION55Amy Elsner
1045Greenwood BologniaAustralia2026-05-08Rousseaux, Michael Esq NEW62Anna Fali
1046Claire TollnerItaly2026-04-18Buckley Miller Wright NEW66Asiya Javayant
1047Murillo MaletFrance2026-05-11Feiner Bros PROPOSAL68Onyama Limba
1048Cody SaylorsIndia2026-04-22Feltz Printing Service QUALIFIED29Elwin Sharvill
1049Sinclair WaycottBrazil2026-04-23Benton, John B Jr NEGOTIATION68Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Claire TollnerIndiaAmy Elsner PROPOSAL
Kaitlin OstroskyItalyBernardo Dominic PROPOSAL
Rodrigues CampainBrazilOnyama Limba QUALIFIED
Aditya KuskoItalyIvan Magalhaes NEW
Mayumi KolmetzArgentinaXuxue Feng UNQUALIFIED
Antonio CaudyIndiaBernardo Dominic RENEWAL
Emily WhobreyUnited KingdomBernardo Dominic NEGOTIATION
Johnson SergiRussiaIvan Magalhaes NEW
Antonio CaudyIndiaOnyama Limba NEGOTIATION
Leon OldroydItalyIoni Bowcher NEW
Mayumi KolmetzAustraliaAsiya Javayant QUALIFIED
Claire TollnerCanadaXuxue Feng PROPOSAL
Octavia MaletFranceOnyama Limba RENEWAL
Antonio CaudyIndiaBernardo Dominic RENEWAL
Arvin AlbaresUnited KingdomIvan Magalhaes NEGOTIATION
Isabel BowleySpainAsiya Javayant QUALIFIED
Deepesh ChuiRussiaAnna Fali PROPOSAL
Kaitlin OstroskyBrazilStephen Shaw RENEWAL
Kadeem FlosiSpainElwin Sharvill PROPOSAL
Aruna FigeroaArgentinaElwin Sharvill RENEWAL
Emily WhobreyBrazilElwin Sharvill NEGOTIATION
Chavez BriddickItalyElwin Sharvill NEW
Johnson SergiArgentinaElwin Sharvill UNQUALIFIED
Kadeem FlosiIndiaIoni Bowcher QUALIFIED
Leon OldroydItalyIvan Magalhaes PROPOSAL
Julie StensethFranceAnna Fali RENEWAL
Adams MorascaBrazilAnna Fali QUALIFIED
Emily WhobreyRussiaAnna Fali NEW
Morrow RutaJapanIoni Bowcher RENEWAL
Ivar PaprockiBrazilAnna Fali RENEWAL
Ashley DoeCanadaOnyama Limba NEGOTIATION
Jefferson SchemmerBrazilAnna Fali NEW
Claire TollnerIndiaBernardo Dominic QUALIFIED
Ashley DoeItalyXuxue Feng PROPOSAL
Claire TollnerBrazilOnyama Limba NEW
Sinclair WaycottUnited KingdomOnyama Limba NEGOTIATION
Leon OldroydJapanXuxue Feng RENEWAL
Silvio SlusarskiGermanyAmy Elsner NEW
Jefferson SchemmerBrazilAsiya Javayant QUALIFIED
Maisha RulapaughCanadaOnyama Limba QUALIFIED
Jefferson SchemmerAustraliaIvan Magalhaes UNQUALIFIED
Smith GlickCanadaIvan Magalhaes QUALIFIED
Tony FollerRussiaAnna Fali UNQUALIFIED
Chavez BriddickCanadaIoni Bowcher RENEWAL
Misaki RoysterIndiaStephen Shaw NEGOTIATION
Salvatore StockhamJapanOnyama Limba NEGOTIATION
Jeanfrancois VenereItalyOnyama Limba RENEWAL
Francesco ShinkoCanadaElwin Sharvill RENEWAL
Sinclair WaycottItalyAsiya Javayant UNQUALIFIED
Alejandro PerinUnited KingdomElwin Sharvill NEW
Frozen Columns
Name
Ashley Doe
Leon Oldroyd
Ashley Doe
Adams Morasca
Leja Caldarera
Aika Inouye
Aditya Kusko
Mujtaba Nicka
Alejandro Perin
Aditya Kusko
Mayumi Kolmetz
Faith Gillian
Tony Foller
Silvio Slusarski
Arvin Albares
Izzy Garufi
Isabel Bowley
Jennifer Amigon
Jefferson Schemmer
Aika Inouye
Ashley Doe
Clifford Rim
Kadeem Flosi
Clifford Rim
Tony Foller
James Butt
Greenwood Bolognia
Mujtaba Nicka
Maria Marrier
Faith Gillian
Kadeem Flosi
Octavia Malet
Clifford Rim
Aika Inouye
Chavez Briddick
Maisha Rulapaugh
Munro Ferencz
Jeanfrancois Venere
Deepesh Chui
Maisha Rulapaugh
Izzy Garufi
Greenwood Bolognia
Maria Marrier
Sinclair Waycott
Isabel Bowley
Mayumi Kolmetz
Faith Gillian
Kadeem Flosi
Stacey Maclead
Mayumi Kolmetz
IdCountryDate
1000Argentina2026-04-25
1001Russia2026-04-19
1002Italy2026-05-03
1003Italy2026-05-01
1004India2026-05-02
1005Spain2026-05-14
1006Argentina2026-05-14
1007India2026-04-17
1008Brazil2026-05-10
1009Japan2026-04-28
1010Brazil2026-05-04
1011Argentina2026-04-17
1012Australia2026-04-19
1013Germany2026-05-05
1014Italy2026-05-12
1015Italy2026-04-24
1016Brazil2026-05-14
1017Spain2026-04-20
1018Canada2026-04-28
1019Germany2026-04-24
1020Spain2026-05-01
1021Argentina2026-05-10
1022Japan2026-04-27
1023Germany2026-04-23
1024India2026-04-30
1025Argentina2026-05-05
1026Germany2026-05-06
1027Italy2026-04-23
1028France2026-04-25
1029Italy2026-04-15
1030Argentina2026-05-09
1031Russia2026-05-06
1032Spain2026-04-17
1033France2026-05-01
1034India2026-04-17
1035Russia2026-04-20
1036Brazil2026-04-24
1037Argentina2026-04-20
1038Germany2026-04-22
1039United Kingdom2026-05-12
1040Japan2026-04-23
1041United Kingdom2026-05-05
1042United Kingdom2026-04-21
1043Canada2026-05-05
1044Australia2026-05-03
1045Japan2026-04-20
1046Australia2026-05-06
1047Japan2026-04-19
1048Spain2026-05-12
1049Argentina2026-04-27

On-Demand Data

NameIdCountryDate
Alejandro Perin1000Germany2026-05-09
Jefferson Schemmer1001Canada2026-05-10
Isabel Bowley1002Brazil2026-04-22
David Darakjy1003India2026-04-23
Ivar Paprocki1004India2026-04-19
Munro Ferencz1005France2026-05-01
Murillo Malet1006India2026-05-10
Jefferson Schemmer1007Spain2026-05-07
Stacey Maclead1008Canada2026-05-06
Salvatore Stockham1009Spain2026-05-10
Kaitlin Ostrosky1010United Kingdom2026-05-05
Jennifer Amigon1011Germany2026-05-10
Tony Foller1012Germany2026-05-05
Greenwood Bolognia1013Canada2026-04-19
Maria Marrier1014Canada2026-05-03
Francesco Shinko1015Russia2026-04-30
Misaki Royster1016Italy2026-04-27
Nicolas Iturbide1017Canada2026-04-15
Darci Poquette1018United Kingdom2026-04-26
Silvio Slusarski1019Germany2026-04-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Wickens NestleFranceAnna Fali RENEWAL
Murillo MaletCanadaIoni Bowcher QUALIFIED
Octavia MaletJapanElwin Sharvill UNQUALIFIED
Isabel BowleyJapanAsiya Javayant RENEWAL
Ashley DoeGermanyAnna Fali UNQUALIFIED
Darci PoquetteCanadaXuxue Feng NEW
Misaki RoysterArgentinaIvan Magalhaes NEW
Stacey MacleadJapanElwin Sharvill RENEWAL
Ashley DoeAustraliaAsiya Javayant RENEWAL
Francesco ShinkoIndiaAnna Fali PROPOSAL
Salvatore StockhamArgentinaIvan Magalhaes NEGOTIATION
Cody SaylorsItalyXuxue Feng PROPOSAL
Sinclair WaycottJapanIoni Bowcher UNQUALIFIED
Costa DilliardRussiaAsiya Javayant RENEWAL
Silvio SlusarskiGermanyIoni Bowcher QUALIFIED
Adams MorascaBrazilAmy Elsner PROPOSAL
Johnson SergiItalyStephen Shaw UNQUALIFIED
Murillo MaletIndiaAsiya Javayant RENEWAL
Claire TollnerArgentinaAsiya Javayant NEGOTIATION
Leon OldroydFranceBernardo Dominic NEGOTIATION
Rodrigues CampainGermanyOnyama Limba PROPOSAL
Jeanfrancois VenereGermanyIvan Magalhaes NEGOTIATION
Sinclair WaycottSpainStephen Shaw NEW
Mujtaba NickaItalyStephen Shaw NEGOTIATION
Julie StensethRussiaBernardo Dominic PROPOSAL
Deepesh ChuiJapanBernardo Dominic QUALIFIED
Aruna FigeroaSpainAsiya Javayant QUALIFIED
Mujtaba NickaAustraliaOnyama Limba UNQUALIFIED
Chavez BriddickAustraliaAsiya Javayant NEW
Ashley DoeIndiaBernardo Dominic NEGOTIATION
Deepesh ChuiGermanyBernardo Dominic PROPOSAL
Kadeem FlosiArgentinaXuxue Feng QUALIFIED
Ashley DoeAustraliaAnna Fali PROPOSAL
Arvin AlbaresBrazilXuxue Feng RENEWAL
Jennifer AmigonGermanyElwin Sharvill RENEWAL
Nicolas IturbideIndiaIvan Magalhaes PROPOSAL
Costa DilliardItalyStephen Shaw NEGOTIATION
Alejandro PerinFranceOnyama Limba NEGOTIATION
Aika InouyeRussiaBernardo Dominic NEW
Jones VocelkaGermanyIvan Magalhaes 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>