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
Jones VocelkaAustraliaElwin Sharvill UNQUALIFIED
Jones VocelkaJapanStephen Shaw RENEWAL
Ricardo GauchoUnited KingdomIoni Bowcher NEGOTIATION
Mujtaba NickaAustraliaIvan Magalhaes RENEWAL
Morrow RutaRussiaOnyama Limba QUALIFIED
Costa DilliardBrazilAmy Elsner QUALIFIED
Claire TollnerFranceElwin Sharvill RENEWAL
Mujtaba NickaGermanyAmy Elsner UNQUALIFIED
Munro FerenczUnited KingdomIvan Magalhaes QUALIFIED
Jefferson SchemmerAustraliaStephen Shaw NEGOTIATION
Aditya KuskoFranceAnna Fali NEW
Munro FerenczFranceAnna Fali NEGOTIATION
Arvin AlbaresGermanyIoni Bowcher RENEWAL
Adams MorascaAustraliaStephen Shaw QUALIFIED
Jeanfrancois VenereIndiaAsiya Javayant UNQUALIFIED
Faith GillianGermanyOnyama Limba RENEWAL
Silvio SlusarskiUnited KingdomXuxue Feng NEGOTIATION
Emily WhobreyUnited KingdomBernardo Dominic NEW
Silvio SlusarskiJapanIvan Magalhaes PROPOSAL
Francesco ShinkoArgentinaIoni Bowcher RENEWAL
Deepesh ChuiAustraliaStephen Shaw NEW
Izzy GarufiGermanyXuxue Feng UNQUALIFIED
Aruna FigeroaItalyAmy Elsner UNQUALIFIED
Julie StensethCanadaElwin Sharvill NEGOTIATION
Mayumi KolmetzGermanyIoni Bowcher PROPOSAL
Francesco ShinkoUnited KingdomXuxue Feng QUALIFIED
Kaitlin OstroskyArgentinaAmy Elsner QUALIFIED
Arvin AlbaresRussiaAnna Fali UNQUALIFIED
Octavia MaletArgentinaXuxue Feng NEGOTIATION
Jones VocelkaGermanyIvan Magalhaes NEW
Chavez BriddickIndiaIoni Bowcher NEW
Leon OldroydJapanAnna Fali NEGOTIATION
Emily WhobreyRussiaIvan Magalhaes UNQUALIFIED
Munro FerenczIndiaIoni Bowcher QUALIFIED
Antonio CaudyUnited KingdomStephen Shaw NEGOTIATION
Octavia MaletJapanOnyama Limba NEGOTIATION
Salvatore StockhamCanadaAmy Elsner PROPOSAL
Clifford RimSpainXuxue Feng PROPOSAL
Greenwood BologniaItalyAnna Fali NEGOTIATION
Greenwood BologniaFranceXuxue Feng RENEWAL
Claire TollnerIndiaAsiya Javayant PROPOSAL
Alejandro PerinIndiaAmy Elsner UNQUALIFIED
Aruna FigeroaJapanXuxue Feng NEW
Chavez BriddickItalyElwin Sharvill QUALIFIED
Leja CaldareraGermanyOnyama Limba RENEWAL
Deepesh ChuiIndiaAmy Elsner NEGOTIATION
Nicolas IturbideAustraliaBernardo Dominic NEGOTIATION
Aika InouyeAustraliaIoni Bowcher QUALIFIED
Stacey MacleadBrazilAnna Fali PROPOSAL
David DarakjyArgentinaOnyama Limba UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Ricardo GauchoAustraliaBernardo Dominic QUALIFIED
Mayumi KolmetzBrazilXuxue Feng QUALIFIED
Morrow RutaCanadaBernardo Dominic NEGOTIATION
Jennifer AmigonFranceXuxue Feng QUALIFIED
Maria MarrierArgentinaBernardo Dominic QUALIFIED
Aika InouyeIndiaIoni Bowcher NEGOTIATION
Salvatore StockhamFranceXuxue Feng PROPOSAL
Munro FerenczSpainIvan Magalhaes UNQUALIFIED
Tony FollerJapanAsiya Javayant PROPOSAL
Mujtaba NickaBrazilAnna Fali NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Salvatore StockhamAustralia2026-04-26Truhlar And Truhlar Attys UNQUALIFIED5Xuxue Feng
1001Leon OldroydAustralia2026-05-06Printing Dimensions QUALIFIED9Onyama Limba
1002Jennifer AmigonUnited Kingdom2026-05-11Dorl, James J Esq QUALIFIED10Asiya Javayant
1003Munro FerenczJapan2026-05-21Rousseaux, Michael Esq PROPOSAL99Asiya Javayant
1004Arvin AlbaresBrazil2026-05-08Dorl, James J Esq PROPOSAL30Anna Fali
1005David DarakjyGermany2026-05-20Commercial Press UNQUALIFIED10Onyama Limba
1006Rodrigues CampainFrance2026-05-20Chapman, Ross E Esq UNQUALIFIED60Amy Elsner
1007Silvio SlusarskiCanada2026-05-20Rangoni Of Florence UNQUALIFIED99Xuxue Feng
1008Faith GillianBrazil2026-04-24Chemel, James L Cpa NEW44Onyama Limba
1009Smith GlickFrance2026-05-23Chemel, James L Cpa UNQUALIFIED22Ivan Magalhaes
1010Costa DilliardJapan2026-04-29Truhlar And Truhlar Attys QUALIFIED8Ioni Bowcher
1011Alejandro PerinItaly2026-05-11Truhlar And Truhlar Attys NEW77Stephen Shaw
1012Murillo MaletJapan2026-05-22King, Christopher A Esq RENEWAL5Bernardo Dominic
1013Adams MorascaItaly2026-05-06Chapman, Ross E Esq UNQUALIFIED34Asiya Javayant
1014Leon OldroydBrazil2026-05-19Feltz Printing Service PROPOSAL73Ivan Magalhaes
1015Jones VocelkaIndia2026-05-23Benton, John B Jr NEW63Xuxue Feng
1016Jones VocelkaRussia2026-05-16Printing Dimensions QUALIFIED23Onyama Limba
1017Misaki RoysterUnited Kingdom2026-04-25Printing Dimensions UNQUALIFIED4Asiya Javayant
1018Greenwood BologniaAustralia2026-05-19Feiner Bros NEGOTIATION50Elwin Sharvill
1019Aika InouyeArgentina2026-05-12Truhlar And Truhlar Attys UNQUALIFIED2Xuxue Feng
1020Deepesh ChuiGermany2026-04-29Feltz Printing Service RENEWAL27Stephen Shaw
1021Rodrigues CampainBrazil2026-05-22Commercial Press PROPOSAL83Ioni Bowcher
1022Adams MorascaAustralia2026-05-11Chanay, Jeffrey A Esq NEW65Onyama Limba
1023Murillo MaletIndia2026-04-27King, Christopher A Esq NEGOTIATION8Anna Fali
1024Rodrigues CampainItaly2026-05-03King, Christopher A Esq UNQUALIFIED8Xuxue Feng
1025Mayumi KolmetzRussia2026-04-26Chanay, Jeffrey A Esq PROPOSAL74Bernardo Dominic
1026Ricardo GauchoRussia2026-05-12Feltz Printing Service NEW93Onyama Limba
1027Aika InouyeGermany2026-05-19Morlong Associates RENEWAL77Asiya Javayant
1028James ButtAustralia2026-05-01Dorl, James J Esq UNQUALIFIED21Onyama Limba
1029Murillo MaletCanada2026-04-28Rousseaux, Michael Esq NEGOTIATION93Ioni Bowcher
1030Ricardo GauchoIndia2026-05-06Rangoni Of Florence QUALIFIED38Ioni Bowcher
1031Aruna FigeroaArgentina2026-05-20Feltz Printing Service QUALIFIED59Asiya Javayant
1032Ricardo GauchoCanada2026-05-04Rangoni Of Florence NEGOTIATION20Onyama Limba
1033Leja CaldareraJapan2026-05-23Morlong Associates NEGOTIATION4Anna Fali
1034Antonio CaudyRussia2026-05-17Printing Dimensions QUALIFIED93Elwin Sharvill
1035Faith GillianGermany2026-05-07Feiner Bros PROPOSAL35Asiya Javayant
1036Chavez BriddickGermany2026-04-25Truhlar And Truhlar Attys UNQUALIFIED9Asiya Javayant
1037Antonio CaudyRussia2026-04-28Benton, John B Jr PROPOSAL84Elwin Sharvill
1038Johnson SergiUnited Kingdom2026-05-10Rousseaux, Michael Esq NEW56Amy Elsner
1039Antonio CaudyUnited Kingdom2026-05-17Feiner Bros RENEWAL84Xuxue Feng
1040Francesco ShinkoAustralia2026-04-28Chanay, Jeffrey A Esq NEGOTIATION69Ivan Magalhaes
1041Silvio SlusarskiItaly2026-05-13Dorl, James J Esq QUALIFIED47Elwin Sharvill
1042Maria MarrierRussia2026-05-13Feltz Printing Service NEGOTIATION70Bernardo Dominic
1043Darci PoquetteJapan2026-05-07Rousseaux, Michael Esq PROPOSAL46Ioni Bowcher
1044Faith GillianItaly2026-05-22Chemel, James L Cpa QUALIFIED39Bernardo Dominic
1045Arvin AlbaresIndia2026-04-29Chanay, Jeffrey A Esq PROPOSAL79Asiya Javayant
1046Isabel BowleyGermany2026-05-19Buckley Miller Wright RENEWAL58Xuxue Feng
1047Ashley DoeItaly2026-05-20Buckley Miller Wright NEGOTIATION78Amy Elsner
1048Cody SaylorsCanada2026-05-11Commercial Press QUALIFIED17Amy Elsner
1049Claire TollnerSpain2026-05-05Commercial Press NEW84Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Ashley DoeFranceOnyama Limba UNQUALIFIED
Morrow RutaBrazilOnyama Limba UNQUALIFIED
Kaitlin OstroskyAustraliaIoni Bowcher NEGOTIATION
Claire TollnerFranceXuxue Feng PROPOSAL
Rodrigues CampainItalyOnyama Limba PROPOSAL
Jeanfrancois VenereCanadaAmy Elsner NEGOTIATION
Munro FerenczGermanyAnna Fali NEGOTIATION
Leon OldroydSpainAnna Fali PROPOSAL
Mujtaba NickaJapanXuxue Feng UNQUALIFIED
Alejandro PerinJapanXuxue Feng RENEWAL
Deepesh ChuiFranceXuxue Feng NEGOTIATION
Octavia MaletCanadaOnyama Limba QUALIFIED
Misaki RoysterArgentinaElwin Sharvill RENEWAL
Francesco ShinkoSpainAmy Elsner NEGOTIATION
Isabel BowleyUnited KingdomAmy Elsner QUALIFIED
David DarakjyCanadaOnyama Limba NEW
James ButtIndiaBernardo Dominic PROPOSAL
Isabel BowleyGermanyAsiya Javayant PROPOSAL
Julie StensethArgentinaOnyama Limba RENEWAL
Leja CaldareraSpainOnyama Limba NEW
Jeanfrancois VenereSpainIoni Bowcher NEW
Aika InouyeItalyIvan Magalhaes NEGOTIATION
Murillo MaletBrazilStephen Shaw PROPOSAL
Kadeem FlosiGermanyIvan Magalhaes UNQUALIFIED
Murillo MaletSpainXuxue Feng NEW
Ashley DoeIndiaIoni Bowcher NEGOTIATION
Leon OldroydIndiaAmy Elsner NEW
Silvio SlusarskiSpainAmy Elsner QUALIFIED
David DarakjyFranceStephen Shaw PROPOSAL
Isabel BowleyItalyAnna Fali PROPOSAL
Smith GlickSpainAsiya Javayant NEGOTIATION
Claire TollnerGermanyBernardo Dominic UNQUALIFIED
Francesco ShinkoItalyAsiya Javayant NEGOTIATION
Leja CaldareraIndiaIoni Bowcher QUALIFIED
Juan WieserArgentinaStephen Shaw UNQUALIFIED
Maria MarrierJapanAsiya Javayant PROPOSAL
Mujtaba NickaCanadaAsiya Javayant UNQUALIFIED
Salvatore StockhamItalyAnna Fali QUALIFIED
Costa DilliardBrazilAmy Elsner RENEWAL
Kadeem FlosiJapanStephen Shaw NEW
Sinclair WaycottSpainAsiya Javayant UNQUALIFIED
Greenwood BologniaIndiaOnyama Limba NEGOTIATION
Silvio SlusarskiJapanAsiya Javayant RENEWAL
Jones VocelkaSpainStephen Shaw NEGOTIATION
David DarakjyFranceStephen Shaw RENEWAL
Aika InouyeSpainIoni Bowcher NEGOTIATION
Leon OldroydBrazilElwin Sharvill NEGOTIATION
Silvio SlusarskiFranceAsiya Javayant UNQUALIFIED
Smith GlickRussiaBernardo Dominic NEW
Izzy GarufiItalyBernardo Dominic UNQUALIFIED
Frozen Columns
Name
Jefferson Schemmer
Julie Stenseth
Munro Ferencz
Johnson Sergi
Misaki Royster
Aditya Kusko
Stacey Maclead
Arvin Albares
Stacey Maclead
Ashley Doe
Izzy Garufi
Isabel Bowley
Ricardo Gaucho
Isabel Bowley
Emily Whobrey
Julie Stenseth
Cody Saylors
Adams Morasca
Wickens Nestle
Johnson Sergi
Johnson Sergi
Jennifer Amigon
Ricardo Gaucho
Aika Inouye
Munro Ferencz
Chavez Briddick
Misaki Royster
James Butt
Alejandro Perin
Tony Foller
Antonio Caudy
Leja Caldarera
Ivar Paprocki
Aika Inouye
Arvin Albares
James Butt
Maria Marrier
Faith Gillian
Misaki Royster
James Butt
Claire Tollner
Wickens Nestle
Alejandro Perin
Clifford Rim
Greenwood Bolognia
Antonio Caudy
James Butt
Arvin Albares
Faith Gillian
Francesco Shinko
IdCountryDate
1000Russia2026-04-30
1001Australia2026-05-01
1002France2026-04-27
1003India2026-04-24
1004Argentina2026-04-30
1005Spain2026-05-07
1006United Kingdom2026-05-17
1007Brazil2026-05-20
1008Russia2026-04-25
1009India2026-05-17
1010Italy2026-04-30
1011India2026-04-29
1012Canada2026-04-25
1013France2026-05-16
1014Germany2026-05-09
1015Brazil2026-04-25
1016United Kingdom2026-04-27
1017France2026-05-06
1018India2026-05-22
1019Japan2026-05-20
1020Spain2026-05-14
1021Russia2026-05-08
1022Canada2026-05-22
1023Russia2026-04-27
1024Italy2026-04-26
1025Russia2026-05-10
1026Canada2026-05-01
1027Argentina2026-05-23
1028Italy2026-05-13
1029Germany2026-05-11
1030India2026-05-23
1031Brazil2026-05-07
1032Japan2026-05-14
1033Argentina2026-04-30
1034Japan2026-05-19
1035Brazil2026-05-11
1036Spain2026-04-24
1037France2026-05-22
1038Brazil2026-05-05
1039Spain2026-05-22
1040Russia2026-04-30
1041Japan2026-05-17
1042India2026-05-11
1043France2026-05-17
1044Canada2026-05-16
1045Argentina2026-05-02
1046Brazil2026-04-26
1047Japan2026-05-18
1048France2026-05-04
1049India2026-05-09

On-Demand Data

NameIdCountryDate
Cody Saylors1000India2026-04-29
Silvio Slusarski1001India2026-05-05
Jones Vocelka1002Canada2026-04-26
Izzy Garufi1003India2026-05-15
Sinclair Waycott1004France2026-05-13
Clifford Rim1005Canada2026-04-25
Leja Caldarera1006Germany2026-05-19
Jennifer Amigon1007Canada2026-05-01
Aruna Figeroa1008France2026-05-13
Francesco Shinko1009United Kingdom2026-05-17
Ashley Doe1010Canada2026-05-11
Ivar Paprocki1011Canada2026-04-24
Cody Saylors1012United Kingdom2026-05-10
Deepesh Chui1013Russia2026-05-10
Costa Dilliard1014Australia2026-04-30
Costa Dilliard1015Brazil2026-05-19
Tony Foller1016Japan2026-05-23
Clifford Rim1017France2026-05-07
Greenwood Bolognia1018Russia2026-05-05
Emily Whobrey1019Germany2026-05-16
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Isabel BowleyUnited KingdomElwin Sharvill NEGOTIATION
Jefferson SchemmerIndiaIoni Bowcher NEGOTIATION
Salvatore StockhamRussiaOnyama Limba NEW
Chavez BriddickItalyIoni Bowcher UNQUALIFIED
Leon OldroydJapanXuxue Feng RENEWAL
Izzy GarufiUnited KingdomAmy Elsner NEW
Emily WhobreyIndiaIvan Magalhaes PROPOSAL
Nicolas IturbideBrazilIoni Bowcher PROPOSAL
Costa DilliardFranceXuxue Feng QUALIFIED
Leon OldroydAustraliaAsiya Javayant QUALIFIED
Izzy GarufiRussiaElwin Sharvill UNQUALIFIED
Deepesh ChuiBrazilBernardo Dominic RENEWAL
Stacey MacleadFranceElwin Sharvill PROPOSAL
David DarakjySpainElwin Sharvill NEW
Emily WhobreyBrazilAsiya Javayant NEGOTIATION
Jones VocelkaBrazilElwin Sharvill NEW
Silvio SlusarskiArgentinaElwin Sharvill PROPOSAL
Nicolas IturbideGermanyAsiya Javayant PROPOSAL
Emily WhobreyJapanIvan Magalhaes RENEWAL
Jeanfrancois VenereArgentinaAnna Fali PROPOSAL
Faith GillianSpainElwin Sharvill NEW
Cody SaylorsSpainXuxue Feng NEW
Ricardo GauchoSpainOnyama Limba UNQUALIFIED
Rodrigues CampainFranceAnna Fali NEW
Kadeem FlosiRussiaXuxue Feng UNQUALIFIED
Ivar PaprockiRussiaXuxue Feng NEGOTIATION
Aditya KuskoArgentinaBernardo Dominic QUALIFIED
Maria MarrierBrazilBernardo Dominic NEGOTIATION
Misaki RoysterBrazilAnna Fali NEW
Julie StensethSpainBernardo Dominic NEW
Claire TollnerFranceStephen Shaw UNQUALIFIED
Stacey MacleadUnited KingdomElwin Sharvill PROPOSAL
Mayumi KolmetzJapanAmy Elsner NEW
Cody SaylorsJapanElwin Sharvill QUALIFIED
Silvio SlusarskiCanadaOnyama Limba RENEWAL
Tony FollerUnited KingdomIvan Magalhaes RENEWAL
Murillo MaletUnited KingdomElwin Sharvill QUALIFIED
Darci PoquetteBrazilIoni Bowcher NEGOTIATION
Tony FollerArgentinaIoni Bowcher QUALIFIED
Clifford RimJapanOnyama Limba 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>