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
Mayumi KolmetzIndiaBernardo Dominic QUALIFIED
Julie StensethJapanOnyama Limba NEW
Kadeem FlosiJapanIvan Magalhaes QUALIFIED
Izzy GarufiArgentinaElwin Sharvill QUALIFIED
Munro FerenczAustraliaOnyama Limba RENEWAL
Salvatore StockhamRussiaIoni Bowcher UNQUALIFIED
Kadeem FlosiRussiaAsiya Javayant UNQUALIFIED
Deepesh ChuiFranceAnna Fali RENEWAL
Jefferson SchemmerCanadaOnyama Limba NEW
Claire TollnerIndiaOnyama Limba PROPOSAL
Kadeem FlosiArgentinaIvan Magalhaes RENEWAL
Aika InouyeItalyXuxue Feng NEW
Sinclair WaycottFranceAsiya Javayant QUALIFIED
James ButtIndiaElwin Sharvill NEGOTIATION
Johnson SergiRussiaElwin Sharvill PROPOSAL
Aditya KuskoBrazilElwin Sharvill QUALIFIED
Greenwood BologniaBrazilStephen Shaw NEW
Arvin AlbaresSpainOnyama Limba NEW
Smith GlickUnited KingdomXuxue Feng PROPOSAL
Julie StensethArgentinaOnyama Limba NEGOTIATION
Leja CaldareraAustraliaStephen Shaw QUALIFIED
Tony FollerAustraliaBernardo Dominic QUALIFIED
Claire TollnerBrazilStephen Shaw UNQUALIFIED
Arvin AlbaresRussiaBernardo Dominic UNQUALIFIED
Cody SaylorsItalyElwin Sharvill PROPOSAL
Silvio SlusarskiUnited KingdomXuxue Feng QUALIFIED
Johnson SergiArgentinaElwin Sharvill NEW
Leon OldroydRussiaXuxue Feng NEW
Adams MorascaFranceAsiya Javayant NEW
Kadeem FlosiRussiaBernardo Dominic QUALIFIED
Izzy GarufiGermanyStephen Shaw PROPOSAL
Aika InouyeIndiaAsiya Javayant PROPOSAL
Munro FerenczJapanIvan Magalhaes QUALIFIED
Jefferson SchemmerFranceStephen Shaw NEW
Darci PoquetteUnited KingdomOnyama Limba RENEWAL
Isabel BowleyJapanIvan Magalhaes NEW
Alejandro PerinRussiaAmy Elsner QUALIFIED
Darci PoquetteIndiaAmy Elsner UNQUALIFIED
David DarakjyIndiaIvan Magalhaes RENEWAL
Jennifer AmigonBrazilIvan Magalhaes UNQUALIFIED
Jennifer AmigonGermanyAsiya Javayant PROPOSAL
Jennifer AmigonSpainElwin Sharvill NEGOTIATION
Arvin AlbaresCanadaElwin Sharvill UNQUALIFIED
Misaki RoysterRussiaIoni Bowcher UNQUALIFIED
David DarakjyUnited KingdomStephen Shaw NEGOTIATION
Salvatore StockhamFranceOnyama Limba QUALIFIED
Chavez BriddickFranceBernardo Dominic NEW
Chavez BriddickJapanOnyama Limba PROPOSAL
Johnson SergiSpainXuxue Feng RENEWAL
Johnson SergiIndiaXuxue Feng RENEWAL
Horizontal
NameCountryRepresentativeStatus
Ricardo GauchoAustraliaOnyama Limba UNQUALIFIED
Antonio CaudyUnited KingdomIoni Bowcher RENEWAL
Jones VocelkaSpainIvan Magalhaes UNQUALIFIED
Maisha RulapaughUnited KingdomXuxue Feng RENEWAL
Octavia MaletGermanyStephen Shaw NEW
Sinclair WaycottFranceOnyama Limba PROPOSAL
Munro FerenczGermanyIvan Magalhaes NEW
Emily WhobreyCanadaXuxue Feng NEGOTIATION
Mujtaba NickaJapanXuxue Feng RENEWAL
Aditya KuskoUnited KingdomAsiya Javayant RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Sinclair WaycottRussia2026-05-15Dorl, James J Esq NEGOTIATION35Elwin Sharvill
1001David DarakjyGermany2026-05-20Chanay, Jeffrey A Esq QUALIFIED42Stephen Shaw
1002Faith GillianBrazil2026-06-10Chanay, Jeffrey A Esq UNQUALIFIED7Stephen Shaw
1003Izzy GarufiGermany2026-05-31King, Christopher A Esq PROPOSAL3Asiya Javayant
1004Aditya KuskoIndia2026-06-09Commercial Press PROPOSAL1Amy Elsner
1005Costa DilliardItaly2026-05-28Rangoni Of Florence NEGOTIATION40Onyama Limba
1006Jefferson SchemmerArgentina2026-05-24Buckley Miller Wright QUALIFIED36Stephen Shaw
1007Silvio SlusarskiCanada2026-05-26Rousseaux, Michael Esq NEW91Ioni Bowcher
1008Kaitlin OstroskyJapan2026-06-04Commercial Press RENEWAL82Xuxue Feng
1009Arvin AlbaresFrance2026-05-23Feltz Printing Service NEW96Anna Fali
1010Munro FerenczSpain2026-06-07Printing Dimensions QUALIFIED99Amy Elsner
1011Chavez BriddickBrazil2026-05-22Truhlar And Truhlar Attys NEW42Xuxue Feng
1012Silvio SlusarskiJapan2026-06-05Feiner Bros NEGOTIATION8Stephen Shaw
1013Costa DilliardArgentina2026-05-17Rangoni Of Florence QUALIFIED98Amy Elsner
1014Salvatore StockhamArgentina2026-06-01Feiner Bros NEW32Asiya Javayant
1015Aditya KuskoIndia2026-05-31Rousseaux, Michael Esq PROPOSAL78Elwin Sharvill
1016Tony FollerAustralia2026-06-08King, Christopher A Esq NEW6Ioni Bowcher
1017Darci PoquetteGermany2026-06-01King, Christopher A Esq QUALIFIED94Ioni Bowcher
1018Smith GlickGermany2026-06-04Morlong Associates NEGOTIATION24Ioni Bowcher
1019Silvio SlusarskiUnited Kingdom2026-05-24Chanay, Jeffrey A Esq QUALIFIED8Xuxue Feng
1020Johnson SergiAustralia2026-06-03Feltz Printing Service NEGOTIATION95Asiya Javayant
1021Jeanfrancois VenereGermany2026-05-17Rangoni Of Florence UNQUALIFIED40Bernardo Dominic
1022Kadeem FlosiBrazil2026-05-26King, Christopher A Esq UNQUALIFIED58Amy Elsner
1023Deepesh ChuiSpain2026-06-05Feltz Printing Service UNQUALIFIED96Bernardo Dominic
1024Clifford RimUnited Kingdom2026-06-12King, Christopher A Esq QUALIFIED86Asiya Javayant
1025Chavez BriddickRussia2026-05-16King, Christopher A Esq QUALIFIED0Onyama Limba
1026Arvin AlbaresCanada2026-05-21Chemel, James L Cpa QUALIFIED74Bernardo Dominic
1027Smith GlickArgentina2026-06-11Printing Dimensions UNQUALIFIED25Ioni Bowcher
1028Maisha RulapaughCanada2026-05-22Chapman, Ross E Esq RENEWAL7Anna Fali
1029Munro FerenczIndia2026-06-10Truhlar And Truhlar Attys QUALIFIED81Anna Fali
1030Costa DilliardArgentina2026-05-16Chanay, Jeffrey A Esq QUALIFIED63Bernardo Dominic
1031Sinclair WaycottUnited Kingdom2026-05-27Rangoni Of Florence NEW38Bernardo Dominic
1032Mayumi KolmetzSpain2026-05-16Feltz Printing Service QUALIFIED94Elwin Sharvill
1033Cody SaylorsFrance2026-05-25Truhlar And Truhlar Attys NEW69Ivan Magalhaes
1034Johnson SergiGermany2026-05-16Benton, John B Jr NEGOTIATION64Amy Elsner
1035Sinclair WaycottGermany2026-06-03Rangoni Of Florence NEW61Anna Fali
1036Jefferson SchemmerArgentina2026-05-18Chemel, James L Cpa RENEWAL19Stephen Shaw
1037Alejandro PerinSpain2026-06-01Feiner Bros UNQUALIFIED71Anna Fali
1038Alejandro PerinGermany2026-05-22King, Christopher A Esq PROPOSAL72Bernardo Dominic
1039Rodrigues CampainSpain2026-05-26Rangoni Of Florence PROPOSAL68Ivan Magalhaes
1040Ricardo GauchoUnited Kingdom2026-06-01Chanay, Jeffrey A Esq NEW49Onyama Limba
1041Misaki RoysterItaly2026-06-11Printing Dimensions NEGOTIATION15Amy Elsner
1042Ivar PaprockiIndia2026-06-11Feiner Bros UNQUALIFIED27Ioni Bowcher
1043James ButtRussia2026-06-07Benton, John B Jr QUALIFIED65Ivan Magalhaes
1044Mayumi KolmetzBrazil2026-06-09Dorl, James J Esq PROPOSAL60Bernardo Dominic
1045Jeanfrancois VenereArgentina2026-05-20Dorl, James J Esq NEW45Bernardo Dominic
1046Kadeem FlosiFrance2026-06-09Chanay, Jeffrey A Esq QUALIFIED38Ioni Bowcher
1047Faith GillianSpain2026-06-06Printing Dimensions PROPOSAL46Onyama Limba
1048Wickens NestleFrance2026-06-07Buckley Miller Wright PROPOSAL88Xuxue Feng
1049Jefferson SchemmerUnited Kingdom2026-05-25Truhlar And Truhlar Attys NEW25Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Leon OldroydJapanAnna Fali NEGOTIATION
Faith GillianArgentinaElwin Sharvill QUALIFIED
Maisha RulapaughGermanyOnyama Limba RENEWAL
Claire TollnerSpainAmy Elsner QUALIFIED
David DarakjySpainIoni Bowcher NEW
Aika InouyeIndiaAnna Fali UNQUALIFIED
Leja CaldareraSpainBernardo Dominic NEW
Johnson SergiIndiaBernardo Dominic UNQUALIFIED
Munro FerenczJapanXuxue Feng UNQUALIFIED
Stacey MacleadCanadaElwin Sharvill NEGOTIATION
David DarakjyIndiaBernardo Dominic RENEWAL
Sinclair WaycottFranceElwin Sharvill NEGOTIATION
Isabel BowleySpainStephen Shaw QUALIFIED
Munro FerenczItalyElwin Sharvill QUALIFIED
Salvatore StockhamBrazilElwin Sharvill PROPOSAL
Murillo MaletItalyStephen Shaw UNQUALIFIED
Aditya KuskoRussiaElwin Sharvill QUALIFIED
Chavez BriddickGermanyXuxue Feng NEGOTIATION
Ashley DoeItalyOnyama Limba RENEWAL
Faith GillianJapanAsiya Javayant NEW
Nicolas IturbideFranceElwin Sharvill PROPOSAL
Jeanfrancois VenereCanadaAmy Elsner NEGOTIATION
Wickens NestleGermanyIvan Magalhaes NEGOTIATION
Mayumi KolmetzUnited KingdomXuxue Feng PROPOSAL
Isabel BowleyJapanIvan Magalhaes PROPOSAL
Aika InouyeBrazilAmy Elsner UNQUALIFIED
Clifford RimFranceElwin Sharvill RENEWAL
Kadeem FlosiBrazilBernardo Dominic PROPOSAL
Faith GillianRussiaAnna Fali PROPOSAL
Aruna FigeroaRussiaAnna Fali NEGOTIATION
Cody SaylorsFranceIoni Bowcher RENEWAL
Alejandro PerinIndiaBernardo Dominic NEW
Aika InouyeGermanyIvan Magalhaes NEGOTIATION
Maria MarrierSpainAmy Elsner NEGOTIATION
Faith GillianAustraliaIoni Bowcher UNQUALIFIED
Smith GlickArgentinaIoni Bowcher UNQUALIFIED
Jones VocelkaGermanyAsiya Javayant RENEWAL
Emily WhobreyCanadaAsiya Javayant NEGOTIATION
Tony FollerArgentinaIvan Magalhaes QUALIFIED
Isabel BowleyRussiaBernardo Dominic RENEWAL
Arvin AlbaresFranceXuxue Feng NEGOTIATION
Julie StensethIndiaAsiya Javayant NEGOTIATION
Mayumi KolmetzBrazilIoni Bowcher NEW
Munro FerenczIndiaAmy Elsner NEW
Jennifer AmigonSpainStephen Shaw UNQUALIFIED
Stacey MacleadRussiaIoni Bowcher RENEWAL
Aruna FigeroaSpainIvan Magalhaes PROPOSAL
Alejandro PerinFranceIoni Bowcher NEW
Juan WieserJapanBernardo Dominic NEGOTIATION
Leja CaldareraFranceAmy Elsner PROPOSAL
Frozen Columns
Name
Jennifer Amigon
Smith Glick
Kaitlin Ostrosky
Maria Marrier
Clifford Rim
Maisha Rulapaugh
Jones Vocelka
Izzy Garufi
Julie Stenseth
Izzy Garufi
Jennifer Amigon
Jeanfrancois Venere
Salvatore Stockham
Mayumi Kolmetz
Isabel Bowley
David Darakjy
James Butt
Costa Dilliard
Rodrigues Campain
Isabel Bowley
Morrow Ruta
Chavez Briddick
Darci Poquette
Aditya Kusko
Aruna Figeroa
Leja Caldarera
Izzy Garufi
David Darakjy
Francesco Shinko
Darci Poquette
Darci Poquette
Morrow Ruta
Jeanfrancois Venere
Emily Whobrey
Darci Poquette
Misaki Royster
Kaitlin Ostrosky
David Darakjy
Murillo Malet
Deepesh Chui
Isabel Bowley
Ivar Paprocki
Nicolas Iturbide
Arvin Albares
Emily Whobrey
Misaki Royster
Leja Caldarera
Jones Vocelka
Johnson Sergi
Alejandro Perin
IdCountryDate
1000Australia2026-06-08
1001Italy2026-05-22
1002India2026-06-12
1003Spain2026-06-04
1004Japan2026-06-01
1005India2026-05-14
1006Germany2026-05-22
1007Argentina2026-06-07
1008Australia2026-05-31
1009Russia2026-05-24
1010Australia2026-05-24
1011France2026-05-30
1012Argentina2026-05-18
1013Spain2026-05-19
1014France2026-05-21
1015Brazil2026-05-19
1016France2026-05-15
1017Italy2026-05-18
1018Italy2026-05-17
1019Germany2026-05-20
1020Brazil2026-05-14
1021Japan2026-06-07
1022Germany2026-05-30
1023Germany2026-06-05
1024Germany2026-05-25
1025Argentina2026-06-11
1026India2026-06-07
1027Australia2026-05-19
1028Canada2026-06-10
1029Argentina2026-05-25
1030Brazil2026-05-15
1031Russia2026-05-25
1032Japan2026-05-20
1033India2026-06-02
1034Germany2026-05-15
1035Australia2026-06-04
1036Spain2026-06-01
1037India2026-06-07
1038Japan2026-05-23
1039Brazil2026-06-02
1040Australia2026-05-23
1041Argentina2026-06-10
1042Canada2026-05-25
1043Russia2026-05-15
1044Italy2026-05-27
1045Canada2026-05-24
1046Italy2026-06-07
1047Italy2026-05-15
1048Spain2026-05-30
1049Spain2026-06-10

On-Demand Data

NameIdCountryDate
Kaitlin Ostrosky1000France2026-05-25
Izzy Garufi1001India2026-05-31
Deepesh Chui1002Spain2026-06-12
Claire Tollner1003Italy2026-05-22
Jones Vocelka1004Spain2026-05-23
Johnson Sergi1005Germany2026-05-23
Aditya Kusko1006India2026-05-16
Greenwood Bolognia1007Brazil2026-05-14
Rodrigues Campain1008Germany2026-05-29
Chavez Briddick1009India2026-06-04
Deepesh Chui1010Japan2026-05-17
Murillo Malet1011France2026-06-12
Leon Oldroyd1012Brazil2026-06-01
Aditya Kusko1013Germany2026-05-26
Mayumi Kolmetz1014Spain2026-05-28
Claire Tollner1015India2026-06-04
Mayumi Kolmetz1016India2026-05-23
Mujtaba Nicka1017Japan2026-06-01
Clifford Rim1018Canada2026-06-05
Munro Ferencz1019India2026-05-23
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
David DarakjyFranceOnyama Limba NEW
Mujtaba NickaItalyAmy Elsner RENEWAL
Kadeem FlosiJapanOnyama Limba UNQUALIFIED
Cody SaylorsGermanyOnyama Limba NEGOTIATION
Adams MorascaIndiaAmy Elsner QUALIFIED
Salvatore StockhamArgentinaIoni Bowcher RENEWAL
Jeanfrancois VenereRussiaElwin Sharvill NEW
Maisha RulapaughArgentinaIoni Bowcher PROPOSAL
Emily WhobreySpainAsiya Javayant UNQUALIFIED
Wickens NestleUnited KingdomXuxue Feng NEGOTIATION
Kadeem FlosiFranceXuxue Feng NEW
Costa DilliardGermanyStephen Shaw NEW
Clifford RimItalyOnyama Limba RENEWAL
Clifford RimItalyAmy Elsner PROPOSAL
Aruna FigeroaJapanOnyama Limba UNQUALIFIED
Murillo MaletArgentinaBernardo Dominic NEW
James ButtAustraliaAmy Elsner QUALIFIED
Kaitlin OstroskyUnited KingdomAsiya Javayant RENEWAL
Antonio CaudyJapanElwin Sharvill PROPOSAL
Greenwood BologniaBrazilAnna Fali PROPOSAL
Murillo MaletJapanIvan Magalhaes RENEWAL
Wickens NestleArgentinaAsiya Javayant PROPOSAL
Ivar PaprockiArgentinaElwin Sharvill NEGOTIATION
Munro FerenczArgentinaElwin Sharvill NEW
Darci PoquetteArgentinaIoni Bowcher RENEWAL
Nicolas IturbideSpainAmy Elsner NEGOTIATION
Adams MorascaCanadaIoni Bowcher RENEWAL
Morrow RutaArgentinaXuxue Feng NEGOTIATION
Maria MarrierIndiaOnyama Limba NEW
Tony FollerItalyAnna Fali QUALIFIED
Kadeem FlosiItalyAnna Fali UNQUALIFIED
Jefferson SchemmerSpainStephen Shaw QUALIFIED
Greenwood BologniaItalyAmy Elsner PROPOSAL
Jeanfrancois VenereRussiaIoni Bowcher NEGOTIATION
Aruna FigeroaUnited KingdomXuxue Feng PROPOSAL
Nicolas IturbideArgentinaBernardo Dominic UNQUALIFIED
Adams MorascaJapanAmy Elsner NEGOTIATION
Alejandro PerinJapanAmy Elsner NEGOTIATION
Costa DilliardFranceIvan Magalhaes NEW
Ricardo GauchoItalyOnyama 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>