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
Ivar PaprockiIndiaStephen Shaw NEGOTIATION
Ricardo GauchoArgentinaBernardo Dominic PROPOSAL
Juan WieserGermanyIoni Bowcher NEGOTIATION
Emily WhobreySpainBernardo Dominic NEW
Adams MorascaGermanyIoni Bowcher NEW
Greenwood BologniaRussiaAmy Elsner NEW
Mujtaba NickaRussiaAnna Fali NEW
Johnson SergiArgentinaBernardo Dominic PROPOSAL
Maisha RulapaughGermanyStephen Shaw PROPOSAL
Misaki RoysterBrazilElwin Sharvill RENEWAL
Claire TollnerBrazilAsiya Javayant QUALIFIED
Wickens NestleArgentinaAnna Fali UNQUALIFIED
Salvatore StockhamFranceElwin Sharvill PROPOSAL
Maria MarrierAustraliaAmy Elsner NEGOTIATION
Deepesh ChuiItalyElwin Sharvill NEGOTIATION
Nicolas IturbideArgentinaStephen Shaw NEGOTIATION
Izzy GarufiGermanyAmy Elsner NEW
Octavia MaletUnited KingdomStephen Shaw QUALIFIED
Rodrigues CampainGermanyAnna Fali QUALIFIED
Jeanfrancois VenereArgentinaStephen Shaw PROPOSAL
Izzy GarufiJapanXuxue Feng RENEWAL
Maisha RulapaughCanadaOnyama Limba PROPOSAL
Maisha RulapaughUnited KingdomOnyama Limba RENEWAL
Silvio SlusarskiIndiaStephen Shaw UNQUALIFIED
Mujtaba NickaRussiaXuxue Feng NEW
Emily WhobreyRussiaIvan Magalhaes UNQUALIFIED
Jennifer AmigonItalyOnyama Limba NEW
Maria MarrierCanadaXuxue Feng UNQUALIFIED
Jeanfrancois VenereFranceBernardo Dominic PROPOSAL
Sinclair WaycottIndiaBernardo Dominic RENEWAL
Silvio SlusarskiIndiaElwin Sharvill QUALIFIED
Chavez BriddickJapanIoni Bowcher NEGOTIATION
Francesco ShinkoSpainIvan Magalhaes PROPOSAL
Isabel BowleyGermanyAmy Elsner RENEWAL
Jefferson SchemmerItalyBernardo Dominic NEW
Deepesh ChuiGermanyIvan Magalhaes NEW
Kaitlin OstroskyGermanyIvan Magalhaes QUALIFIED
Munro FerenczFranceBernardo Dominic RENEWAL
Darci PoquetteSpainAnna Fali PROPOSAL
Claire TollnerBrazilBernardo Dominic RENEWAL
Jefferson SchemmerItalyXuxue Feng QUALIFIED
Claire TollnerCanadaIoni Bowcher NEGOTIATION
Alejandro PerinJapanXuxue Feng NEW
Juan WieserUnited KingdomAsiya Javayant PROPOSAL
Antonio CaudyCanadaIoni Bowcher NEW
Darci PoquetteIndiaIoni Bowcher NEW
Maisha RulapaughUnited KingdomIvan Magalhaes NEGOTIATION
Leon OldroydIndiaIvan Magalhaes RENEWAL
David DarakjyBrazilXuxue Feng PROPOSAL
Greenwood BologniaIndiaIoni Bowcher RENEWAL
Horizontal
NameCountryRepresentativeStatus
Octavia MaletFranceStephen Shaw PROPOSAL
Francesco ShinkoGermanyOnyama Limba NEGOTIATION
Johnson SergiIndiaIoni Bowcher RENEWAL
Wickens NestleIndiaAmy Elsner NEW
Isabel BowleyAustraliaOnyama Limba RENEWAL
Sinclair WaycottCanadaBernardo Dominic QUALIFIED
Antonio CaudyUnited KingdomAnna Fali RENEWAL
Silvio SlusarskiAustraliaElwin Sharvill UNQUALIFIED
Mujtaba NickaArgentinaElwin Sharvill NEW
Mayumi KolmetzIndiaAmy Elsner NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ricardo GauchoUnited Kingdom2025-07-22Truhlar And Truhlar Attys UNQUALIFIED19Ivan Magalhaes
1001Francesco ShinkoGermany2025-08-12Commercial Press NEW21Anna Fali
1002Chavez BriddickCanada2025-07-23Chemel, James L Cpa PROPOSAL34Xuxue Feng
1003Stacey MacleadItaly2025-08-02Benton, John B Jr NEW28Onyama Limba
1004Antonio CaudyItaly2025-08-04Rangoni Of Florence QUALIFIED35Anna Fali
1005Cody SaylorsFrance2025-08-03Printing Dimensions QUALIFIED31Xuxue Feng
1006Emily WhobreyUnited Kingdom2025-07-25Benton, John B Jr NEW62Anna Fali
1007Jennifer AmigonBrazil2025-08-06Truhlar And Truhlar Attys PROPOSAL79Onyama Limba
1008Wickens NestleUnited Kingdom2025-08-17Chanay, Jeffrey A Esq PROPOSAL89Onyama Limba
1009Alejandro PerinFrance2025-07-31Feltz Printing Service QUALIFIED6Anna Fali
1010Faith GillianSpain2025-08-09Truhlar And Truhlar Attys NEW25Ivan Magalhaes
1011Ricardo GauchoFrance2025-07-27Truhlar And Truhlar Attys PROPOSAL55Ivan Magalhaes
1012David DarakjyIndia2025-07-23Commercial Press PROPOSAL10Onyama Limba
1013Rodrigues CampainSpain2025-07-29Rangoni Of Florence NEW60Xuxue Feng
1014Johnson SergiBrazil2025-08-14Feiner Bros QUALIFIED50Xuxue Feng
1015Arvin AlbaresFrance2025-08-16King, Christopher A Esq QUALIFIED38Elwin Sharvill
1016Deepesh ChuiGermany2025-08-06Feltz Printing Service RENEWAL28Onyama Limba
1017Aruna FigeroaItaly2025-08-04Chanay, Jeffrey A Esq PROPOSAL90Ioni Bowcher
1018Izzy GarufiItaly2025-07-25Benton, John B Jr NEGOTIATION7Ivan Magalhaes
1019Mayumi KolmetzJapan2025-08-05Rousseaux, Michael Esq UNQUALIFIED59Anna Fali
1020Jones VocelkaSpain2025-08-10Commercial Press RENEWAL40Ioni Bowcher
1021Julie StensethBrazil2025-08-05Rangoni Of Florence QUALIFIED11Onyama Limba
1022Ricardo GauchoGermany2025-07-31King, Christopher A Esq NEW0Bernardo Dominic
1023Tony FollerJapan2025-07-28Rousseaux, Michael Esq PROPOSAL85Ivan Magalhaes
1024Chavez BriddickItaly2025-08-12Chapman, Ross E Esq RENEWAL62Ioni Bowcher
1025James ButtBrazil2025-08-15Rousseaux, Michael Esq QUALIFIED18Asiya Javayant
1026Sinclair WaycottGermany2025-08-11Feiner Bros NEW58Xuxue Feng
1027Antonio CaudyIndia2025-08-01Chemel, James L Cpa UNQUALIFIED21Ioni Bowcher
1028Jeanfrancois VenereJapan2025-07-26Rousseaux, Michael Esq RENEWAL78Xuxue Feng
1029Isabel BowleyBrazil2025-07-27Printing Dimensions NEGOTIATION19Ivan Magalhaes
1030Mayumi KolmetzRussia2025-07-27Chapman, Ross E Esq NEW8Anna Fali
1031Aruna FigeroaCanada2025-08-09Buckley Miller Wright UNQUALIFIED12Xuxue Feng
1032James ButtGermany2025-08-11Commercial Press UNQUALIFIED14Bernardo Dominic
1033Adams MorascaArgentina2025-08-16Rousseaux, Michael Esq RENEWAL66Onyama Limba
1034Wickens NestleBrazil2025-08-10Truhlar And Truhlar Attys RENEWAL90Bernardo Dominic
1035Jefferson SchemmerBrazil2025-08-11Printing Dimensions UNQUALIFIED96Asiya Javayant
1036Greenwood BologniaItaly2025-07-20King, Christopher A Esq PROPOSAL34Ioni Bowcher
1037Salvatore StockhamCanada2025-07-21Feiner Bros UNQUALIFIED45Ioni Bowcher
1038Stacey MacleadBrazil2025-08-13Chemel, James L Cpa QUALIFIED2Xuxue Feng
1039Jones VocelkaAustralia2025-07-22Benton, John B Jr RENEWAL67Bernardo Dominic
1040Smith GlickCanada2025-08-08Rousseaux, Michael Esq NEGOTIATION72Elwin Sharvill
1041Adams MorascaUnited Kingdom2025-08-04Buckley Miller Wright QUALIFIED76Ivan Magalhaes
1042Jones VocelkaUnited Kingdom2025-07-21Commercial Press PROPOSAL19Onyama Limba
1043Juan WieserItaly2025-07-20King, Christopher A Esq PROPOSAL43Xuxue Feng
1044Jeanfrancois VenereCanada2025-07-30Morlong Associates PROPOSAL55Bernardo Dominic
1045Costa DilliardArgentina2025-08-16Rousseaux, Michael Esq NEGOTIATION32Asiya Javayant
1046Claire TollnerIndia2025-08-16Morlong Associates QUALIFIED62Bernardo Dominic
1047Faith GillianGermany2025-08-08Feltz Printing Service QUALIFIED2Xuxue Feng
1048Leon OldroydJapan2025-08-13Commercial Press RENEWAL63Elwin Sharvill
1049Rodrigues CampainBrazil2025-08-08King, Christopher A Esq NEGOTIATION49Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Arvin AlbaresAustraliaStephen Shaw PROPOSAL
Costa DilliardGermanyIvan Magalhaes PROPOSAL
Costa DilliardBrazilElwin Sharvill RENEWAL
Deepesh ChuiUnited KingdomIoni Bowcher QUALIFIED
Mayumi KolmetzJapanAsiya Javayant NEGOTIATION
Aditya KuskoIndiaBernardo Dominic UNQUALIFIED
Adams MorascaCanadaOnyama Limba PROPOSAL
Morrow RutaIndiaIoni Bowcher NEGOTIATION
Munro FerenczBrazilIoni Bowcher RENEWAL
Adams MorascaArgentinaXuxue Feng NEGOTIATION
Maisha RulapaughIndiaAnna Fali RENEWAL
James ButtFranceBernardo Dominic NEGOTIATION
Murillo MaletRussiaIvan Magalhaes QUALIFIED
Octavia MaletSpainAnna Fali NEW
James ButtBrazilOnyama Limba PROPOSAL
Cody SaylorsIndiaStephen Shaw RENEWAL
Kadeem FlosiAustraliaAnna Fali NEW
Rodrigues CampainBrazilBernardo Dominic PROPOSAL
Deepesh ChuiItalyAnna Fali RENEWAL
Ivar PaprockiItalyAmy Elsner RENEWAL
Stacey MacleadJapanXuxue Feng PROPOSAL
Clifford RimIndiaElwin Sharvill NEW
Adams MorascaGermanyAmy Elsner NEW
Julie StensethBrazilOnyama Limba NEW
Julie StensethGermanyElwin Sharvill QUALIFIED
Francesco ShinkoItalyXuxue Feng QUALIFIED
Leja CaldareraItalyAsiya Javayant UNQUALIFIED
Costa DilliardIndiaElwin Sharvill PROPOSAL
Aditya KuskoIndiaStephen Shaw NEW
Aruna FigeroaGermanyAsiya Javayant NEGOTIATION
Misaki RoysterArgentinaBernardo Dominic RENEWAL
Darci PoquetteAustraliaBernardo Dominic PROPOSAL
Sinclair WaycottUnited KingdomAmy Elsner QUALIFIED
Izzy GarufiItalyElwin Sharvill NEW
Juan WieserFranceXuxue Feng QUALIFIED
Aditya KuskoFranceStephen Shaw QUALIFIED
Mujtaba NickaJapanBernardo Dominic NEGOTIATION
Leja CaldareraIndiaOnyama Limba NEW
Costa DilliardAustraliaXuxue Feng NEW
Kaitlin OstroskyJapanElwin Sharvill RENEWAL
Munro FerenczArgentinaStephen Shaw UNQUALIFIED
Stacey MacleadBrazilAmy Elsner NEW
Darci PoquetteRussiaElwin Sharvill QUALIFIED
Kaitlin OstroskyGermanyXuxue Feng PROPOSAL
Murillo MaletArgentinaAnna Fali NEGOTIATION
Octavia MaletUnited KingdomAmy Elsner PROPOSAL
Darci PoquetteCanadaAmy Elsner NEW
Maria MarrierAustraliaAmy Elsner PROPOSAL
Jones VocelkaCanadaOnyama Limba NEGOTIATION
Ashley DoeRussiaIoni Bowcher QUALIFIED
Frozen Columns
Name
Ivar Paprocki
Clifford Rim
Adams Morasca
Juan Wieser
Kadeem Flosi
Arvin Albares
Jones Vocelka
Murillo Malet
Costa Dilliard
Maria Marrier
Darci Poquette
Murillo Malet
Francesco Shinko
Munro Ferencz
Isabel Bowley
Faith Gillian
Mujtaba Nicka
Maria Marrier
Aika Inouye
Ivar Paprocki
James Butt
Izzy Garufi
Leja Caldarera
Emily Whobrey
Julie Stenseth
Julie Stenseth
Morrow Ruta
Mayumi Kolmetz
Aditya Kusko
Ivar Paprocki
Arvin Albares
Octavia Malet
Greenwood Bolognia
Jennifer Amigon
Murillo Malet
Maisha Rulapaugh
Smith Glick
Silvio Slusarski
Alejandro Perin
Misaki Royster
Salvatore Stockham
Stacey Maclead
Morrow Ruta
Kadeem Flosi
Stacey Maclead
Jones Vocelka
Claire Tollner
Leja Caldarera
Nicolas Iturbide
Antonio Caudy
IdCountryDate
1000Canada2025-07-25
1001India2025-07-22
1002Australia2025-07-19
1003Italy2025-07-24
1004Italy2025-08-14
1005Japan2025-08-15
1006Japan2025-08-14
1007Australia2025-08-14
1008Russia2025-08-05
1009Japan2025-08-05
1010Canada2025-07-22
1011Australia2025-07-28
1012Spain2025-08-06
1013Italy2025-07-27
1014India2025-07-24
1015France2025-07-26
1016Spain2025-07-23
1017United Kingdom2025-08-05
1018Italy2025-08-17
1019Australia2025-08-13
1020Germany2025-08-06
1021Japan2025-08-03
1022Canada2025-08-01
1023Spain2025-07-29
1024Italy2025-08-07
1025Australia2025-08-13
1026Japan2025-08-17
1027Russia2025-08-06
1028Australia2025-07-29
1029Argentina2025-07-22
1030Italy2025-07-23
1031United Kingdom2025-08-16
1032Canada2025-07-31
1033United Kingdom2025-08-14
1034Canada2025-07-25
1035Brazil2025-08-03
1036Italy2025-07-31
1037Argentina2025-07-31
1038Japan2025-07-20
1039Canada2025-08-04
1040Spain2025-07-27
1041India2025-07-22
1042India2025-08-09
1043Germany2025-07-26
1044France2025-07-25
1045France2025-08-08
1046Russia2025-08-10
1047Australia2025-07-19
1048Brazil2025-08-10
1049Australia2025-08-16

On-Demand Data

NameIdCountryDate
Darci Poquette1000Brazil2025-08-07
Sinclair Waycott1001Spain2025-07-19
David Darakjy1002Spain2025-07-21
Smith Glick1003France2025-08-15
Stacey Maclead1004Brazil2025-07-30
Emily Whobrey1005Brazil2025-08-09
Izzy Garufi1006France2025-07-29
Misaki Royster1007Canada2025-08-17
Tony Foller1008Spain2025-08-06
Silvio Slusarski1009Germany2025-08-13
Leja Caldarera1010United Kingdom2025-07-26
Arvin Albares1011France2025-07-24
Ashley Doe1012Russia2025-07-24
Tony Foller1013Japan2025-08-14
Francesco Shinko1014Germany2025-08-07
Julie Stenseth1015Italy2025-07-22
Francesco Shinko1016Italy2025-08-06
Ivar Paprocki1017Germany2025-07-25
Morrow Ruta1018United Kingdom2025-08-01
Cody Saylors1019Spain2025-08-02
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Izzy GarufiIndiaStephen Shaw UNQUALIFIED
Costa DilliardUnited KingdomIoni Bowcher PROPOSAL
Claire TollnerCanadaElwin Sharvill RENEWAL
Jennifer AmigonBrazilElwin Sharvill UNQUALIFIED
Leon OldroydRussiaBernardo Dominic NEGOTIATION
Tony FollerAustraliaIoni Bowcher UNQUALIFIED
James ButtIndiaElwin Sharvill PROPOSAL
Darci PoquetteGermanyIoni Bowcher PROPOSAL
Munro FerenczAustraliaStephen Shaw QUALIFIED
Darci PoquetteArgentinaOnyama Limba NEGOTIATION
Clifford RimCanadaAmy Elsner QUALIFIED
Mujtaba NickaGermanyElwin Sharvill UNQUALIFIED
Juan WieserItalyAmy Elsner QUALIFIED
Mayumi KolmetzCanadaXuxue Feng UNQUALIFIED
Jeanfrancois VenereGermanyStephen Shaw NEGOTIATION
Jones VocelkaUnited KingdomOnyama Limba UNQUALIFIED
Antonio CaudyItalyXuxue Feng RENEWAL
Maisha RulapaughAustraliaIvan Magalhaes RENEWAL
Munro FerenczCanadaAsiya Javayant NEW
Isabel BowleyItalyAsiya Javayant QUALIFIED
Greenwood BologniaFranceIvan Magalhaes PROPOSAL
Clifford RimAustraliaXuxue Feng NEW
Izzy GarufiCanadaStephen Shaw QUALIFIED
Faith GillianIndiaStephen Shaw UNQUALIFIED
Aruna FigeroaBrazilIvan Magalhaes UNQUALIFIED
Clifford RimRussiaIvan Magalhaes PROPOSAL
Jennifer AmigonUnited KingdomStephen Shaw QUALIFIED
Rodrigues CampainCanadaAmy Elsner NEW
Morrow RutaItalyStephen Shaw PROPOSAL
Leja CaldareraCanadaElwin Sharvill RENEWAL
Kaitlin OstroskyRussiaIoni Bowcher UNQUALIFIED
Stacey MacleadArgentinaAnna Fali QUALIFIED
Mayumi KolmetzRussiaAnna Fali UNQUALIFIED
Jennifer AmigonBrazilXuxue Feng NEW
Emily WhobreySpainXuxue Feng QUALIFIED
Claire TollnerBrazilStephen Shaw NEW
Tony FollerUnited KingdomIvan Magalhaes UNQUALIFIED
Aika InouyeBrazilBernardo Dominic NEW
Johnson SergiIndiaStephen Shaw QUALIFIED
Jefferson SchemmerAustraliaStephen 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>