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
Antonio CaudyArgentinaIoni Bowcher NEW
Silvio SlusarskiSpainIvan Magalhaes QUALIFIED
Mujtaba NickaGermanyElwin Sharvill NEGOTIATION
Jefferson SchemmerItalyAmy Elsner RENEWAL
Clifford RimSpainIoni Bowcher NEGOTIATION
Juan WieserIndiaStephen Shaw NEGOTIATION
Wickens NestleItalyAnna Fali QUALIFIED
Salvatore StockhamRussiaElwin Sharvill NEW
Johnson SergiAustraliaElwin Sharvill PROPOSAL
Faith GillianUnited KingdomElwin Sharvill NEW
Alejandro PerinFranceAsiya Javayant NEGOTIATION
Maria MarrierAustraliaAsiya Javayant PROPOSAL
Izzy GarufiJapanStephen Shaw NEW
Aruna FigeroaCanadaAsiya Javayant RENEWAL
Stacey MacleadGermanyOnyama Limba RENEWAL
Costa DilliardUnited KingdomBernardo Dominic UNQUALIFIED
Aditya KuskoGermanyIvan Magalhaes PROPOSAL
Rodrigues CampainAustraliaIvan Magalhaes PROPOSAL
Morrow RutaItalyIvan Magalhaes PROPOSAL
Maria MarrierCanadaIoni Bowcher PROPOSAL
Stacey MacleadSpainXuxue Feng PROPOSAL
Darci PoquetteFranceAmy Elsner PROPOSAL
Stacey MacleadGermanyOnyama Limba RENEWAL
Silvio SlusarskiBrazilElwin Sharvill QUALIFIED
Kaitlin OstroskyUnited KingdomAnna Fali UNQUALIFIED
Jefferson SchemmerItalyStephen Shaw NEGOTIATION
Cody SaylorsFranceIvan Magalhaes UNQUALIFIED
Izzy GarufiArgentinaAmy Elsner NEW
Ricardo GauchoFranceAnna Fali NEGOTIATION
Juan WieserIndiaOnyama Limba NEGOTIATION
Juan WieserItalyOnyama Limba QUALIFIED
Tony FollerSpainIvan Magalhaes NEW
Kaitlin OstroskySpainElwin Sharvill QUALIFIED
Nicolas IturbideJapanIvan Magalhaes NEW
Chavez BriddickUnited KingdomElwin Sharvill QUALIFIED
Morrow RutaSpainStephen Shaw QUALIFIED
Mujtaba NickaCanadaIoni Bowcher QUALIFIED
Isabel BowleyCanadaBernardo Dominic UNQUALIFIED
Kadeem FlosiItalyElwin Sharvill RENEWAL
Leon OldroydJapanAnna Fali QUALIFIED
Murillo MaletUnited KingdomXuxue Feng QUALIFIED
Deepesh ChuiCanadaElwin Sharvill PROPOSAL
Silvio SlusarskiRussiaIoni Bowcher NEGOTIATION
Alejandro PerinBrazilXuxue Feng UNQUALIFIED
Johnson SergiJapanXuxue Feng UNQUALIFIED
Jefferson SchemmerSpainIoni Bowcher QUALIFIED
Mujtaba NickaBrazilAnna Fali PROPOSAL
Aruna FigeroaRussiaIoni Bowcher RENEWAL
Mujtaba NickaGermanyXuxue Feng RENEWAL
Jefferson SchemmerArgentinaXuxue Feng NEW
Horizontal
NameCountryRepresentativeStatus
Arvin AlbaresSpainBernardo Dominic PROPOSAL
Julie StensethAustraliaBernardo Dominic QUALIFIED
Ivar PaprockiItalyBernardo Dominic PROPOSAL
Isabel BowleyCanadaAnna Fali RENEWAL
Misaki RoysterGermanyStephen Shaw UNQUALIFIED
Leja CaldareraArgentinaAmy Elsner UNQUALIFIED
Mayumi KolmetzUnited KingdomIvan Magalhaes QUALIFIED
Aditya KuskoItalyAmy Elsner PROPOSAL
Faith GillianItalyAmy Elsner UNQUALIFIED
Julie StensethUnited KingdomAsiya Javayant NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Mayumi KolmetzItaly2026-05-12Feiner Bros NEW29Asiya Javayant
1001Salvatore StockhamUnited Kingdom2026-04-16Chemel, James L Cpa UNQUALIFIED60Bernardo Dominic
1002Tony FollerFrance2026-05-13Rangoni Of Florence NEW92Anna Fali
1003Arvin AlbaresSpain2026-05-08Feiner Bros NEGOTIATION3Bernardo Dominic
1004Wickens NestleGermany2026-04-14Truhlar And Truhlar Attys NEGOTIATION88Ivan Magalhaes
1005Alejandro PerinJapan2026-05-01Commercial Press RENEWAL96Amy Elsner
1006Octavia MaletItaly2026-04-16Chanay, Jeffrey A Esq NEGOTIATION79Onyama Limba
1007Clifford RimRussia2026-05-11Truhlar And Truhlar Attys RENEWAL44Asiya Javayant
1008Arvin AlbaresRussia2026-05-07Commercial Press RENEWAL29Asiya Javayant
1009Maisha RulapaughUnited Kingdom2026-05-09Chanay, Jeffrey A Esq NEW38Bernardo Dominic
1010Alejandro PerinAustralia2026-04-25Chanay, Jeffrey A Esq PROPOSAL31Asiya Javayant
1011Jones VocelkaFrance2026-05-12Feltz Printing Service QUALIFIED60Asiya Javayant
1012Alejandro PerinUnited Kingdom2026-04-14Benton, John B Jr RENEWAL4Amy Elsner
1013Jeanfrancois VenereIndia2026-05-05Printing Dimensions UNQUALIFIED55Stephen Shaw
1014Julie StensethArgentina2026-04-17Printing Dimensions PROPOSAL0Stephen Shaw
1015James ButtItaly2026-04-28Commercial Press NEW20Anna Fali
1016Sinclair WaycottJapan2026-04-23Rousseaux, Michael Esq NEW57Anna Fali
1017Murillo MaletIndia2026-05-01Chapman, Ross E Esq QUALIFIED80Onyama Limba
1018Johnson SergiAustralia2026-05-03Dorl, James J Esq NEGOTIATION0Ioni Bowcher
1019Stacey MacleadArgentina2026-04-21Buckley Miller Wright RENEWAL68Xuxue Feng
1020Ashley DoeIndia2026-04-25Dorl, James J Esq PROPOSAL64Ivan Magalhaes
1021Silvio SlusarskiAustralia2026-04-26Chapman, Ross E Esq UNQUALIFIED19Amy Elsner
1022Isabel BowleyGermany2026-04-16Chanay, Jeffrey A Esq RENEWAL17Onyama Limba
1023Tony FollerAustralia2026-04-30Feltz Printing Service PROPOSAL78Xuxue Feng
1024Maria MarrierIndia2026-04-15Commercial Press NEGOTIATION13Anna Fali
1025Maisha RulapaughSpain2026-05-03Truhlar And Truhlar Attys RENEWAL87Anna Fali
1026Izzy GarufiJapan2026-05-05Rangoni Of Florence PROPOSAL50Ioni Bowcher
1027Kaitlin OstroskySpain2026-04-23King, Christopher A Esq QUALIFIED28Bernardo Dominic
1028Kadeem FlosiCanada2026-04-20Feltz Printing Service RENEWAL1Bernardo Dominic
1029Cody SaylorsArgentina2026-04-24Feltz Printing Service PROPOSAL11Onyama Limba
1030Isabel BowleyFrance2026-05-08Benton, John B Jr NEGOTIATION56Amy Elsner
1031Tony FollerItaly2026-05-10Commercial Press RENEWAL88Ioni Bowcher
1032Isabel BowleySpain2026-04-16King, Christopher A Esq NEGOTIATION1Stephen Shaw
1033Ashley DoeBrazil2026-05-08Morlong Associates PROPOSAL85Asiya Javayant
1034Jeanfrancois VenereBrazil2026-05-11Chanay, Jeffrey A Esq NEGOTIATION85Asiya Javayant
1035Ivar PaprockiRussia2026-05-05Printing Dimensions UNQUALIFIED22Onyama Limba
1036Jefferson SchemmerJapan2026-04-28Chemel, James L Cpa NEGOTIATION67Elwin Sharvill
1037Silvio SlusarskiGermany2026-05-11Truhlar And Truhlar Attys QUALIFIED96Xuxue Feng
1038Arvin AlbaresIndia2026-04-29King, Christopher A Esq NEW57Asiya Javayant
1039Aditya KuskoCanada2026-05-10Feiner Bros UNQUALIFIED18Bernardo Dominic
1040Antonio CaudySpain2026-05-08Morlong Associates NEGOTIATION37Ivan Magalhaes
1041Kaitlin OstroskyGermany2026-04-16Rangoni Of Florence PROPOSAL28Ivan Magalhaes
1042Maisha RulapaughCanada2026-04-30Morlong Associates NEGOTIATION78Ioni Bowcher
1043Aika InouyeUnited Kingdom2026-04-22Printing Dimensions QUALIFIED70Amy Elsner
1044Costa DilliardBrazil2026-04-25Feltz Printing Service UNQUALIFIED8Anna Fali
1045Silvio SlusarskiCanada2026-04-16Truhlar And Truhlar Attys QUALIFIED52Anna Fali
1046Ricardo GauchoGermany2026-05-01Morlong Associates UNQUALIFIED66Amy Elsner
1047Julie StensethRussia2026-04-29Printing Dimensions QUALIFIED71Onyama Limba
1048Jones VocelkaItaly2026-04-24Commercial Press RENEWAL82Anna Fali
1049Claire TollnerFrance2026-04-29Buckley Miller Wright NEW30Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Silvio SlusarskiIndiaAmy Elsner NEW
Johnson SergiIndiaBernardo Dominic PROPOSAL
Mayumi KolmetzFranceAnna Fali RENEWAL
Silvio SlusarskiAustraliaOnyama Limba NEW
Morrow RutaAustraliaOnyama Limba NEGOTIATION
Arvin AlbaresRussiaIoni Bowcher PROPOSAL
Octavia MaletFranceIoni Bowcher QUALIFIED
Adams MorascaRussiaXuxue Feng QUALIFIED
Greenwood BologniaAustraliaAnna Fali UNQUALIFIED
Jefferson SchemmerJapanElwin Sharvill RENEWAL
Morrow RutaCanadaStephen Shaw NEW
Juan WieserSpainXuxue Feng RENEWAL
Faith GillianBrazilBernardo Dominic NEW
Faith GillianRussiaIoni Bowcher UNQUALIFIED
Misaki RoysterGermanyElwin Sharvill NEGOTIATION
Faith GillianIndiaAsiya Javayant NEW
Leja CaldareraIndiaIoni Bowcher RENEWAL
Cody SaylorsUnited KingdomAsiya Javayant PROPOSAL
Nicolas IturbideGermanyElwin Sharvill NEW
Darci PoquetteBrazilElwin Sharvill PROPOSAL
Aditya KuskoItalyIoni Bowcher RENEWAL
Ivar PaprockiBrazilBernardo Dominic QUALIFIED
Deepesh ChuiArgentinaElwin Sharvill UNQUALIFIED
Aditya KuskoCanadaIoni Bowcher UNQUALIFIED
Salvatore StockhamItalyIoni Bowcher NEW
Kaitlin OstroskyBrazilElwin Sharvill NEGOTIATION
Clifford RimSpainIoni Bowcher PROPOSAL
Arvin AlbaresSpainStephen Shaw UNQUALIFIED
Faith GillianUnited KingdomBernardo Dominic QUALIFIED
Izzy GarufiAustraliaIoni Bowcher QUALIFIED
Nicolas IturbideArgentinaElwin Sharvill QUALIFIED
Ivar PaprockiItalyAmy Elsner NEGOTIATION
Clifford RimFranceAsiya Javayant QUALIFIED
Aruna FigeroaSpainOnyama Limba PROPOSAL
Smith GlickJapanIoni Bowcher UNQUALIFIED
Mayumi KolmetzAustraliaIoni Bowcher NEGOTIATION
Nicolas IturbideUnited KingdomAmy Elsner UNQUALIFIED
Aruna FigeroaJapanBernardo Dominic UNQUALIFIED
Clifford RimAustraliaAnna Fali NEW
David DarakjyGermanyStephen Shaw PROPOSAL
Isabel BowleyJapanElwin Sharvill PROPOSAL
Misaki RoysterBrazilOnyama Limba RENEWAL
Mayumi KolmetzIndiaIoni Bowcher RENEWAL
Emily WhobreyGermanyElwin Sharvill NEW
Nicolas IturbideAustraliaOnyama Limba NEW
Jefferson SchemmerFranceStephen Shaw UNQUALIFIED
Ivar PaprockiBrazilOnyama Limba RENEWAL
Wickens NestleSpainOnyama Limba QUALIFIED
David DarakjyIndiaIoni Bowcher NEW
Morrow RutaFranceElwin Sharvill RENEWAL
Frozen Columns
Name
Greenwood Bolognia
David Darakjy
Emily Whobrey
Clifford Rim
Sinclair Waycott
Claire Tollner
Faith Gillian
Darci Poquette
Silvio Slusarski
Jefferson Schemmer
Alejandro Perin
Faith Gillian
Misaki Royster
James Butt
David Darakjy
Clifford Rim
Jeanfrancois Venere
Jeanfrancois Venere
Deepesh Chui
Kadeem Flosi
Alejandro Perin
Stacey Maclead
Juan Wieser
Cody Saylors
Faith Gillian
Chavez Briddick
Leja Caldarera
Maria Marrier
Antonio Caudy
Aruna Figeroa
Greenwood Bolognia
Clifford Rim
Leon Oldroyd
Cody Saylors
Faith Gillian
Murillo Malet
Jones Vocelka
Leon Oldroyd
Maria Marrier
James Butt
Aditya Kusko
Rodrigues Campain
Faith Gillian
Misaki Royster
Faith Gillian
Nicolas Iturbide
Maria Marrier
Cody Saylors
Adams Morasca
Tony Foller
IdCountryDate
1000Russia2026-04-20
1001Germany2026-04-23
1002France2026-04-26
1003France2026-04-17
1004Canada2026-04-28
1005Japan2026-05-09
1006Italy2026-05-09
1007United Kingdom2026-04-30
1008India2026-05-13
1009Germany2026-05-13
1010India2026-05-02
1011Japan2026-04-14
1012France2026-04-17
1013France2026-05-01
1014Italy2026-04-22
1015United Kingdom2026-04-24
1016India2026-04-19
1017Germany2026-04-22
1018Spain2026-05-13
1019Spain2026-05-07
1020Russia2026-04-23
1021Argentina2026-04-24
1022Japan2026-04-15
1023Spain2026-05-09
1024Argentina2026-05-11
1025Italy2026-04-19
1026Canada2026-04-20
1027Argentina2026-04-27
1028India2026-04-29
1029India2026-04-26
1030Canada2026-04-14
1031Russia2026-05-13
1032Russia2026-04-19
1033Italy2026-04-24
1034Spain2026-04-20
1035Canada2026-04-19
1036Brazil2026-04-16
1037Australia2026-05-09
1038India2026-04-16
1039Argentina2026-05-07
1040Japan2026-05-11
1041Japan2026-04-14
1042Spain2026-04-29
1043Argentina2026-04-27
1044Russia2026-04-18
1045Italy2026-04-26
1046Brazil2026-05-07
1047Argentina2026-04-17
1048Germany2026-05-13
1049Australia2026-04-30

On-Demand Data

NameIdCountryDate
Ivar Paprocki1000Germany2026-04-14
Maisha Rulapaugh1001Australia2026-04-29
Juan Wieser1002Argentina2026-05-02
Leja Caldarera1003Spain2026-05-12
Francesco Shinko1004India2026-04-15
Maria Marrier1005Australia2026-04-18
Arvin Albares1006Argentina2026-04-18
Murillo Malet1007Russia2026-05-12
Arvin Albares1008Argentina2026-04-17
Julie Stenseth1009Japan2026-04-25
Emily Whobrey1010Italy2026-04-29
Aditya Kusko1011Germany2026-04-18
Greenwood Bolognia1012Italy2026-04-24
Adams Morasca1013Germany2026-04-24
Claire Tollner1014Canada2026-05-08
Isabel Bowley1015Australia2026-05-04
Deepesh Chui1016Japan2026-05-02
Francesco Shinko1017Germany2026-05-10
Cody Saylors1018Brazil2026-05-06
Ricardo Gaucho1019India2026-05-03
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Maisha RulapaughJapanAnna Fali RENEWAL
Ashley DoeCanadaAsiya Javayant UNQUALIFIED
Wickens NestleGermanyBernardo Dominic RENEWAL
Ricardo GauchoGermanyIoni Bowcher QUALIFIED
Octavia MaletIndiaAnna Fali QUALIFIED
Isabel BowleyCanadaIvan Magalhaes NEGOTIATION
Cody SaylorsFranceAsiya Javayant PROPOSAL
Leja CaldareraSpainElwin Sharvill RENEWAL
Mujtaba NickaJapanAmy Elsner QUALIFIED
Wickens NestleGermanyIoni Bowcher RENEWAL
Chavez BriddickCanadaStephen Shaw UNQUALIFIED
Kadeem FlosiUnited KingdomAsiya Javayant NEGOTIATION
Tony FollerUnited KingdomAnna Fali QUALIFIED
Alejandro PerinAustraliaIvan Magalhaes NEW
Deepesh ChuiRussiaAmy Elsner QUALIFIED
Clifford RimUnited KingdomElwin Sharvill QUALIFIED
Johnson SergiItalyAsiya Javayant NEGOTIATION
Arvin AlbaresCanadaAmy Elsner UNQUALIFIED
Salvatore StockhamSpainStephen Shaw RENEWAL
Francesco ShinkoGermanyElwin Sharvill NEGOTIATION
Arvin AlbaresSpainIvan Magalhaes UNQUALIFIED
Alejandro PerinAustraliaElwin Sharvill RENEWAL
Munro FerenczIndiaBernardo Dominic QUALIFIED
Octavia MaletItalyBernardo Dominic PROPOSAL
Kadeem FlosiCanadaAmy Elsner PROPOSAL
Aika InouyeBrazilBernardo Dominic NEW
James ButtItalyStephen Shaw NEGOTIATION
Octavia MaletIndiaOnyama Limba UNQUALIFIED
Stacey MacleadSpainElwin Sharvill PROPOSAL
Adams MorascaCanadaAnna Fali NEGOTIATION
Johnson SergiArgentinaXuxue Feng QUALIFIED
Ashley DoeSpainAmy Elsner NEW
Munro FerenczUnited KingdomAsiya Javayant UNQUALIFIED
Jefferson SchemmerSpainBernardo Dominic NEGOTIATION
Darci PoquetteSpainAnna Fali QUALIFIED
Maria MarrierCanadaAsiya Javayant UNQUALIFIED
Mayumi KolmetzJapanAmy Elsner NEGOTIATION
Antonio CaudyUnited KingdomIvan Magalhaes QUALIFIED
Aditya KuskoIndiaStephen Shaw QUALIFIED
Faith GillianAustraliaStephen Shaw UNQUALIFIED

<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>