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
Isabel BowleyIndiaIvan Magalhaes PROPOSAL
Maria MarrierSpainIoni Bowcher NEGOTIATION
Mayumi KolmetzCanadaAmy Elsner PROPOSAL
Julie StensethAustraliaAmy Elsner UNQUALIFIED
Ivar PaprockiBrazilStephen Shaw QUALIFIED
Ivar PaprockiIndiaOnyama Limba PROPOSAL
Emily WhobreyRussiaElwin Sharvill UNQUALIFIED
Leja CaldareraAustraliaElwin Sharvill NEW
Jefferson SchemmerItalyElwin Sharvill NEW
Aruna FigeroaCanadaIoni Bowcher PROPOSAL
Francesco ShinkoUnited KingdomOnyama Limba PROPOSAL
Misaki RoysterIndiaIoni Bowcher RENEWAL
Nicolas IturbideFranceElwin Sharvill UNQUALIFIED
Stacey MacleadCanadaBernardo Dominic NEW
Adams MorascaBrazilAnna Fali RENEWAL
Salvatore StockhamArgentinaOnyama Limba NEW
Sinclair WaycottBrazilIoni Bowcher NEW
Leja CaldareraCanadaStephen Shaw NEGOTIATION
Chavez BriddickCanadaBernardo Dominic NEW
Mujtaba NickaIndiaIoni Bowcher PROPOSAL
Ricardo GauchoCanadaOnyama Limba QUALIFIED
Misaki RoysterArgentinaStephen Shaw UNQUALIFIED
Adams MorascaUnited KingdomAmy Elsner UNQUALIFIED
Jones VocelkaAustraliaBernardo Dominic NEGOTIATION
Nicolas IturbideAustraliaAmy Elsner QUALIFIED
Costa DilliardAustraliaElwin Sharvill NEGOTIATION
Deepesh ChuiUnited KingdomAsiya Javayant UNQUALIFIED
Aditya KuskoGermanyOnyama Limba PROPOSAL
Johnson SergiAustraliaBernardo Dominic NEGOTIATION
Izzy GarufiIndiaIvan Magalhaes NEW
Silvio SlusarskiCanadaAnna Fali UNQUALIFIED
Octavia MaletUnited KingdomOnyama Limba NEGOTIATION
Wickens NestleAustraliaXuxue Feng NEW
Mayumi KolmetzGermanyIvan Magalhaes PROPOSAL
Chavez BriddickItalyOnyama Limba PROPOSAL
Aika InouyeUnited KingdomOnyama Limba UNQUALIFIED
Cody SaylorsCanadaXuxue Feng PROPOSAL
Nicolas IturbideArgentinaAsiya Javayant NEGOTIATION
Aruna FigeroaIndiaAmy Elsner RENEWAL
Nicolas IturbideAustraliaIoni Bowcher NEGOTIATION
Chavez BriddickBrazilXuxue Feng QUALIFIED
Sinclair WaycottFranceAnna Fali PROPOSAL
Nicolas IturbideUnited KingdomIvan Magalhaes NEW
Aditya KuskoCanadaOnyama Limba PROPOSAL
Faith GillianUnited KingdomOnyama Limba PROPOSAL
Tony FollerUnited KingdomStephen Shaw PROPOSAL
Juan WieserSpainElwin Sharvill PROPOSAL
Ricardo GauchoArgentinaIoni Bowcher NEW
Kaitlin OstroskyUnited KingdomBernardo Dominic NEGOTIATION
Arvin AlbaresCanadaXuxue Feng RENEWAL
Horizontal
NameCountryRepresentativeStatus
Munro FerenczJapanIvan Magalhaes PROPOSAL
Juan WieserSpainAmy Elsner NEGOTIATION
Smith GlickUnited KingdomIvan Magalhaes NEW
Johnson SergiIndiaAsiya Javayant UNQUALIFIED
Clifford RimItalyIvan Magalhaes RENEWAL
Aika InouyeGermanyIvan Magalhaes NEGOTIATION
Aditya KuskoItalyAmy Elsner PROPOSAL
Faith GillianGermanyOnyama Limba QUALIFIED
David DarakjyFranceElwin Sharvill NEW
Tony FollerCanadaIvan Magalhaes PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Greenwood BologniaBrazil2026-05-17Morlong Associates NEW89Anna Fali
1001Ivar PaprockiArgentina2026-05-26Buckley Miller Wright UNQUALIFIED87Stephen Shaw
1002Faith GillianGermany2026-05-18Truhlar And Truhlar Attys NEW28Ivan Magalhaes
1003Antonio CaudyIndia2026-05-19Printing Dimensions NEW0Stephen Shaw
1004Wickens NestleAustralia2026-05-05Morlong Associates QUALIFIED28Xuxue Feng
1005Stacey MacleadItaly2026-05-18Chapman, Ross E Esq NEGOTIATION3Stephen Shaw
1006Wickens NestleJapan2026-05-18Rangoni Of Florence QUALIFIED1Asiya Javayant
1007Aruna FigeroaJapan2026-05-05King, Christopher A Esq UNQUALIFIED99Asiya Javayant
1008Alejandro PerinRussia2026-05-11Morlong Associates NEW80Onyama Limba
1009Octavia MaletSpain2026-05-23Benton, John B Jr UNQUALIFIED93Anna Fali
1010Jeanfrancois VenereArgentina2026-05-19Printing Dimensions QUALIFIED94Bernardo Dominic
1011Clifford RimAustralia2026-05-12Buckley Miller Wright RENEWAL6Xuxue Feng
1012David DarakjySpain2026-05-22Chanay, Jeffrey A Esq UNQUALIFIED92Anna Fali
1013Isabel BowleyCanada2026-05-19Commercial Press RENEWAL77Stephen Shaw
1014Silvio SlusarskiFrance2026-05-12Feiner Bros PROPOSAL3Bernardo Dominic
1015Cody SaylorsBrazil2026-05-05Chemel, James L Cpa UNQUALIFIED32Xuxue Feng
1016Aditya KuskoSpain2026-05-10Rangoni Of Florence PROPOSAL68Elwin Sharvill
1017Nicolas IturbideCanada2026-05-20Feltz Printing Service NEW72Onyama Limba
1018Adams MorascaUnited Kingdom2026-05-16Commercial Press RENEWAL76Anna Fali
1019Sinclair WaycottItaly2026-05-09Dorl, James J Esq NEW10Onyama Limba
1020Kadeem FlosiSpain2026-05-06King, Christopher A Esq UNQUALIFIED49Onyama Limba
1021Francesco ShinkoJapan2026-05-07Feltz Printing Service NEGOTIATION91Xuxue Feng
1022Isabel BowleyUnited Kingdom2026-05-12Commercial Press QUALIFIED72Stephen Shaw
1023Misaki RoysterRussia2026-05-23Chapman, Ross E Esq NEW55Xuxue Feng
1024Izzy GarufiFrance2026-05-14Chemel, James L Cpa NEGOTIATION80Stephen Shaw
1025Isabel BowleyJapan2026-05-05King, Christopher A Esq RENEWAL53Elwin Sharvill
1026Antonio CaudyBrazil2026-05-10Rangoni Of Florence UNQUALIFIED73Asiya Javayant
1027Maisha RulapaughCanada2026-05-28Rousseaux, Michael Esq PROPOSAL70Amy Elsner
1028Deepesh ChuiJapan2026-05-17Feiner Bros NEW73Amy Elsner
1029Emily WhobreyCanada2026-05-06Chapman, Ross E Esq RENEWAL83Onyama Limba
1030David DarakjyGermany2026-05-29Truhlar And Truhlar Attys PROPOSAL0Asiya Javayant
1031Francesco ShinkoIndia2026-05-21Feltz Printing Service NEW70Onyama Limba
1032Munro FerenczItaly2026-05-04Benton, John B Jr QUALIFIED36Stephen Shaw
1033Alejandro PerinJapan2026-06-01Dorl, James J Esq NEGOTIATION80Ivan Magalhaes
1034Ivar PaprockiRussia2026-05-08Rousseaux, Michael Esq NEGOTIATION30Xuxue Feng
1035Silvio SlusarskiUnited Kingdom2026-05-06Morlong Associates NEGOTIATION98Elwin Sharvill
1036James ButtRussia2026-05-15Chemel, James L Cpa NEGOTIATION80Stephen Shaw
1037Johnson SergiSpain2026-06-01Chapman, Ross E Esq NEGOTIATION92Elwin Sharvill
1038Mayumi KolmetzItaly2026-05-15Feltz Printing Service UNQUALIFIED18Xuxue Feng
1039Nicolas IturbideCanada2026-05-09Dorl, James J Esq UNQUALIFIED21Ivan Magalhaes
1040Izzy GarufiRussia2026-05-14Printing Dimensions RENEWAL17Xuxue Feng
1041Rodrigues CampainRussia2026-05-28Truhlar And Truhlar Attys NEGOTIATION95Elwin Sharvill
1042Misaki RoysterItaly2026-05-30Feltz Printing Service RENEWAL9Stephen Shaw
1043Leja CaldareraBrazil2026-05-26Morlong Associates RENEWAL96Onyama Limba
1044Alejandro PerinIndia2026-05-31Dorl, James J Esq UNQUALIFIED75Xuxue Feng
1045Ashley DoeArgentina2026-05-12Chemel, James L Cpa UNQUALIFIED74Bernardo Dominic
1046Cody SaylorsAustralia2026-05-16Commercial Press RENEWAL15Ivan Magalhaes
1047Kadeem FlosiFrance2026-05-16Printing Dimensions NEGOTIATION29Stephen Shaw
1048James ButtRussia2026-05-18Benton, John B Jr QUALIFIED80Onyama Limba
1049Emily WhobreyArgentina2026-05-31Commercial Press PROPOSAL57Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Deepesh ChuiRussiaBernardo Dominic QUALIFIED
Julie StensethUnited KingdomElwin Sharvill PROPOSAL
Emily WhobreySpainAmy Elsner NEW
Octavia MaletCanadaElwin Sharvill UNQUALIFIED
Francesco ShinkoArgentinaIoni Bowcher QUALIFIED
Juan WieserRussiaAmy Elsner PROPOSAL
Maisha RulapaughItalyElwin Sharvill QUALIFIED
Wickens NestleItalyStephen Shaw QUALIFIED
Julie StensethJapanIvan Magalhaes UNQUALIFIED
Emily WhobreyUnited KingdomXuxue Feng UNQUALIFIED
Costa DilliardIndiaOnyama Limba NEW
Jefferson SchemmerCanadaIvan Magalhaes QUALIFIED
Ivar PaprockiItalyIvan Magalhaes NEGOTIATION
Jeanfrancois VenereJapanXuxue Feng NEGOTIATION
Aditya KuskoItalyIoni Bowcher PROPOSAL
Murillo MaletGermanyIvan Magalhaes RENEWAL
Izzy GarufiBrazilIvan Magalhaes PROPOSAL
Maisha RulapaughSpainXuxue Feng RENEWAL
Silvio SlusarskiCanadaAmy Elsner NEGOTIATION
Claire TollnerRussiaXuxue Feng RENEWAL
Deepesh ChuiIndiaElwin Sharvill RENEWAL
Jeanfrancois VenereBrazilAnna Fali QUALIFIED
Mujtaba NickaArgentinaAsiya Javayant PROPOSAL
Julie StensethIndiaAmy Elsner UNQUALIFIED
Jennifer AmigonCanadaXuxue Feng QUALIFIED
Sinclair WaycottAustraliaAnna Fali NEGOTIATION
Ivar PaprockiBrazilOnyama Limba UNQUALIFIED
Leon OldroydRussiaIvan Magalhaes NEW
Greenwood BologniaAustraliaAmy Elsner RENEWAL
Aditya KuskoSpainStephen Shaw PROPOSAL
Morrow RutaFranceIvan Magalhaes PROPOSAL
Aruna FigeroaSpainBernardo Dominic PROPOSAL
Leon OldroydBrazilAsiya Javayant PROPOSAL
Kadeem FlosiFranceAnna Fali UNQUALIFIED
Aika InouyeBrazilIoni Bowcher RENEWAL
Adams MorascaItalyXuxue Feng NEGOTIATION
Kadeem FlosiItalyAsiya Javayant QUALIFIED
Morrow RutaItalyAnna Fali QUALIFIED
Leja CaldareraJapanElwin Sharvill QUALIFIED
Faith GillianArgentinaAnna Fali NEGOTIATION
Murillo MaletCanadaIvan Magalhaes NEGOTIATION
Juan WieserJapanAsiya Javayant UNQUALIFIED
Clifford RimAustraliaAnna Fali QUALIFIED
Jennifer AmigonFranceOnyama Limba RENEWAL
Jennifer AmigonArgentinaXuxue Feng PROPOSAL
Maisha RulapaughIndiaOnyama Limba UNQUALIFIED
Faith GillianFranceOnyama Limba QUALIFIED
Adams MorascaJapanBernardo Dominic NEGOTIATION
Greenwood BologniaArgentinaAmy Elsner UNQUALIFIED
Costa DilliardFranceAsiya Javayant RENEWAL
Frozen Columns
Name
Octavia Malet
Clifford Rim
Jennifer Amigon
Juan Wieser
Jennifer Amigon
Kadeem Flosi
Kadeem Flosi
Jennifer Amigon
Kaitlin Ostrosky
Maria Marrier
James Butt
Jeanfrancois Venere
Maisha Rulapaugh
Greenwood Bolognia
Aruna Figeroa
Faith Gillian
Jennifer Amigon
Aruna Figeroa
Maisha Rulapaugh
Claire Tollner
Costa Dilliard
Izzy Garufi
Kaitlin Ostrosky
Jones Vocelka
Maisha Rulapaugh
Nicolas Iturbide
Aruna Figeroa
Misaki Royster
Wickens Nestle
Munro Ferencz
Silvio Slusarski
Jennifer Amigon
Leja Caldarera
Aika Inouye
Darci Poquette
Faith Gillian
Misaki Royster
Aditya Kusko
Greenwood Bolognia
Morrow Ruta
Johnson Sergi
Maria Marrier
Leja Caldarera
Ivar Paprocki
Aruna Figeroa
Aika Inouye
David Darakjy
Juan Wieser
Wickens Nestle
Antonio Caudy
IdCountryDate
1000Germany2026-05-22
1001India2026-05-11
1002India2026-05-10
1003Australia2026-05-30
1004Japan2026-05-09
1005France2026-05-29
1006Germany2026-05-23
1007France2026-06-01
1008Japan2026-05-24
1009Germany2026-05-22
1010Argentina2026-05-13
1011Spain2026-05-15
1012Australia2026-05-21
1013Australia2026-05-22
1014Germany2026-05-29
1015Italy2026-05-14
1016India2026-05-08
1017Italy2026-05-08
1018Canada2026-05-22
1019Japan2026-05-23
1020Spain2026-05-04
1021India2026-05-05
1022Brazil2026-05-22
1023Germany2026-05-13
1024Italy2026-05-25
1025United Kingdom2026-05-26
1026Spain2026-05-10
1027Germany2026-06-01
1028Australia2026-05-18
1029Italy2026-05-31
1030Spain2026-05-05
1031United Kingdom2026-05-17
1032Spain2026-05-28
1033Brazil2026-05-17
1034Russia2026-05-27
1035Brazil2026-05-07
1036Spain2026-05-20
1037France2026-05-14
1038Japan2026-05-26
1039United Kingdom2026-05-25
1040Spain2026-05-18
1041France2026-05-07
1042Italy2026-06-01
1043Italy2026-05-30
1044Japan2026-05-04
1045India2026-05-17
1046France2026-05-09
1047Spain2026-05-05
1048Australia2026-05-23
1049Canada2026-05-08

On-Demand Data

NameIdCountryDate
Aruna Figeroa1000India2026-05-21
Murillo Malet1001Argentina2026-05-17
Munro Ferencz1002Australia2026-05-26
Faith Gillian1003India2026-05-16
Kaitlin Ostrosky1004France2026-05-10
Maria Marrier1005Argentina2026-05-21
Costa Dilliard1006Spain2026-05-26
Tony Foller1007Spain2026-05-21
Jeanfrancois Venere1008United Kingdom2026-05-07
Greenwood Bolognia1009Italy2026-05-24
David Darakjy1010Brazil2026-05-29
Stacey Maclead1011Brazil2026-05-19
Murillo Malet1012Canada2026-05-28
Adams Morasca1013Australia2026-05-17
Claire Tollner1014Russia2026-05-25
Darci Poquette1015Australia2026-05-13
James Butt1016France2026-05-22
Kaitlin Ostrosky1017Germany2026-05-04
Aika Inouye1018France2026-05-29
Tony Foller1019Canada2026-05-17
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Isabel BowleyFranceIvan Magalhaes RENEWAL
Smith GlickIndiaOnyama Limba NEW
Cody SaylorsSpainAmy Elsner QUALIFIED
Francesco ShinkoGermanyIoni Bowcher NEW
Mujtaba NickaAustraliaAnna Fali NEGOTIATION
Greenwood BologniaArgentinaIoni Bowcher NEGOTIATION
Darci PoquetteItalyXuxue Feng PROPOSAL
Isabel BowleyIndiaAnna Fali RENEWAL
Juan WieserArgentinaIvan Magalhaes PROPOSAL
Arvin AlbaresJapanAnna Fali RENEWAL
Morrow RutaBrazilElwin Sharvill UNQUALIFIED
Aruna FigeroaGermanyOnyama Limba PROPOSAL
Morrow RutaSpainBernardo Dominic PROPOSAL
Ivar PaprockiFranceAsiya Javayant NEW
Sinclair WaycottAustraliaAsiya Javayant PROPOSAL
Adams MorascaUnited KingdomAnna Fali QUALIFIED
Aika InouyeUnited KingdomStephen Shaw QUALIFIED
Mayumi KolmetzBrazilIvan Magalhaes NEGOTIATION
Juan WieserSpainAnna Fali QUALIFIED
Munro FerenczCanadaOnyama Limba NEW
Cody SaylorsGermanyXuxue Feng NEW
Julie StensethUnited KingdomElwin Sharvill QUALIFIED
Smith GlickCanadaAnna Fali PROPOSAL
Antonio CaudyIndiaIoni Bowcher NEW
Stacey MacleadArgentinaAsiya Javayant QUALIFIED
Cody SaylorsItalyXuxue Feng UNQUALIFIED
Izzy GarufiSpainAsiya Javayant RENEWAL
David DarakjyFranceOnyama Limba UNQUALIFIED
Ivar PaprockiFranceAsiya Javayant QUALIFIED
Tony FollerSpainOnyama Limba QUALIFIED
Tony FollerJapanOnyama Limba UNQUALIFIED
Julie StensethBrazilXuxue Feng UNQUALIFIED
Salvatore StockhamGermanyAmy Elsner NEW
Kaitlin OstroskyFranceIvan Magalhaes RENEWAL
Ivar PaprockiBrazilIoni Bowcher QUALIFIED
Ricardo GauchoJapanAmy Elsner NEGOTIATION
Deepesh ChuiItalyIoni Bowcher NEGOTIATION
Arvin AlbaresUnited KingdomIoni Bowcher PROPOSAL
Salvatore StockhamIndiaElwin Sharvill PROPOSAL
David DarakjyAustraliaOnyama Limba 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>