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
Greenwood BologniaCanadaOnyama Limba RENEWAL
Arvin AlbaresSpainIoni Bowcher NEW
Antonio CaudyRussiaBernardo Dominic PROPOSAL
Jennifer AmigonGermanyAmy Elsner UNQUALIFIED
Ashley DoeGermanyIvan Magalhaes NEGOTIATION
Octavia MaletAustraliaXuxue Feng QUALIFIED
Kaitlin OstroskyIndiaStephen Shaw RENEWAL
Mujtaba NickaUnited KingdomBernardo Dominic NEGOTIATION
Tony FollerUnited KingdomBernardo Dominic QUALIFIED
Costa DilliardBrazilStephen Shaw NEGOTIATION
Nicolas IturbideItalyAsiya Javayant UNQUALIFIED
Antonio CaudyBrazilXuxue Feng NEGOTIATION
Juan WieserItalyAmy Elsner UNQUALIFIED
Nicolas IturbideJapanAmy Elsner PROPOSAL
Murillo MaletUnited KingdomIoni Bowcher RENEWAL
Aditya KuskoRussiaAsiya Javayant NEW
Morrow RutaUnited KingdomBernardo Dominic RENEWAL
Munro FerenczFranceOnyama Limba UNQUALIFIED
Claire TollnerCanadaBernardo Dominic RENEWAL
David DarakjyBrazilAmy Elsner NEW
Clifford RimArgentinaIoni Bowcher QUALIFIED
Maisha RulapaughBrazilBernardo Dominic RENEWAL
Deepesh ChuiCanadaElwin Sharvill NEGOTIATION
Cody SaylorsAustraliaAsiya Javayant NEW
Aika InouyeFranceElwin Sharvill NEGOTIATION
Misaki RoysterSpainXuxue Feng NEW
Claire TollnerIndiaAnna Fali QUALIFIED
Deepesh ChuiIndiaBernardo Dominic UNQUALIFIED
Alejandro PerinIndiaAsiya Javayant NEGOTIATION
Clifford RimAustraliaIvan Magalhaes PROPOSAL
Munro FerenczFranceAsiya Javayant NEW
Misaki RoysterSpainElwin Sharvill UNQUALIFIED
Claire TollnerRussiaIoni Bowcher NEW
Johnson SergiCanadaOnyama Limba NEW
Greenwood BologniaJapanIoni Bowcher RENEWAL
Johnson SergiFranceStephen Shaw NEW
Emily WhobreyFranceXuxue Feng UNQUALIFIED
Darci PoquetteFranceAsiya Javayant RENEWAL
Rodrigues CampainUnited KingdomElwin Sharvill UNQUALIFIED
Maisha RulapaughArgentinaAmy Elsner UNQUALIFIED
Jefferson SchemmerBrazilAnna Fali RENEWAL
Misaki RoysterItalyXuxue Feng PROPOSAL
David DarakjyAustraliaOnyama Limba PROPOSAL
Cody SaylorsJapanStephen Shaw QUALIFIED
Jeanfrancois VenereBrazilIoni Bowcher QUALIFIED
Leja CaldareraItalyBernardo Dominic PROPOSAL
Nicolas IturbideRussiaStephen Shaw NEGOTIATION
Jones VocelkaUnited KingdomStephen Shaw NEW
Adams MorascaIndiaAsiya Javayant RENEWAL
Nicolas IturbideIndiaIvan Magalhaes RENEWAL
Horizontal
NameCountryRepresentativeStatus
Greenwood BologniaAustraliaStephen Shaw UNQUALIFIED
Alejandro PerinJapanIvan Magalhaes PROPOSAL
Smith GlickRussiaAsiya Javayant UNQUALIFIED
Munro FerenczRussiaStephen Shaw NEGOTIATION
Julie StensethRussiaElwin Sharvill NEW
Chavez BriddickJapanIoni Bowcher QUALIFIED
Emily WhobreyUnited KingdomIvan Magalhaes PROPOSAL
Clifford RimGermanyElwin Sharvill PROPOSAL
Misaki RoysterUnited KingdomOnyama Limba RENEWAL
Faith GillianSpainIoni Bowcher UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Maria MarrierAustralia2026-06-03Feltz Printing Service PROPOSAL5Xuxue Feng
1001Munro FerenczAustralia2026-06-14Commercial Press NEGOTIATION48Xuxue Feng
1002Aika InouyeUnited Kingdom2026-06-12Buckley Miller Wright NEW7Asiya Javayant
1003Murillo MaletSpain2026-05-27Dorl, James J Esq NEW97Xuxue Feng
1004Jennifer AmigonRussia2026-06-16Commercial Press QUALIFIED76Asiya Javayant
1005Silvio SlusarskiArgentina2026-05-29Chemel, James L Cpa RENEWAL17Bernardo Dominic
1006Chavez BriddickRussia2026-06-18King, Christopher A Esq NEW22Bernardo Dominic
1007Claire TollnerItaly2026-06-09Rousseaux, Michael Esq QUALIFIED65Amy Elsner
1008Johnson SergiIndia2026-06-14Buckley Miller Wright NEGOTIATION74Onyama Limba
1009Greenwood BologniaIndia2026-06-12Truhlar And Truhlar Attys QUALIFIED81Ivan Magalhaes
1010Cody SaylorsRussia2026-06-07Feiner Bros PROPOSAL86Ioni Bowcher
1011Mujtaba NickaBrazil2026-06-17Feltz Printing Service RENEWAL68Xuxue Feng
1012Isabel BowleyItaly2026-06-03Chapman, Ross E Esq RENEWAL71Xuxue Feng
1013Mayumi KolmetzIndia2026-06-02Dorl, James J Esq PROPOSAL40Anna Fali
1014Morrow RutaSpain2026-05-21Morlong Associates NEGOTIATION21Ioni Bowcher
1015Ricardo GauchoRussia2026-06-14Rousseaux, Michael Esq NEGOTIATION63Ioni Bowcher
1016Alejandro PerinAustralia2026-06-17Rangoni Of Florence PROPOSAL29Stephen Shaw
1017Julie StensethFrance2026-06-03Morlong Associates RENEWAL69Stephen Shaw
1018Octavia MaletItaly2026-06-18Dorl, James J Esq PROPOSAL82Ivan Magalhaes
1019Isabel BowleyFrance2026-06-18Buckley Miller Wright NEGOTIATION55Ioni Bowcher
1020Ashley DoeUnited Kingdom2026-06-18Chapman, Ross E Esq QUALIFIED59Elwin Sharvill
1021Alejandro PerinUnited Kingdom2026-06-12King, Christopher A Esq NEW0Anna Fali
1022Emily WhobreyRussia2026-06-08King, Christopher A Esq NEW44Elwin Sharvill
1023Tony FollerCanada2026-05-22Buckley Miller Wright NEW10Xuxue Feng
1024Nicolas IturbideRussia2026-06-16Rousseaux, Michael Esq QUALIFIED26Ivan Magalhaes
1025Octavia MaletGermany2026-06-09Truhlar And Truhlar Attys PROPOSAL2Bernardo Dominic
1026David DarakjyRussia2026-05-30Chanay, Jeffrey A Esq UNQUALIFIED77Asiya Javayant
1027Leja CaldareraAustralia2026-06-18Rousseaux, Michael Esq UNQUALIFIED70Onyama Limba
1028Antonio CaudyJapan2026-06-07Chapman, Ross E Esq RENEWAL0Anna Fali
1029Aditya KuskoBrazil2026-05-28Chapman, Ross E Esq QUALIFIED92Amy Elsner
1030Mujtaba NickaAustralia2026-06-16Chapman, Ross E Esq PROPOSAL44Ioni Bowcher
1031Nicolas IturbideJapan2026-06-15Chapman, Ross E Esq NEGOTIATION40Elwin Sharvill
1032Faith GillianAustralia2026-05-27Chemel, James L Cpa NEW61Onyama Limba
1033Ashley DoeFrance2026-06-18Feltz Printing Service PROPOSAL30Bernardo Dominic
1034Greenwood BologniaBrazil2026-05-21Feiner Bros RENEWAL40Ioni Bowcher
1035Arvin AlbaresSpain2026-05-31Chemel, James L Cpa NEGOTIATION79Onyama Limba
1036Jones VocelkaCanada2026-06-11Chapman, Ross E Esq PROPOSAL22Elwin Sharvill
1037Leja CaldareraArgentina2026-06-07Chapman, Ross E Esq RENEWAL75Amy Elsner
1038Greenwood BologniaCanada2026-05-24Morlong Associates NEW47Ivan Magalhaes
1039Darci PoquetteCanada2026-06-01Chapman, Ross E Esq PROPOSAL35Xuxue Feng
1040Adams MorascaFrance2026-05-27Chanay, Jeffrey A Esq UNQUALIFIED63Anna Fali
1041Cody SaylorsJapan2026-06-08Chemel, James L Cpa PROPOSAL65Bernardo Dominic
1042Maria MarrierArgentina2026-06-19Chemel, James L Cpa NEGOTIATION43Onyama Limba
1043Smith GlickJapan2026-05-22Rangoni Of Florence QUALIFIED88Elwin Sharvill
1044Cody SaylorsBrazil2026-05-26Morlong Associates RENEWAL42Ioni Bowcher
1045Smith GlickArgentina2026-06-17Chanay, Jeffrey A Esq QUALIFIED52Elwin Sharvill
1046Julie StensethCanada2026-05-21Dorl, James J Esq QUALIFIED20Ivan Magalhaes
1047Kaitlin OstroskyBrazil2026-06-13King, Christopher A Esq NEGOTIATION31Amy Elsner
1048Chavez BriddickBrazil2026-06-04Rousseaux, Michael Esq NEGOTIATION87Elwin Sharvill
1049Alejandro PerinAustralia2026-05-21Printing Dimensions PROPOSAL98Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Morrow RutaJapanIoni Bowcher QUALIFIED
Maisha RulapaughSpainElwin Sharvill RENEWAL
James ButtArgentinaAmy Elsner UNQUALIFIED
Johnson SergiFranceAnna Fali RENEWAL
Ricardo GauchoItalyXuxue Feng QUALIFIED
Johnson SergiArgentinaStephen Shaw UNQUALIFIED
Ivar PaprockiCanadaStephen Shaw NEGOTIATION
Darci PoquetteUnited KingdomStephen Shaw UNQUALIFIED
Maria MarrierJapanElwin Sharvill NEW
Isabel BowleyArgentinaBernardo Dominic PROPOSAL
Salvatore StockhamSpainXuxue Feng QUALIFIED
Silvio SlusarskiRussiaOnyama Limba NEGOTIATION
Mujtaba NickaSpainXuxue Feng NEW
Darci PoquetteGermanyXuxue Feng PROPOSAL
Adams MorascaGermanyBernardo Dominic PROPOSAL
David DarakjyGermanyAnna Fali RENEWAL
David DarakjyCanadaElwin Sharvill QUALIFIED
Salvatore StockhamSpainBernardo Dominic NEW
Costa DilliardUnited KingdomAsiya Javayant NEGOTIATION
Misaki RoysterAustraliaStephen Shaw QUALIFIED
Aruna FigeroaUnited KingdomOnyama Limba UNQUALIFIED
Johnson SergiAustraliaBernardo Dominic UNQUALIFIED
Aika InouyeArgentinaStephen Shaw NEGOTIATION
Silvio SlusarskiCanadaElwin Sharvill NEW
Jennifer AmigonCanadaOnyama Limba UNQUALIFIED
Emily WhobreyCanadaAnna Fali PROPOSAL
Julie StensethCanadaAmy Elsner PROPOSAL
Sinclair WaycottItalyOnyama Limba QUALIFIED
Jones VocelkaCanadaAsiya Javayant RENEWAL
Costa DilliardRussiaBernardo Dominic RENEWAL
Claire TollnerArgentinaIoni Bowcher RENEWAL
Maisha RulapaughGermanyAsiya Javayant NEW
Claire TollnerAustraliaIvan Magalhaes PROPOSAL
Aditya KuskoFranceIoni Bowcher NEW
Morrow RutaSpainXuxue Feng NEW
Maria MarrierAustraliaAmy Elsner UNQUALIFIED
Johnson SergiBrazilOnyama Limba NEGOTIATION
Misaki RoysterAustraliaAnna Fali NEW
Leon OldroydItalyIoni Bowcher PROPOSAL
Costa DilliardSpainAnna Fali PROPOSAL
Aika InouyeCanadaStephen Shaw RENEWAL
Jennifer AmigonCanadaBernardo Dominic QUALIFIED
Stacey MacleadFranceAnna Fali PROPOSAL
Rodrigues CampainUnited KingdomElwin Sharvill RENEWAL
James ButtSpainStephen Shaw QUALIFIED
Mujtaba NickaRussiaIoni Bowcher NEW
Sinclair WaycottSpainIvan Magalhaes NEGOTIATION
Maisha RulapaughRussiaAsiya Javayant NEGOTIATION
Smith GlickItalyBernardo Dominic UNQUALIFIED
Mujtaba NickaUnited KingdomAnna Fali NEW
Frozen Columns
Name
Ivar Paprocki
Kaitlin Ostrosky
Sinclair Waycott
Aika Inouye
Kadeem Flosi
Murillo Malet
Ashley Doe
Munro Ferencz
Misaki Royster
Salvatore Stockham
Salvatore Stockham
Julie Stenseth
Nicolas Iturbide
Juan Wieser
Ivar Paprocki
Wickens Nestle
Darci Poquette
Johnson Sergi
Faith Gillian
Costa Dilliard
Kaitlin Ostrosky
Clifford Rim
Leja Caldarera
Ashley Doe
Izzy Garufi
Clifford Rim
Kadeem Flosi
Greenwood Bolognia
Aditya Kusko
Julie Stenseth
David Darakjy
Juan Wieser
Octavia Malet
Maisha Rulapaugh
Darci Poquette
Chavez Briddick
Rodrigues Campain
Clifford Rim
Ivar Paprocki
Emily Whobrey
Alejandro Perin
Jones Vocelka
Antonio Caudy
Claire Tollner
Maisha Rulapaugh
Aditya Kusko
Jennifer Amigon
Alejandro Perin
Leon Oldroyd
James Butt
IdCountryDate
1000Japan2026-05-21
1001Argentina2026-06-09
1002United Kingdom2026-06-10
1003Canada2026-05-24
1004United Kingdom2026-06-04
1005India2026-05-21
1006United Kingdom2026-06-19
1007France2026-06-14
1008Spain2026-06-13
1009Argentina2026-06-06
1010Australia2026-05-28
1011Japan2026-06-17
1012United Kingdom2026-05-22
1013Argentina2026-06-01
1014Australia2026-05-27
1015Australia2026-05-24
1016Spain2026-05-25
1017Australia2026-06-06
1018Russia2026-06-11
1019India2026-06-11
1020India2026-06-17
1021India2026-05-30
1022Italy2026-05-31
1023Germany2026-06-12
1024Russia2026-05-23
1025Canada2026-06-14
1026India2026-06-02
1027Germany2026-06-09
1028India2026-05-26
1029United Kingdom2026-05-31
1030Russia2026-05-25
1031Canada2026-05-24
1032Italy2026-05-23
1033Russia2026-05-26
1034France2026-06-15
1035France2026-06-01
1036Spain2026-05-29
1037Spain2026-06-14
1038Japan2026-06-04
1039Spain2026-06-04
1040Argentina2026-05-28
1041Brazil2026-06-15
1042Japan2026-06-15
1043Brazil2026-06-13
1044Argentina2026-06-01
1045Russia2026-05-25
1046France2026-05-31
1047Italy2026-06-14
1048Brazil2026-06-18
1049Australia2026-05-28

On-Demand Data

NameIdCountryDate
Deepesh Chui1000Japan2026-05-29
Leon Oldroyd1001Argentina2026-05-25
Maria Marrier1002Canada2026-05-21
Mujtaba Nicka1003India2026-05-23
Kaitlin Ostrosky1004France2026-05-23
Jeanfrancois Venere1005United Kingdom2026-05-27
Mujtaba Nicka1006United Kingdom2026-06-14
Clifford Rim1007Canada2026-05-22
Arvin Albares1008France2026-06-14
Isabel Bowley1009Canada2026-06-17
Ivar Paprocki1010India2026-05-21
Tony Foller1011Germany2026-05-25
Ivar Paprocki1012Brazil2026-05-29
Wickens Nestle1013India2026-06-08
Murillo Malet1014Brazil2026-06-18
David Darakjy1015Japan2026-06-02
Ashley Doe1016Germany2026-06-15
Mayumi Kolmetz1017France2026-06-05
Kaitlin Ostrosky1018Australia2026-06-18
Kadeem Flosi1019Argentina2026-05-31
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Emily WhobreyJapanBernardo Dominic QUALIFIED
Munro FerenczSpainXuxue Feng RENEWAL
Mayumi KolmetzCanadaBernardo Dominic QUALIFIED
Maisha RulapaughCanadaElwin Sharvill NEGOTIATION
Wickens NestleGermanyIvan Magalhaes QUALIFIED
Claire TollnerRussiaBernardo Dominic PROPOSAL
James ButtArgentinaStephen Shaw NEW
Chavez BriddickAustraliaBernardo Dominic QUALIFIED
Ashley DoeArgentinaElwin Sharvill PROPOSAL
Costa DilliardSpainXuxue Feng RENEWAL
Johnson SergiIndiaXuxue Feng UNQUALIFIED
Leon OldroydItalyElwin Sharvill NEGOTIATION
Jennifer AmigonSpainStephen Shaw PROPOSAL
Cody SaylorsIndiaIoni Bowcher RENEWAL
Adams MorascaCanadaAsiya Javayant UNQUALIFIED
Smith GlickCanadaXuxue Feng UNQUALIFIED
Maria MarrierSpainAsiya Javayant UNQUALIFIED
Murillo MaletItalyIvan Magalhaes NEW
Aika InouyeRussiaBernardo Dominic NEGOTIATION
Stacey MacleadSpainElwin Sharvill NEW
Jennifer AmigonJapanIvan Magalhaes NEGOTIATION
Murillo MaletJapanBernardo Dominic NEW
Murillo MaletCanadaIoni Bowcher PROPOSAL
Leon OldroydFranceIvan Magalhaes NEW
Johnson SergiCanadaElwin Sharvill NEW
Julie StensethCanadaOnyama Limba RENEWAL
Sinclair WaycottGermanyElwin Sharvill NEGOTIATION
Costa DilliardUnited KingdomOnyama Limba QUALIFIED
Chavez BriddickFranceIoni Bowcher NEW
Tony FollerSpainXuxue Feng QUALIFIED
Adams MorascaGermanyAnna Fali UNQUALIFIED
Murillo MaletGermanyIoni Bowcher RENEWAL
Clifford RimGermanyIoni Bowcher PROPOSAL
Greenwood BologniaCanadaXuxue Feng NEGOTIATION
Leon OldroydIndiaXuxue Feng UNQUALIFIED
Johnson SergiJapanXuxue Feng RENEWAL
Morrow RutaCanadaIoni Bowcher RENEWAL
James ButtJapanAnna Fali RENEWAL
Greenwood BologniaGermanyAsiya Javayant NEGOTIATION
Jeanfrancois VenereItalyElwin Sharvill 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>