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
Leja CaldareraCanadaIvan Magalhaes NEW
Juan WieserJapanBernardo Dominic NEW
Antonio CaudyFranceAnna Fali QUALIFIED
Faith GillianBrazilOnyama Limba UNQUALIFIED
Emily WhobreySpainXuxue Feng UNQUALIFIED
Leja CaldareraGermanyStephen Shaw NEW
Leon OldroydAustraliaAnna Fali PROPOSAL
Morrow RutaBrazilElwin Sharvill RENEWAL
Mujtaba NickaCanadaAmy Elsner UNQUALIFIED
Stacey MacleadIndiaBernardo Dominic PROPOSAL
Nicolas IturbideFranceIvan Magalhaes QUALIFIED
Antonio CaudyJapanAmy Elsner QUALIFIED
Stacey MacleadItalyXuxue Feng QUALIFIED
Ivar PaprockiAustraliaElwin Sharvill QUALIFIED
Rodrigues CampainSpainAsiya Javayant NEGOTIATION
Nicolas IturbideBrazilBernardo Dominic NEW
Mujtaba NickaArgentinaOnyama Limba NEW
Greenwood BologniaItalyBernardo Dominic UNQUALIFIED
Octavia MaletRussiaAsiya Javayant NEGOTIATION
Murillo MaletItalyBernardo Dominic NEW
Munro FerenczGermanyStephen Shaw QUALIFIED
Jeanfrancois VenereCanadaIvan Magalhaes RENEWAL
James ButtUnited KingdomStephen Shaw QUALIFIED
Juan WieserRussiaAmy Elsner QUALIFIED
Greenwood BologniaItalyOnyama Limba QUALIFIED
Rodrigues CampainIndiaXuxue Feng NEW
Claire TollnerAustraliaIoni Bowcher NEGOTIATION
Chavez BriddickBrazilElwin Sharvill NEW
Aika InouyeSpainOnyama Limba RENEWAL
Wickens NestleGermanyIvan Magalhaes RENEWAL
Claire TollnerIndiaBernardo Dominic UNQUALIFIED
Juan WieserArgentinaOnyama Limba NEGOTIATION
Octavia MaletSpainOnyama Limba NEGOTIATION
Smith GlickIndiaElwin Sharvill NEGOTIATION
Julie StensethCanadaXuxue Feng NEW
Julie StensethRussiaIvan Magalhaes UNQUALIFIED
Mujtaba NickaItalyAnna Fali NEGOTIATION
Aruna FigeroaAustraliaIoni Bowcher UNQUALIFIED
Deepesh ChuiIndiaOnyama Limba RENEWAL
Kadeem FlosiArgentinaAnna Fali UNQUALIFIED
Izzy GarufiBrazilAnna Fali NEGOTIATION
Sinclair WaycottArgentinaElwin Sharvill UNQUALIFIED
Emily WhobreySpainOnyama Limba UNQUALIFIED
Costa DilliardSpainBernardo Dominic NEW
Mayumi KolmetzFranceOnyama Limba NEW
Wickens NestleFranceAnna Fali UNQUALIFIED
Adams MorascaSpainIvan Magalhaes RENEWAL
Antonio CaudyAustraliaIvan Magalhaes RENEWAL
Aruna FigeroaUnited KingdomAnna Fali RENEWAL
Sinclair WaycottAustraliaXuxue Feng RENEWAL
Horizontal
NameCountryRepresentativeStatus
Deepesh ChuiBrazilOnyama Limba PROPOSAL
Ashley DoeCanadaAnna Fali UNQUALIFIED
Costa DilliardArgentinaOnyama Limba QUALIFIED
Julie StensethIndiaAnna Fali NEGOTIATION
Leja CaldareraArgentinaXuxue Feng NEGOTIATION
Munro FerenczIndiaIvan Magalhaes QUALIFIED
Aika InouyeIndiaIvan Magalhaes NEGOTIATION
Octavia MaletUnited KingdomBernardo Dominic PROPOSAL
Jefferson SchemmerAustraliaBernardo Dominic QUALIFIED
Morrow RutaItalyAsiya Javayant NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Wickens NestleAustralia2025-08-18Morlong Associates QUALIFIED91Bernardo Dominic
1001Munro FerenczFrance2025-09-05Rousseaux, Michael Esq UNQUALIFIED28Elwin Sharvill
1002Emily WhobreyAustralia2025-08-19Buckley Miller Wright RENEWAL74Amy Elsner
1003Jeanfrancois VenereUnited Kingdom2025-09-06Buckley Miller Wright QUALIFIED24Onyama Limba
1004Emily WhobreyRussia2025-08-24Benton, John B Jr NEW40Xuxue Feng
1005Darci PoquetteCanada2025-09-07Rangoni Of Florence PROPOSAL41Onyama Limba
1006Mayumi KolmetzAustralia2025-08-14Dorl, James J Esq RENEWAL40Asiya Javayant
1007Ashley DoeItaly2025-08-20Dorl, James J Esq RENEWAL36Asiya Javayant
1008Nicolas IturbideJapan2025-09-01Chapman, Ross E Esq NEW48Elwin Sharvill
1009Munro FerenczArgentina2025-08-26Buckley Miller Wright QUALIFIED94Bernardo Dominic
1010Jones VocelkaAustralia2025-09-07Chanay, Jeffrey A Esq UNQUALIFIED61Elwin Sharvill
1011Stacey MacleadIndia2025-08-28Feiner Bros QUALIFIED60Ioni Bowcher
1012Clifford RimCanada2025-08-23Chanay, Jeffrey A Esq UNQUALIFIED28Elwin Sharvill
1013Jeanfrancois VenereGermany2025-08-13Chapman, Ross E Esq NEW65Ivan Magalhaes
1014Julie StensethAustralia2025-08-17Feiner Bros QUALIFIED52Xuxue Feng
1015Octavia MaletBrazil2025-08-22King, Christopher A Esq UNQUALIFIED53Anna Fali
1016Leon OldroydGermany2025-09-07Chemel, James L Cpa UNQUALIFIED12Anna Fali
1017Wickens NestleGermany2025-09-03Chemel, James L Cpa PROPOSAL74Elwin Sharvill
1018Kaitlin OstroskyArgentina2025-08-13Feiner Bros UNQUALIFIED81Amy Elsner
1019Isabel BowleyArgentina2025-09-04Chanay, Jeffrey A Esq NEGOTIATION49Stephen Shaw
1020Julie StensethAustralia2025-08-24Feiner Bros NEGOTIATION92Ioni Bowcher
1021Aika InouyeUnited Kingdom2025-08-26Commercial Press PROPOSAL19Amy Elsner
1022Murillo MaletItaly2025-08-19Truhlar And Truhlar Attys QUALIFIED94Onyama Limba
1023Costa DilliardRussia2025-09-01Benton, John B Jr QUALIFIED65Bernardo Dominic
1024Kaitlin OstroskyAustralia2025-08-17King, Christopher A Esq UNQUALIFIED62Asiya Javayant
1025Sinclair WaycottIndia2025-09-07Benton, John B Jr NEGOTIATION62Onyama Limba
1026Tony FollerCanada2025-09-02Truhlar And Truhlar Attys NEW26Anna Fali
1027Salvatore StockhamCanada2025-08-10Commercial Press QUALIFIED50Ivan Magalhaes
1028Darci PoquetteGermany2025-08-20Feiner Bros UNQUALIFIED29Stephen Shaw
1029Murillo MaletAustralia2025-08-27Dorl, James J Esq NEW16Anna Fali
1030Silvio SlusarskiItaly2025-08-30Morlong Associates RENEWAL15Ioni Bowcher
1031Francesco ShinkoFrance2025-08-28Chemel, James L Cpa PROPOSAL18Onyama Limba
1032Misaki RoysterArgentina2025-09-01Benton, John B Jr NEW26Ivan Magalhaes
1033Clifford RimCanada2025-08-11Rangoni Of Florence RENEWAL93Amy Elsner
1034Stacey MacleadFrance2025-09-06Chanay, Jeffrey A Esq QUALIFIED51Anna Fali
1035Arvin AlbaresJapan2025-08-19Dorl, James J Esq QUALIFIED33Elwin Sharvill
1036Antonio CaudyUnited Kingdom2025-08-22King, Christopher A Esq NEGOTIATION65Asiya Javayant
1037Isabel BowleyBrazil2025-08-30Chemel, James L Cpa NEW59Anna Fali
1038Munro FerenczUnited Kingdom2025-08-24Benton, John B Jr QUALIFIED41Amy Elsner
1039Kadeem FlosiIndia2025-09-06Feiner Bros RENEWAL74Ivan Magalhaes
1040Mayumi KolmetzFrance2025-09-04Chanay, Jeffrey A Esq NEW79Anna Fali
1041Claire TollnerGermany2025-09-08Truhlar And Truhlar Attys RENEWAL61Amy Elsner
1042Aditya KuskoUnited Kingdom2025-08-11Commercial Press PROPOSAL18Anna Fali
1043Isabel BowleyJapan2025-08-15Chapman, Ross E Esq QUALIFIED80Elwin Sharvill
1044Leja CaldareraUnited Kingdom2025-09-06Rousseaux, Michael Esq QUALIFIED28Xuxue Feng
1045Aditya KuskoCanada2025-08-12King, Christopher A Esq NEGOTIATION52Ioni Bowcher
1046David DarakjyCanada2025-08-10Morlong Associates UNQUALIFIED17Asiya Javayant
1047Arvin AlbaresItaly2025-09-08King, Christopher A Esq PROPOSAL10Stephen Shaw
1048Silvio SlusarskiRussia2025-09-05Buckley Miller Wright UNQUALIFIED86Ivan Magalhaes
1049Aruna FigeroaArgentina2025-08-26Commercial Press NEW36Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Aika InouyeArgentinaIvan Magalhaes RENEWAL
Greenwood BologniaAustraliaBernardo Dominic NEGOTIATION
Jones VocelkaIndiaAmy Elsner NEGOTIATION
Misaki RoysterRussiaStephen Shaw PROPOSAL
Leja CaldareraFranceXuxue Feng NEGOTIATION
Kaitlin OstroskyUnited KingdomAnna Fali PROPOSAL
Octavia MaletFranceAnna Fali QUALIFIED
Juan WieserGermanyElwin Sharvill NEW
Alejandro PerinSpainXuxue Feng NEGOTIATION
Julie StensethItalyElwin Sharvill UNQUALIFIED
Wickens NestleSpainIvan Magalhaes NEW
Kadeem FlosiCanadaStephen Shaw QUALIFIED
David DarakjySpainXuxue Feng QUALIFIED
Ivar PaprockiSpainIvan Magalhaes NEGOTIATION
Ivar PaprockiRussiaAnna Fali PROPOSAL
Izzy GarufiBrazilXuxue Feng QUALIFIED
Jennifer AmigonRussiaOnyama Limba RENEWAL
Emily WhobreyGermanyAmy Elsner NEW
Rodrigues CampainArgentinaOnyama Limba PROPOSAL
David DarakjyArgentinaBernardo Dominic QUALIFIED
Ashley DoeSpainAsiya Javayant UNQUALIFIED
Jones VocelkaBrazilXuxue Feng PROPOSAL
Claire TollnerArgentinaXuxue Feng PROPOSAL
Faith GillianUnited KingdomIoni Bowcher UNQUALIFIED
Darci PoquetteItalyBernardo Dominic RENEWAL
Jones VocelkaFranceBernardo Dominic QUALIFIED
Jefferson SchemmerItalyOnyama Limba UNQUALIFIED
Salvatore StockhamRussiaXuxue Feng NEGOTIATION
Alejandro PerinUnited KingdomAsiya Javayant NEGOTIATION
Clifford RimArgentinaAnna Fali NEGOTIATION
Mujtaba NickaArgentinaIvan Magalhaes PROPOSAL
Misaki RoysterGermanyXuxue Feng NEGOTIATION
Kaitlin OstroskyJapanIvan Magalhaes NEW
Izzy GarufiArgentinaAmy Elsner NEW
Izzy GarufiFranceBernardo Dominic PROPOSAL
Isabel BowleyArgentinaIoni Bowcher PROPOSAL
Murillo MaletGermanyAmy Elsner RENEWAL
Darci PoquetteRussiaIvan Magalhaes NEGOTIATION
Francesco ShinkoAustraliaXuxue Feng RENEWAL
Misaki RoysterUnited KingdomIoni Bowcher QUALIFIED
Maria MarrierArgentinaIoni Bowcher QUALIFIED
James ButtArgentinaIoni Bowcher RENEWAL
Costa DilliardIndiaXuxue Feng QUALIFIED
Kadeem FlosiRussiaOnyama Limba PROPOSAL
Munro FerenczUnited KingdomIvan Magalhaes NEW
Munro FerenczBrazilAsiya Javayant NEGOTIATION
Maisha RulapaughRussiaBernardo Dominic RENEWAL
Claire TollnerCanadaXuxue Feng UNQUALIFIED
Claire TollnerCanadaXuxue Feng PROPOSAL
Clifford RimArgentinaOnyama Limba QUALIFIED
Frozen Columns
Name
Maria Marrier
Smith Glick
Leja Caldarera
Octavia Malet
Leon Oldroyd
Claire Tollner
Leja Caldarera
Silvio Slusarski
Smith Glick
Salvatore Stockham
Faith Gillian
Leja Caldarera
Cody Saylors
Julie Stenseth
Antonio Caudy
Adams Morasca
Jones Vocelka
Ricardo Gaucho
Alejandro Perin
Morrow Ruta
Leon Oldroyd
Jones Vocelka
Leja Caldarera
Ivar Paprocki
Antonio Caudy
Silvio Slusarski
Emily Whobrey
Chavez Briddick
Morrow Ruta
Claire Tollner
Arvin Albares
Octavia Malet
Faith Gillian
Smith Glick
Alejandro Perin
Aruna Figeroa
Leon Oldroyd
Izzy Garufi
Juan Wieser
Ricardo Gaucho
Emily Whobrey
Jones Vocelka
Jones Vocelka
Emily Whobrey
Isabel Bowley
Aditya Kusko
Jefferson Schemmer
Jones Vocelka
Jefferson Schemmer
Sinclair Waycott
IdCountryDate
1000Brazil2025-09-02
1001Japan2025-08-20
1002Argentina2025-08-13
1003Brazil2025-09-08
1004Italy2025-09-02
1005Argentina2025-09-02
1006India2025-08-18
1007Brazil2025-08-20
1008France2025-09-04
1009Australia2025-09-01
1010Brazil2025-08-20
1011Japan2025-08-30
1012Germany2025-08-13
1013Australia2025-08-20
1014Brazil2025-08-31
1015Germany2025-08-18
1016Argentina2025-08-24
1017France2025-08-14
1018Spain2025-08-15
1019Canada2025-08-11
1020France2025-09-02
1021India2025-08-12
1022Australia2025-09-03
1023France2025-08-26
1024Italy2025-09-01
1025Russia2025-09-07
1026Canada2025-09-08
1027Germany2025-08-22
1028Australia2025-08-10
1029Brazil2025-08-23
1030India2025-08-30
1031Japan2025-08-18
1032Australia2025-08-14
1033Spain2025-09-01
1034France2025-08-13
1035Spain2025-08-29
1036United Kingdom2025-09-02
1037United Kingdom2025-08-23
1038Germany2025-08-26
1039Spain2025-08-28
1040Argentina2025-08-12
1041Germany2025-08-31
1042Argentina2025-08-18
1043Argentina2025-08-29
1044France2025-08-13
1045Brazil2025-08-26
1046France2025-08-10
1047Japan2025-08-19
1048Russia2025-08-14
1049Spain2025-08-29

On-Demand Data

NameIdCountryDate
Murillo Malet1000France2025-08-24
Jeanfrancois Venere1001Germany2025-08-29
Sinclair Waycott1002Australia2025-08-17
Jones Vocelka1003India2025-08-29
Ashley Doe1004Russia2025-09-04
Morrow Ruta1005France2025-08-29
Murillo Malet1006Canada2025-08-21
Deepesh Chui1007Canada2025-08-21
Jefferson Schemmer1008Japan2025-08-12
Ricardo Gaucho1009Italy2025-09-08
Smith Glick1010Spain2025-09-02
Ashley Doe1011Russia2025-08-22
Kaitlin Ostrosky1012Italy2025-08-17
Darci Poquette1013Russia2025-08-14
David Darakjy1014Italy2025-08-11
Claire Tollner1015India2025-08-12
Juan Wieser1016Germany2025-08-29
Leja Caldarera1017Germany2025-09-05
Aditya Kusko1018Japan2025-08-15
Izzy Garufi1019Germany2025-08-17
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Nicolas IturbideGermanyAnna Fali NEGOTIATION
Stacey MacleadJapanOnyama Limba QUALIFIED
Murillo MaletGermanyAnna Fali NEGOTIATION
Maria MarrierArgentinaElwin Sharvill QUALIFIED
Aditya KuskoBrazilIoni Bowcher RENEWAL
Leja CaldareraAustraliaBernardo Dominic NEGOTIATION
Arvin AlbaresSpainIvan Magalhaes RENEWAL
Octavia MaletFranceOnyama Limba QUALIFIED
Octavia MaletAustraliaXuxue Feng PROPOSAL
Kaitlin OstroskyRussiaStephen Shaw NEW
Francesco ShinkoGermanyOnyama Limba NEGOTIATION
Aditya KuskoAustraliaXuxue Feng QUALIFIED
Silvio SlusarskiItalyElwin Sharvill QUALIFIED
Izzy GarufiJapanAsiya Javayant RENEWAL
Francesco ShinkoItalyBernardo Dominic UNQUALIFIED
Jefferson SchemmerArgentinaAmy Elsner QUALIFIED
Darci PoquetteRussiaElwin Sharvill PROPOSAL
Leja CaldareraRussiaAmy Elsner NEW
Arvin AlbaresUnited KingdomIoni Bowcher UNQUALIFIED
Leja CaldareraIndiaOnyama Limba QUALIFIED
Ivar PaprockiSpainBernardo Dominic NEW
Greenwood BologniaAustraliaXuxue Feng NEGOTIATION
Mujtaba NickaJapanAnna Fali NEGOTIATION
Jones VocelkaBrazilXuxue Feng UNQUALIFIED
Nicolas IturbideSpainIoni Bowcher RENEWAL
Salvatore StockhamIndiaElwin Sharvill NEW
Adams MorascaFranceBernardo Dominic QUALIFIED
Aditya KuskoItalyElwin Sharvill NEW
Ashley DoeItalyBernardo Dominic NEW
Mujtaba NickaArgentinaElwin Sharvill NEGOTIATION
Alejandro PerinCanadaElwin Sharvill QUALIFIED
Jones VocelkaAustraliaIoni Bowcher QUALIFIED
Nicolas IturbideSpainAnna Fali UNQUALIFIED
Arvin AlbaresCanadaAnna Fali UNQUALIFIED
Johnson SergiBrazilXuxue Feng PROPOSAL
Mayumi KolmetzJapanStephen Shaw UNQUALIFIED
Jefferson SchemmerArgentinaXuxue Feng NEGOTIATION
Mujtaba NickaIndiaIoni Bowcher NEGOTIATION
Chavez BriddickSpainAnna Fali NEW
Antonio CaudyFranceAsiya Javayant 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>