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
Mujtaba NickaAustraliaAnna Fali QUALIFIED
Clifford RimRussiaXuxue Feng NEW
Tony FollerGermanyOnyama Limba PROPOSAL
Maria MarrierJapanIoni Bowcher QUALIFIED
Octavia MaletItalyOnyama Limba RENEWAL
Mayumi KolmetzBrazilStephen Shaw QUALIFIED
Morrow RutaFranceBernardo Dominic NEGOTIATION
Kaitlin OstroskyCanadaOnyama Limba UNQUALIFIED
Izzy GarufiUnited KingdomBernardo Dominic PROPOSAL
Greenwood BologniaArgentinaBernardo Dominic RENEWAL
Antonio CaudyGermanyElwin Sharvill NEGOTIATION
Rodrigues CampainJapanAmy Elsner UNQUALIFIED
Stacey MacleadFranceBernardo Dominic UNQUALIFIED
Murillo MaletJapanElwin Sharvill UNQUALIFIED
Ricardo GauchoItalyIvan Magalhaes UNQUALIFIED
Leon OldroydItalyIoni Bowcher NEGOTIATION
Stacey MacleadFranceBernardo Dominic UNQUALIFIED
Ashley DoeBrazilAsiya Javayant NEGOTIATION
Julie StensethGermanyOnyama Limba NEGOTIATION
Antonio CaudyItalyStephen Shaw NEW
Ricardo GauchoCanadaStephen Shaw QUALIFIED
Kadeem FlosiGermanyXuxue Feng RENEWAL
Murillo MaletFranceBernardo Dominic UNQUALIFIED
Jones VocelkaRussiaIoni Bowcher NEW
Murillo MaletIndiaAnna Fali PROPOSAL
James ButtJapanIvan Magalhaes NEGOTIATION
Sinclair WaycottArgentinaAsiya Javayant NEW
Stacey MacleadUnited KingdomStephen Shaw UNQUALIFIED
David DarakjyRussiaElwin Sharvill UNQUALIFIED
David DarakjyItalyAsiya Javayant NEW
Juan WieserSpainStephen Shaw PROPOSAL
Munro FerenczArgentinaElwin Sharvill UNQUALIFIED
Antonio CaudyGermanyStephen Shaw RENEWAL
Sinclair WaycottCanadaElwin Sharvill NEGOTIATION
Munro FerenczGermanyXuxue Feng RENEWAL
Octavia MaletIndiaXuxue Feng UNQUALIFIED
Arvin AlbaresBrazilAsiya Javayant NEW
Smith GlickUnited KingdomAsiya Javayant NEGOTIATION
Greenwood BologniaIndiaAnna Fali PROPOSAL
David DarakjyAustraliaAmy Elsner PROPOSAL
Kadeem FlosiBrazilAmy Elsner UNQUALIFIED
Costa DilliardFranceIvan Magalhaes QUALIFIED
Kaitlin OstroskyRussiaXuxue Feng NEW
Rodrigues CampainArgentinaAmy Elsner UNQUALIFIED
Mujtaba NickaUnited KingdomAmy Elsner NEW
Izzy GarufiAustraliaOnyama Limba NEGOTIATION
Antonio CaudyJapanAnna Fali QUALIFIED
Maria MarrierRussiaElwin Sharvill PROPOSAL
Aditya KuskoIndiaElwin Sharvill NEGOTIATION
Darci PoquetteIndiaIoni Bowcher PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Deepesh ChuiItalyBernardo Dominic QUALIFIED
Adams MorascaGermanyAnna Fali PROPOSAL
Mujtaba NickaCanadaOnyama Limba QUALIFIED
Nicolas IturbideFranceAmy Elsner UNQUALIFIED
Cody SaylorsCanadaOnyama Limba QUALIFIED
Arvin AlbaresIndiaAnna Fali RENEWAL
James ButtUnited KingdomBernardo Dominic RENEWAL
Murillo MaletAustraliaIvan Magalhaes NEGOTIATION
Sinclair WaycottArgentinaOnyama Limba NEW
Emily WhobreyItalyAsiya Javayant NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Antonio CaudyItaly2025-07-08Feltz Printing Service QUALIFIED48Bernardo Dominic
1001Leja CaldareraIndia2025-07-09Chemel, James L Cpa PROPOSAL44Onyama Limba
1002Antonio CaudySpain2025-07-06Feiner Bros QUALIFIED97Ioni Bowcher
1003Sinclair WaycottItaly2025-07-08Feltz Printing Service UNQUALIFIED39Onyama Limba
1004Johnson SergiAustralia2025-06-30Chanay, Jeffrey A Esq RENEWAL80Asiya Javayant
1005Antonio CaudyBrazil2025-07-08Feltz Printing Service RENEWAL4Anna Fali
1006Claire TollnerFrance2025-06-19King, Christopher A Esq QUALIFIED0Stephen Shaw
1007David DarakjySpain2025-07-12Chanay, Jeffrey A Esq NEGOTIATION35Asiya Javayant
1008Silvio SlusarskiSpain2025-07-09Benton, John B Jr UNQUALIFIED31Anna Fali
1009Smith GlickCanada2025-07-09Chapman, Ross E Esq UNQUALIFIED68Ioni Bowcher
1010Aruna FigeroaAustralia2025-06-28Chemel, James L Cpa UNQUALIFIED68Onyama Limba
1011Antonio CaudyAustralia2025-06-26Feiner Bros QUALIFIED71Ioni Bowcher
1012David DarakjyIndia2025-07-03Benton, John B Jr NEGOTIATION76Ioni Bowcher
1013Tony FollerRussia2025-07-17Feiner Bros RENEWAL65Amy Elsner
1014Antonio CaudyItaly2025-07-18Dorl, James J Esq NEGOTIATION41Bernardo Dominic
1015Chavez BriddickIndia2025-06-28Feiner Bros QUALIFIED12Onyama Limba
1016Aika InouyeAustralia2025-06-27Chapman, Ross E Esq RENEWAL76Amy Elsner
1017Claire TollnerFrance2025-07-14Commercial Press NEW55Ivan Magalhaes
1018Isabel BowleyAustralia2025-06-23Morlong Associates NEW2Stephen Shaw
1019Chavez BriddickCanada2025-07-05Chemel, James L Cpa RENEWAL99Ioni Bowcher
1020Silvio SlusarskiItaly2025-07-15King, Christopher A Esq RENEWAL2Xuxue Feng
1021Aruna FigeroaIndia2025-07-03Feltz Printing Service RENEWAL20Onyama Limba
1022Aika InouyeAustralia2025-07-12Buckley Miller Wright UNQUALIFIED16Anna Fali
1023Francesco ShinkoSpain2025-07-02Chapman, Ross E Esq NEGOTIATION18Amy Elsner
1024Octavia MaletItaly2025-07-02Rousseaux, Michael Esq NEGOTIATION49Onyama Limba
1025David DarakjyGermany2025-07-04Commercial Press RENEWAL51Bernardo Dominic
1026Deepesh ChuiAustralia2025-07-15Chemel, James L Cpa NEGOTIATION27Asiya Javayant
1027Rodrigues CampainUnited Kingdom2025-06-21Morlong Associates QUALIFIED62Onyama Limba
1028Leon OldroydBrazil2025-07-16Feiner Bros PROPOSAL32Onyama Limba
1029Adams MorascaRussia2025-06-19Buckley Miller Wright RENEWAL70Ivan Magalhaes
1030Emily WhobreyCanada2025-07-11Truhlar And Truhlar Attys RENEWAL50Ivan Magalhaes
1031Greenwood BologniaArgentina2025-07-16Truhlar And Truhlar Attys RENEWAL42Anna Fali
1032Murillo MaletArgentina2025-06-19Feiner Bros RENEWAL79Xuxue Feng
1033Maria MarrierBrazil2025-07-11Benton, John B Jr UNQUALIFIED95Ioni Bowcher
1034Deepesh ChuiAustralia2025-06-29King, Christopher A Esq PROPOSAL50Xuxue Feng
1035Alejandro PerinGermany2025-07-09Chanay, Jeffrey A Esq QUALIFIED42Asiya Javayant
1036Darci PoquetteGermany2025-07-14Truhlar And Truhlar Attys NEGOTIATION50Amy Elsner
1037Julie StensethSpain2025-07-11Commercial Press QUALIFIED8Elwin Sharvill
1038Jefferson SchemmerCanada2025-07-07Chapman, Ross E Esq NEW5Onyama Limba
1039Jennifer AmigonSpain2025-07-05Commercial Press PROPOSAL90Anna Fali
1040Salvatore StockhamRussia2025-06-28Feltz Printing Service NEGOTIATION49Amy Elsner
1041Jefferson SchemmerGermany2025-07-11Commercial Press RENEWAL20Elwin Sharvill
1042Sinclair WaycottUnited Kingdom2025-06-21Feiner Bros QUALIFIED72Bernardo Dominic
1043Mayumi KolmetzGermany2025-06-25Commercial Press QUALIFIED62Amy Elsner
1044Jennifer AmigonCanada2025-07-17Feiner Bros NEW3Ioni Bowcher
1045Munro FerenczGermany2025-07-10Chapman, Ross E Esq QUALIFIED38Ivan Magalhaes
1046Aika InouyeSpain2025-07-17Morlong Associates NEGOTIATION1Ioni Bowcher
1047Cody SaylorsBrazil2025-06-23Chapman, Ross E Esq PROPOSAL29Xuxue Feng
1048Arvin AlbaresSpain2025-06-23Dorl, James J Esq QUALIFIED81Bernardo Dominic
1049Wickens NestleCanada2025-06-26Feiner Bros NEGOTIATION15Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Adams MorascaAustraliaOnyama Limba PROPOSAL
Kaitlin OstroskyUnited KingdomIvan Magalhaes RENEWAL
Claire TollnerBrazilStephen Shaw NEW
Juan WieserRussiaBernardo Dominic RENEWAL
Mayumi KolmetzAustraliaAnna Fali PROPOSAL
Ivar PaprockiBrazilBernardo Dominic PROPOSAL
Jennifer AmigonArgentinaAnna Fali PROPOSAL
Rodrigues CampainBrazilAmy Elsner PROPOSAL
Aruna FigeroaArgentinaIvan Magalhaes NEW
Antonio CaudyJapanXuxue Feng RENEWAL
Chavez BriddickAustraliaBernardo Dominic NEGOTIATION
Morrow RutaBrazilAnna Fali UNQUALIFIED
Maisha RulapaughItalyOnyama Limba NEW
Kaitlin OstroskyAustraliaStephen Shaw PROPOSAL
Kaitlin OstroskyBrazilAmy Elsner UNQUALIFIED
Sinclair WaycottFranceAmy Elsner QUALIFIED
David DarakjyItalyXuxue Feng NEW
Rodrigues CampainArgentinaAsiya Javayant QUALIFIED
Tony FollerSpainStephen Shaw NEGOTIATION
Tony FollerArgentinaAmy Elsner NEW
Johnson SergiRussiaAsiya Javayant RENEWAL
Deepesh ChuiGermanyAnna Fali QUALIFIED
Jones VocelkaIndiaIoni Bowcher UNQUALIFIED
Julie StensethUnited KingdomAnna Fali QUALIFIED
Nicolas IturbideIndiaBernardo Dominic UNQUALIFIED
Faith GillianCanadaAsiya Javayant NEW
Isabel BowleyGermanyAsiya Javayant RENEWAL
Costa DilliardSpainAsiya Javayant UNQUALIFIED
Adams MorascaUnited KingdomIoni Bowcher PROPOSAL
Izzy GarufiArgentinaBernardo Dominic NEW
Ivar PaprockiBrazilBernardo Dominic RENEWAL
Octavia MaletIndiaXuxue Feng NEW
Kaitlin OstroskyItalyElwin Sharvill UNQUALIFIED
Costa DilliardAustraliaXuxue Feng UNQUALIFIED
Cody SaylorsItalyAmy Elsner RENEWAL
Smith GlickCanadaBernardo Dominic RENEWAL
Misaki RoysterJapanElwin Sharvill RENEWAL
Munro FerenczBrazilStephen Shaw NEW
Munro FerenczJapanAnna Fali NEGOTIATION
David DarakjyArgentinaBernardo Dominic UNQUALIFIED
Jones VocelkaCanadaOnyama Limba QUALIFIED
Emily WhobreyBrazilAmy Elsner PROPOSAL
Smith GlickBrazilOnyama Limba PROPOSAL
Ivar PaprockiUnited KingdomBernardo Dominic NEGOTIATION
Jeanfrancois VenereItalyIvan Magalhaes PROPOSAL
Leja CaldareraIndiaStephen Shaw PROPOSAL
Morrow RutaAustraliaAsiya Javayant PROPOSAL
Jones VocelkaRussiaElwin Sharvill UNQUALIFIED
Rodrigues CampainJapanAsiya Javayant RENEWAL
Jones VocelkaGermanyIvan Magalhaes PROPOSAL
Frozen Columns
Name
Leon Oldroyd
Cody Saylors
Julie Stenseth
Tony Foller
Mujtaba Nicka
Aruna Figeroa
Isabel Bowley
Cody Saylors
Greenwood Bolognia
Adams Morasca
Alejandro Perin
Juan Wieser
Silvio Slusarski
Claire Tollner
Murillo Malet
Darci Poquette
Aditya Kusko
Kadeem Flosi
Ivar Paprocki
Kaitlin Ostrosky
Francesco Shinko
Leja Caldarera
Aditya Kusko
Ashley Doe
Maisha Rulapaugh
Greenwood Bolognia
Misaki Royster
Cody Saylors
Julie Stenseth
Johnson Sergi
Nicolas Iturbide
Salvatore Stockham
Mayumi Kolmetz
Aditya Kusko
Nicolas Iturbide
Silvio Slusarski
Chavez Briddick
Francesco Shinko
Munro Ferencz
Claire Tollner
Salvatore Stockham
Isabel Bowley
Jeanfrancois Venere
Arvin Albares
Arvin Albares
Leon Oldroyd
Johnson Sergi
Tony Foller
Wickens Nestle
Smith Glick
IdCountryDate
1000Canada2025-07-09
1001Spain2025-06-29
1002France2025-06-27
1003France2025-07-09
1004India2025-06-27
1005India2025-06-29
1006Australia2025-07-11
1007Australia2025-07-05
1008France2025-06-24
1009Russia2025-06-25
1010Italy2025-07-13
1011Italy2025-06-28
1012Canada2025-06-24
1013Russia2025-06-28
1014Italy2025-06-22
1015Russia2025-06-20
1016Australia2025-07-13
1017Canada2025-06-23
1018United Kingdom2025-07-17
1019Japan2025-06-28
1020United Kingdom2025-06-28
1021India2025-07-15
1022Brazil2025-06-19
1023Australia2025-07-10
1024Argentina2025-07-08
1025India2025-06-28
1026Italy2025-07-12
1027India2025-06-29
1028United Kingdom2025-07-01
1029Spain2025-07-05
1030India2025-07-17
1031France2025-06-22
1032Australia2025-07-04
1033Italy2025-06-20
1034Canada2025-07-01
1035Germany2025-07-16
1036India2025-07-08
1037Italy2025-07-03
1038India2025-06-19
1039Germany2025-07-11
1040Spain2025-06-19
1041India2025-07-06
1042Canada2025-06-24
1043Australia2025-06-25
1044Brazil2025-06-20
1045Germany2025-07-08
1046Russia2025-07-03
1047Italy2025-07-12
1048Canada2025-07-18
1049United Kingdom2025-07-07

On-Demand Data

NameIdCountryDate
Francesco Shinko1000India2025-06-26
Clifford Rim1001Canada2025-07-14
Isabel Bowley1002Argentina2025-06-28
Murillo Malet1003Australia2025-07-02
Claire Tollner1004Russia2025-06-19
Wickens Nestle1005Argentina2025-06-29
Stacey Maclead1006Japan2025-06-27
Wickens Nestle1007Canada2025-07-17
James Butt1008Argentina2025-07-05
Izzy Garufi1009Canada2025-06-28
Jeanfrancois Venere1010Brazil2025-07-05
Izzy Garufi1011France2025-06-28
Smith Glick1012Japan2025-06-23
Johnson Sergi1013Canada2025-07-10
Maria Marrier1014Japan2025-06-20
Salvatore Stockham1015India2025-07-01
Mayumi Kolmetz1016France2025-07-02
Jefferson Schemmer1017Brazil2025-07-17
Aruna Figeroa1018Japan2025-06-25
Aditya Kusko1019India2025-07-16
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Costa DilliardIndiaAmy Elsner PROPOSAL
Maria MarrierIndiaOnyama Limba QUALIFIED
Munro FerenczArgentinaAmy Elsner UNQUALIFIED
Salvatore StockhamItalyIoni Bowcher QUALIFIED
Clifford RimItalyElwin Sharvill NEGOTIATION
Deepesh ChuiUnited KingdomBernardo Dominic RENEWAL
Sinclair WaycottJapanAnna Fali NEW
Ashley DoeBrazilElwin Sharvill NEW
Morrow RutaGermanyIvan Magalhaes NEGOTIATION
Salvatore StockhamUnited KingdomAmy Elsner QUALIFIED
Claire TollnerFranceOnyama Limba QUALIFIED
Leon OldroydJapanElwin Sharvill QUALIFIED
Claire TollnerBrazilAsiya Javayant NEGOTIATION
Ricardo GauchoAustraliaIoni Bowcher NEGOTIATION
Alejandro PerinJapanXuxue Feng UNQUALIFIED
Octavia MaletSpainBernardo Dominic QUALIFIED
Jeanfrancois VenereCanadaBernardo Dominic UNQUALIFIED
Arvin AlbaresRussiaXuxue Feng QUALIFIED
Julie StensethBrazilOnyama Limba QUALIFIED
Salvatore StockhamSpainOnyama Limba QUALIFIED
Juan WieserIndiaStephen Shaw NEW
Jones VocelkaIndiaAnna Fali UNQUALIFIED
Kaitlin OstroskyGermanyIvan Magalhaes QUALIFIED
Munro FerenczJapanOnyama Limba QUALIFIED
Julie StensethCanadaElwin Sharvill UNQUALIFIED
Stacey MacleadCanadaBernardo Dominic PROPOSAL
Isabel BowleyGermanyOnyama Limba UNQUALIFIED
Arvin AlbaresSpainOnyama Limba PROPOSAL
Mayumi KolmetzGermanyAsiya Javayant UNQUALIFIED
Nicolas IturbideRussiaAnna Fali PROPOSAL
Izzy GarufiSpainAsiya Javayant PROPOSAL
Isabel BowleyUnited KingdomAnna Fali RENEWAL
Adams MorascaCanadaAsiya Javayant PROPOSAL
Jones VocelkaFranceElwin Sharvill RENEWAL
Aika InouyeUnited KingdomAsiya Javayant RENEWAL
Rodrigues CampainIndiaStephen Shaw PROPOSAL
Wickens NestleGermanyOnyama Limba NEGOTIATION
Claire TollnerGermanyIvan Magalhaes NEW
Ricardo GauchoItalyElwin Sharvill QUALIFIED
Faith GillianCanadaOnyama Limba 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>