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
Ashley DoeArgentinaIoni Bowcher NEW
Tony FollerAustraliaAsiya Javayant QUALIFIED
Jeanfrancois VenereIndiaBernardo Dominic RENEWAL
Izzy GarufiRussiaIvan Magalhaes RENEWAL
Darci PoquetteGermanyAmy Elsner NEGOTIATION
Alejandro PerinAustraliaAnna Fali NEW
Misaki RoysterJapanAsiya Javayant RENEWAL
Octavia MaletItalyXuxue Feng PROPOSAL
Johnson SergiIndiaOnyama Limba UNQUALIFIED
Chavez BriddickAustraliaAnna Fali UNQUALIFIED
Tony FollerBrazilIoni Bowcher RENEWAL
Antonio CaudyItalyBernardo Dominic RENEWAL
Maria MarrierRussiaXuxue Feng QUALIFIED
Alejandro PerinAustraliaAsiya Javayant NEGOTIATION
Emily WhobreyCanadaOnyama Limba QUALIFIED
Tony FollerItalyAmy Elsner UNQUALIFIED
Juan WieserGermanyElwin Sharvill PROPOSAL
Octavia MaletArgentinaBernardo Dominic NEGOTIATION
Kaitlin OstroskyIndiaOnyama Limba NEGOTIATION
Silvio SlusarskiBrazilIoni Bowcher RENEWAL
Isabel BowleyBrazilIoni Bowcher NEGOTIATION
Mayumi KolmetzFranceOnyama Limba QUALIFIED
Jeanfrancois VenereBrazilIvan Magalhaes NEW
Ricardo GauchoAustraliaIvan Magalhaes UNQUALIFIED
Francesco ShinkoBrazilBernardo Dominic RENEWAL
Arvin AlbaresItalyStephen Shaw UNQUALIFIED
Ashley DoeAustraliaElwin Sharvill NEGOTIATION
Isabel BowleyArgentinaAnna Fali RENEWAL
David DarakjyArgentinaIvan Magalhaes NEGOTIATION
Adams MorascaArgentinaOnyama Limba PROPOSAL
Cody SaylorsAustraliaXuxue Feng UNQUALIFIED
Jennifer AmigonCanadaBernardo Dominic UNQUALIFIED
Wickens NestleJapanAnna Fali QUALIFIED
Aruna FigeroaSpainOnyama Limba NEW
Isabel BowleyIndiaIvan Magalhaes PROPOSAL
Clifford RimRussiaBernardo Dominic RENEWAL
Morrow RutaGermanyStephen Shaw PROPOSAL
Leon OldroydGermanyStephen Shaw PROPOSAL
Smith GlickFranceElwin Sharvill PROPOSAL
Aditya KuskoCanadaBernardo Dominic PROPOSAL
Misaki RoysterArgentinaXuxue Feng NEGOTIATION
Ashley DoeUnited KingdomIvan Magalhaes UNQUALIFIED
Aruna FigeroaBrazilAsiya Javayant UNQUALIFIED
Munro FerenczJapanAnna Fali NEW
Chavez BriddickJapanAnna Fali UNQUALIFIED
Morrow RutaArgentinaXuxue Feng UNQUALIFIED
Salvatore StockhamIndiaBernardo Dominic QUALIFIED
Isabel BowleyItalyAsiya Javayant NEGOTIATION
Maisha RulapaughCanadaAnna Fali QUALIFIED
Murillo MaletCanadaElwin Sharvill PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Arvin AlbaresItalyStephen Shaw RENEWAL
Julie StensethJapanAnna Fali PROPOSAL
Smith GlickIndiaElwin Sharvill NEGOTIATION
Francesco ShinkoFranceAnna Fali QUALIFIED
Costa DilliardJapanAnna Fali RENEWAL
Aditya KuskoFranceAmy Elsner PROPOSAL
Johnson SergiRussiaIoni Bowcher PROPOSAL
Stacey MacleadGermanyAnna Fali NEGOTIATION
Emily WhobreyJapanXuxue Feng RENEWAL
Aika InouyeFranceStephen Shaw QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Nicolas IturbideAustralia2026-05-08Chanay, Jeffrey A Esq UNQUALIFIED54Stephen Shaw
1001Izzy GarufiCanada2026-05-04Buckley Miller Wright UNQUALIFIED45Stephen Shaw
1002Aditya KuskoItaly2026-05-19Chanay, Jeffrey A Esq NEGOTIATION72Stephen Shaw
1003Faith GillianSpain2026-05-13Printing Dimensions QUALIFIED84Bernardo Dominic
1004Alejandro PerinBrazil2026-04-27Feiner Bros UNQUALIFIED43Elwin Sharvill
1005Kadeem FlosiCanada2026-05-09Chemel, James L Cpa RENEWAL70Asiya Javayant
1006Faith GillianIndia2026-05-13Dorl, James J Esq RENEWAL75Bernardo Dominic
1007Octavia MaletCanada2026-04-27Dorl, James J Esq QUALIFIED13Stephen Shaw
1008Jennifer AmigonBrazil2026-05-14Morlong Associates QUALIFIED20Anna Fali
1009Aika InouyeItaly2026-05-18Dorl, James J Esq UNQUALIFIED68Elwin Sharvill
1010Costa DilliardJapan2026-05-11Dorl, James J Esq UNQUALIFIED9Xuxue Feng
1011Isabel BowleySpain2026-05-16King, Christopher A Esq PROPOSAL49Ioni Bowcher
1012Jeanfrancois VenereItaly2026-05-16Rousseaux, Michael Esq QUALIFIED10Anna Fali
1013Silvio SlusarskiJapan2026-04-26Dorl, James J Esq NEGOTIATION95Xuxue Feng
1014Jefferson SchemmerIndia2026-04-26Chemel, James L Cpa PROPOSAL71Stephen Shaw
1015Adams MorascaJapan2026-05-06Rousseaux, Michael Esq NEGOTIATION60Amy Elsner
1016Wickens NestleSpain2026-04-27Feltz Printing Service NEGOTIATION91Anna Fali
1017Smith GlickSpain2026-04-27Chemel, James L Cpa QUALIFIED39Onyama Limba
1018Kadeem FlosiCanada2026-05-15Chapman, Ross E Esq PROPOSAL35Onyama Limba
1019Chavez BriddickIndia2026-05-25Buckley Miller Wright UNQUALIFIED36Asiya Javayant
1020Greenwood BologniaItaly2026-05-12Feltz Printing Service RENEWAL28Xuxue Feng
1021Kadeem FlosiArgentina2026-05-12Chapman, Ross E Esq NEGOTIATION71Asiya Javayant
1022Greenwood BologniaGermany2026-04-27Rangoni Of Florence NEGOTIATION8Ivan Magalhaes
1023Adams MorascaAustralia2026-05-16Chemel, James L Cpa PROPOSAL29Onyama Limba
1024Faith GillianFrance2026-05-12Morlong Associates QUALIFIED50Amy Elsner
1025Alejandro PerinSpain2026-05-05Rousseaux, Michael Esq PROPOSAL2Bernardo Dominic
1026Ivar PaprockiFrance2026-05-10Printing Dimensions NEW32Onyama Limba
1027Izzy GarufiJapan2026-04-29Morlong Associates NEGOTIATION46Onyama Limba
1028Juan WieserGermany2026-05-04Buckley Miller Wright UNQUALIFIED17Ioni Bowcher
1029Salvatore StockhamRussia2026-04-28Rousseaux, Michael Esq NEGOTIATION97Asiya Javayant
1030Kadeem FlosiFrance2026-05-22Dorl, James J Esq UNQUALIFIED33Elwin Sharvill
1031Aika InouyeIndia2026-05-10Morlong Associates QUALIFIED83Bernardo Dominic
1032Clifford RimIndia2026-04-29Commercial Press NEGOTIATION54Ivan Magalhaes
1033James ButtSpain2026-04-29Commercial Press PROPOSAL12Anna Fali
1034Kaitlin OstroskyFrance2026-05-16Chapman, Ross E Esq RENEWAL7Bernardo Dominic
1035Octavia MaletItaly2026-05-18Rangoni Of Florence NEGOTIATION18Bernardo Dominic
1036Ashley DoeRussia2026-05-13Printing Dimensions NEGOTIATION68Onyama Limba
1037Ricardo GauchoUnited Kingdom2026-05-12Dorl, James J Esq NEGOTIATION9Anna Fali
1038Cody SaylorsArgentina2026-05-23Printing Dimensions QUALIFIED32Xuxue Feng
1039Maisha RulapaughRussia2026-05-05Rousseaux, Michael Esq NEGOTIATION13Xuxue Feng
1040Mayumi KolmetzSpain2026-05-07Feltz Printing Service UNQUALIFIED55Ioni Bowcher
1041Aika InouyeArgentina2026-05-15Printing Dimensions UNQUALIFIED48Ivan Magalhaes
1042Jones VocelkaGermany2026-05-10Dorl, James J Esq QUALIFIED90Onyama Limba
1043Silvio SlusarskiCanada2026-05-22Rousseaux, Michael Esq PROPOSAL13Asiya Javayant
1044Ashley DoeUnited Kingdom2026-05-07Buckley Miller Wright NEW81Bernardo Dominic
1045Wickens NestleUnited Kingdom2026-05-24Benton, John B Jr RENEWAL1Xuxue Feng
1046Mayumi KolmetzIndia2026-05-21Chapman, Ross E Esq PROPOSAL61Xuxue Feng
1047Julie StensethIndia2026-05-11Rangoni Of Florence NEW35Amy Elsner
1048Wickens NestleAustralia2026-05-07Buckley Miller Wright NEW26Asiya Javayant
1049Deepesh ChuiFrance2026-05-24Benton, John B Jr QUALIFIED53Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Ashley DoeBrazilAmy Elsner RENEWAL
Juan WieserAustraliaAmy Elsner NEW
Ashley DoeArgentinaStephen Shaw RENEWAL
Mujtaba NickaJapanOnyama Limba PROPOSAL
Chavez BriddickUnited KingdomXuxue Feng PROPOSAL
Alejandro PerinBrazilAsiya Javayant RENEWAL
James ButtUnited KingdomAsiya Javayant NEGOTIATION
Juan WieserRussiaIoni Bowcher RENEWAL
Darci PoquetteItalyAsiya Javayant UNQUALIFIED
Costa DilliardRussiaAsiya Javayant NEGOTIATION
Wickens NestleSpainElwin Sharvill NEW
Julie StensethArgentinaIvan Magalhaes QUALIFIED
Deepesh ChuiSpainAsiya Javayant QUALIFIED
Darci PoquetteUnited KingdomOnyama Limba NEW
Sinclair WaycottArgentinaIoni Bowcher QUALIFIED
Maisha RulapaughFranceAnna Fali QUALIFIED
Cody SaylorsUnited KingdomAnna Fali UNQUALIFIED
Ricardo GauchoAustraliaAsiya Javayant NEW
Isabel BowleySpainXuxue Feng RENEWAL
Aruna FigeroaArgentinaBernardo Dominic PROPOSAL
Silvio SlusarskiBrazilXuxue Feng QUALIFIED
Francesco ShinkoItalyXuxue Feng NEW
Aditya KuskoFranceIvan Magalhaes RENEWAL
Maria MarrierCanadaIvan Magalhaes PROPOSAL
Darci PoquetteGermanyBernardo Dominic PROPOSAL
Jones VocelkaArgentinaAsiya Javayant RENEWAL
Leja CaldareraSpainAmy Elsner RENEWAL
Kadeem FlosiAustraliaAsiya Javayant RENEWAL
Smith GlickArgentinaElwin Sharvill NEGOTIATION
Octavia MaletCanadaOnyama Limba NEGOTIATION
Cody SaylorsArgentinaXuxue Feng NEW
Kadeem FlosiSpainIvan Magalhaes UNQUALIFIED
Costa DilliardUnited KingdomAnna Fali NEGOTIATION
Adams MorascaUnited KingdomIoni Bowcher QUALIFIED
Faith GillianGermanyAsiya Javayant QUALIFIED
Salvatore StockhamAustraliaIoni Bowcher RENEWAL
Maisha RulapaughCanadaStephen Shaw PROPOSAL
Chavez BriddickCanadaIoni Bowcher UNQUALIFIED
Julie StensethBrazilXuxue Feng NEGOTIATION
Faith GillianFranceElwin Sharvill PROPOSAL
Jennifer AmigonBrazilAnna Fali PROPOSAL
Izzy GarufiJapanXuxue Feng PROPOSAL
Alejandro PerinSpainElwin Sharvill QUALIFIED
Izzy GarufiItalyXuxue Feng QUALIFIED
Mujtaba NickaUnited KingdomXuxue Feng NEGOTIATION
Morrow RutaCanadaElwin Sharvill QUALIFIED
Misaki RoysterFranceIvan Magalhaes UNQUALIFIED
Julie StensethAustraliaIoni Bowcher QUALIFIED
Murillo MaletGermanyAnna Fali RENEWAL
Greenwood BologniaAustraliaAnna Fali UNQUALIFIED
Frozen Columns
Name
Chavez Briddick
Rodrigues Campain
Julie Stenseth
Johnson Sergi
Antonio Caudy
Jones Vocelka
David Darakjy
Jeanfrancois Venere
Nicolas Iturbide
Cody Saylors
Rodrigues Campain
Francesco Shinko
Kaitlin Ostrosky
Jefferson Schemmer
Antonio Caudy
Faith Gillian
Aika Inouye
Clifford Rim
Smith Glick
Ivar Paprocki
Antonio Caudy
Silvio Slusarski
Silvio Slusarski
Juan Wieser
Ricardo Gaucho
Maria Marrier
Rodrigues Campain
Aditya Kusko
Leon Oldroyd
Aika Inouye
Ashley Doe
Deepesh Chui
Mujtaba Nicka
Munro Ferencz
Izzy Garufi
Leon Oldroyd
Leja Caldarera
Chavez Briddick
David Darakjy
Jennifer Amigon
Octavia Malet
Maria Marrier
Aditya Kusko
Aika Inouye
Aika Inouye
Arvin Albares
Maria Marrier
Aruna Figeroa
Munro Ferencz
Claire Tollner
IdCountryDate
1000France2026-05-12
1001Argentina2026-05-17
1002Italy2026-05-11
1003Spain2026-05-10
1004Italy2026-05-15
1005Japan2026-05-02
1006Argentina2026-05-22
1007France2026-05-02
1008United Kingdom2026-05-07
1009Italy2026-05-08
1010Japan2026-05-24
1011Germany2026-04-26
1012Argentina2026-05-15
1013Canada2026-05-09
1014Argentina2026-05-07
1015Argentina2026-05-18
1016India2026-05-20
1017Italy2026-05-10
1018Spain2026-05-13
1019Canada2026-05-21
1020Russia2026-05-02
1021Australia2026-05-08
1022Canada2026-05-12
1023Brazil2026-05-01
1024Japan2026-05-08
1025France2026-05-07
1026Brazil2026-05-18
1027Brazil2026-05-01
1028Australia2026-04-29
1029Spain2026-05-07
1030Italy2026-05-04
1031Italy2026-05-25
1032Argentina2026-04-28
1033Brazil2026-04-27
1034France2026-05-25
1035France2026-05-22
1036India2026-05-17
1037Italy2026-05-03
1038Brazil2026-05-16
1039Italy2026-05-18
1040Russia2026-05-10
1041Brazil2026-04-28
1042Italy2026-05-14
1043Brazil2026-05-01
1044France2026-04-30
1045France2026-05-23
1046Brazil2026-05-16
1047Argentina2026-04-26
1048Russia2026-05-24
1049France2026-04-26

On-Demand Data

NameIdCountryDate
Rodrigues Campain1000Italy2026-05-08
Julie Stenseth1001Japan2026-05-03
Greenwood Bolognia1002Canada2026-05-01
Octavia Malet1003Australia2026-05-19
Smith Glick1004Spain2026-04-30
Alejandro Perin1005India2026-05-06
Kadeem Flosi1006Germany2026-04-26
Antonio Caudy1007Germany2026-05-20
Alejandro Perin1008United Kingdom2026-05-13
Adams Morasca1009Spain2026-04-26
Morrow Ruta1010Brazil2026-05-24
Ivar Paprocki1011France2026-05-25
Murillo Malet1012Italy2026-04-30
Greenwood Bolognia1013Russia2026-05-12
Greenwood Bolognia1014Canada2026-05-03
Kadeem Flosi1015Australia2026-04-26
Arvin Albares1016United Kingdom2026-05-11
Smith Glick1017Canada2026-05-14
Darci Poquette1018Argentina2026-05-10
Leon Oldroyd1019Germany2026-04-28
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Sinclair WaycottRussiaIoni Bowcher UNQUALIFIED
Francesco ShinkoAustraliaAsiya Javayant NEW
Juan WieserIndiaStephen Shaw UNQUALIFIED
Leon OldroydIndiaAsiya Javayant RENEWAL
Misaki RoysterGermanyOnyama Limba NEGOTIATION
Adams MorascaAustraliaAmy Elsner NEGOTIATION
Rodrigues CampainRussiaAmy Elsner UNQUALIFIED
Darci PoquetteAustraliaStephen Shaw RENEWAL
Sinclair WaycottRussiaStephen Shaw PROPOSAL
Darci PoquetteSpainXuxue Feng NEW
Stacey MacleadRussiaOnyama Limba QUALIFIED
Darci PoquetteUnited KingdomBernardo Dominic PROPOSAL
Maria MarrierSpainXuxue Feng RENEWAL
Ricardo GauchoGermanyAnna Fali RENEWAL
Julie StensethFranceAnna Fali UNQUALIFIED
Nicolas IturbideRussiaStephen Shaw NEW
Kadeem FlosiFranceElwin Sharvill NEGOTIATION
Mayumi KolmetzCanadaBernardo Dominic PROPOSAL
Mayumi KolmetzUnited KingdomElwin Sharvill QUALIFIED
Cody SaylorsItalyOnyama Limba NEW
Stacey MacleadUnited KingdomAmy Elsner NEGOTIATION
Aika InouyeRussiaElwin Sharvill UNQUALIFIED
Wickens NestleItalyXuxue Feng NEW
Cody SaylorsAustraliaOnyama Limba NEGOTIATION
Emily WhobreyAustraliaAmy Elsner UNQUALIFIED
Ashley DoeItalyAnna Fali RENEWAL
Ivar PaprockiArgentinaElwin Sharvill NEW
Juan WieserGermanyIvan Magalhaes RENEWAL
Leon OldroydJapanStephen Shaw NEW
Antonio CaudyCanadaAsiya Javayant NEW
Johnson SergiFranceIoni Bowcher RENEWAL
Jennifer AmigonCanadaIvan Magalhaes PROPOSAL
Alejandro PerinItalyStephen Shaw NEW
Costa DilliardGermanyOnyama Limba NEGOTIATION
Sinclair WaycottCanadaAsiya Javayant NEGOTIATION
Darci PoquetteGermanyIoni Bowcher PROPOSAL
Claire TollnerRussiaBernardo Dominic QUALIFIED
Jeanfrancois VenereArgentinaXuxue Feng NEW
Alejandro PerinGermanyIvan Magalhaes NEW
Jennifer AmigonFranceAsiya Javayant 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>