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
Chavez BriddickGermanyElwin Sharvill UNQUALIFIED
Tony FollerItalyBernardo Dominic PROPOSAL
Mayumi KolmetzFranceElwin Sharvill NEGOTIATION
James ButtArgentinaAnna Fali UNQUALIFIED
Faith GillianRussiaBernardo Dominic QUALIFIED
Murillo MaletGermanyAmy Elsner NEW
Jefferson SchemmerCanadaIvan Magalhaes NEW
Ivar PaprockiGermanyIvan Magalhaes NEGOTIATION
Faith GillianAustraliaAsiya Javayant QUALIFIED
Clifford RimArgentinaBernardo Dominic UNQUALIFIED
Sinclair WaycottJapanBernardo Dominic PROPOSAL
Alejandro PerinJapanStephen Shaw QUALIFIED
Leja CaldareraSpainIvan Magalhaes RENEWAL
Aika InouyeFranceElwin Sharvill NEGOTIATION
Cody SaylorsGermanyStephen Shaw NEW
Chavez BriddickSpainOnyama Limba PROPOSAL
Aditya KuskoJapanIoni Bowcher RENEWAL
Misaki RoysterGermanyOnyama Limba NEGOTIATION
Ashley DoeArgentinaXuxue Feng QUALIFIED
Francesco ShinkoItalyBernardo Dominic NEGOTIATION
James ButtRussiaOnyama Limba RENEWAL
Emily WhobreyItalyElwin Sharvill QUALIFIED
Jefferson SchemmerRussiaIoni Bowcher QUALIFIED
Aika InouyeBrazilBernardo Dominic NEGOTIATION
Mayumi KolmetzAustraliaElwin Sharvill NEW
Isabel BowleyAustraliaBernardo Dominic RENEWAL
Smith GlickAustraliaElwin Sharvill NEGOTIATION
Ricardo GauchoJapanStephen Shaw RENEWAL
Arvin AlbaresJapanAsiya Javayant PROPOSAL
Francesco ShinkoFranceElwin Sharvill NEW
Cody SaylorsIndiaBernardo Dominic QUALIFIED
Misaki RoysterArgentinaIvan Magalhaes QUALIFIED
Costa DilliardItalyIvan Magalhaes QUALIFIED
Arvin AlbaresJapanIoni Bowcher NEW
Murillo MaletIndiaAnna Fali RENEWAL
Izzy GarufiArgentinaIvan Magalhaes NEGOTIATION
Silvio SlusarskiCanadaBernardo Dominic RENEWAL
Cody SaylorsJapanAmy Elsner NEGOTIATION
Kaitlin OstroskyJapanIoni Bowcher PROPOSAL
Jennifer AmigonArgentinaAsiya Javayant PROPOSAL
Morrow RutaArgentinaOnyama Limba UNQUALIFIED
Juan WieserCanadaAnna Fali QUALIFIED
Morrow RutaRussiaXuxue Feng NEGOTIATION
Izzy GarufiUnited KingdomOnyama Limba NEW
Kaitlin OstroskyGermanyIoni Bowcher RENEWAL
Aditya KuskoAustraliaElwin Sharvill PROPOSAL
Isabel BowleyRussiaXuxue Feng NEGOTIATION
Maria MarrierRussiaXuxue Feng PROPOSAL
Ricardo GauchoGermanyXuxue Feng NEGOTIATION
Deepesh ChuiJapanXuxue Feng RENEWAL
Horizontal
NameCountryRepresentativeStatus
Jeanfrancois VenereAustraliaXuxue Feng UNQUALIFIED
Nicolas IturbideAustraliaAmy Elsner QUALIFIED
Aditya KuskoUnited KingdomXuxue Feng NEGOTIATION
Ivar PaprockiRussiaAmy Elsner UNQUALIFIED
Alejandro PerinArgentinaAsiya Javayant NEGOTIATION
Murillo MaletBrazilAmy Elsner PROPOSAL
Isabel BowleyItalyAsiya Javayant NEW
James ButtJapanAnna Fali QUALIFIED
Morrow RutaSpainIvan Magalhaes QUALIFIED
Munro FerenczJapanAsiya Javayant RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Mujtaba NickaRussia2026-04-22Truhlar And Truhlar Attys NEW27Asiya Javayant
1001Jefferson SchemmerItaly2026-05-02Buckley Miller Wright NEW97Stephen Shaw
1002Aika InouyeUnited Kingdom2026-04-24Feiner Bros QUALIFIED4Ioni Bowcher
1003Izzy GarufiCanada2026-04-17Dorl, James J Esq NEGOTIATION44Anna Fali
1004Sinclair WaycottCanada2026-04-18Benton, John B Jr UNQUALIFIED54Stephen Shaw
1005Misaki RoysterArgentina2026-04-19Chanay, Jeffrey A Esq RENEWAL54Anna Fali
1006Smith GlickArgentina2026-04-27Benton, John B Jr QUALIFIED38Ioni Bowcher
1007Antonio CaudyJapan2026-04-12Printing Dimensions UNQUALIFIED98Asiya Javayant
1008Kadeem FlosiAustralia2026-04-13Rousseaux, Michael Esq RENEWAL60Asiya Javayant
1009Rodrigues CampainSpain2026-05-09Chanay, Jeffrey A Esq RENEWAL96Stephen Shaw
1010Izzy GarufiIndia2026-04-17Commercial Press RENEWAL42Stephen Shaw
1011Julie StensethRussia2026-05-02King, Christopher A Esq UNQUALIFIED3Ivan Magalhaes
1012Morrow RutaFrance2026-04-12Commercial Press PROPOSAL87Ivan Magalhaes
1013Munro FerenczIndia2026-04-16Commercial Press QUALIFIED35Elwin Sharvill
1014Faith GillianUnited Kingdom2026-05-01Dorl, James J Esq QUALIFIED78Ivan Magalhaes
1015Emily WhobreySpain2026-05-05Benton, John B Jr QUALIFIED66Amy Elsner
1016Maisha RulapaughItaly2026-04-14Buckley Miller Wright PROPOSAL93Ioni Bowcher
1017James ButtJapan2026-04-14Chanay, Jeffrey A Esq RENEWAL80Stephen Shaw
1018Juan WieserAustralia2026-05-06Buckley Miller Wright NEGOTIATION18Asiya Javayant
1019Darci PoquetteUnited Kingdom2026-04-12Chemel, James L Cpa NEGOTIATION14Stephen Shaw
1020Deepesh ChuiArgentina2026-04-23Benton, John B Jr NEW1Asiya Javayant
1021Murillo MaletAustralia2026-04-28Chapman, Ross E Esq NEW95Stephen Shaw
1022Johnson SergiSpain2026-04-14Chemel, James L Cpa RENEWAL9Asiya Javayant
1023Leon OldroydRussia2026-04-13Buckley Miller Wright NEGOTIATION69Bernardo Dominic
1024Izzy GarufiItaly2026-05-01Chanay, Jeffrey A Esq PROPOSAL79Asiya Javayant
1025Darci PoquetteAustralia2026-04-27Chanay, Jeffrey A Esq UNQUALIFIED94Xuxue Feng
1026Aditya KuskoJapan2026-04-29Dorl, James J Esq QUALIFIED77Anna Fali
1027Maria MarrierCanada2026-04-12Chapman, Ross E Esq NEW71Xuxue Feng
1028Maria MarrierUnited Kingdom2026-04-25King, Christopher A Esq NEW89Elwin Sharvill
1029Munro FerenczItaly2026-04-27Morlong Associates RENEWAL91Onyama Limba
1030Rodrigues CampainRussia2026-04-10Commercial Press RENEWAL99Xuxue Feng
1031Arvin AlbaresJapan2026-05-04Printing Dimensions RENEWAL14Ivan Magalhaes
1032Silvio SlusarskiAustralia2026-05-01Feiner Bros QUALIFIED70Anna Fali
1033Mujtaba NickaCanada2026-05-08Commercial Press NEGOTIATION80Ivan Magalhaes
1034Chavez BriddickCanada2026-04-20Rousseaux, Michael Esq PROPOSAL26Bernardo Dominic
1035Aika InouyeGermany2026-04-12Rousseaux, Michael Esq PROPOSAL16Anna Fali
1036Octavia MaletIndia2026-04-10Chapman, Ross E Esq NEGOTIATION79Asiya Javayant
1037Rodrigues CampainFrance2026-05-03Feiner Bros RENEWAL51Xuxue Feng
1038Morrow RutaGermany2026-05-05King, Christopher A Esq NEGOTIATION57Anna Fali
1039Darci PoquetteCanada2026-04-24Feiner Bros NEW62Asiya Javayant
1040Aditya KuskoGermany2026-04-28Truhlar And Truhlar Attys UNQUALIFIED54Onyama Limba
1041Silvio SlusarskiJapan2026-04-10Truhlar And Truhlar Attys PROPOSAL90Ivan Magalhaes
1042Antonio CaudyJapan2026-05-01Commercial Press RENEWAL91Ioni Bowcher
1043Mayumi KolmetzAustralia2026-05-02Rousseaux, Michael Esq QUALIFIED91Xuxue Feng
1044Munro FerenczArgentina2026-04-13Truhlar And Truhlar Attys UNQUALIFIED68Elwin Sharvill
1045Leja CaldareraFrance2026-04-15Feltz Printing Service QUALIFIED50Elwin Sharvill
1046Aika InouyeRussia2026-04-23Chanay, Jeffrey A Esq PROPOSAL55Amy Elsner
1047Kadeem FlosiRussia2026-04-13King, Christopher A Esq QUALIFIED16Anna Fali
1048Aditya KuskoRussia2026-04-26Feiner Bros PROPOSAL30Onyama Limba
1049Deepesh ChuiItaly2026-05-06Feltz Printing Service NEW46Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Leon OldroydSpainAmy Elsner PROPOSAL
Wickens NestleFranceStephen Shaw PROPOSAL
Emily WhobreyRussiaIoni Bowcher QUALIFIED
David DarakjyArgentinaElwin Sharvill PROPOSAL
Adams MorascaArgentinaStephen Shaw PROPOSAL
Cody SaylorsSpainAmy Elsner NEW
Murillo MaletBrazilOnyama Limba RENEWAL
Emily WhobreyCanadaAnna Fali PROPOSAL
Stacey MacleadUnited KingdomBernardo Dominic NEW
Johnson SergiAustraliaAnna Fali RENEWAL
Wickens NestleUnited KingdomIvan Magalhaes NEW
Cody SaylorsItalyOnyama Limba UNQUALIFIED
Leja CaldareraSpainXuxue Feng RENEWAL
Munro FerenczFranceOnyama Limba PROPOSAL
Faith GillianJapanAmy Elsner UNQUALIFIED
Ricardo GauchoItalyElwin Sharvill RENEWAL
Claire TollnerFranceBernardo Dominic NEGOTIATION
Julie StensethJapanXuxue Feng UNQUALIFIED
Cody SaylorsCanadaXuxue Feng RENEWAL
Alejandro PerinAustraliaBernardo Dominic QUALIFIED
Cody SaylorsSpainIoni Bowcher PROPOSAL
Izzy GarufiRussiaIoni Bowcher NEW
Cody SaylorsArgentinaAsiya Javayant UNQUALIFIED
Leja CaldareraArgentinaElwin Sharvill NEW
Smith GlickIndiaAnna Fali NEGOTIATION
Jones VocelkaUnited KingdomElwin Sharvill NEW
Rodrigues CampainRussiaIoni Bowcher UNQUALIFIED
Misaki RoysterRussiaIvan Magalhaes PROPOSAL
Wickens NestleArgentinaOnyama Limba PROPOSAL
Stacey MacleadBrazilElwin Sharvill UNQUALIFIED
Ashley DoeRussiaIoni Bowcher RENEWAL
Leon OldroydUnited KingdomIvan Magalhaes UNQUALIFIED
Misaki RoysterFranceXuxue Feng UNQUALIFIED
Adams MorascaFranceAsiya Javayant UNQUALIFIED
Kaitlin OstroskyRussiaElwin Sharvill PROPOSAL
Jones VocelkaCanadaIoni Bowcher NEGOTIATION
Julie StensethJapanElwin Sharvill UNQUALIFIED
Chavez BriddickUnited KingdomAsiya Javayant RENEWAL
Adams MorascaSpainElwin Sharvill RENEWAL
Tony FollerBrazilAnna Fali NEW
Aika InouyeJapanAsiya Javayant QUALIFIED
Silvio SlusarskiArgentinaIvan Magalhaes NEW
Smith GlickIndiaIvan Magalhaes NEGOTIATION
Munro FerenczSpainStephen Shaw QUALIFIED
Greenwood BologniaIndiaStephen Shaw NEW
Francesco ShinkoJapanStephen Shaw NEW
Adams MorascaIndiaAmy Elsner NEW
Leja CaldareraSpainAmy Elsner NEGOTIATION
Tony FollerFranceIoni Bowcher UNQUALIFIED
Aika InouyeGermanyXuxue Feng NEGOTIATION
Frozen Columns
Name
Francesco Shinko
Rodrigues Campain
Julie Stenseth
Maria Marrier
Juan Wieser
Greenwood Bolognia
Stacey Maclead
Wickens Nestle
Darci Poquette
Darci Poquette
Costa Dilliard
Antonio Caudy
Smith Glick
Jefferson Schemmer
Claire Tollner
Juan Wieser
Deepesh Chui
Leon Oldroyd
Salvatore Stockham
Nicolas Iturbide
Morrow Ruta
Ricardo Gaucho
Salvatore Stockham
Aika Inouye
Clifford Rim
Ivar Paprocki
Costa Dilliard
Cody Saylors
Adams Morasca
Cody Saylors
Chavez Briddick
Leja Caldarera
Tony Foller
Izzy Garufi
Adams Morasca
Alejandro Perin
Cody Saylors
Silvio Slusarski
Claire Tollner
Wickens Nestle
Rodrigues Campain
Jennifer Amigon
Isabel Bowley
Mayumi Kolmetz
Ashley Doe
Emily Whobrey
Maisha Rulapaugh
David Darakjy
Rodrigues Campain
Ricardo Gaucho
IdCountryDate
1000Italy2026-05-09
1001Germany2026-04-30
1002India2026-04-19
1003Russia2026-04-29
1004Italy2026-04-20
1005Italy2026-04-20
1006Russia2026-04-11
1007Australia2026-04-16
1008Spain2026-05-09
1009Russia2026-04-16
1010Italy2026-04-15
1011Russia2026-04-19
1012Australia2026-05-08
1013France2026-04-27
1014France2026-05-07
1015Brazil2026-04-23
1016Spain2026-04-15
1017Australia2026-05-04
1018Italy2026-05-06
1019United Kingdom2026-04-23
1020Japan2026-04-13
1021Spain2026-04-19
1022Brazil2026-04-29
1023Spain2026-04-21
1024Brazil2026-04-14
1025Australia2026-04-29
1026Germany2026-04-24
1027Brazil2026-04-11
1028Japan2026-04-18
1029Australia2026-04-19
1030Brazil2026-04-27
1031Germany2026-05-08
1032United Kingdom2026-04-18
1033Canada2026-04-23
1034Japan2026-04-23
1035Spain2026-05-06
1036Canada2026-04-14
1037Italy2026-04-29
1038France2026-05-01
1039Canada2026-04-11
1040Germany2026-04-18
1041Germany2026-04-22
1042Spain2026-04-24
1043Canada2026-05-07
1044Canada2026-05-08
1045Russia2026-04-17
1046India2026-04-17
1047Australia2026-04-20
1048Brazil2026-04-27
1049Spain2026-04-16

On-Demand Data

NameIdCountryDate
Tony Foller1000Russia2026-05-07
Alejandro Perin1001Japan2026-04-23
Isabel Bowley1002Germany2026-04-16
Murillo Malet1003Canada2026-04-22
David Darakjy1004Brazil2026-04-30
Octavia Malet1005Spain2026-05-03
Cody Saylors1006Argentina2026-04-27
Jeanfrancois Venere1007India2026-04-15
Clifford Rim1008Russia2026-04-13
Leon Oldroyd1009Italy2026-05-08
Deepesh Chui1010Argentina2026-04-30
Murillo Malet1011Canada2026-04-11
Kadeem Flosi1012United Kingdom2026-05-05
Kaitlin Ostrosky1013France2026-05-08
Maisha Rulapaugh1014Germany2026-05-01
Maria Marrier1015Japan2026-04-14
Maisha Rulapaugh1016Russia2026-04-28
Ashley Doe1017Spain2026-05-09
Julie Stenseth1018Spain2026-04-26
Greenwood Bolognia1019Germany2026-04-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Nicolas IturbideSpainXuxue Feng RENEWAL
Misaki RoysterCanadaStephen Shaw PROPOSAL
Johnson SergiArgentinaXuxue Feng UNQUALIFIED
Greenwood BologniaArgentinaBernardo Dominic NEW
Munro FerenczItalyAmy Elsner PROPOSAL
Stacey MacleadJapanIoni Bowcher NEW
Mujtaba NickaGermanyElwin Sharvill RENEWAL
Ricardo GauchoIndiaIvan Magalhaes NEW
Silvio SlusarskiUnited KingdomAnna Fali NEGOTIATION
Maisha RulapaughSpainAnna Fali PROPOSAL
Izzy GarufiBrazilIoni Bowcher NEW
Misaki RoysterItalyAmy Elsner UNQUALIFIED
Kaitlin OstroskyUnited KingdomIoni Bowcher UNQUALIFIED
Isabel BowleyGermanyStephen Shaw PROPOSAL
Wickens NestleFranceAnna Fali QUALIFIED
Ivar PaprockiCanadaElwin Sharvill NEW
James ButtIndiaAmy Elsner PROPOSAL
Ashley DoeJapanIvan Magalhaes RENEWAL
Sinclair WaycottCanadaIoni Bowcher UNQUALIFIED
Smith GlickCanadaOnyama Limba RENEWAL
Aika InouyeBrazilBernardo Dominic PROPOSAL
Tony FollerAustraliaElwin Sharvill NEW
Clifford RimRussiaIvan Magalhaes RENEWAL
Mayumi KolmetzGermanyXuxue Feng NEGOTIATION
Sinclair WaycottItalyStephen Shaw NEW
Juan WieserRussiaIvan Magalhaes RENEWAL
Cody SaylorsUnited KingdomStephen Shaw RENEWAL
Misaki RoysterCanadaXuxue Feng QUALIFIED
Tony FollerUnited KingdomAnna Fali QUALIFIED
Deepesh ChuiGermanyXuxue Feng PROPOSAL
Costa DilliardArgentinaAmy Elsner RENEWAL
Isabel BowleyGermanyAmy Elsner NEW
Sinclair WaycottRussiaIvan Magalhaes NEGOTIATION
Greenwood BologniaGermanyElwin Sharvill UNQUALIFIED
Mayumi KolmetzUnited KingdomAmy Elsner UNQUALIFIED
Mujtaba NickaUnited KingdomIvan Magalhaes PROPOSAL
Claire TollnerArgentinaIoni Bowcher NEGOTIATION
Wickens NestleUnited KingdomElwin Sharvill PROPOSAL
Morrow RutaIndiaXuxue Feng QUALIFIED
David DarakjyArgentinaStephen Shaw RENEWAL

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