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
Kaitlin OstroskyAustraliaOnyama Limba QUALIFIED
Tony FollerIndiaElwin Sharvill NEGOTIATION
Smith GlickBrazilAnna Fali QUALIFIED
Rodrigues CampainFranceAsiya Javayant NEW
Juan WieserIndiaIvan Magalhaes UNQUALIFIED
Juan WieserIndiaBernardo Dominic NEW
Tony FollerGermanyIvan Magalhaes NEW
Ashley DoeFranceBernardo Dominic PROPOSAL
Ashley DoeGermanyIvan Magalhaes PROPOSAL
Aika InouyeCanadaAnna Fali NEGOTIATION
Faith GillianRussiaAmy Elsner RENEWAL
Ivar PaprockiJapanElwin Sharvill NEGOTIATION
Jones VocelkaGermanyXuxue Feng PROPOSAL
Maria MarrierCanadaElwin Sharvill PROPOSAL
Morrow RutaGermanyStephen Shaw UNQUALIFIED
Nicolas IturbideArgentinaAmy Elsner QUALIFIED
Clifford RimItalyXuxue Feng QUALIFIED
Tony FollerAustraliaXuxue Feng UNQUALIFIED
Emily WhobreyJapanAsiya Javayant UNQUALIFIED
David DarakjyRussiaAsiya Javayant NEW
Misaki RoysterBrazilIoni Bowcher NEGOTIATION
Johnson SergiJapanElwin Sharvill RENEWAL
Murillo MaletIndiaIoni Bowcher PROPOSAL
Ricardo GauchoAustraliaXuxue Feng RENEWAL
Mayumi KolmetzArgentinaElwin Sharvill NEW
Ricardo GauchoIndiaBernardo Dominic QUALIFIED
Alejandro PerinItalyBernardo Dominic QUALIFIED
Jennifer AmigonBrazilOnyama Limba NEGOTIATION
Maria MarrierCanadaStephen Shaw RENEWAL
Morrow RutaSpainElwin Sharvill NEW
Murillo MaletGermanyElwin Sharvill NEW
Izzy GarufiItalyAsiya Javayant QUALIFIED
Kaitlin OstroskyFranceIoni Bowcher PROPOSAL
Chavez BriddickSpainBernardo Dominic NEGOTIATION
Wickens NestleGermanyXuxue Feng UNQUALIFIED
Kadeem FlosiIndiaOnyama Limba RENEWAL
Isabel BowleyRussiaBernardo Dominic QUALIFIED
Mujtaba NickaUnited KingdomIvan Magalhaes NEGOTIATION
Smith GlickIndiaIoni Bowcher RENEWAL
Aruna FigeroaCanadaOnyama Limba PROPOSAL
Antonio CaudySpainBernardo Dominic NEGOTIATION
Kaitlin OstroskyJapanIvan Magalhaes UNQUALIFIED
Salvatore StockhamSpainIvan Magalhaes RENEWAL
Nicolas IturbideGermanyAsiya Javayant NEGOTIATION
Francesco ShinkoJapanOnyama Limba NEW
Munro FerenczAustraliaStephen Shaw PROPOSAL
Nicolas IturbideArgentinaOnyama Limba PROPOSAL
Munro FerenczJapanXuxue Feng QUALIFIED
Tony FollerCanadaStephen Shaw QUALIFIED
Darci PoquetteIndiaElwin Sharvill PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Tony FollerArgentinaIoni Bowcher UNQUALIFIED
Aruna FigeroaCanadaOnyama Limba RENEWAL
Johnson SergiIndiaXuxue Feng PROPOSAL
Aika InouyeRussiaOnyama Limba NEGOTIATION
Jennifer AmigonJapanOnyama Limba RENEWAL
Isabel BowleyFranceIvan Magalhaes NEW
Emily WhobreyFranceIvan Magalhaes RENEWAL
Chavez BriddickSpainXuxue Feng NEW
Ricardo GauchoJapanXuxue Feng UNQUALIFIED
Munro FerenczIndiaIvan Magalhaes QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Salvatore StockhamGermany2025-09-24Feltz Printing Service QUALIFIED62Ioni Bowcher
1001Jones VocelkaFrance2025-09-16King, Christopher A Esq NEGOTIATION89Xuxue Feng
1002Kaitlin OstroskyCanada2025-09-28Morlong Associates RENEWAL57Asiya Javayant
1003Rodrigues CampainCanada2025-09-13Rousseaux, Michael Esq RENEWAL45Xuxue Feng
1004Francesco ShinkoIndia2025-09-25Printing Dimensions RENEWAL94Amy Elsner
1005Deepesh ChuiJapan2025-09-11Buckley Miller Wright QUALIFIED74Asiya Javayant
1006Deepesh ChuiBrazil2025-09-12Truhlar And Truhlar Attys QUALIFIED66Anna Fali
1007Wickens NestleRussia2025-09-16King, Christopher A Esq PROPOSAL93Stephen Shaw
1008Claire TollnerRussia2025-09-25Morlong Associates NEGOTIATION67Xuxue Feng
1009Johnson SergiSpain2025-09-24Rousseaux, Michael Esq QUALIFIED84Bernardo Dominic
1010Greenwood BologniaArgentina2025-09-10King, Christopher A Esq PROPOSAL61Anna Fali
1011Aruna FigeroaSpain2025-09-07Buckley Miller Wright UNQUALIFIED10Bernardo Dominic
1012Kaitlin OstroskySpain2025-10-03Buckley Miller Wright UNQUALIFIED45Asiya Javayant
1013Kadeem FlosiItaly2025-10-03Chanay, Jeffrey A Esq NEW35Anna Fali
1014Misaki RoysterUnited Kingdom2025-09-17Rousseaux, Michael Esq RENEWAL80Amy Elsner
1015Maria MarrierJapan2025-09-13Rangoni Of Florence NEGOTIATION1Amy Elsner
1016Jones VocelkaCanada2025-10-01Benton, John B Jr QUALIFIED13Onyama Limba
1017David DarakjyUnited Kingdom2025-09-16Rousseaux, Michael Esq PROPOSAL87Elwin Sharvill
1018Greenwood BologniaArgentina2025-09-25Rousseaux, Michael Esq RENEWAL48Ivan Magalhaes
1019Francesco ShinkoSpain2025-09-20Chapman, Ross E Esq QUALIFIED54Anna Fali
1020Leja CaldareraJapan2025-09-09Rousseaux, Michael Esq NEGOTIATION60Stephen Shaw
1021Jeanfrancois VenereFrance2025-09-27Dorl, James J Esq NEW88Onyama Limba
1022Jeanfrancois VenereItaly2025-09-12Chanay, Jeffrey A Esq RENEWAL16Amy Elsner
1023Mujtaba NickaFrance2025-09-15Commercial Press NEGOTIATION72Ioni Bowcher
1024Mayumi KolmetzIndia2025-09-16Chanay, Jeffrey A Esq RENEWAL47Ivan Magalhaes
1025Kadeem FlosiSpain2025-09-15Chanay, Jeffrey A Esq PROPOSAL0Amy Elsner
1026Isabel BowleyIndia2025-09-18Benton, John B Jr NEGOTIATION90Anna Fali
1027Maria MarrierItaly2025-09-25Benton, John B Jr NEW54Amy Elsner
1028Leon OldroydCanada2025-09-30Chemel, James L Cpa UNQUALIFIED45Onyama Limba
1029Izzy GarufiBrazil2025-09-27Chanay, Jeffrey A Esq RENEWAL2Amy Elsner
1030Nicolas IturbideAustralia2025-09-07Chemel, James L Cpa QUALIFIED35Amy Elsner
1031Jeanfrancois VenereRussia2025-09-09Rousseaux, Michael Esq NEGOTIATION80Onyama Limba
1032Johnson SergiSpain2025-09-25Rangoni Of Florence NEW49Anna Fali
1033Aditya KuskoSpain2025-09-12Commercial Press QUALIFIED53Onyama Limba
1034Silvio SlusarskiIndia2025-10-01Chemel, James L Cpa NEW14Anna Fali
1035Leon OldroydArgentina2025-10-05Printing Dimensions UNQUALIFIED33Ioni Bowcher
1036Aruna FigeroaJapan2025-09-18Rangoni Of Florence PROPOSAL85Bernardo Dominic
1037Silvio SlusarskiGermany2025-10-05Truhlar And Truhlar Attys RENEWAL51Stephen Shaw
1038Octavia MaletCanada2025-09-19Buckley Miller Wright NEW51Ivan Magalhaes
1039Jennifer AmigonSpain2025-09-28King, Christopher A Esq NEW25Ioni Bowcher
1040Salvatore StockhamArgentina2025-10-05Feiner Bros QUALIFIED17Ioni Bowcher
1041Stacey MacleadBrazil2025-09-23Commercial Press QUALIFIED19Asiya Javayant
1042Maisha RulapaughRussia2025-09-19Benton, John B Jr QUALIFIED23Bernardo Dominic
1043Salvatore StockhamIndia2025-09-25Chapman, Ross E Esq QUALIFIED88Amy Elsner
1044Darci PoquetteRussia2025-09-13King, Christopher A Esq NEGOTIATION25Elwin Sharvill
1045Isabel BowleyFrance2025-09-06Rousseaux, Michael Esq NEGOTIATION98Onyama Limba
1046Francesco ShinkoFrance2025-09-20Benton, John B Jr UNQUALIFIED82Amy Elsner
1047Johnson SergiRussia2025-09-22Benton, John B Jr PROPOSAL34Onyama Limba
1048Aika InouyeItaly2025-09-06Chanay, Jeffrey A Esq NEW89Onyama Limba
1049Octavia MaletBrazil2025-09-16Buckley Miller Wright PROPOSAL45Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Aditya KuskoUnited KingdomIvan Magalhaes NEW
Clifford RimItalyOnyama Limba PROPOSAL
Octavia MaletSpainIoni Bowcher RENEWAL
Wickens NestleItalyOnyama Limba NEGOTIATION
Francesco ShinkoGermanyIvan Magalhaes PROPOSAL
Faith GillianFranceElwin Sharvill NEW
Emily WhobreyGermanyIoni Bowcher NEW
Morrow RutaCanadaAsiya Javayant NEW
Mayumi KolmetzArgentinaAsiya Javayant RENEWAL
Aditya KuskoGermanyAsiya Javayant UNQUALIFIED
Salvatore StockhamSpainAnna Fali UNQUALIFIED
Greenwood BologniaUnited KingdomAnna Fali RENEWAL
Antonio CaudyArgentinaAsiya Javayant PROPOSAL
Deepesh ChuiItalyIvan Magalhaes RENEWAL
Aditya KuskoJapanStephen Shaw PROPOSAL
Leon OldroydBrazilIoni Bowcher QUALIFIED
Ricardo GauchoRussiaAmy Elsner UNQUALIFIED
Greenwood BologniaJapanElwin Sharvill NEW
Maria MarrierRussiaBernardo Dominic NEW
Cody SaylorsUnited KingdomAmy Elsner RENEWAL
Clifford RimRussiaStephen Shaw NEW
Jennifer AmigonUnited KingdomOnyama Limba QUALIFIED
Maisha RulapaughRussiaIoni Bowcher RENEWAL
Rodrigues CampainCanadaXuxue Feng QUALIFIED
Silvio SlusarskiSpainXuxue Feng QUALIFIED
Francesco ShinkoJapanOnyama Limba RENEWAL
Claire TollnerIndiaOnyama Limba NEGOTIATION
Mujtaba NickaBrazilAnna Fali PROPOSAL
Arvin AlbaresRussiaXuxue Feng NEW
James ButtRussiaStephen Shaw UNQUALIFIED
Misaki RoysterRussiaBernardo Dominic QUALIFIED
Darci PoquetteIndiaIoni Bowcher PROPOSAL
Smith GlickJapanBernardo Dominic RENEWAL
Greenwood BologniaSpainOnyama Limba UNQUALIFIED
Ivar PaprockiItalyBernardo Dominic RENEWAL
Ricardo GauchoRussiaAmy Elsner QUALIFIED
Arvin AlbaresItalyAnna Fali NEW
Rodrigues CampainArgentinaIoni Bowcher NEGOTIATION
Adams MorascaAustraliaAmy Elsner QUALIFIED
Kadeem FlosiAustraliaIvan Magalhaes QUALIFIED
Darci PoquetteIndiaXuxue Feng UNQUALIFIED
Misaki RoysterFranceAnna Fali UNQUALIFIED
Juan WieserSpainOnyama Limba RENEWAL
Alejandro PerinRussiaIvan Magalhaes NEW
Maisha RulapaughFranceElwin Sharvill PROPOSAL
Munro FerenczIndiaXuxue Feng NEW
Faith GillianIndiaElwin Sharvill QUALIFIED
James ButtUnited KingdomBernardo Dominic UNQUALIFIED
Emily WhobreyUnited KingdomAmy Elsner UNQUALIFIED
Aika InouyeItalyElwin Sharvill NEGOTIATION
Frozen Columns
Name
Ashley Doe
Faith Gillian
Ivar Paprocki
Adams Morasca
Claire Tollner
Leja Caldarera
Munro Ferencz
Maisha Rulapaugh
Munro Ferencz
David Darakjy
Murillo Malet
Jefferson Schemmer
Morrow Ruta
Rodrigues Campain
James Butt
Wickens Nestle
Murillo Malet
Jefferson Schemmer
Maria Marrier
Octavia Malet
Stacey Maclead
Adams Morasca
Ashley Doe
Julie Stenseth
Aruna Figeroa
Francesco Shinko
Aika Inouye
Antonio Caudy
Ivar Paprocki
Cody Saylors
Deepesh Chui
Jeanfrancois Venere
Maria Marrier
Darci Poquette
Greenwood Bolognia
Mayumi Kolmetz
Kaitlin Ostrosky
Antonio Caudy
Leja Caldarera
Izzy Garufi
Francesco Shinko
Jefferson Schemmer
Ricardo Gaucho
Misaki Royster
Ashley Doe
Tony Foller
Silvio Slusarski
Darci Poquette
Rodrigues Campain
Stacey Maclead
IdCountryDate
1000Russia2025-09-07
1001Italy2025-10-05
1002Brazil2025-09-30
1003Germany2025-10-02
1004Italy2025-09-23
1005Spain2025-09-07
1006Japan2025-10-03
1007Brazil2025-09-30
1008France2025-10-01
1009Argentina2025-09-07
1010Spain2025-09-12
1011Argentina2025-09-10
1012Spain2025-10-01
1013Germany2025-09-29
1014United Kingdom2025-09-26
1015Canada2025-09-08
1016Canada2025-09-16
1017Australia2025-09-16
1018Russia2025-10-02
1019United Kingdom2025-09-25
1020Italy2025-09-16
1021Germany2025-09-08
1022India2025-09-30
1023Italy2025-09-15
1024United Kingdom2025-09-19
1025Russia2025-09-18
1026India2025-09-24
1027Argentina2025-09-19
1028Canada2025-09-17
1029Canada2025-09-20
1030Italy2025-09-07
1031Germany2025-09-29
1032Germany2025-09-19
1033Russia2025-09-08
1034Canada2025-10-05
1035India2025-10-05
1036Russia2025-09-24
1037Russia2025-09-11
1038Russia2025-09-09
1039United Kingdom2025-09-15
1040Argentina2025-09-30
1041Spain2025-09-11
1042Australia2025-09-27
1043Italy2025-09-08
1044Australia2025-10-01
1045Russia2025-09-17
1046Spain2025-10-03
1047Brazil2025-09-20
1048Germany2025-09-16
1049Germany2025-09-21

On-Demand Data

NameIdCountryDate
Sinclair Waycott1000France2025-10-02
Jones Vocelka1001Italy2025-10-05
Arvin Albares1002India2025-09-23
Emily Whobrey1003Japan2025-09-20
Arvin Albares1004Japan2025-09-06
Claire Tollner1005Argentina2025-09-28
Claire Tollner1006Spain2025-10-04
Izzy Garufi1007India2025-09-21
Octavia Malet1008Spain2025-09-27
Faith Gillian1009Russia2025-09-12
Isabel Bowley1010France2025-09-26
Silvio Slusarski1011Brazil2025-10-01
Antonio Caudy1012Japan2025-09-30
Claire Tollner1013Italy2025-09-20
Jeanfrancois Venere1014India2025-09-08
Jones Vocelka1015Canada2025-10-02
Antonio Caudy1016Argentina2025-09-20
Wickens Nestle1017United Kingdom2025-10-03
Costa Dilliard1018Brazil2025-09-18
Ashley Doe1019Canada2025-09-16
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Claire TollnerCanadaStephen Shaw PROPOSAL
James ButtIndiaElwin Sharvill QUALIFIED
Jeanfrancois VenereAustraliaIoni Bowcher PROPOSAL
Jefferson SchemmerUnited KingdomAmy Elsner PROPOSAL
Tony FollerBrazilXuxue Feng PROPOSAL
Maria MarrierJapanStephen Shaw PROPOSAL
James ButtItalyAnna Fali NEW
Juan WieserSpainOnyama Limba PROPOSAL
Murillo MaletJapanIvan Magalhaes RENEWAL
Isabel BowleyRussiaAsiya Javayant NEGOTIATION
Mujtaba NickaAustraliaIvan Magalhaes NEGOTIATION
Munro FerenczItalyStephen Shaw NEGOTIATION
Arvin AlbaresSpainAnna Fali PROPOSAL
Antonio CaudyUnited KingdomAsiya Javayant RENEWAL
Emily WhobreyAustraliaStephen Shaw NEGOTIATION
Rodrigues CampainSpainStephen Shaw RENEWAL
Kaitlin OstroskyArgentinaOnyama Limba QUALIFIED
Octavia MaletBrazilAmy Elsner UNQUALIFIED
Ricardo GauchoArgentinaXuxue Feng QUALIFIED
Ashley DoeUnited KingdomXuxue Feng NEW
Mujtaba NickaFranceXuxue Feng RENEWAL
Sinclair WaycottJapanBernardo Dominic RENEWAL
Jennifer AmigonRussiaXuxue Feng NEW
Maria MarrierIndiaOnyama Limba RENEWAL
Jefferson SchemmerSpainElwin Sharvill PROPOSAL
Sinclair WaycottGermanyStephen Shaw QUALIFIED
Leja CaldareraAustraliaBernardo Dominic UNQUALIFIED
James ButtSpainAmy Elsner RENEWAL
Francesco ShinkoCanadaBernardo Dominic UNQUALIFIED
Izzy GarufiSpainOnyama Limba PROPOSAL
Clifford RimBrazilStephen Shaw NEGOTIATION
Aruna FigeroaRussiaAsiya Javayant RENEWAL
Maria MarrierCanadaIvan Magalhaes NEW
Francesco ShinkoIndiaElwin Sharvill PROPOSAL
James ButtJapanAsiya Javayant QUALIFIED
David DarakjyItalyAnna Fali PROPOSAL
Nicolas IturbideUnited KingdomAnna Fali UNQUALIFIED
Smith GlickAustraliaAsiya Javayant QUALIFIED
Octavia MaletCanadaAmy Elsner NEGOTIATION
Leon OldroydIndiaAsiya Javayant 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>