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
Ashley DoeBrazilXuxue Feng NEW
Murillo MaletIndiaAsiya Javayant RENEWAL
Greenwood BologniaCanadaIoni Bowcher RENEWAL
Jeanfrancois VenereArgentinaXuxue Feng QUALIFIED
Kadeem FlosiAustraliaAmy Elsner QUALIFIED
Tony FollerItalyAsiya Javayant RENEWAL
Costa DilliardItalyAmy Elsner QUALIFIED
Arvin AlbaresRussiaStephen Shaw RENEWAL
Munro FerenczSpainElwin Sharvill QUALIFIED
Deepesh ChuiJapanOnyama Limba NEGOTIATION
Jones VocelkaJapanAmy Elsner NEGOTIATION
Izzy GarufiUnited KingdomStephen Shaw NEW
Aditya KuskoUnited KingdomIoni Bowcher UNQUALIFIED
Morrow RutaGermanyAnna Fali QUALIFIED
Jennifer AmigonRussiaStephen Shaw PROPOSAL
Salvatore StockhamItalyBernardo Dominic UNQUALIFIED
Mujtaba NickaBrazilAnna Fali UNQUALIFIED
Sinclair WaycottSpainAnna Fali PROPOSAL
Emily WhobreyJapanElwin Sharvill NEW
Juan WieserItalyBernardo Dominic NEW
Octavia MaletAustraliaAsiya Javayant PROPOSAL
Julie StensethJapanStephen Shaw NEGOTIATION
Wickens NestleUnited KingdomIvan Magalhaes QUALIFIED
Munro FerenczSpainBernardo Dominic UNQUALIFIED
Isabel BowleyArgentinaIoni Bowcher NEW
Arvin AlbaresArgentinaIvan Magalhaes RENEWAL
Leon OldroydUnited KingdomBernardo Dominic NEGOTIATION
Mayumi KolmetzAustraliaElwin Sharvill QUALIFIED
James ButtAustraliaOnyama Limba NEGOTIATION
Salvatore StockhamArgentinaXuxue Feng QUALIFIED
Costa DilliardArgentinaAsiya Javayant UNQUALIFIED
Darci PoquetteAustraliaElwin Sharvill PROPOSAL
Juan WieserFranceAsiya Javayant NEGOTIATION
Aruna FigeroaAustraliaAmy Elsner UNQUALIFIED
Sinclair WaycottGermanyIvan Magalhaes QUALIFIED
Silvio SlusarskiSpainBernardo Dominic QUALIFIED
Alejandro PerinJapanAnna Fali NEGOTIATION
Tony FollerSpainAnna Fali PROPOSAL
Kaitlin OstroskySpainXuxue Feng RENEWAL
Silvio SlusarskiJapanElwin Sharvill RENEWAL
Leja CaldareraJapanIoni Bowcher QUALIFIED
Antonio CaudyRussiaAmy Elsner QUALIFIED
Jefferson SchemmerIndiaIvan Magalhaes QUALIFIED
Wickens NestleCanadaIvan Magalhaes NEGOTIATION
Tony FollerRussiaIvan Magalhaes RENEWAL
Kaitlin OstroskyJapanXuxue Feng UNQUALIFIED
Adams MorascaSpainStephen Shaw UNQUALIFIED
Aika InouyeItalyOnyama Limba PROPOSAL
Costa DilliardArgentinaIvan Magalhaes QUALIFIED
Smith GlickFranceAmy Elsner PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Chavez BriddickRussiaXuxue Feng QUALIFIED
Maria MarrierArgentinaIvan Magalhaes RENEWAL
Clifford RimJapanAsiya Javayant QUALIFIED
Tony FollerRussiaAnna Fali NEW
James ButtSpainIvan Magalhaes QUALIFIED
Wickens NestleJapanXuxue Feng PROPOSAL
Faith GillianAustraliaAnna Fali RENEWAL
Ivar PaprockiIndiaAnna Fali RENEWAL
Alejandro PerinArgentinaAmy Elsner NEW
Jennifer AmigonBrazilAsiya Javayant RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Tony FollerRussia2026-04-17Chapman, Ross E Esq PROPOSAL84Bernardo Dominic
1001David DarakjyAustralia2026-04-13Printing Dimensions QUALIFIED95Xuxue Feng
1002Johnson SergiArgentina2026-04-19Rangoni Of Florence QUALIFIED73Ioni Bowcher
1003Clifford RimSpain2026-04-12Chanay, Jeffrey A Esq NEGOTIATION36Stephen Shaw
1004Antonio CaudyGermany2026-05-06Chemel, James L Cpa PROPOSAL35Ioni Bowcher
1005Adams MorascaIndia2026-04-19Dorl, James J Esq NEW67Elwin Sharvill
1006Arvin AlbaresSpain2026-04-21Truhlar And Truhlar Attys UNQUALIFIED96Stephen Shaw
1007Munro FerenczCanada2026-04-16Chapman, Ross E Esq NEGOTIATION60Bernardo Dominic
1008Kaitlin OstroskyJapan2026-04-25Truhlar And Truhlar Attys NEGOTIATION84Amy Elsner
1009Jennifer AmigonSpain2026-04-21King, Christopher A Esq UNQUALIFIED99Bernardo Dominic
1010Maria MarrierItaly2026-04-26King, Christopher A Esq UNQUALIFIED5Stephen Shaw
1011Maisha RulapaughItaly2026-04-23Truhlar And Truhlar Attys PROPOSAL27Stephen Shaw
1012Jeanfrancois VenereAustralia2026-05-04King, Christopher A Esq NEW61Onyama Limba
1013Maisha RulapaughArgentina2026-04-22Benton, John B Jr QUALIFIED46Bernardo Dominic
1014Juan WieserFrance2026-04-12King, Christopher A Esq NEW86Ioni Bowcher
1015Johnson SergiGermany2026-04-20Morlong Associates RENEWAL6Xuxue Feng
1016Costa DilliardItaly2026-04-22Printing Dimensions NEW96Asiya Javayant
1017Julie StensethAustralia2026-04-27Dorl, James J Esq RENEWAL45Ioni Bowcher
1018Murillo MaletRussia2026-04-26Commercial Press NEW94Bernardo Dominic
1019Jones VocelkaJapan2026-04-24Morlong Associates NEGOTIATION69Amy Elsner
1020Octavia MaletAustralia2026-04-25Feltz Printing Service QUALIFIED48Onyama Limba
1021Faith GillianArgentina2026-05-09Printing Dimensions UNQUALIFIED81Ivan Magalhaes
1022Misaki RoysterSpain2026-04-12Chanay, Jeffrey A Esq PROPOSAL41Onyama Limba
1023Juan WieserIndia2026-04-28Morlong Associates RENEWAL84Amy Elsner
1024Mujtaba NickaIndia2026-04-14Benton, John B Jr NEW76Anna Fali
1025Morrow RutaArgentina2026-04-19Rangoni Of Florence UNQUALIFIED92Asiya Javayant
1026Emily WhobreyFrance2026-04-11Rousseaux, Michael Esq RENEWAL4Elwin Sharvill
1027Silvio SlusarskiSpain2026-04-13Truhlar And Truhlar Attys NEW73Stephen Shaw
1028Mayumi KolmetzAustralia2026-05-03Buckley Miller Wright UNQUALIFIED88Amy Elsner
1029Claire TollnerAustralia2026-04-13Benton, John B Jr PROPOSAL55Ioni Bowcher
1030Costa DilliardUnited Kingdom2026-04-29Chanay, Jeffrey A Esq UNQUALIFIED98Elwin Sharvill
1031James ButtUnited Kingdom2026-04-26King, Christopher A Esq UNQUALIFIED76Xuxue Feng
1032James ButtFrance2026-04-22Rangoni Of Florence NEGOTIATION96Xuxue Feng
1033Jeanfrancois VenereArgentina2026-04-23Chemel, James L Cpa QUALIFIED14Asiya Javayant
1034Salvatore StockhamFrance2026-04-29Buckley Miller Wright RENEWAL62Ioni Bowcher
1035Tony FollerJapan2026-05-06Chanay, Jeffrey A Esq UNQUALIFIED98Bernardo Dominic
1036Leon OldroydIndia2026-04-20Commercial Press NEGOTIATION58Amy Elsner
1037Maria MarrierCanada2026-05-06Feltz Printing Service NEGOTIATION25Bernardo Dominic
1038Costa DilliardRussia2026-04-12Benton, John B Jr PROPOSAL31Anna Fali
1039Smith GlickCanada2026-04-23Truhlar And Truhlar Attys RENEWAL20Stephen Shaw
1040Smith GlickFrance2026-04-22Commercial Press NEGOTIATION53Xuxue Feng
1041Claire TollnerSpain2026-04-13Commercial Press NEGOTIATION46Amy Elsner
1042Morrow RutaRussia2026-04-26Benton, John B Jr QUALIFIED16Bernardo Dominic
1043Darci PoquetteFrance2026-04-18Dorl, James J Esq NEW26Ivan Magalhaes
1044Maria MarrierUnited Kingdom2026-04-28Feiner Bros NEW18Elwin Sharvill
1045Cody SaylorsItaly2026-04-22Feiner Bros NEW8Onyama Limba
1046Costa DilliardRussia2026-05-07Chanay, Jeffrey A Esq UNQUALIFIED93Stephen Shaw
1047James ButtSpain2026-04-28Rousseaux, Michael Esq NEGOTIATION99Xuxue Feng
1048Greenwood BologniaBrazil2026-04-22Dorl, James J Esq PROPOSAL12Onyama Limba
1049Munro FerenczBrazil2026-05-07Dorl, James J Esq UNQUALIFIED94Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Aditya KuskoCanadaAnna Fali UNQUALIFIED
Silvio SlusarskiBrazilXuxue Feng UNQUALIFIED
Morrow RutaCanadaAmy Elsner QUALIFIED
Antonio CaudyAustraliaIoni Bowcher NEW
Ivar PaprockiIndiaStephen Shaw NEW
Misaki RoysterFranceAsiya Javayant PROPOSAL
Munro FerenczSpainAsiya Javayant UNQUALIFIED
Izzy GarufiAustraliaXuxue Feng RENEWAL
Antonio CaudyRussiaAnna Fali NEW
Chavez BriddickBrazilIvan Magalhaes UNQUALIFIED
Jones VocelkaAustraliaElwin Sharvill UNQUALIFIED
Cody SaylorsAustraliaAmy Elsner NEGOTIATION
Costa DilliardIndiaBernardo Dominic UNQUALIFIED
Juan WieserItalyAmy Elsner NEW
Costa DilliardRussiaElwin Sharvill PROPOSAL
Mujtaba NickaBrazilIvan Magalhaes UNQUALIFIED
Maisha RulapaughUnited KingdomAnna Fali RENEWAL
Jennifer AmigonBrazilAmy Elsner PROPOSAL
Morrow RutaItalyIoni Bowcher QUALIFIED
Silvio SlusarskiItalyAmy Elsner UNQUALIFIED
Wickens NestleBrazilElwin Sharvill NEGOTIATION
Ricardo GauchoCanadaXuxue Feng RENEWAL
Greenwood BologniaIndiaElwin Sharvill NEGOTIATION
Wickens NestleCanadaIvan Magalhaes QUALIFIED
Antonio CaudyArgentinaAnna Fali NEGOTIATION
David DarakjyAustraliaAsiya Javayant UNQUALIFIED
Chavez BriddickSpainElwin Sharvill NEGOTIATION
Leja CaldareraUnited KingdomIvan Magalhaes PROPOSAL
Adams MorascaIndiaXuxue Feng UNQUALIFIED
Maria MarrierUnited KingdomOnyama Limba RENEWAL
James ButtCanadaIvan Magalhaes PROPOSAL
Ricardo GauchoSpainIoni Bowcher RENEWAL
David DarakjyFranceIoni Bowcher RENEWAL
Salvatore StockhamItalyBernardo Dominic NEGOTIATION
Ricardo GauchoUnited KingdomAsiya Javayant NEGOTIATION
Ashley DoeFranceXuxue Feng QUALIFIED
Adams MorascaItalyElwin Sharvill NEW
Jefferson SchemmerRussiaBernardo Dominic UNQUALIFIED
Maria MarrierIndiaAnna Fali UNQUALIFIED
James ButtFranceElwin Sharvill UNQUALIFIED
Greenwood BologniaBrazilIoni Bowcher NEW
Mujtaba NickaFranceStephen Shaw UNQUALIFIED
Ricardo GauchoRussiaIvan Magalhaes RENEWAL
Ricardo GauchoRussiaAmy Elsner RENEWAL
Octavia MaletGermanyAsiya Javayant NEGOTIATION
Smith GlickCanadaOnyama Limba UNQUALIFIED
Stacey MacleadJapanBernardo Dominic UNQUALIFIED
Ricardo GauchoItalyAsiya Javayant NEW
Maria MarrierFranceIvan Magalhaes NEW
Aditya KuskoGermanyIoni Bowcher PROPOSAL
Frozen Columns
Name
Clifford Rim
Jefferson Schemmer
Tony Foller
Isabel Bowley
Costa Dilliard
Clifford Rim
Munro Ferencz
Silvio Slusarski
Jones Vocelka
Ashley Doe
Juan Wieser
Ashley Doe
Aruna Figeroa
Tony Foller
Nicolas Iturbide
Maisha Rulapaugh
Arvin Albares
Smith Glick
Mujtaba Nicka
Leja Caldarera
Salvatore Stockham
Clifford Rim
Jennifer Amigon
Salvatore Stockham
David Darakjy
Stacey Maclead
Aditya Kusko
Jeanfrancois Venere
Aditya Kusko
Arvin Albares
Chavez Briddick
Smith Glick
Deepesh Chui
Aika Inouye
Costa Dilliard
Aditya Kusko
Stacey Maclead
Julie Stenseth
Jennifer Amigon
Wickens Nestle
Darci Poquette
Juan Wieser
Ashley Doe
Francesco Shinko
Johnson Sergi
Stacey Maclead
Adams Morasca
Juan Wieser
Johnson Sergi
Aika Inouye
IdCountryDate
1000France2026-05-04
1001Italy2026-05-07
1002Russia2026-04-17
1003Canada2026-04-21
1004United Kingdom2026-05-02
1005Australia2026-04-19
1006Italy2026-05-01
1007Canada2026-04-15
1008Australia2026-05-08
1009France2026-04-23
1010India2026-04-13
1011Brazil2026-04-21
1012Spain2026-04-26
1013India2026-05-04
1014Brazil2026-04-22
1015Canada2026-04-12
1016Spain2026-04-30
1017Argentina2026-04-26
1018India2026-04-20
1019Brazil2026-04-23
1020Brazil2026-04-11
1021India2026-04-30
1022France2026-04-27
1023France2026-04-28
1024Canada2026-05-06
1025France2026-04-13
1026Russia2026-04-26
1027India2026-04-13
1028Brazil2026-04-28
1029Russia2026-05-06
1030Japan2026-04-22
1031Spain2026-04-27
1032Japan2026-04-29
1033Canada2026-04-15
1034Italy2026-04-14
1035Brazil2026-04-11
1036United Kingdom2026-05-08
1037Russia2026-05-02
1038Germany2026-04-19
1039Italy2026-05-07
1040United Kingdom2026-05-02
1041Spain2026-04-27
1042Italy2026-04-27
1043India2026-04-24
1044India2026-04-21
1045Spain2026-05-05
1046Russia2026-04-17
1047Japan2026-04-17
1048Canada2026-04-13
1049Canada2026-05-08

On-Demand Data

NameIdCountryDate
Mayumi Kolmetz1000Australia2026-04-17
Isabel Bowley1001Italy2026-04-12
Kadeem Flosi1002Italy2026-04-23
Deepesh Chui1003Australia2026-04-28
Claire Tollner1004India2026-04-25
Kadeem Flosi1005Canada2026-05-06
Jeanfrancois Venere1006Germany2026-04-13
Emily Whobrey1007France2026-04-26
Julie Stenseth1008Canada2026-05-09
Chavez Briddick1009France2026-04-24
Deepesh Chui1010India2026-04-25
Francesco Shinko1011Germany2026-05-07
Smith Glick1012Brazil2026-04-28
Ivar Paprocki1013United Kingdom2026-04-10
Emily Whobrey1014Italy2026-05-04
Juan Wieser1015Brazil2026-04-29
Jeanfrancois Venere1016India2026-04-23
Leon Oldroyd1017Spain2026-04-28
Aruna Figeroa1018Argentina2026-04-18
Aditya Kusko1019France2026-05-08
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Maisha RulapaughSpainBernardo Dominic PROPOSAL
Claire TollnerIndiaIoni Bowcher RENEWAL
Leon OldroydFranceXuxue Feng QUALIFIED
Ivar PaprockiArgentinaAmy Elsner UNQUALIFIED
Alejandro PerinSpainIvan Magalhaes UNQUALIFIED
Johnson SergiRussiaIoni Bowcher RENEWAL
Tony FollerGermanyElwin Sharvill PROPOSAL
Salvatore StockhamIndiaBernardo Dominic RENEWAL
Adams MorascaCanadaXuxue Feng NEGOTIATION
Rodrigues CampainArgentinaAsiya Javayant NEW
Octavia MaletCanadaOnyama Limba NEW
Costa DilliardRussiaAnna Fali NEGOTIATION
Misaki RoysterJapanXuxue Feng NEW
Kaitlin OstroskyBrazilOnyama Limba QUALIFIED
Misaki RoysterBrazilStephen Shaw RENEWAL
Leon OldroydGermanyAnna Fali QUALIFIED
Jennifer AmigonJapanXuxue Feng NEGOTIATION
Smith GlickIndiaStephen Shaw UNQUALIFIED
Greenwood BologniaIndiaStephen Shaw RENEWAL
Kadeem FlosiFranceAsiya Javayant NEW
Stacey MacleadIndiaStephen Shaw NEGOTIATION
Clifford RimIndiaIoni Bowcher NEW
Jeanfrancois VenereCanadaXuxue Feng RENEWAL
Jeanfrancois VenereCanadaIvan Magalhaes QUALIFIED
Rodrigues CampainFranceIoni Bowcher RENEWAL
Juan WieserCanadaAnna Fali RENEWAL
Jeanfrancois VenereSpainIoni Bowcher RENEWAL
Jeanfrancois VenereUnited KingdomIoni Bowcher NEGOTIATION
Stacey MacleadRussiaIoni Bowcher PROPOSAL
Johnson SergiIndiaAnna Fali NEGOTIATION
Julie StensethSpainIvan Magalhaes NEW
Misaki RoysterUnited KingdomIvan Magalhaes RENEWAL
Deepesh ChuiGermanyElwin Sharvill QUALIFIED
Jennifer AmigonArgentinaIvan Magalhaes RENEWAL
Clifford RimGermanyXuxue Feng RENEWAL
Ivar PaprockiAustraliaXuxue Feng UNQUALIFIED
Ricardo GauchoAustraliaAsiya Javayant NEW
Maria MarrierAustraliaBernardo Dominic UNQUALIFIED
David DarakjyRussiaIvan Magalhaes UNQUALIFIED
Alejandro PerinArgentinaXuxue Feng PROPOSAL

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