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
Sinclair WaycottGermanyAsiya Javayant PROPOSAL
Salvatore StockhamRussiaIoni Bowcher RENEWAL
Rodrigues CampainCanadaAsiya Javayant UNQUALIFIED
Jeanfrancois VenereBrazilElwin Sharvill NEGOTIATION
Juan WieserSpainElwin Sharvill RENEWAL
Smith GlickBrazilAnna Fali UNQUALIFIED
Salvatore StockhamCanadaBernardo Dominic PROPOSAL
Antonio CaudyRussiaAmy Elsner QUALIFIED
Alejandro PerinUnited KingdomXuxue Feng QUALIFIED
Salvatore StockhamJapanOnyama Limba UNQUALIFIED
Misaki RoysterRussiaBernardo Dominic NEW
Mayumi KolmetzFranceAmy Elsner NEW
Tony FollerRussiaOnyama Limba QUALIFIED
Jefferson SchemmerSpainAsiya Javayant UNQUALIFIED
Greenwood BologniaBrazilIvan Magalhaes NEW
Stacey MacleadIndiaIvan Magalhaes RENEWAL
Tony FollerIndiaAmy Elsner NEGOTIATION
Deepesh ChuiIndiaIoni Bowcher NEGOTIATION
Ricardo GauchoGermanyBernardo Dominic NEW
Aika InouyeSpainStephen Shaw NEW
Chavez BriddickUnited KingdomElwin Sharvill NEW
Adams MorascaCanadaAmy Elsner PROPOSAL
Jefferson SchemmerSpainAnna Fali UNQUALIFIED
Kaitlin OstroskyIndiaIoni Bowcher NEW
Mujtaba NickaItalyXuxue Feng PROPOSAL
Misaki RoysterRussiaAmy Elsner PROPOSAL
Ivar PaprockiAustraliaXuxue Feng UNQUALIFIED
Nicolas IturbideJapanIoni Bowcher PROPOSAL
Arvin AlbaresAustraliaElwin Sharvill QUALIFIED
Smith GlickCanadaAmy Elsner RENEWAL
Sinclair WaycottFranceStephen Shaw NEGOTIATION
Chavez BriddickBrazilIoni Bowcher UNQUALIFIED
Aika InouyeJapanAsiya Javayant PROPOSAL
Aika InouyeJapanXuxue Feng PROPOSAL
Aika InouyeRussiaAsiya Javayant RENEWAL
Ricardo GauchoIndiaIvan Magalhaes NEGOTIATION
Rodrigues CampainSpainAnna Fali NEW
Kadeem FlosiSpainElwin Sharvill QUALIFIED
Antonio CaudyAustraliaAnna Fali RENEWAL
Ricardo GauchoCanadaIoni Bowcher UNQUALIFIED
Arvin AlbaresArgentinaBernardo Dominic NEGOTIATION
Kadeem FlosiUnited KingdomAmy Elsner QUALIFIED
Maria MarrierItalyXuxue Feng NEGOTIATION
Antonio CaudyUnited KingdomAnna Fali PROPOSAL
Mayumi KolmetzIndiaAnna Fali UNQUALIFIED
Izzy GarufiFranceAnna Fali NEW
Nicolas IturbideIndiaAnna Fali UNQUALIFIED
Arvin AlbaresIndiaStephen Shaw PROPOSAL
Mujtaba NickaGermanyAmy Elsner RENEWAL
Ivar PaprockiSpainElwin Sharvill NEW
Horizontal
NameCountryRepresentativeStatus
Clifford RimFranceStephen Shaw NEGOTIATION
Kaitlin OstroskyFranceBernardo Dominic NEW
Chavez BriddickJapanIvan Magalhaes NEW
Jennifer AmigonFranceOnyama Limba NEGOTIATION
Darci PoquetteArgentinaIoni Bowcher NEGOTIATION
Morrow RutaCanadaAnna Fali UNQUALIFIED
Alejandro PerinFranceStephen Shaw RENEWAL
Maria MarrierUnited KingdomIvan Magalhaes RENEWAL
Adams MorascaIndiaOnyama Limba NEW
Juan WieserFranceAnna Fali QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Juan WieserSpain2026-05-24King, Christopher A Esq PROPOSAL41Asiya Javayant
1001Adams MorascaFrance2026-05-24King, Christopher A Esq UNQUALIFIED53Amy Elsner
1002Tony FollerFrance2026-05-24Rousseaux, Michael Esq UNQUALIFIED2Xuxue Feng
1003David DarakjyBrazil2026-05-17Feltz Printing Service PROPOSAL35Ivan Magalhaes
1004Izzy GarufiAustralia2026-05-30Rangoni Of Florence NEGOTIATION21Onyama Limba
1005Jennifer AmigonSpain2026-06-02Rousseaux, Michael Esq QUALIFIED97Stephen Shaw
1006Claire TollnerFrance2026-06-01Dorl, James J Esq PROPOSAL91Xuxue Feng
1007Julie StensethAustralia2026-05-10Feiner Bros UNQUALIFIED5Asiya Javayant
1008Aruna FigeroaRussia2026-05-11Morlong Associates PROPOSAL79Ioni Bowcher
1009Deepesh ChuiArgentina2026-05-27Chemel, James L Cpa NEGOTIATION67Elwin Sharvill
1010Wickens NestleBrazil2026-05-14Dorl, James J Esq QUALIFIED15Bernardo Dominic
1011Silvio SlusarskiItaly2026-05-30Chapman, Ross E Esq QUALIFIED81Elwin Sharvill
1012Mujtaba NickaBrazil2026-05-15Printing Dimensions QUALIFIED45Elwin Sharvill
1013Mayumi KolmetzAustralia2026-05-05Benton, John B Jr UNQUALIFIED15Amy Elsner
1014Smith GlickBrazil2026-05-22Chemel, James L Cpa NEGOTIATION20Stephen Shaw
1015Rodrigues CampainUnited Kingdom2026-05-31Benton, John B Jr NEGOTIATION12Xuxue Feng
1016Aika InouyeJapan2026-05-23Commercial Press RENEWAL22Onyama Limba
1017Ivar PaprockiRussia2026-05-17Feltz Printing Service QUALIFIED86Ivan Magalhaes
1018Aruna FigeroaSpain2026-05-17Dorl, James J Esq PROPOSAL36Onyama Limba
1019Jeanfrancois VenereGermany2026-05-20Rangoni Of Florence RENEWAL47Elwin Sharvill
1020Murillo MaletArgentina2026-06-02Morlong Associates RENEWAL46Ivan Magalhaes
1021Jeanfrancois VenereBrazil2026-05-29King, Christopher A Esq UNQUALIFIED98Bernardo Dominic
1022Juan WieserFrance2026-05-11Benton, John B Jr NEGOTIATION56Onyama Limba
1023Izzy GarufiItaly2026-05-21Dorl, James J Esq QUALIFIED36Asiya Javayant
1024Ivar PaprockiFrance2026-05-14Rangoni Of Florence QUALIFIED39Bernardo Dominic
1025Juan WieserGermany2026-05-23King, Christopher A Esq NEGOTIATION19Stephen Shaw
1026Stacey MacleadIndia2026-05-28Rousseaux, Michael Esq RENEWAL45Bernardo Dominic
1027Jones VocelkaSpain2026-05-31Chanay, Jeffrey A Esq PROPOSAL66Ivan Magalhaes
1028Aika InouyeCanada2026-05-18Commercial Press NEGOTIATION56Amy Elsner
1029Wickens NestleJapan2026-05-08Rangoni Of Florence QUALIFIED6Ioni Bowcher
1030Sinclair WaycottAustralia2026-05-09Printing Dimensions QUALIFIED93Xuxue Feng
1031Smith GlickArgentina2026-05-10Benton, John B Jr PROPOSAL73Bernardo Dominic
1032Ricardo GauchoBrazil2026-05-09Rangoni Of Florence NEW26Bernardo Dominic
1033Deepesh ChuiArgentina2026-05-19Feiner Bros RENEWAL68Asiya Javayant
1034Antonio CaudyGermany2026-05-18Feiner Bros RENEWAL41Ivan Magalhaes
1035Jennifer AmigonArgentina2026-05-27Dorl, James J Esq NEGOTIATION58Stephen Shaw
1036Ashley DoeItaly2026-05-18Rousseaux, Michael Esq QUALIFIED21Onyama Limba
1037Greenwood BologniaIndia2026-05-12Dorl, James J Esq NEGOTIATION83Amy Elsner
1038Rodrigues CampainFrance2026-05-21Chanay, Jeffrey A Esq PROPOSAL72Ioni Bowcher
1039Isabel BowleyIndia2026-05-28Chapman, Ross E Esq UNQUALIFIED5Amy Elsner
1040Isabel BowleySpain2026-05-20Truhlar And Truhlar Attys RENEWAL52Ivan Magalhaes
1041Adams MorascaBrazil2026-05-29Rangoni Of Florence NEGOTIATION19Ivan Magalhaes
1042Emily WhobreyUnited Kingdom2026-05-21Benton, John B Jr RENEWAL50Amy Elsner
1043Kaitlin OstroskyArgentina2026-05-15Printing Dimensions NEGOTIATION98Onyama Limba
1044Ivar PaprockiFrance2026-05-05Rousseaux, Michael Esq UNQUALIFIED71Anna Fali
1045Nicolas IturbideAustralia2026-05-22Truhlar And Truhlar Attys UNQUALIFIED4Stephen Shaw
1046Clifford RimRussia2026-05-15King, Christopher A Esq UNQUALIFIED9Asiya Javayant
1047Leon OldroydSpain2026-05-09Benton, John B Jr NEW22Anna Fali
1048Munro FerenczIndia2026-05-24Rousseaux, Michael Esq NEW98Ioni Bowcher
1049Faith GillianArgentina2026-05-14Chapman, Ross E Esq NEGOTIATION79Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Jeanfrancois VenereAustraliaBernardo Dominic NEW
Jefferson SchemmerFranceAmy Elsner PROPOSAL
Mayumi KolmetzAustraliaBernardo Dominic UNQUALIFIED
Ivar PaprockiAustraliaAmy Elsner NEW
Deepesh ChuiBrazilAnna Fali NEGOTIATION
Francesco ShinkoFranceOnyama Limba RENEWAL
Maisha RulapaughIndiaElwin Sharvill RENEWAL
Faith GillianAustraliaElwin Sharvill NEGOTIATION
Johnson SergiJapanAnna Fali NEW
Julie StensethItalyStephen Shaw NEW
Ricardo GauchoFranceAmy Elsner RENEWAL
Cody SaylorsAustraliaXuxue Feng UNQUALIFIED
Alejandro PerinBrazilXuxue Feng PROPOSAL
Emily WhobreySpainIvan Magalhaes RENEWAL
Kaitlin OstroskyJapanOnyama Limba QUALIFIED
Ricardo GauchoUnited KingdomElwin Sharvill PROPOSAL
Emily WhobreyFranceAnna Fali QUALIFIED
Arvin AlbaresArgentinaAmy Elsner PROPOSAL
Clifford RimAustraliaAsiya Javayant PROPOSAL
Maria MarrierCanadaAmy Elsner NEW
Adams MorascaIndiaElwin Sharvill RENEWAL
Juan WieserBrazilAmy Elsner RENEWAL
Leon OldroydGermanyElwin Sharvill PROPOSAL
Johnson SergiBrazilAnna Fali RENEWAL
Isabel BowleyRussiaXuxue Feng NEW
Kadeem FlosiFranceAsiya Javayant NEW
Rodrigues CampainUnited KingdomAsiya Javayant QUALIFIED
Darci PoquetteAustraliaIoni Bowcher NEW
Emily WhobreyAustraliaIvan Magalhaes PROPOSAL
Silvio SlusarskiBrazilStephen Shaw NEGOTIATION
Antonio CaudyItalyAnna Fali QUALIFIED
Jennifer AmigonGermanyOnyama Limba RENEWAL
Isabel BowleyItalyIoni Bowcher NEGOTIATION
Costa DilliardIndiaAmy Elsner RENEWAL
Julie StensethIndiaAmy Elsner NEGOTIATION
Chavez BriddickRussiaXuxue Feng UNQUALIFIED
Mayumi KolmetzSpainXuxue Feng PROPOSAL
Tony FollerAustraliaAnna Fali QUALIFIED
Darci PoquetteGermanyIvan Magalhaes NEGOTIATION
Aruna FigeroaBrazilAnna Fali UNQUALIFIED
Smith GlickCanadaBernardo Dominic NEW
Tony FollerGermanyXuxue Feng NEGOTIATION
Smith GlickArgentinaXuxue Feng PROPOSAL
Salvatore StockhamFranceXuxue Feng PROPOSAL
Jones VocelkaSpainXuxue Feng NEW
Costa DilliardUnited KingdomXuxue Feng QUALIFIED
Cody SaylorsArgentinaIoni Bowcher UNQUALIFIED
Cody SaylorsItalyAsiya Javayant NEW
Stacey MacleadBrazilAnna Fali QUALIFIED
Aruna FigeroaRussiaStephen Shaw RENEWAL
Frozen Columns
Name
Emily Whobrey
Nicolas Iturbide
Leja Caldarera
Johnson Sergi
Maisha Rulapaugh
Aruna Figeroa
Deepesh Chui
Juan Wieser
Izzy Garufi
Aditya Kusko
Aruna Figeroa
Maria Marrier
Mujtaba Nicka
Izzy Garufi
Smith Glick
Aika Inouye
Morrow Ruta
Faith Gillian
Deepesh Chui
Isabel Bowley
James Butt
Misaki Royster
Mayumi Kolmetz
Jefferson Schemmer
Jones Vocelka
Murillo Malet
Izzy Garufi
Stacey Maclead
Antonio Caudy
Johnson Sergi
Leja Caldarera
Morrow Ruta
Juan Wieser
Salvatore Stockham
Isabel Bowley
Aruna Figeroa
Darci Poquette
Jefferson Schemmer
Maisha Rulapaugh
Faith Gillian
Morrow Ruta
Emily Whobrey
Faith Gillian
Izzy Garufi
Nicolas Iturbide
Faith Gillian
Jeanfrancois Venere
Clifford Rim
Ashley Doe
Octavia Malet
IdCountryDate
1000Brazil2026-05-15
1001Australia2026-05-09
1002Italy2026-05-17
1003United Kingdom2026-06-01
1004Australia2026-05-16
1005France2026-05-19
1006Japan2026-05-09
1007Brazil2026-05-14
1008Australia2026-05-24
1009Argentina2026-05-31
1010Brazil2026-05-18
1011Australia2026-05-26
1012India2026-05-21
1013Japan2026-05-07
1014Italy2026-05-08
1015Japan2026-05-27
1016India2026-05-05
1017United Kingdom2026-05-24
1018Brazil2026-05-29
1019Germany2026-05-29
1020Spain2026-05-19
1021India2026-05-23
1022Russia2026-05-06
1023Spain2026-05-29
1024Italy2026-05-24
1025Germany2026-05-13
1026France2026-05-30
1027Germany2026-05-07
1028Russia2026-05-11
1029Italy2026-05-07
1030Japan2026-05-23
1031Russia2026-06-02
1032Germany2026-05-13
1033Canada2026-05-26
1034Germany2026-05-12
1035Spain2026-05-26
1036India2026-05-27
1037United Kingdom2026-05-26
1038Spain2026-05-31
1039France2026-05-22
1040Russia2026-05-27
1041Canada2026-05-05
1042Germany2026-05-16
1043Germany2026-05-18
1044Australia2026-05-25
1045India2026-05-22
1046France2026-05-10
1047Spain2026-05-22
1048France2026-05-05
1049Italy2026-05-07

On-Demand Data

NameIdCountryDate
Johnson Sergi1000Japan2026-05-27
Salvatore Stockham1001Argentina2026-06-01
James Butt1002Japan2026-05-14
Emily Whobrey1003Argentina2026-05-20
Jeanfrancois Venere1004Japan2026-06-02
Kaitlin Ostrosky1005India2026-05-23
Ashley Doe1006Argentina2026-05-20
Aika Inouye1007Japan2026-05-23
Ivar Paprocki1008Canada2026-05-18
Wickens Nestle1009Germany2026-05-08
Emily Whobrey1010Brazil2026-05-24
Octavia Malet1011United Kingdom2026-05-22
Mujtaba Nicka1012Australia2026-05-15
Wickens Nestle1013Italy2026-05-08
James Butt1014Germany2026-06-01
Alejandro Perin1015Argentina2026-05-14
Aditya Kusko1016Canada2026-06-02
Octavia Malet1017United Kingdom2026-05-19
Mayumi Kolmetz1018Germany2026-06-02
Izzy Garufi1019Brazil2026-05-27
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Wickens NestleCanadaAmy Elsner NEGOTIATION
Juan WieserFranceStephen Shaw QUALIFIED
Octavia MaletSpainIvan Magalhaes NEW
Francesco ShinkoFranceAsiya Javayant QUALIFIED
David DarakjyArgentinaBernardo Dominic NEW
Adams MorascaUnited KingdomBernardo Dominic UNQUALIFIED
Alejandro PerinItalyXuxue Feng NEW
Sinclair WaycottCanadaOnyama Limba NEGOTIATION
Adams MorascaCanadaAmy Elsner NEGOTIATION
Leja CaldareraAustraliaBernardo Dominic PROPOSAL
Smith GlickCanadaIvan Magalhaes NEGOTIATION
Nicolas IturbideGermanyAmy Elsner UNQUALIFIED
Leon OldroydIndiaOnyama Limba QUALIFIED
Greenwood BologniaJapanAsiya Javayant NEGOTIATION
Aika InouyeAustraliaIvan Magalhaes RENEWAL
Jefferson SchemmerArgentinaAnna Fali NEW
Salvatore StockhamJapanIvan Magalhaes NEGOTIATION
Antonio CaudyBrazilBernardo Dominic NEW
Stacey MacleadItalyAnna Fali NEW
Smith GlickFranceAmy Elsner PROPOSAL
Murillo MaletRussiaIoni Bowcher UNQUALIFIED
Juan WieserCanadaAsiya Javayant RENEWAL
Morrow RutaArgentinaXuxue Feng UNQUALIFIED
Izzy GarufiBrazilIvan Magalhaes UNQUALIFIED
Stacey MacleadJapanAmy Elsner NEGOTIATION
Emily WhobreyRussiaAnna Fali RENEWAL
Nicolas IturbideSpainStephen Shaw RENEWAL
Claire TollnerArgentinaElwin Sharvill NEW
Smith GlickFranceIvan Magalhaes PROPOSAL
Rodrigues CampainItalyAmy Elsner PROPOSAL
Chavez BriddickUnited KingdomAnna Fali UNQUALIFIED
Cody SaylorsFranceAmy Elsner RENEWAL
Clifford RimFranceAmy Elsner NEW
Wickens NestleUnited KingdomIvan Magalhaes RENEWAL
Ivar PaprockiCanadaAsiya Javayant PROPOSAL
Aika InouyeBrazilIoni Bowcher RENEWAL
Nicolas IturbideRussiaOnyama Limba RENEWAL
Jones VocelkaUnited KingdomXuxue Feng PROPOSAL
Kadeem FlosiIndiaElwin Sharvill NEGOTIATION
Claire TollnerAustraliaIvan Magalhaes 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>