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
Stacey MacleadJapanOnyama Limba NEW
Kaitlin OstroskyUnited KingdomAmy Elsner RENEWAL
Clifford RimSpainIvan Magalhaes UNQUALIFIED
Stacey MacleadGermanyAnna Fali NEGOTIATION
Kaitlin OstroskyCanadaElwin Sharvill UNQUALIFIED
David DarakjyJapanAmy Elsner PROPOSAL
Juan WieserSpainAsiya Javayant QUALIFIED
Alejandro PerinFranceElwin Sharvill NEGOTIATION
Claire TollnerUnited KingdomXuxue Feng PROPOSAL
Rodrigues CampainIndiaXuxue Feng NEW
Johnson SergiBrazilElwin Sharvill RENEWAL
Jennifer AmigonAustraliaBernardo Dominic UNQUALIFIED
Clifford RimJapanAmy Elsner NEGOTIATION
Misaki RoysterCanadaIoni Bowcher NEW
Tony FollerJapanOnyama Limba UNQUALIFIED
Ivar PaprockiAustraliaOnyama Limba PROPOSAL
Wickens NestleIndiaIvan Magalhaes RENEWAL
Arvin AlbaresItalyOnyama Limba NEW
Faith GillianSpainXuxue Feng RENEWAL
Jones VocelkaItalyElwin Sharvill UNQUALIFIED
Aruna FigeroaItalyStephen Shaw PROPOSAL
Emily WhobreyAustraliaAsiya Javayant NEW
Sinclair WaycottArgentinaStephen Shaw PROPOSAL
Maisha RulapaughCanadaStephen Shaw UNQUALIFIED
Johnson SergiFranceBernardo Dominic QUALIFIED
Emily WhobreyCanadaAnna Fali QUALIFIED
Claire TollnerFranceElwin Sharvill NEW
Jones VocelkaBrazilIvan Magalhaes QUALIFIED
Maisha RulapaughBrazilBernardo Dominic NEGOTIATION
Murillo MaletBrazilAnna Fali NEW
Alejandro PerinItalyAmy Elsner QUALIFIED
Tony FollerJapanBernardo Dominic RENEWAL
Darci PoquetteRussiaXuxue Feng QUALIFIED
Aruna FigeroaUnited KingdomAsiya Javayant NEGOTIATION
Maisha RulapaughItalyAnna Fali NEW
Jeanfrancois VenereAustraliaIoni Bowcher RENEWAL
Faith GillianItalyOnyama Limba QUALIFIED
Julie StensethIndiaOnyama Limba NEGOTIATION
Misaki RoysterJapanOnyama Limba NEW
Leon OldroydIndiaOnyama Limba NEGOTIATION
Rodrigues CampainUnited KingdomBernardo Dominic QUALIFIED
Kadeem FlosiRussiaAmy Elsner QUALIFIED
Clifford RimJapanAsiya Javayant NEW
Johnson SergiSpainIoni Bowcher QUALIFIED
Ashley DoeAustraliaIvan Magalhaes NEGOTIATION
Maisha RulapaughGermanyIvan Magalhaes PROPOSAL
Wickens NestleIndiaIvan Magalhaes NEGOTIATION
Johnson SergiItalyBernardo Dominic NEW
Greenwood BologniaSpainBernardo Dominic UNQUALIFIED
Alejandro PerinCanadaAnna Fali RENEWAL
Horizontal
NameCountryRepresentativeStatus
Alejandro PerinItalyBernardo Dominic RENEWAL
Maria MarrierSpainElwin Sharvill NEW
Tony FollerFranceIoni Bowcher NEW
Aika InouyeJapanAmy Elsner QUALIFIED
Maria MarrierBrazilStephen Shaw NEGOTIATION
Kadeem FlosiJapanIvan Magalhaes PROPOSAL
Nicolas IturbideGermanyXuxue Feng PROPOSAL
Jones VocelkaSpainAmy Elsner PROPOSAL
Aruna FigeroaFranceStephen Shaw RENEWAL
Claire TollnerCanadaIvan Magalhaes UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ricardo GauchoGermany2025-09-16Rousseaux, Michael Esq RENEWAL6Ivan Magalhaes
1001Isabel BowleyAustralia2025-10-01Dorl, James J Esq NEW81Stephen Shaw
1002Murillo MaletRussia2025-09-09Buckley Miller Wright RENEWAL95Elwin Sharvill
1003Aruna FigeroaCanada2025-09-28Feltz Printing Service QUALIFIED61Anna Fali
1004Morrow RutaGermany2025-09-19King, Christopher A Esq UNQUALIFIED26Stephen Shaw
1005Munro FerenczJapan2025-09-20Rousseaux, Michael Esq NEW62Ivan Magalhaes
1006Antonio CaudyArgentina2025-09-11Commercial Press NEW56Stephen Shaw
1007Jeanfrancois VenereItaly2025-09-17Benton, John B Jr RENEWAL88Anna Fali
1008Alejandro PerinGermany2025-09-06Printing Dimensions NEGOTIATION8Asiya Javayant
1009Sinclair WaycottItaly2025-09-30Buckley Miller Wright UNQUALIFIED99Ioni Bowcher
1010Jones VocelkaUnited Kingdom2025-09-13Rangoni Of Florence NEGOTIATION77Anna Fali
1011Ricardo GauchoGermany2025-09-23Benton, John B Jr PROPOSAL34Stephen Shaw
1012Misaki RoysterCanada2025-10-03King, Christopher A Esq PROPOSAL61Amy Elsner
1013Mujtaba NickaBrazil2025-10-02Buckley Miller Wright RENEWAL35Anna Fali
1014Julie StensethItaly2025-09-06Morlong Associates RENEWAL39Xuxue Feng
1015Ricardo GauchoArgentina2025-09-15Rangoni Of Florence NEGOTIATION88Elwin Sharvill
1016Aika InouyeGermany2025-09-17Rangoni Of Florence NEW31Stephen Shaw
1017Cody SaylorsIndia2025-09-21Truhlar And Truhlar Attys NEW80Ioni Bowcher
1018Aika InouyeUnited Kingdom2025-09-05Buckley Miller Wright NEGOTIATION5Amy Elsner
1019James ButtItaly2025-09-09Rousseaux, Michael Esq PROPOSAL89Elwin Sharvill
1020Adams MorascaJapan2025-10-01Morlong Associates QUALIFIED85Stephen Shaw
1021Costa DilliardUnited Kingdom2025-09-26Dorl, James J Esq QUALIFIED35Onyama Limba
1022Francesco ShinkoItaly2025-10-01Chapman, Ross E Esq NEW27Amy Elsner
1023Aruna FigeroaUnited Kingdom2025-09-05Commercial Press QUALIFIED51Ioni Bowcher
1024Sinclair WaycottItaly2025-09-08Dorl, James J Esq NEW71Anna Fali
1025Ashley DoeSpain2025-09-05Chapman, Ross E Esq PROPOSAL86Ivan Magalhaes
1026Wickens NestleIndia2025-09-22Benton, John B Jr NEGOTIATION44Elwin Sharvill
1027Claire TollnerSpain2025-10-03Rousseaux, Michael Esq RENEWAL2Ioni Bowcher
1028Mayumi KolmetzJapan2025-10-03Feiner Bros PROPOSAL45Ioni Bowcher
1029Adams MorascaSpain2025-10-03Benton, John B Jr PROPOSAL10Onyama Limba
1030Morrow RutaBrazil2025-09-27Rangoni Of Florence NEW46Asiya Javayant
1031Morrow RutaJapan2025-09-12Buckley Miller Wright NEGOTIATION7Elwin Sharvill
1032Darci PoquetteUnited Kingdom2025-09-21Chanay, Jeffrey A Esq RENEWAL5Anna Fali
1033Mayumi KolmetzUnited Kingdom2025-09-12Chapman, Ross E Esq RENEWAL44Elwin Sharvill
1034Darci PoquetteFrance2025-09-10Feltz Printing Service NEGOTIATION0Bernardo Dominic
1035Sinclair WaycottArgentina2025-09-07Commercial Press PROPOSAL4Onyama Limba
1036Emily WhobreyItaly2025-09-28King, Christopher A Esq UNQUALIFIED69Elwin Sharvill
1037Greenwood BologniaFrance2025-09-21Dorl, James J Esq UNQUALIFIED52Stephen Shaw
1038Kaitlin OstroskyAustralia2025-09-18Dorl, James J Esq NEGOTIATION8Asiya Javayant
1039Murillo MaletIndia2025-09-23Benton, John B Jr NEGOTIATION48Asiya Javayant
1040Jefferson SchemmerIndia2025-10-02Benton, John B Jr NEGOTIATION46Anna Fali
1041Isabel BowleySpain2025-09-20Benton, John B Jr NEW80Amy Elsner
1042Octavia MaletIndia2025-09-29Chemel, James L Cpa RENEWAL73Asiya Javayant
1043Greenwood BologniaArgentina2025-09-10King, Christopher A Esq NEGOTIATION28Amy Elsner
1044Jeanfrancois VenereGermany2025-09-23Rangoni Of Florence UNQUALIFIED20Asiya Javayant
1045Misaki RoysterAustralia2025-09-19Rangoni Of Florence PROPOSAL17Xuxue Feng
1046Kadeem FlosiUnited Kingdom2025-09-13Buckley Miller Wright PROPOSAL10Bernardo Dominic
1047Rodrigues CampainItaly2025-09-19Chemel, James L Cpa NEGOTIATION83Amy Elsner
1048Ashley DoeBrazil2025-09-11Truhlar And Truhlar Attys NEW87Ioni Bowcher
1049Murillo MaletRussia2025-09-15Buckley Miller Wright PROPOSAL39Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Antonio CaudyBrazilXuxue Feng NEGOTIATION
James ButtFranceBernardo Dominic NEGOTIATION
Nicolas IturbideArgentinaStephen Shaw NEW
Munro FerenczUnited KingdomIoni Bowcher PROPOSAL
Ivar PaprockiIndiaXuxue Feng QUALIFIED
Darci PoquetteGermanyOnyama Limba PROPOSAL
Ashley DoeFranceBernardo Dominic RENEWAL
Mujtaba NickaRussiaStephen Shaw UNQUALIFIED
Emily WhobreyArgentinaOnyama Limba PROPOSAL
Francesco ShinkoAustraliaAsiya Javayant UNQUALIFIED
Juan WieserArgentinaIvan Magalhaes RENEWAL
Jeanfrancois VenereAustraliaIoni Bowcher PROPOSAL
Jeanfrancois VenereSpainXuxue Feng RENEWAL
Jones VocelkaBrazilXuxue Feng NEW
Wickens NestleBrazilAmy Elsner NEW
Salvatore StockhamCanadaAmy Elsner NEGOTIATION
Greenwood BologniaItalyIvan Magalhaes PROPOSAL
Antonio CaudyCanadaAmy Elsner QUALIFIED
Antonio CaudyGermanyIoni Bowcher RENEWAL
Aruna FigeroaAustraliaElwin Sharvill RENEWAL
Sinclair WaycottFranceAsiya Javayant QUALIFIED
Mayumi KolmetzSpainStephen Shaw RENEWAL
Francesco ShinkoIndiaElwin Sharvill PROPOSAL
Costa DilliardAustraliaIoni Bowcher QUALIFIED
Salvatore StockhamGermanyBernardo Dominic UNQUALIFIED
Clifford RimFranceAmy Elsner UNQUALIFIED
Rodrigues CampainSpainBernardo Dominic NEW
Costa DilliardJapanBernardo Dominic NEW
Mujtaba NickaRussiaStephen Shaw UNQUALIFIED
Juan WieserBrazilAmy Elsner NEW
Adams MorascaCanadaOnyama Limba RENEWAL
Misaki RoysterCanadaElwin Sharvill QUALIFIED
Stacey MacleadItalyOnyama Limba NEW
Tony FollerIndiaAsiya Javayant RENEWAL
Emily WhobreyItalyAmy Elsner RENEWAL
Nicolas IturbideBrazilAmy Elsner NEW
Mujtaba NickaFranceBernardo Dominic UNQUALIFIED
Munro FerenczFranceIvan Magalhaes UNQUALIFIED
Sinclair WaycottRussiaIvan Magalhaes NEGOTIATION
Ashley DoeIndiaXuxue Feng PROPOSAL
Costa DilliardUnited KingdomOnyama Limba PROPOSAL
Rodrigues CampainBrazilElwin Sharvill RENEWAL
Kaitlin OstroskyArgentinaIoni Bowcher QUALIFIED
Stacey MacleadRussiaBernardo Dominic RENEWAL
Jones VocelkaItalyOnyama Limba NEGOTIATION
Deepesh ChuiGermanyIvan Magalhaes NEGOTIATION
Clifford RimBrazilOnyama Limba NEW
Silvio SlusarskiCanadaIvan Magalhaes NEGOTIATION
Jones VocelkaGermanyAsiya Javayant QUALIFIED
Aruna FigeroaCanadaIvan Magalhaes NEGOTIATION
Frozen Columns
Name
Mujtaba Nicka
Wickens Nestle
Maria Marrier
Smith Glick
Costa Dilliard
Darci Poquette
Aruna Figeroa
Kaitlin Ostrosky
Clifford Rim
James Butt
Izzy Garufi
Maria Marrier
Ricardo Gaucho
Mayumi Kolmetz
Cody Saylors
Adams Morasca
Aika Inouye
Antonio Caudy
Salvatore Stockham
Ivar Paprocki
Faith Gillian
Jeanfrancois Venere
Kadeem Flosi
Faith Gillian
Kaitlin Ostrosky
Morrow Ruta
Deepesh Chui
Silvio Slusarski
Darci Poquette
Maisha Rulapaugh
Juan Wieser
Cody Saylors
Chavez Briddick
Alejandro Perin
Smith Glick
Kaitlin Ostrosky
Alejandro Perin
Jennifer Amigon
Julie Stenseth
Maria Marrier
Izzy Garufi
Chavez Briddick
Sinclair Waycott
Misaki Royster
James Butt
Ivar Paprocki
Ashley Doe
Darci Poquette
Clifford Rim
Faith Gillian
IdCountryDate
1000Spain2025-09-06
1001Spain2025-09-13
1002Canada2025-10-02
1003Japan2025-09-17
1004Canada2025-09-27
1005Italy2025-09-17
1006Russia2025-10-03
1007Australia2025-10-03
1008Canada2025-09-15
1009Canada2025-09-21
1010Russia2025-09-27
1011Argentina2025-10-03
1012Russia2025-09-29
1013Spain2025-09-30
1014India2025-09-16
1015Argentina2025-09-14
1016Spain2025-09-25
1017Russia2025-09-18
1018Italy2025-09-23
1019Spain2025-09-25
1020Italy2025-09-17
1021United Kingdom2025-09-07
1022Argentina2025-09-07
1023Spain2025-10-01
1024Spain2025-09-26
1025Australia2025-09-14
1026Russia2025-09-13
1027Russia2025-09-30
1028Canada2025-09-24
1029India2025-09-12
1030Canada2025-09-29
1031Argentina2025-09-09
1032Japan2025-09-10
1033Argentina2025-09-17
1034Brazil2025-09-30
1035France2025-09-23
1036Italy2025-10-01
1037India2025-09-27
1038Australia2025-09-25
1039Spain2025-09-20
1040Germany2025-09-22
1041United Kingdom2025-09-19
1042Russia2025-09-05
1043India2025-09-14
1044France2025-09-24
1045Argentina2025-09-24
1046Russia2025-09-10
1047United Kingdom2025-09-11
1048Japan2025-09-22
1049Brazil2025-09-21

On-Demand Data

NameIdCountryDate
David Darakjy1000Brazil2025-09-21
Jennifer Amigon1001Japan2025-09-13
Octavia Malet1002Germany2025-09-18
Alejandro Perin1003Canada2025-09-05
Nicolas Iturbide1004Italy2025-09-28
Maisha Rulapaugh1005Canada2025-09-18
Juan Wieser1006Japan2025-10-04
Wickens Nestle1007Japan2025-09-15
David Darakjy1008Russia2025-09-05
Costa Dilliard1009France2025-09-30
Morrow Ruta1010Argentina2025-09-21
Adams Morasca1011Italy2025-09-27
Murillo Malet1012Russia2025-09-21
Murillo Malet1013Japan2025-09-07
Jones Vocelka1014United Kingdom2025-09-25
Murillo Malet1015France2025-09-14
Smith Glick1016Australia2025-09-11
Isabel Bowley1017Australia2025-09-29
Sinclair Waycott1018Germany2025-09-12
Adams Morasca1019Australia2025-09-27
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Sinclair WaycottArgentinaIoni Bowcher QUALIFIED
Chavez BriddickFranceIoni Bowcher PROPOSAL
Aruna FigeroaItalyIvan Magalhaes NEW
James ButtSpainIoni Bowcher PROPOSAL
Aika InouyeItalyStephen Shaw UNQUALIFIED
Smith GlickJapanOnyama Limba UNQUALIFIED
David DarakjyCanadaOnyama Limba PROPOSAL
Smith GlickArgentinaBernardo Dominic UNQUALIFIED
Chavez BriddickItalyElwin Sharvill RENEWAL
Greenwood BologniaCanadaIoni Bowcher RENEWAL
Tony FollerAustraliaIvan Magalhaes RENEWAL
Cody SaylorsJapanIoni Bowcher RENEWAL
Darci PoquetteCanadaStephen Shaw RENEWAL
Wickens NestleCanadaBernardo Dominic QUALIFIED
Kadeem FlosiAustraliaElwin Sharvill UNQUALIFIED
Kadeem FlosiSpainStephen Shaw PROPOSAL
James ButtIndiaOnyama Limba NEW
Sinclair WaycottArgentinaAsiya Javayant RENEWAL
Clifford RimIndiaElwin Sharvill RENEWAL
Emily WhobreyRussiaXuxue Feng RENEWAL
Misaki RoysterFranceElwin Sharvill UNQUALIFIED
Jennifer AmigonAustraliaOnyama Limba UNQUALIFIED
Faith GillianAustraliaStephen Shaw NEW
Salvatore StockhamRussiaAnna Fali RENEWAL
Julie StensethGermanyIvan Magalhaes UNQUALIFIED
Maria MarrierAustraliaBernardo Dominic NEGOTIATION
Maisha RulapaughBrazilAmy Elsner PROPOSAL
Chavez BriddickUnited KingdomOnyama Limba NEGOTIATION
Greenwood BologniaAustraliaAnna Fali RENEWAL
Kadeem FlosiSpainIoni Bowcher NEW
Francesco ShinkoArgentinaAsiya Javayant RENEWAL
Mayumi KolmetzItalyIoni Bowcher QUALIFIED
Kaitlin OstroskyAustraliaOnyama Limba QUALIFIED
Murillo MaletBrazilStephen Shaw PROPOSAL
Octavia MaletUnited KingdomIoni Bowcher NEGOTIATION
Mayumi KolmetzAustraliaIvan Magalhaes RENEWAL
Salvatore StockhamRussiaBernardo Dominic QUALIFIED
Leja CaldareraBrazilIvan Magalhaes PROPOSAL
Ivar PaprockiUnited KingdomAmy Elsner PROPOSAL
Ricardo GauchoArgentinaOnyama Limba QUALIFIED

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