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
Leon OldroydGermanyAsiya Javayant UNQUALIFIED
Aditya KuskoIndiaElwin Sharvill NEGOTIATION
Antonio CaudyRussiaIoni Bowcher UNQUALIFIED
Tony FollerBrazilIoni Bowcher NEW
Izzy GarufiUnited KingdomStephen Shaw QUALIFIED
Isabel BowleyAustraliaAmy Elsner NEW
David DarakjySpainIoni Bowcher RENEWAL
Maria MarrierBrazilIoni Bowcher PROPOSAL
Rodrigues CampainIndiaAsiya Javayant PROPOSAL
Munro FerenczUnited KingdomAmy Elsner PROPOSAL
Jones VocelkaCanadaAnna Fali UNQUALIFIED
Jennifer AmigonGermanyXuxue Feng QUALIFIED
Isabel BowleyArgentinaElwin Sharvill PROPOSAL
Claire TollnerBrazilIvan Magalhaes QUALIFIED
Ivar PaprockiArgentinaXuxue Feng NEGOTIATION
Antonio CaudySpainAnna Fali RENEWAL
Misaki RoysterCanadaOnyama Limba NEW
Sinclair WaycottAustraliaXuxue Feng QUALIFIED
Faith GillianJapanAmy Elsner NEW
Darci PoquetteArgentinaOnyama Limba RENEWAL
Leon OldroydAustraliaAsiya Javayant PROPOSAL
Jeanfrancois VenereIndiaElwin Sharvill NEGOTIATION
Aruna FigeroaRussiaBernardo Dominic NEGOTIATION
Leon OldroydSpainIvan Magalhaes NEW
Clifford RimItalyIoni Bowcher UNQUALIFIED
Salvatore StockhamAustraliaAsiya Javayant QUALIFIED
Mujtaba NickaItalyIvan Magalhaes RENEWAL
Aditya KuskoGermanyStephen Shaw NEGOTIATION
Darci PoquetteItalyAnna Fali NEW
Johnson SergiIndiaXuxue Feng NEW
Nicolas IturbideItalyAnna Fali RENEWAL
Mujtaba NickaUnited KingdomXuxue Feng PROPOSAL
James ButtBrazilIoni Bowcher NEW
Chavez BriddickUnited KingdomIoni Bowcher RENEWAL
Darci PoquetteJapanAmy Elsner RENEWAL
Ashley DoeSpainAnna Fali RENEWAL
Chavez BriddickUnited KingdomIoni Bowcher PROPOSAL
Jeanfrancois VenereJapanStephen Shaw PROPOSAL
Wickens NestleGermanyAnna Fali PROPOSAL
Murillo MaletBrazilAsiya Javayant RENEWAL
Ricardo GauchoJapanIoni Bowcher UNQUALIFIED
Clifford RimCanadaElwin Sharvill RENEWAL
Francesco ShinkoFranceBernardo Dominic PROPOSAL
Aditya KuskoUnited KingdomAsiya Javayant NEW
Morrow RutaSpainXuxue Feng NEW
Ivar PaprockiIndiaElwin Sharvill NEGOTIATION
Isabel BowleyJapanIoni Bowcher NEGOTIATION
Ricardo GauchoGermanyBernardo Dominic QUALIFIED
Maria MarrierArgentinaAmy Elsner NEGOTIATION
Mujtaba NickaRussiaIoni Bowcher QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Adams MorascaIndiaAsiya Javayant NEW
Mujtaba NickaBrazilElwin Sharvill QUALIFIED
Rodrigues CampainItalyElwin Sharvill NEGOTIATION
James ButtFranceAnna Fali RENEWAL
Jennifer AmigonUnited KingdomElwin Sharvill NEW
Ashley DoeSpainElwin Sharvill PROPOSAL
Ivar PaprockiItalyIvan Magalhaes QUALIFIED
Ashley DoeArgentinaOnyama Limba NEGOTIATION
Nicolas IturbideRussiaStephen Shaw RENEWAL
Kadeem FlosiRussiaOnyama Limba UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Johnson SergiIndia2025-08-22Feltz Printing Service NEGOTIATION67Bernardo Dominic
1001Claire TollnerCanada2025-08-23Chapman, Ross E Esq NEW21Anna Fali
1002Claire TollnerUnited Kingdom2025-08-26Rangoni Of Florence NEW94Ioni Bowcher
1003Julie StensethItaly2025-08-30Chapman, Ross E Esq RENEWAL43Stephen Shaw
1004Emily WhobreyAustralia2025-09-01Morlong Associates NEGOTIATION16Bernardo Dominic
1005Ashley DoeRussia2025-09-02Benton, John B Jr QUALIFIED8Bernardo Dominic
1006Aditya KuskoArgentina2025-09-12Rousseaux, Michael Esq NEGOTIATION70Amy Elsner
1007David DarakjyAustralia2025-08-22Printing Dimensions QUALIFIED99Xuxue Feng
1008Ivar PaprockiAustralia2025-09-05Chemel, James L Cpa RENEWAL85Elwin Sharvill
1009Juan WieserRussia2025-09-18Chanay, Jeffrey A Esq NEW50Ivan Magalhaes
1010Francesco ShinkoUnited Kingdom2025-09-16Benton, John B Jr NEGOTIATION65Xuxue Feng
1011Nicolas IturbideItaly2025-09-06Feiner Bros NEGOTIATION57Bernardo Dominic
1012Wickens NestleJapan2025-09-14Feiner Bros QUALIFIED5Asiya Javayant
1013Cody SaylorsArgentina2025-09-07Chemel, James L Cpa RENEWAL99Asiya Javayant
1014Mujtaba NickaBrazil2025-09-12Rangoni Of Florence QUALIFIED38Amy Elsner
1015Murillo MaletUnited Kingdom2025-08-25King, Christopher A Esq RENEWAL77Elwin Sharvill
1016James ButtAustralia2025-08-31Feiner Bros PROPOSAL92Anna Fali
1017Julie StensethSpain2025-09-04Morlong Associates NEW13Xuxue Feng
1018James ButtArgentina2025-09-11Chemel, James L Cpa NEW89Xuxue Feng
1019Ivar PaprockiCanada2025-09-18Morlong Associates NEW65Ivan Magalhaes
1020Isabel BowleyFrance2025-09-06Morlong Associates PROPOSAL34Asiya Javayant
1021Misaki RoysterUnited Kingdom2025-08-31King, Christopher A Esq QUALIFIED50Anna Fali
1022Tony FollerArgentina2025-09-13Printing Dimensions QUALIFIED51Bernardo Dominic
1023Kadeem FlosiSpain2025-09-13Dorl, James J Esq NEW37Xuxue Feng
1024Sinclair WaycottBrazil2025-09-13Dorl, James J Esq UNQUALIFIED66Onyama Limba
1025Murillo MaletRussia2025-09-17Buckley Miller Wright UNQUALIFIED6Elwin Sharvill
1026Rodrigues CampainAustralia2025-08-24Rangoni Of Florence NEW18Stephen Shaw
1027Smith GlickCanada2025-09-08Benton, John B Jr NEGOTIATION43Amy Elsner
1028Cody SaylorsAustralia2025-08-26Truhlar And Truhlar Attys RENEWAL34Ioni Bowcher
1029Misaki RoysterArgentina2025-08-25King, Christopher A Esq PROPOSAL76Amy Elsner
1030Chavez BriddickSpain2025-09-04Feiner Bros PROPOSAL47Ivan Magalhaes
1031Adams MorascaBrazil2025-09-17Benton, John B Jr NEW85Amy Elsner
1032Misaki RoysterFrance2025-09-19Rousseaux, Michael Esq NEW38Asiya Javayant
1033Kaitlin OstroskyFrance2025-08-27Printing Dimensions NEW40Anna Fali
1034Stacey MacleadCanada2025-09-01Rangoni Of Florence RENEWAL22Stephen Shaw
1035Maisha RulapaughGermany2025-09-11Rousseaux, Michael Esq RENEWAL94Ivan Magalhaes
1036Murillo MaletRussia2025-08-28Buckley Miller Wright NEW67Anna Fali
1037Darci PoquetteUnited Kingdom2025-09-01Chapman, Ross E Esq UNQUALIFIED4Xuxue Feng
1038Aruna FigeroaFrance2025-09-11Buckley Miller Wright PROPOSAL90Ioni Bowcher
1039Emily WhobreyJapan2025-09-06Rangoni Of Florence NEGOTIATION9Ioni Bowcher
1040Rodrigues CampainCanada2025-09-16Chanay, Jeffrey A Esq UNQUALIFIED9Anna Fali
1041Leja CaldareraIndia2025-08-22Chemel, James L Cpa PROPOSAL24Amy Elsner
1042Kaitlin OstroskyIndia2025-08-22Printing Dimensions RENEWAL69Ioni Bowcher
1043Jefferson SchemmerUnited Kingdom2025-08-24Dorl, James J Esq QUALIFIED22Anna Fali
1044Jeanfrancois VenereItaly2025-08-27Chapman, Ross E Esq UNQUALIFIED35Xuxue Feng
1045Julie StensethCanada2025-09-18Chemel, James L Cpa NEGOTIATION65Elwin Sharvill
1046Jefferson SchemmerRussia2025-09-05King, Christopher A Esq PROPOSAL66Ioni Bowcher
1047Murillo MaletIndia2025-09-02King, Christopher A Esq PROPOSAL10Elwin Sharvill
1048Rodrigues CampainJapan2025-09-20Commercial Press PROPOSAL66Xuxue Feng
1049Francesco ShinkoSpain2025-09-14King, Christopher A Esq UNQUALIFIED1Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Clifford RimSpainOnyama Limba RENEWAL
Adams MorascaAustraliaOnyama Limba UNQUALIFIED
Silvio SlusarskiBrazilAnna Fali UNQUALIFIED
Isabel BowleySpainIvan Magalhaes NEW
Jennifer AmigonCanadaAnna Fali QUALIFIED
Jeanfrancois VenereItalyStephen Shaw NEGOTIATION
Darci PoquetteIndiaIoni Bowcher UNQUALIFIED
Tony FollerRussiaXuxue Feng NEW
Mayumi KolmetzArgentinaStephen Shaw QUALIFIED
Isabel BowleyFranceAmy Elsner PROPOSAL
Wickens NestleSpainAnna Fali QUALIFIED
Nicolas IturbideFranceBernardo Dominic NEW
Munro FerenczIndiaIoni Bowcher QUALIFIED
Silvio SlusarskiRussiaBernardo Dominic NEGOTIATION
Sinclair WaycottBrazilBernardo Dominic NEW
Arvin AlbaresRussiaXuxue Feng QUALIFIED
Murillo MaletIndiaXuxue Feng PROPOSAL
Mayumi KolmetzBrazilBernardo Dominic UNQUALIFIED
Adams MorascaSpainBernardo Dominic NEW
Morrow RutaJapanIvan Magalhaes NEGOTIATION
Izzy GarufiBrazilOnyama Limba RENEWAL
David DarakjySpainBernardo Dominic PROPOSAL
Silvio SlusarskiRussiaAsiya Javayant NEW
Misaki RoysterItalyBernardo Dominic QUALIFIED
Kadeem FlosiUnited KingdomXuxue Feng NEGOTIATION
Leon OldroydGermanyAmy Elsner NEW
Kaitlin OstroskyIndiaBernardo Dominic NEGOTIATION
Deepesh ChuiSpainIoni Bowcher PROPOSAL
Ashley DoeIndiaStephen Shaw UNQUALIFIED
Misaki RoysterArgentinaIvan Magalhaes UNQUALIFIED
Aruna FigeroaFranceAnna Fali QUALIFIED
Aruna FigeroaRussiaStephen Shaw UNQUALIFIED
Sinclair WaycottCanadaAmy Elsner NEGOTIATION
Chavez BriddickFranceAsiya Javayant RENEWAL
Chavez BriddickSpainStephen Shaw QUALIFIED
Antonio CaudyFranceXuxue Feng QUALIFIED
Jefferson SchemmerIndiaAsiya Javayant RENEWAL
Juan WieserAustraliaIvan Magalhaes NEGOTIATION
Kaitlin OstroskyGermanyOnyama Limba NEGOTIATION
Smith GlickSpainStephen Shaw RENEWAL
Costa DilliardAustraliaElwin Sharvill NEW
Aika InouyeIndiaAsiya Javayant UNQUALIFIED
Maisha RulapaughIndiaOnyama Limba RENEWAL
Mayumi KolmetzIndiaAsiya Javayant PROPOSAL
Cody SaylorsSpainAmy Elsner UNQUALIFIED
Aruna FigeroaRussiaStephen Shaw PROPOSAL
Antonio CaudyGermanyXuxue Feng UNQUALIFIED
Nicolas IturbideItalyStephen Shaw UNQUALIFIED
Deepesh ChuiFranceOnyama Limba UNQUALIFIED
Aditya KuskoSpainBernardo Dominic NEGOTIATION
Frozen Columns
Name
Alejandro Perin
Tony Foller
Adams Morasca
Greenwood Bolognia
Emily Whobrey
Francesco Shinko
Francesco Shinko
Kadeem Flosi
Isabel Bowley
Sinclair Waycott
Chavez Briddick
Rodrigues Campain
Jones Vocelka
Faith Gillian
Morrow Ruta
Mujtaba Nicka
Salvatore Stockham
Salvatore Stockham
Aruna Figeroa
Emily Whobrey
Aruna Figeroa
Emily Whobrey
Munro Ferencz
Alejandro Perin
Deepesh Chui
Mujtaba Nicka
Cody Saylors
David Darakjy
Mujtaba Nicka
Silvio Slusarski
Cody Saylors
James Butt
Leja Caldarera
Johnson Sergi
Aditya Kusko
Juan Wieser
Greenwood Bolognia
Kadeem Flosi
Morrow Ruta
Alejandro Perin
Aruna Figeroa
Tony Foller
Tony Foller
Ashley Doe
Leja Caldarera
Antonio Caudy
Ricardo Gaucho
Stacey Maclead
Chavez Briddick
Misaki Royster
IdCountryDate
1000Italy2025-08-26
1001Germany2025-09-10
1002Australia2025-09-17
1003France2025-09-10
1004Spain2025-08-26
1005Japan2025-08-23
1006Russia2025-09-19
1007Canada2025-08-29
1008France2025-08-24
1009Russia2025-09-06
1010Japan2025-09-05
1011Brazil2025-09-01
1012Brazil2025-08-30
1013Canada2025-09-11
1014Italy2025-09-08
1015France2025-08-27
1016Italy2025-08-30
1017France2025-08-22
1018Italy2025-09-08
1019Australia2025-09-13
1020Argentina2025-09-07
1021Italy2025-09-15
1022Brazil2025-08-26
1023Spain2025-08-26
1024India2025-08-25
1025Spain2025-09-04
1026Germany2025-08-29
1027Russia2025-08-26
1028Canada2025-09-18
1029Canada2025-09-17
1030Argentina2025-08-31
1031United Kingdom2025-09-16
1032Canada2025-09-02
1033Australia2025-09-16
1034Spain2025-09-06
1035Italy2025-09-09
1036Spain2025-09-07
1037Russia2025-09-05
1038India2025-09-09
1039Japan2025-09-19
1040Japan2025-08-27
1041Italy2025-09-10
1042India2025-08-27
1043Australia2025-09-07
1044United Kingdom2025-09-12
1045Germany2025-09-09
1046United Kingdom2025-09-01
1047France2025-08-30
1048Spain2025-08-22
1049Canada2025-09-17

On-Demand Data

NameIdCountryDate
David Darakjy1000Japan2025-09-13
Kaitlin Ostrosky1001Canada2025-08-30
Aditya Kusko1002Spain2025-09-03
Munro Ferencz1003Russia2025-08-22
Johnson Sergi1004Spain2025-09-18
Maisha Rulapaugh1005Russia2025-09-09
Juan Wieser1006Germany2025-09-05
Arvin Albares1007Australia2025-08-27
Jefferson Schemmer1008Canada2025-08-23
Mayumi Kolmetz1009Brazil2025-09-08
Tony Foller1010Spain2025-09-14
Wickens Nestle1011Argentina2025-09-14
Emily Whobrey1012Brazil2025-09-08
Faith Gillian1013Canada2025-09-10
Johnson Sergi1014United Kingdom2025-08-22
Nicolas Iturbide1015India2025-09-05
Julie Stenseth1016Argentina2025-09-02
Ricardo Gaucho1017Russia2025-08-23
Jones Vocelka1018Brazil2025-09-13
Greenwood Bolognia1019Spain2025-09-07
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Claire TollnerBrazilAsiya Javayant NEW
Jeanfrancois VenereBrazilStephen Shaw NEW
Stacey MacleadArgentinaStephen Shaw UNQUALIFIED
Stacey MacleadFranceAnna Fali NEW
Ashley DoeIndiaStephen Shaw NEGOTIATION
Ivar PaprockiAustraliaStephen Shaw PROPOSAL
Misaki RoysterJapanElwin Sharvill PROPOSAL
Morrow RutaArgentinaAsiya Javayant RENEWAL
Chavez BriddickRussiaAnna Fali NEW
Aruna FigeroaIndiaIoni Bowcher PROPOSAL
Misaki RoysterCanadaAmy Elsner NEW
Maria MarrierUnited KingdomElwin Sharvill QUALIFIED
Faith GillianCanadaIoni Bowcher RENEWAL
Octavia MaletRussiaXuxue Feng NEGOTIATION
Salvatore StockhamBrazilXuxue Feng UNQUALIFIED
Johnson SergiBrazilIoni Bowcher NEGOTIATION
Emily WhobreyFranceIoni Bowcher UNQUALIFIED
Rodrigues CampainArgentinaXuxue Feng NEGOTIATION
Jones VocelkaArgentinaStephen Shaw UNQUALIFIED
Antonio CaudyCanadaStephen Shaw QUALIFIED
Clifford RimUnited KingdomAsiya Javayant RENEWAL
Salvatore StockhamBrazilBernardo Dominic UNQUALIFIED
Rodrigues CampainItalyAsiya Javayant NEGOTIATION
Kadeem FlosiUnited KingdomBernardo Dominic RENEWAL
James ButtJapanIvan Magalhaes RENEWAL
Francesco ShinkoCanadaIvan Magalhaes PROPOSAL
Leja CaldareraSpainStephen Shaw PROPOSAL
Silvio SlusarskiAustraliaAsiya Javayant NEW
Kadeem FlosiBrazilAsiya Javayant NEW
Johnson SergiCanadaStephen Shaw RENEWAL
Ricardo GauchoRussiaStephen Shaw NEGOTIATION
Clifford RimSpainStephen Shaw NEW
Murillo MaletBrazilXuxue Feng RENEWAL
Juan WieserCanadaElwin Sharvill UNQUALIFIED
Isabel BowleyGermanyIvan Magalhaes UNQUALIFIED
Isabel BowleyJapanIoni Bowcher QUALIFIED
Johnson SergiUnited KingdomXuxue Feng NEGOTIATION
Octavia MaletItalyAmy Elsner RENEWAL
Arvin AlbaresCanadaElwin Sharvill UNQUALIFIED
Nicolas IturbideCanadaIoni Bowcher NEW

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