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
Francesco ShinkoItalyIoni Bowcher QUALIFIED
Ivar PaprockiSpainStephen Shaw PROPOSAL
Jennifer AmigonBrazilIoni Bowcher RENEWAL
Leon OldroydArgentinaBernardo Dominic PROPOSAL
Kadeem FlosiAustraliaElwin Sharvill UNQUALIFIED
Julie StensethItalyIvan Magalhaes NEGOTIATION
Claire TollnerGermanyElwin Sharvill PROPOSAL
Antonio CaudyJapanStephen Shaw UNQUALIFIED
Ricardo GauchoCanadaOnyama Limba NEW
Ricardo GauchoCanadaBernardo Dominic QUALIFIED
Maria MarrierAustraliaOnyama Limba PROPOSAL
Smith GlickBrazilElwin Sharvill RENEWAL
Kadeem FlosiSpainAnna Fali RENEWAL
Darci PoquetteJapanBernardo Dominic QUALIFIED
Greenwood BologniaItalyOnyama Limba NEGOTIATION
Leon OldroydFranceXuxue Feng NEW
Leja CaldareraItalyBernardo Dominic UNQUALIFIED
Kadeem FlosiFranceBernardo Dominic NEGOTIATION
Rodrigues CampainBrazilIvan Magalhaes RENEWAL
Maisha RulapaughFranceAnna Fali NEW
Nicolas IturbideFranceAmy Elsner NEW
Francesco ShinkoFranceAsiya Javayant NEGOTIATION
James ButtSpainElwin Sharvill NEGOTIATION
Rodrigues CampainAustraliaIoni Bowcher PROPOSAL
Faith GillianIndiaStephen Shaw PROPOSAL
Leja CaldareraFranceXuxue Feng RENEWAL
James ButtJapanXuxue Feng NEGOTIATION
Mayumi KolmetzSpainOnyama Limba UNQUALIFIED
Maisha RulapaughCanadaAnna Fali NEW
Aika InouyeCanadaXuxue Feng UNQUALIFIED
Deepesh ChuiJapanOnyama Limba RENEWAL
Julie StensethGermanyAnna Fali PROPOSAL
Maisha RulapaughSpainAmy Elsner QUALIFIED
Juan WieserGermanyBernardo Dominic UNQUALIFIED
Deepesh ChuiFranceAmy Elsner RENEWAL
Munro FerenczUnited KingdomStephen Shaw PROPOSAL
Salvatore StockhamIndiaOnyama Limba NEW
Greenwood BologniaUnited KingdomIvan Magalhaes NEGOTIATION
James ButtFranceBernardo Dominic NEGOTIATION
Nicolas IturbideUnited KingdomBernardo Dominic NEW
Aditya KuskoIndiaElwin Sharvill UNQUALIFIED
Julie StensethRussiaAmy Elsner NEW
Silvio SlusarskiJapanAmy Elsner NEGOTIATION
Jones VocelkaAustraliaAsiya Javayant PROPOSAL
Morrow RutaAustraliaAsiya Javayant PROPOSAL
Alejandro PerinIndiaXuxue Feng RENEWAL
Alejandro PerinJapanXuxue Feng UNQUALIFIED
Munro FerenczAustraliaBernardo Dominic QUALIFIED
Stacey MacleadCanadaIoni Bowcher UNQUALIFIED
Mayumi KolmetzCanadaIoni Bowcher UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Silvio SlusarskiJapanIvan Magalhaes NEGOTIATION
Leja CaldareraItalyOnyama Limba NEW
Adams MorascaArgentinaIvan Magalhaes QUALIFIED
Misaki RoysterArgentinaAsiya Javayant NEW
Sinclair WaycottAustraliaXuxue Feng UNQUALIFIED
Darci PoquetteBrazilAmy Elsner UNQUALIFIED
Stacey MacleadAustraliaBernardo Dominic NEGOTIATION
Salvatore StockhamBrazilBernardo Dominic UNQUALIFIED
Aika InouyeIndiaIoni Bowcher RENEWAL
Chavez BriddickJapanIoni Bowcher NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Chavez BriddickCanada2026-04-04Chapman, Ross E Esq NEGOTIATION65Xuxue Feng
1001Octavia MaletSpain2026-03-30Feltz Printing Service PROPOSAL55Xuxue Feng
1002Munro FerenczFrance2026-04-02Chemel, James L Cpa QUALIFIED71Elwin Sharvill
1003Mujtaba NickaArgentina2026-04-04Printing Dimensions PROPOSAL59Onyama Limba
1004Ashley DoeGermany2026-04-07Rousseaux, Michael Esq QUALIFIED53Ivan Magalhaes
1005Misaki RoysterItaly2026-04-02Chanay, Jeffrey A Esq QUALIFIED55Ioni Bowcher
1006Jones VocelkaFrance2026-04-11Benton, John B Jr UNQUALIFIED5Xuxue Feng
1007Ashley DoeCanada2026-04-20Printing Dimensions PROPOSAL71Elwin Sharvill
1008Leja CaldareraRussia2026-03-25Benton, John B Jr PROPOSAL61Anna Fali
1009Sinclair WaycottSpain2026-03-25Rangoni Of Florence UNQUALIFIED70Xuxue Feng
1010Julie StensethArgentina2026-04-21Dorl, James J Esq NEGOTIATION95Ivan Magalhaes
1011Aruna FigeroaCanada2026-04-14Feltz Printing Service PROPOSAL4Amy Elsner
1012Adams MorascaBrazil2026-04-17Buckley Miller Wright NEGOTIATION13Stephen Shaw
1013Julie StensethSpain2026-03-30King, Christopher A Esq QUALIFIED74Ioni Bowcher
1014Kadeem FlosiArgentina2026-04-04Chanay, Jeffrey A Esq RENEWAL47Bernardo Dominic
1015Emily WhobreyAustralia2026-04-12Buckley Miller Wright NEGOTIATION88Asiya Javayant
1016Aruna FigeroaFrance2026-04-18Rangoni Of Florence NEGOTIATION79Ioni Bowcher
1017Wickens NestleJapan2026-04-20Commercial Press QUALIFIED17Ivan Magalhaes
1018Aika InouyeItaly2026-04-17Chemel, James L Cpa NEW91Anna Fali
1019Tony FollerJapan2026-04-06Dorl, James J Esq UNQUALIFIED14Onyama Limba
1020Costa DilliardUnited Kingdom2026-04-16Commercial Press QUALIFIED52Bernardo Dominic
1021Emily WhobreyGermany2026-04-01Buckley Miller Wright QUALIFIED79Bernardo Dominic
1022Leja CaldareraRussia2026-04-20King, Christopher A Esq NEGOTIATION40Amy Elsner
1023Murillo MaletArgentina2026-04-14Chanay, Jeffrey A Esq RENEWAL29Amy Elsner
1024Smith GlickIndia2026-04-11Truhlar And Truhlar Attys NEW4Onyama Limba
1025Leon OldroydFrance2026-04-03Benton, John B Jr RENEWAL0Amy Elsner
1026Antonio CaudyCanada2026-04-17King, Christopher A Esq QUALIFIED74Ivan Magalhaes
1027Cody SaylorsFrance2026-04-09Rangoni Of Florence NEW70Asiya Javayant
1028Jefferson SchemmerBrazil2026-04-15Chemel, James L Cpa UNQUALIFIED94Elwin Sharvill
1029Jeanfrancois VenereRussia2026-03-26Truhlar And Truhlar Attys NEW55Anna Fali
1030Chavez BriddickCanada2026-03-29Commercial Press NEGOTIATION80Bernardo Dominic
1031Isabel BowleyGermany2026-04-11Truhlar And Truhlar Attys QUALIFIED12Ioni Bowcher
1032Nicolas IturbideSpain2026-04-21Feiner Bros QUALIFIED66Asiya Javayant
1033Mayumi KolmetzSpain2026-04-04Morlong Associates NEW19Amy Elsner
1034Jeanfrancois VenereGermany2026-03-29Buckley Miller Wright NEGOTIATION92Stephen Shaw
1035Aruna FigeroaAustralia2026-04-21Commercial Press QUALIFIED65Onyama Limba
1036Johnson SergiGermany2026-04-02Dorl, James J Esq PROPOSAL69Ioni Bowcher
1037Deepesh ChuiRussia2026-04-02Rangoni Of Florence NEGOTIATION83Bernardo Dominic
1038Munro FerenczGermany2026-04-02Dorl, James J Esq PROPOSAL10Ivan Magalhaes
1039Costa DilliardFrance2026-04-03Chanay, Jeffrey A Esq PROPOSAL84Onyama Limba
1040Greenwood BologniaJapan2026-04-17Chemel, James L Cpa NEGOTIATION79Anna Fali
1041Ashley DoeJapan2026-04-07Printing Dimensions RENEWAL77Asiya Javayant
1042Morrow RutaFrance2026-04-07Buckley Miller Wright UNQUALIFIED19Stephen Shaw
1043Claire TollnerSpain2026-04-20King, Christopher A Esq RENEWAL42Onyama Limba
1044Leon OldroydItaly2026-04-09Commercial Press RENEWAL85Bernardo Dominic
1045Ashley DoeJapan2026-04-16Chemel, James L Cpa PROPOSAL27Ivan Magalhaes
1046Sinclair WaycottIndia2026-03-31Chapman, Ross E Esq NEW97Ivan Magalhaes
1047David DarakjySpain2026-03-27Commercial Press NEGOTIATION51Bernardo Dominic
1048Salvatore StockhamAustralia2026-04-15Printing Dimensions RENEWAL18Bernardo Dominic
1049James ButtCanada2026-04-05Rangoni Of Florence NEW65Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Aika InouyeJapanElwin Sharvill QUALIFIED
Chavez BriddickCanadaOnyama Limba PROPOSAL
Rodrigues CampainJapanAnna Fali NEGOTIATION
Leja CaldareraSpainAnna Fali UNQUALIFIED
Murillo MaletSpainBernardo Dominic RENEWAL
Mayumi KolmetzAustraliaIvan Magalhaes NEGOTIATION
Adams MorascaJapanXuxue Feng QUALIFIED
Isabel BowleyCanadaAsiya Javayant NEGOTIATION
Salvatore StockhamIndiaElwin Sharvill NEGOTIATION
Juan WieserGermanyOnyama Limba NEW
Maria MarrierFranceIvan Magalhaes NEGOTIATION
Faith GillianRussiaAmy Elsner QUALIFIED
Leja CaldareraCanadaElwin Sharvill UNQUALIFIED
Johnson SergiArgentinaAmy Elsner RENEWAL
Sinclair WaycottUnited KingdomIvan Magalhaes PROPOSAL
Octavia MaletCanadaIoni Bowcher NEGOTIATION
Mujtaba NickaGermanyAsiya Javayant UNQUALIFIED
Rodrigues CampainAustraliaAnna Fali PROPOSAL
Arvin AlbaresBrazilIvan Magalhaes QUALIFIED
Alejandro PerinIndiaElwin Sharvill NEGOTIATION
Clifford RimCanadaXuxue Feng QUALIFIED
Emily WhobreyIndiaElwin Sharvill PROPOSAL
Arvin AlbaresAustraliaAnna Fali QUALIFIED
Claire TollnerSpainStephen Shaw PROPOSAL
Jones VocelkaJapanBernardo Dominic UNQUALIFIED
Jones VocelkaSpainXuxue Feng PROPOSAL
Cody SaylorsCanadaIoni Bowcher QUALIFIED
David DarakjyCanadaIoni Bowcher NEGOTIATION
David DarakjyAustraliaElwin Sharvill QUALIFIED
Ivar PaprockiUnited KingdomStephen Shaw PROPOSAL
Alejandro PerinSpainElwin Sharvill NEW
Nicolas IturbideArgentinaBernardo Dominic QUALIFIED
Wickens NestleGermanyXuxue Feng UNQUALIFIED
Kaitlin OstroskyIndiaStephen Shaw NEW
Emily WhobreyArgentinaXuxue Feng RENEWAL
Emily WhobreyItalyAnna Fali QUALIFIED
Jefferson SchemmerAustraliaStephen Shaw PROPOSAL
Arvin AlbaresUnited KingdomIoni Bowcher RENEWAL
Adams MorascaArgentinaElwin Sharvill NEW
Murillo MaletIndiaIoni Bowcher PROPOSAL
Emily WhobreyIndiaAmy Elsner NEGOTIATION
David DarakjyFranceAmy Elsner NEGOTIATION
Stacey MacleadSpainAnna Fali PROPOSAL
Munro FerenczArgentinaAnna Fali PROPOSAL
James ButtRussiaAsiya Javayant UNQUALIFIED
Smith GlickRussiaAnna Fali UNQUALIFIED
Francesco ShinkoJapanIoni Bowcher PROPOSAL
Claire TollnerJapanElwin Sharvill NEW
Mayumi KolmetzUnited KingdomXuxue Feng UNQUALIFIED
Arvin AlbaresIndiaElwin Sharvill PROPOSAL
Frozen Columns
Name
Chavez Briddick
Octavia Malet
Arvin Albares
Sinclair Waycott
Adams Morasca
Juan Wieser
Mujtaba Nicka
Adams Morasca
Adams Morasca
Smith Glick
Juan Wieser
Greenwood Bolognia
Jeanfrancois Venere
Francesco Shinko
Julie Stenseth
Johnson Sergi
Emily Whobrey
Greenwood Bolognia
Smith Glick
Murillo Malet
Jefferson Schemmer
Jefferson Schemmer
Smith Glick
Morrow Ruta
Jefferson Schemmer
Aditya Kusko
Sinclair Waycott
Deepesh Chui
James Butt
Greenwood Bolognia
Jennifer Amigon
Clifford Rim
Sinclair Waycott
Deepesh Chui
Arvin Albares
Ricardo Gaucho
Tony Foller
Greenwood Bolognia
Francesco Shinko
Smith Glick
David Darakjy
Silvio Slusarski
Salvatore Stockham
Jeanfrancois Venere
Salvatore Stockham
James Butt
Kadeem Flosi
Isabel Bowley
Jeanfrancois Venere
Alejandro Perin
IdCountryDate
1000Japan2026-04-17
1001India2026-03-26
1002Japan2026-03-28
1003Australia2026-03-27
1004France2026-04-05
1005Australia2026-03-26
1006United Kingdom2026-04-16
1007Russia2026-04-10
1008Germany2026-04-05
1009Spain2026-03-27
1010India2026-04-21
1011Spain2026-04-12
1012India2026-03-30
1013Italy2026-04-02
1014Spain2026-04-06
1015Japan2026-04-01
1016India2026-04-09
1017France2026-04-01
1018India2026-04-07
1019Canada2026-04-04
1020Argentina2026-04-01
1021Australia2026-04-21
1022France2026-04-14
1023Russia2026-03-28
1024Russia2026-04-07
1025Russia2026-04-08
1026Canada2026-03-27
1027Australia2026-03-24
1028Italy2026-04-18
1029France2026-04-17
1030United Kingdom2026-03-29
1031Spain2026-04-19
1032Canada2026-04-05
1033India2026-03-30
1034Germany2026-04-07
1035Spain2026-03-26
1036Italy2026-04-06
1037Canada2026-04-02
1038Spain2026-04-09
1039India2026-04-16
1040Spain2026-04-19
1041Australia2026-03-28
1042France2026-03-24
1043Germany2026-04-21
1044United Kingdom2026-04-02
1045United Kingdom2026-04-11
1046Argentina2026-04-14
1047Germany2026-03-25
1048India2026-03-25
1049Italy2026-04-18

On-Demand Data

NameIdCountryDate
Greenwood Bolognia1000France2026-04-06
Ricardo Gaucho1001Italy2026-03-23
Jeanfrancois Venere1002Germany2026-04-14
Ivar Paprocki1003Russia2026-03-28
Wickens Nestle1004Australia2026-03-31
Maisha Rulapaugh1005France2026-04-20
Ashley Doe1006France2026-03-29
Kadeem Flosi1007Italy2026-04-09
Aika Inouye1008Germany2026-04-06
Ivar Paprocki1009Argentina2026-04-14
Greenwood Bolognia1010France2026-04-16
Maria Marrier1011United Kingdom2026-04-16
Kadeem Flosi1012Brazil2026-04-01
Ivar Paprocki1013France2026-03-31
Kaitlin Ostrosky1014Italy2026-04-16
Maria Marrier1015France2026-04-14
Mayumi Kolmetz1016Japan2026-04-18
Leja Caldarera1017Australia2026-04-09
David Darakjy1018India2026-04-18
Salvatore Stockham1019Brazil2026-04-11
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Adams MorascaGermanyAsiya Javayant NEW
Adams MorascaItalyOnyama Limba PROPOSAL
Ivar PaprockiGermanyAmy Elsner RENEWAL
Stacey MacleadItalyElwin Sharvill NEW
Darci PoquetteCanadaStephen Shaw NEGOTIATION
Leja CaldareraAustraliaIvan Magalhaes NEW
Aditya KuskoAustraliaBernardo Dominic RENEWAL
Aditya KuskoAustraliaIoni Bowcher PROPOSAL
Antonio CaudyFranceStephen Shaw PROPOSAL
Deepesh ChuiCanadaIoni Bowcher NEW
Munro FerenczJapanAmy Elsner RENEWAL
Greenwood BologniaGermanyAnna Fali UNQUALIFIED
Deepesh ChuiRussiaIvan Magalhaes PROPOSAL
Sinclair WaycottJapanStephen Shaw UNQUALIFIED
Morrow RutaFranceStephen Shaw UNQUALIFIED
Stacey MacleadCanadaElwin Sharvill UNQUALIFIED
Leja CaldareraAustraliaXuxue Feng QUALIFIED
Faith GillianFranceIoni Bowcher QUALIFIED
Mayumi KolmetzSpainAnna Fali NEGOTIATION
Antonio CaudyGermanyIvan Magalhaes QUALIFIED
Antonio CaudyRussiaXuxue Feng UNQUALIFIED
Sinclair WaycottJapanXuxue Feng QUALIFIED
Maisha RulapaughGermanyXuxue Feng NEW
Morrow RutaRussiaBernardo Dominic QUALIFIED
Octavia MaletAustraliaAsiya Javayant RENEWAL
Juan WieserArgentinaXuxue Feng NEW
Darci PoquetteSpainAmy Elsner RENEWAL
Tony FollerBrazilXuxue Feng QUALIFIED
Salvatore StockhamUnited KingdomStephen Shaw PROPOSAL
Kadeem FlosiRussiaIoni Bowcher NEW
Murillo MaletCanadaAnna Fali RENEWAL
Jeanfrancois VenereItalyIoni Bowcher NEW
Mujtaba NickaJapanBernardo Dominic NEGOTIATION
Jefferson SchemmerCanadaStephen Shaw QUALIFIED
Antonio CaudyUnited KingdomElwin Sharvill UNQUALIFIED
Stacey MacleadCanadaStephen Shaw QUALIFIED
Juan WieserIndiaIvan Magalhaes PROPOSAL
Jones VocelkaBrazilAmy Elsner RENEWAL
Faith GillianAustraliaAnna Fali NEGOTIATION
Murillo MaletBrazilOnyama 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>