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
Darci PoquetteCanadaOnyama Limba NEGOTIATION
Chavez BriddickAustraliaOnyama Limba QUALIFIED
Aditya KuskoBrazilIoni Bowcher PROPOSAL
Isabel BowleyIndiaAsiya Javayant NEGOTIATION
Jones VocelkaItalyStephen Shaw NEGOTIATION
Juan WieserFranceStephen Shaw NEGOTIATION
Salvatore StockhamJapanStephen Shaw PROPOSAL
Jeanfrancois VenereBrazilAnna Fali PROPOSAL
Adams MorascaIndiaElwin Sharvill PROPOSAL
Maria MarrierArgentinaAsiya Javayant UNQUALIFIED
Jennifer AmigonItalyElwin Sharvill NEW
Emily WhobreyFranceXuxue Feng NEGOTIATION
Deepesh ChuiSpainElwin Sharvill PROPOSAL
Aruna FigeroaUnited KingdomIvan Magalhaes QUALIFIED
Greenwood BologniaGermanyBernardo Dominic QUALIFIED
Aruna FigeroaUnited KingdomElwin Sharvill UNQUALIFIED
Maisha RulapaughCanadaIvan Magalhaes UNQUALIFIED
Julie StensethItalyXuxue Feng NEGOTIATION
Izzy GarufiUnited KingdomAmy Elsner RENEWAL
James ButtFranceBernardo Dominic PROPOSAL
Misaki RoysterIndiaIoni Bowcher UNQUALIFIED
Deepesh ChuiIndiaAsiya Javayant NEGOTIATION
Murillo MaletIndiaXuxue Feng NEGOTIATION
Aika InouyeCanadaAsiya Javayant NEGOTIATION
Leon OldroydRussiaIvan Magalhaes RENEWAL
Claire TollnerItalyIvan Magalhaes NEGOTIATION
Greenwood BologniaBrazilXuxue Feng QUALIFIED
Ashley DoeCanadaElwin Sharvill NEGOTIATION
Claire TollnerAustraliaAsiya Javayant UNQUALIFIED
Aditya KuskoUnited KingdomBernardo Dominic RENEWAL
Juan WieserIndiaIoni Bowcher QUALIFIED
Rodrigues CampainArgentinaAsiya Javayant PROPOSAL
Sinclair WaycottAustraliaAsiya Javayant NEW
Munro FerenczBrazilAsiya Javayant NEW
Jones VocelkaAustraliaStephen Shaw PROPOSAL
Adams MorascaGermanyBernardo Dominic UNQUALIFIED
Aditya KuskoAustraliaIvan Magalhaes PROPOSAL
Julie StensethRussiaIvan Magalhaes PROPOSAL
Rodrigues CampainArgentinaStephen Shaw NEW
Sinclair WaycottIndiaStephen Shaw UNQUALIFIED
Misaki RoysterUnited KingdomXuxue Feng UNQUALIFIED
Wickens NestleAustraliaIvan Magalhaes UNQUALIFIED
Mayumi KolmetzUnited KingdomXuxue Feng NEW
Ivar PaprockiRussiaOnyama Limba NEGOTIATION
Jennifer AmigonFranceBernardo Dominic NEW
Costa DilliardArgentinaStephen Shaw QUALIFIED
Morrow RutaBrazilAnna Fali QUALIFIED
Isabel BowleyRussiaOnyama Limba NEGOTIATION
Tony FollerArgentinaIoni Bowcher RENEWAL
Jeanfrancois VenereArgentinaStephen Shaw NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Johnson SergiArgentinaBernardo Dominic PROPOSAL
Faith GillianRussiaAsiya Javayant RENEWAL
Juan WieserArgentinaOnyama Limba NEGOTIATION
Johnson SergiSpainOnyama Limba NEGOTIATION
Wickens NestleIndiaElwin Sharvill NEW
Maria MarrierAustraliaIvan Magalhaes QUALIFIED
Ivar PaprockiIndiaAsiya Javayant PROPOSAL
Jefferson SchemmerIndiaAnna Fali UNQUALIFIED
Clifford RimBrazilOnyama Limba UNQUALIFIED
Clifford RimBrazilAsiya Javayant NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Mayumi KolmetzAustralia2026-04-26Feiner Bros QUALIFIED12Onyama Limba
1001Aruna FigeroaItaly2026-04-28Buckley Miller Wright NEGOTIATION83Onyama Limba
1002Octavia MaletAustralia2026-04-07Printing Dimensions UNQUALIFIED9Onyama Limba
1003Jones VocelkaFrance2026-04-15Feiner Bros QUALIFIED49Bernardo Dominic
1004Tony FollerJapan2026-04-26Buckley Miller Wright NEGOTIATION62Stephen Shaw
1005Greenwood BologniaSpain2026-04-13Feiner Bros UNQUALIFIED58Ivan Magalhaes
1006Antonio CaudyUnited Kingdom2026-04-19Commercial Press QUALIFIED69Asiya Javayant
1007Mayumi KolmetzFrance2026-04-29Benton, John B Jr QUALIFIED24Bernardo Dominic
1008James ButtIndia2026-04-17Chapman, Ross E Esq RENEWAL21Ioni Bowcher
1009Izzy GarufiFrance2026-04-24Chapman, Ross E Esq UNQUALIFIED44Elwin Sharvill
1010Jones VocelkaUnited Kingdom2026-04-28King, Christopher A Esq RENEWAL69Amy Elsner
1011Ivar PaprockiRussia2026-04-13Commercial Press QUALIFIED25Ivan Magalhaes
1012Isabel BowleyCanada2026-03-31Chanay, Jeffrey A Esq NEW57Anna Fali
1013Wickens NestleAustralia2026-04-14Morlong Associates RENEWAL95Bernardo Dominic
1014Mayumi KolmetzJapan2026-04-01Rousseaux, Michael Esq QUALIFIED18Anna Fali
1015Isabel BowleyUnited Kingdom2026-04-11Rangoni Of Florence RENEWAL10Ivan Magalhaes
1016Clifford RimIndia2026-04-29Benton, John B Jr NEGOTIATION12Xuxue Feng
1017Morrow RutaRussia2026-04-07Truhlar And Truhlar Attys NEW49Ioni Bowcher
1018Julie StensethJapan2026-04-03Morlong Associates PROPOSAL51Xuxue Feng
1019Murillo MaletArgentina2026-04-10Buckley Miller Wright NEW99Onyama Limba
1020Leon OldroydFrance2026-04-01Commercial Press PROPOSAL27Anna Fali
1021Tony FollerCanada2026-04-07Feiner Bros QUALIFIED32Elwin Sharvill
1022Sinclair WaycottRussia2026-04-02Chapman, Ross E Esq NEW66Asiya Javayant
1023Costa DilliardCanada2026-04-06Chemel, James L Cpa QUALIFIED70Onyama Limba
1024Claire TollnerSpain2026-04-14Chanay, Jeffrey A Esq PROPOSAL27Bernardo Dominic
1025James ButtAustralia2026-04-07Dorl, James J Esq NEGOTIATION64Anna Fali
1026Ashley DoeAustralia2026-04-18Rangoni Of Florence NEGOTIATION0Amy Elsner
1027James ButtJapan2026-03-31Commercial Press NEW85Stephen Shaw
1028Aruna FigeroaItaly2026-04-14Rangoni Of Florence QUALIFIED3Ioni Bowcher
1029Julie StensethUnited Kingdom2026-04-20Feltz Printing Service PROPOSAL28Xuxue Feng
1030Aditya KuskoFrance2026-04-18Dorl, James J Esq QUALIFIED76Anna Fali
1031Isabel BowleyItaly2026-04-13Benton, John B Jr QUALIFIED83Ioni Bowcher
1032Cody SaylorsSpain2026-04-12Commercial Press QUALIFIED23Ioni Bowcher
1033Smith GlickItaly2026-04-02King, Christopher A Esq PROPOSAL83Stephen Shaw
1034Ashley DoeRussia2026-03-31Rangoni Of Florence NEW11Ioni Bowcher
1035Greenwood BologniaBrazil2026-04-03Dorl, James J Esq NEW93Onyama Limba
1036Clifford RimUnited Kingdom2026-04-17Feltz Printing Service NEGOTIATION73Elwin Sharvill
1037Ricardo GauchoRussia2026-04-24Rangoni Of Florence UNQUALIFIED11Onyama Limba
1038Izzy GarufiRussia2026-04-08Chemel, James L Cpa UNQUALIFIED23Anna Fali
1039Nicolas IturbideUnited Kingdom2026-04-14Benton, John B Jr NEGOTIATION7Amy Elsner
1040Leja CaldareraCanada2026-04-23Feiner Bros RENEWAL6Xuxue Feng
1041Claire TollnerSpain2026-04-28Printing Dimensions NEGOTIATION99Asiya Javayant
1042Murillo MaletCanada2026-04-07Printing Dimensions NEGOTIATION72Elwin Sharvill
1043Mujtaba NickaCanada2026-04-07Chapman, Ross E Esq NEW74Onyama Limba
1044Mayumi KolmetzRussia2026-04-11Chanay, Jeffrey A Esq PROPOSAL76Asiya Javayant
1045Adams MorascaCanada2026-04-10Buckley Miller Wright NEW3Amy Elsner
1046Stacey MacleadJapan2026-04-22Dorl, James J Esq RENEWAL59Amy Elsner
1047Wickens NestleSpain2026-04-27Rangoni Of Florence UNQUALIFIED95Ivan Magalhaes
1048Salvatore StockhamCanada2026-04-09King, Christopher A Esq NEW43Anna Fali
1049Sinclair WaycottGermany2026-04-23Chemel, James L Cpa UNQUALIFIED30Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Morrow RutaGermanyStephen Shaw UNQUALIFIED
Smith GlickGermanyAsiya Javayant RENEWAL
Ricardo GauchoGermanyIoni Bowcher RENEWAL
Johnson SergiIndiaIvan Magalhaes QUALIFIED
Aika InouyeFranceAmy Elsner NEGOTIATION
Clifford RimBrazilElwin Sharvill NEW
Morrow RutaFranceOnyama Limba RENEWAL
Jones VocelkaSpainIvan Magalhaes UNQUALIFIED
Ivar PaprockiIndiaAsiya Javayant NEW
Jefferson SchemmerGermanyOnyama Limba PROPOSAL
Darci PoquetteSpainAnna Fali NEGOTIATION
James ButtIndiaIvan Magalhaes QUALIFIED
Nicolas IturbideArgentinaIvan Magalhaes NEGOTIATION
Jefferson SchemmerUnited KingdomOnyama Limba NEGOTIATION
Greenwood BologniaBrazilOnyama Limba PROPOSAL
Johnson SergiIndiaIvan Magalhaes PROPOSAL
Francesco ShinkoUnited KingdomAnna Fali PROPOSAL
Juan WieserIndiaBernardo Dominic PROPOSAL
Murillo MaletSpainAmy Elsner RENEWAL
Antonio CaudyFranceOnyama Limba RENEWAL
Aditya KuskoUnited KingdomAsiya Javayant QUALIFIED
Aika InouyeCanadaAmy Elsner UNQUALIFIED
Maria MarrierIndiaIvan Magalhaes PROPOSAL
Antonio CaudyRussiaIoni Bowcher UNQUALIFIED
Alejandro PerinRussiaIoni Bowcher NEW
Maria MarrierAustraliaOnyama Limba RENEWAL
Smith GlickUnited KingdomStephen Shaw PROPOSAL
Nicolas IturbideGermanyIoni Bowcher PROPOSAL
Antonio CaudyArgentinaAnna Fali QUALIFIED
Leon OldroydUnited KingdomOnyama Limba UNQUALIFIED
Jones VocelkaFranceAnna Fali NEGOTIATION
Mayumi KolmetzBrazilBernardo Dominic PROPOSAL
Isabel BowleyUnited KingdomAmy Elsner NEGOTIATION
Jennifer AmigonBrazilStephen Shaw NEGOTIATION
Darci PoquetteFranceAsiya Javayant UNQUALIFIED
Leon OldroydAustraliaIoni Bowcher UNQUALIFIED
Maria MarrierUnited KingdomOnyama Limba NEGOTIATION
Alejandro PerinIndiaOnyama Limba NEW
Ashley DoeItalyXuxue Feng NEW
James ButtRussiaAsiya Javayant PROPOSAL
Morrow RutaAustraliaBernardo Dominic NEW
Costa DilliardRussiaOnyama Limba UNQUALIFIED
Octavia MaletBrazilIoni Bowcher UNQUALIFIED
Mayumi KolmetzCanadaAmy Elsner NEW
Ivar PaprockiSpainAsiya Javayant NEGOTIATION
Leon OldroydCanadaIoni Bowcher PROPOSAL
Rodrigues CampainAustraliaXuxue Feng UNQUALIFIED
Costa DilliardJapanBernardo Dominic NEW
Chavez BriddickItalyIvan Magalhaes UNQUALIFIED
Rodrigues CampainGermanyOnyama Limba UNQUALIFIED
Frozen Columns
Name
James Butt
Maria Marrier
James Butt
Chavez Briddick
David Darakjy
Jeanfrancois Venere
Alejandro Perin
Arvin Albares
Julie Stenseth
Julie Stenseth
Claire Tollner
Darci Poquette
Aika Inouye
Clifford Rim
Ashley Doe
Jones Vocelka
Faith Gillian
Adams Morasca
Jefferson Schemmer
Murillo Malet
Aika Inouye
Smith Glick
Johnson Sergi
Antonio Caudy
Morrow Ruta
Maria Marrier
Jennifer Amigon
Aditya Kusko
Jones Vocelka
Aditya Kusko
Juan Wieser
Rodrigues Campain
Munro Ferencz
Leja Caldarera
Nicolas Iturbide
Darci Poquette
Cody Saylors
Murillo Malet
Isabel Bowley
Silvio Slusarski
Tony Foller
Antonio Caudy
Francesco Shinko
Leon Oldroyd
Isabel Bowley
Stacey Maclead
Leja Caldarera
Adams Morasca
Stacey Maclead
Kadeem Flosi
IdCountryDate
1000France2026-04-04
1001Canada2026-04-15
1002Canada2026-04-16
1003Canada2026-04-13
1004Argentina2026-04-03
1005France2026-04-29
1006Australia2026-04-03
1007Australia2026-04-01
1008Australia2026-04-13
1009Russia2026-04-17
1010Canada2026-04-08
1011Italy2026-04-28
1012Japan2026-04-13
1013France2026-04-17
1014Germany2026-04-06
1015Japan2026-04-28
1016France2026-04-10
1017Brazil2026-04-13
1018Brazil2026-04-01
1019United Kingdom2026-04-10
1020Russia2026-04-23
1021Japan2026-04-12
1022Russia2026-04-20
1023Australia2026-04-12
1024Russia2026-04-11
1025Italy2026-04-22
1026Spain2026-04-04
1027France2026-04-02
1028India2026-04-03
1029Italy2026-04-23
1030India2026-04-23
1031Argentina2026-04-19
1032Australia2026-04-15
1033Italy2026-04-02
1034Japan2026-04-18
1035Australia2026-04-23
1036Brazil2026-04-21
1037Russia2026-04-17
1038Italy2026-04-12
1039United Kingdom2026-04-01
1040Italy2026-04-05
1041United Kingdom2026-04-28
1042India2026-03-31
1043Germany2026-04-05
1044Russia2026-04-05
1045Italy2026-04-08
1046Australia2026-04-09
1047Germany2026-04-15
1048France2026-04-03
1049Japan2026-04-15

On-Demand Data

NameIdCountryDate
Octavia Malet1000India2026-04-26
Ivar Paprocki1001Canada2026-04-13
Antonio Caudy1002Australia2026-04-06
Alejandro Perin1003Australia2026-04-21
Munro Ferencz1004Japan2026-04-23
Cody Saylors1005Canada2026-04-04
Murillo Malet1006Brazil2026-04-26
Arvin Albares1007Brazil2026-04-23
Tony Foller1008Spain2026-04-20
Julie Stenseth1009Russia2026-04-22
David Darakjy1010France2026-04-22
Chavez Briddick1011Italy2026-04-09
Murillo Malet1012India2026-04-28
Alejandro Perin1013Italy2026-04-13
Darci Poquette1014Canada2026-04-02
Ivar Paprocki1015Germany2026-04-21
Murillo Malet1016Brazil2026-04-07
Kadeem Flosi1017Japan2026-04-14
Aika Inouye1018Russia2026-04-09
Claire Tollner1019Argentina2026-04-11
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jones VocelkaRussiaIoni Bowcher QUALIFIED
Kadeem FlosiBrazilAnna Fali NEW
Johnson SergiRussiaAsiya Javayant NEGOTIATION
Antonio CaudyArgentinaBernardo Dominic UNQUALIFIED
Rodrigues CampainJapanXuxue Feng QUALIFIED
Sinclair WaycottIndiaBernardo Dominic NEW
Isabel BowleyGermanyIoni Bowcher RENEWAL
Salvatore StockhamCanadaXuxue Feng NEW
Izzy GarufiJapanAnna Fali PROPOSAL
Chavez BriddickBrazilElwin Sharvill QUALIFIED
Kadeem FlosiIndiaOnyama Limba QUALIFIED
Kadeem FlosiItalyOnyama Limba PROPOSAL
Emily WhobreyItalyAnna Fali NEGOTIATION
Darci PoquetteFranceIvan Magalhaes UNQUALIFIED
Maisha RulapaughSpainAnna Fali NEW
Smith GlickUnited KingdomAsiya Javayant QUALIFIED
Francesco ShinkoBrazilAnna Fali QUALIFIED
Murillo MaletSpainIvan Magalhaes UNQUALIFIED
Sinclair WaycottUnited KingdomOnyama Limba NEGOTIATION
Misaki RoysterUnited KingdomIoni Bowcher PROPOSAL
Jeanfrancois VenereBrazilAmy Elsner NEGOTIATION
Aditya KuskoArgentinaAsiya Javayant NEGOTIATION
Greenwood BologniaRussiaElwin Sharvill PROPOSAL
Ricardo GauchoJapanIoni Bowcher RENEWAL
Deepesh ChuiGermanyXuxue Feng PROPOSAL
Stacey MacleadCanadaStephen Shaw QUALIFIED
Costa DilliardArgentinaBernardo Dominic RENEWAL
David DarakjyArgentinaIvan Magalhaes NEGOTIATION
Mayumi KolmetzJapanAmy Elsner NEW
David DarakjyItalyXuxue Feng QUALIFIED
Mayumi KolmetzUnited KingdomXuxue Feng NEW
Ashley DoeCanadaIvan Magalhaes NEGOTIATION
Kaitlin OstroskySpainXuxue Feng QUALIFIED
Octavia MaletCanadaIvan Magalhaes NEW
Stacey MacleadBrazilAsiya Javayant UNQUALIFIED
Aika InouyeGermanyAnna Fali PROPOSAL
Claire TollnerFranceAmy Elsner QUALIFIED
Kadeem FlosiFranceAnna Fali UNQUALIFIED
Francesco ShinkoIndiaStephen Shaw NEGOTIATION
Kadeem FlosiFranceAsiya Javayant NEGOTIATION

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