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
Ricardo GauchoSpainOnyama Limba QUALIFIED
Ivar PaprockiGermanyAsiya Javayant PROPOSAL
Greenwood BologniaArgentinaAnna Fali QUALIFIED
Francesco ShinkoSpainOnyama Limba QUALIFIED
Octavia MaletSpainBernardo Dominic RENEWAL
Isabel BowleyUnited KingdomBernardo Dominic RENEWAL
Faith GillianRussiaXuxue Feng NEGOTIATION
Maisha RulapaughSpainElwin Sharvill UNQUALIFIED
Clifford RimJapanAsiya Javayant NEGOTIATION
Ricardo GauchoItalyBernardo Dominic UNQUALIFIED
Rodrigues CampainUnited KingdomElwin Sharvill QUALIFIED
Clifford RimGermanyOnyama Limba RENEWAL
Aditya KuskoFranceIoni Bowcher UNQUALIFIED
Kaitlin OstroskyArgentinaXuxue Feng NEGOTIATION
Wickens NestleCanadaElwin Sharvill NEGOTIATION
Maria MarrierIndiaAmy Elsner QUALIFIED
Clifford RimSpainAnna Fali NEGOTIATION
Juan WieserArgentinaOnyama Limba NEGOTIATION
Nicolas IturbideArgentinaOnyama Limba NEGOTIATION
Ivar PaprockiUnited KingdomIoni Bowcher NEGOTIATION
Stacey MacleadIndiaOnyama Limba QUALIFIED
Ricardo GauchoIndiaStephen Shaw PROPOSAL
Misaki RoysterGermanyElwin Sharvill NEGOTIATION
Ivar PaprockiSpainBernardo Dominic NEW
Rodrigues CampainRussiaOnyama Limba QUALIFIED
Morrow RutaFranceIvan Magalhaes QUALIFIED
Alejandro PerinJapanStephen Shaw RENEWAL
Johnson SergiRussiaIvan Magalhaes UNQUALIFIED
Adams MorascaGermanyIoni Bowcher QUALIFIED
Murillo MaletUnited KingdomBernardo Dominic UNQUALIFIED
Murillo MaletCanadaAsiya Javayant QUALIFIED
Johnson SergiItalyIoni Bowcher RENEWAL
Francesco ShinkoSpainIoni Bowcher QUALIFIED
Kadeem FlosiJapanIoni Bowcher NEW
Morrow RutaItalyAsiya Javayant UNQUALIFIED
Leja CaldareraJapanAnna Fali NEW
Kadeem FlosiBrazilIoni Bowcher NEW
Smith GlickCanadaOnyama Limba NEGOTIATION
Claire TollnerGermanyAmy Elsner UNQUALIFIED
Smith GlickIndiaIvan Magalhaes PROPOSAL
Arvin AlbaresItalyXuxue Feng RENEWAL
Leon OldroydUnited KingdomIvan Magalhaes UNQUALIFIED
Faith GillianAustraliaXuxue Feng NEW
Costa DilliardJapanIoni Bowcher NEGOTIATION
Smith GlickGermanyXuxue Feng RENEWAL
David DarakjyBrazilElwin Sharvill NEW
James ButtBrazilElwin Sharvill QUALIFIED
Leja CaldareraCanadaIvan Magalhaes RENEWAL
Jones VocelkaAustraliaIvan Magalhaes QUALIFIED
Leja CaldareraAustraliaStephen Shaw NEW
Horizontal
NameCountryRepresentativeStatus
Silvio SlusarskiFranceIoni Bowcher UNQUALIFIED
Nicolas IturbideIndiaIoni Bowcher QUALIFIED
Misaki RoysterFranceStephen Shaw UNQUALIFIED
Silvio SlusarskiCanadaIvan Magalhaes NEGOTIATION
Leja CaldareraCanadaStephen Shaw QUALIFIED
Greenwood BologniaSpainOnyama Limba PROPOSAL
Aika InouyeArgentinaOnyama Limba NEW
Arvin AlbaresCanadaAsiya Javayant RENEWAL
Salvatore StockhamAustraliaOnyama Limba UNQUALIFIED
Claire TollnerFranceIoni Bowcher UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000James ButtRussia2025-09-08King, Christopher A Esq NEW68Anna Fali
1001Murillo MaletCanada2025-09-03Benton, John B Jr UNQUALIFIED57Ioni Bowcher
1002Arvin AlbaresGermany2025-09-04King, Christopher A Esq PROPOSAL43Amy Elsner
1003Murillo MaletGermany2025-09-05Rangoni Of Florence RENEWAL24Asiya Javayant
1004Antonio CaudyItaly2025-09-02Commercial Press NEW31Anna Fali
1005Darci PoquetteBrazil2025-09-02Chapman, Ross E Esq NEW49Elwin Sharvill
1006Claire TollnerGermany2025-09-04Buckley Miller Wright NEW2Asiya Javayant
1007Tony FollerCanada2025-09-01Commercial Press NEW90Stephen Shaw
1008Juan WieserRussia2025-09-12Printing Dimensions UNQUALIFIED60Bernardo Dominic
1009David DarakjySpain2025-09-02Buckley Miller Wright NEW25Amy Elsner
1010Misaki RoysterGermany2025-08-31Feiner Bros QUALIFIED50Stephen Shaw
1011Munro FerenczFrance2025-08-30Dorl, James J Esq NEGOTIATION51Ivan Magalhaes
1012Deepesh ChuiSpain2025-09-05Truhlar And Truhlar Attys RENEWAL29Ivan Magalhaes
1013Silvio SlusarskiFrance2025-09-03Chapman, Ross E Esq UNQUALIFIED54Amy Elsner
1014Silvio SlusarskiCanada2025-09-01Benton, John B Jr UNQUALIFIED85Asiya Javayant
1015Adams MorascaAustralia2025-08-18Buckley Miller Wright QUALIFIED7Onyama Limba
1016Costa DilliardCanada2025-08-27Chapman, Ross E Esq PROPOSAL58Amy Elsner
1017Munro FerenczJapan2025-09-08Rangoni Of Florence UNQUALIFIED65Onyama Limba
1018Ivar PaprockiFrance2025-09-06Dorl, James J Esq NEW7Ivan Magalhaes
1019Silvio SlusarskiUnited Kingdom2025-09-10Commercial Press QUALIFIED83Ivan Magalhaes
1020Nicolas IturbideRussia2025-09-11Printing Dimensions UNQUALIFIED49Xuxue Feng
1021Ivar PaprockiGermany2025-09-05King, Christopher A Esq RENEWAL98Asiya Javayant
1022Darci PoquetteArgentina2025-08-20Truhlar And Truhlar Attys RENEWAL81Bernardo Dominic
1023David DarakjyUnited Kingdom2025-08-27Feiner Bros NEW81Bernardo Dominic
1024Kadeem FlosiCanada2025-08-19Chapman, Ross E Esq RENEWAL49Amy Elsner
1025Izzy GarufiRussia2025-08-24Chemel, James L Cpa RENEWAL17Ioni Bowcher
1026Jennifer AmigonGermany2025-08-28Chapman, Ross E Esq UNQUALIFIED35Asiya Javayant
1027Aruna FigeroaItaly2025-09-11Chapman, Ross E Esq NEGOTIATION69Amy Elsner
1028Murillo MaletUnited Kingdom2025-09-08King, Christopher A Esq RENEWAL10Amy Elsner
1029Ricardo GauchoItaly2025-09-01Feltz Printing Service QUALIFIED54Anna Fali
1030Jefferson SchemmerIndia2025-09-06Rousseaux, Michael Esq PROPOSAL9Ivan Magalhaes
1031Arvin AlbaresGermany2025-08-28Commercial Press RENEWAL45Onyama Limba
1032James ButtCanada2025-09-03Chanay, Jeffrey A Esq NEGOTIATION24Ivan Magalhaes
1033Jefferson SchemmerGermany2025-08-28Chanay, Jeffrey A Esq UNQUALIFIED67Xuxue Feng
1034Tony FollerSpain2025-09-08Chanay, Jeffrey A Esq NEW55Ivan Magalhaes
1035Deepesh ChuiCanada2025-08-19Printing Dimensions PROPOSAL46Ioni Bowcher
1036Jeanfrancois VenereCanada2025-08-26Printing Dimensions NEGOTIATION80Stephen Shaw
1037Alejandro PerinItaly2025-08-19Chapman, Ross E Esq PROPOSAL72Asiya Javayant
1038Faith GillianFrance2025-09-16Chanay, Jeffrey A Esq NEW61Ivan Magalhaes
1039Francesco ShinkoCanada2025-08-22Printing Dimensions UNQUALIFIED31Bernardo Dominic
1040Kadeem FlosiCanada2025-09-02Truhlar And Truhlar Attys RENEWAL80Elwin Sharvill
1041Tony FollerItaly2025-08-27Chanay, Jeffrey A Esq NEW77Onyama Limba
1042Wickens NestleUnited Kingdom2025-09-14Rousseaux, Michael Esq QUALIFIED20Anna Fali
1043Rodrigues CampainGermany2025-09-07Commercial Press UNQUALIFIED28Ioni Bowcher
1044Aruna FigeroaFrance2025-08-25Chanay, Jeffrey A Esq UNQUALIFIED96Onyama Limba
1045Ricardo GauchoArgentina2025-09-03Morlong Associates UNQUALIFIED33Ivan Magalhaes
1046Julie StensethSpain2025-09-15Printing Dimensions NEGOTIATION12Amy Elsner
1047David DarakjySpain2025-08-20Commercial Press UNQUALIFIED33Xuxue Feng
1048Nicolas IturbideSpain2025-09-06Rousseaux, Michael Esq RENEWAL21Bernardo Dominic
1049Kadeem FlosiIndia2025-08-22Chemel, James L Cpa RENEWAL20Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Jefferson SchemmerUnited KingdomIoni Bowcher RENEWAL
Julie StensethItalyElwin Sharvill RENEWAL
Adams MorascaSpainElwin Sharvill UNQUALIFIED
Johnson SergiUnited KingdomXuxue Feng RENEWAL
Maria MarrierAustraliaXuxue Feng PROPOSAL
Faith GillianIndiaIvan Magalhaes UNQUALIFIED
James ButtRussiaAsiya Javayant RENEWAL
Cody SaylorsJapanOnyama Limba PROPOSAL
Stacey MacleadBrazilOnyama Limba RENEWAL
Wickens NestleArgentinaAmy Elsner QUALIFIED
Maria MarrierIndiaAsiya Javayant NEW
Emily WhobreyItalyXuxue Feng UNQUALIFIED
Darci PoquetteCanadaOnyama Limba NEW
Sinclair WaycottArgentinaAmy Elsner PROPOSAL
Aruna FigeroaArgentinaIvan Magalhaes NEW
Greenwood BologniaRussiaIvan Magalhaes RENEWAL
Costa DilliardIndiaXuxue Feng NEGOTIATION
Tony FollerUnited KingdomAsiya Javayant NEW
Claire TollnerGermanyIvan Magalhaes PROPOSAL
Wickens NestleIndiaElwin Sharvill QUALIFIED
Tony FollerAustraliaBernardo Dominic PROPOSAL
Isabel BowleyItalyStephen Shaw NEGOTIATION
Aika InouyeUnited KingdomElwin Sharvill PROPOSAL
Deepesh ChuiIndiaAmy Elsner NEGOTIATION
James ButtAustraliaStephen Shaw PROPOSAL
Johnson SergiUnited KingdomAnna Fali NEGOTIATION
Rodrigues CampainRussiaElwin Sharvill UNQUALIFIED
Octavia MaletSpainAnna Fali RENEWAL
Clifford RimAustraliaOnyama Limba NEGOTIATION
Julie StensethUnited KingdomXuxue Feng RENEWAL
Emily WhobreyRussiaElwin Sharvill NEGOTIATION
Maria MarrierItalyAmy Elsner RENEWAL
Wickens NestleBrazilAmy Elsner RENEWAL
Isabel BowleyBrazilStephen Shaw NEGOTIATION
Nicolas IturbideJapanAmy Elsner PROPOSAL
Jeanfrancois VenereBrazilIvan Magalhaes UNQUALIFIED
Alejandro PerinRussiaOnyama Limba QUALIFIED
Ashley DoeJapanAsiya Javayant NEW
Ashley DoeIndiaElwin Sharvill NEW
Adams MorascaFranceOnyama Limba UNQUALIFIED
Ivar PaprockiCanadaXuxue Feng NEW
Jennifer AmigonArgentinaOnyama Limba QUALIFIED
Rodrigues CampainUnited KingdomAmy Elsner PROPOSAL
Octavia MaletFranceOnyama Limba PROPOSAL
Rodrigues CampainAustraliaIoni Bowcher QUALIFIED
Jefferson SchemmerIndiaBernardo Dominic QUALIFIED
Emily WhobreyArgentinaOnyama Limba RENEWAL
Emily WhobreyIndiaBernardo Dominic NEW
Ricardo GauchoGermanyAsiya Javayant QUALIFIED
Kadeem FlosiIndiaAsiya Javayant PROPOSAL
Frozen Columns
Name
Ashley Doe
Kaitlin Ostrosky
Ricardo Gaucho
Jones Vocelka
Salvatore Stockham
Wickens Nestle
Faith Gillian
Kadeem Flosi
Ricardo Gaucho
Alejandro Perin
Leon Oldroyd
Darci Poquette
Smith Glick
Deepesh Chui
Nicolas Iturbide
Munro Ferencz
Jones Vocelka
Aika Inouye
Deepesh Chui
Claire Tollner
Antonio Caudy
Ricardo Gaucho
Jennifer Amigon
Antonio Caudy
Jennifer Amigon
Mayumi Kolmetz
Arvin Albares
Maisha Rulapaugh
Stacey Maclead
Rodrigues Campain
Emily Whobrey
Ivar Paprocki
Darci Poquette
Smith Glick
Octavia Malet
Munro Ferencz
Johnson Sergi
Juan Wieser
Chavez Briddick
Juan Wieser
Juan Wieser
Ivar Paprocki
Morrow Ruta
Clifford Rim
Kadeem Flosi
Antonio Caudy
Ivar Paprocki
Murillo Malet
Darci Poquette
Tony Foller
IdCountryDate
1000Canada2025-08-26
1001Germany2025-09-16
1002Russia2025-09-09
1003United Kingdom2025-08-28
1004Japan2025-08-27
1005Japan2025-08-28
1006Germany2025-09-02
1007Brazil2025-09-08
1008Germany2025-09-16
1009Australia2025-09-16
1010United Kingdom2025-09-03
1011Russia2025-09-08
1012Japan2025-09-04
1013Italy2025-08-20
1014Japan2025-08-26
1015Germany2025-08-18
1016Russia2025-09-01
1017Germany2025-09-15
1018Russia2025-09-12
1019United Kingdom2025-09-05
1020Germany2025-09-11
1021Australia2025-08-28
1022Japan2025-09-08
1023France2025-08-24
1024Spain2025-09-12
1025France2025-09-16
1026Argentina2025-08-21
1027France2025-09-06
1028Italy2025-08-23
1029Russia2025-09-03
1030United Kingdom2025-09-08
1031Brazil2025-09-14
1032Russia2025-08-30
1033France2025-08-19
1034United Kingdom2025-09-09
1035Spain2025-08-23
1036United Kingdom2025-09-08
1037United Kingdom2025-08-29
1038Canada2025-08-26
1039Germany2025-08-26
1040Spain2025-09-06
1041Canada2025-09-10
1042France2025-08-19
1043India2025-08-27
1044Italy2025-09-01
1045Spain2025-09-16
1046Australia2025-09-01
1047Australia2025-08-28
1048Canada2025-08-20
1049Argentina2025-08-28

On-Demand Data

NameIdCountryDate
Isabel Bowley1000Japan2025-09-05
Rodrigues Campain1001Brazil2025-09-15
Aika Inouye1002Canada2025-08-25
Mujtaba Nicka1003India2025-08-21
Leon Oldroyd1004Russia2025-09-11
Alejandro Perin1005Canada2025-08-22
Faith Gillian1006Italy2025-09-11
Costa Dilliard1007Italy2025-08-31
Isabel Bowley1008Spain2025-09-02
Isabel Bowley1009Australia2025-09-08
Darci Poquette1010Argentina2025-08-28
James Butt1011Brazil2025-09-10
Tony Foller1012India2025-09-01
Johnson Sergi1013Italy2025-08-27
Arvin Albares1014Russia2025-08-31
Julie Stenseth1015France2025-08-27
Aika Inouye1016Australia2025-08-21
Murillo Malet1017Germany2025-08-28
Claire Tollner1018Brazil2025-09-05
Aditya Kusko1019Italy2025-08-24
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aruna FigeroaBrazilElwin Sharvill RENEWAL
Tony FollerArgentinaIoni Bowcher RENEWAL
Juan WieserArgentinaOnyama Limba QUALIFIED
Greenwood BologniaCanadaIvan Magalhaes PROPOSAL
Arvin AlbaresCanadaIvan Magalhaes PROPOSAL
Stacey MacleadCanadaAnna Fali NEGOTIATION
James ButtFranceIvan Magalhaes PROPOSAL
Jefferson SchemmerJapanIvan Magalhaes RENEWAL
Alejandro PerinItalyIvan Magalhaes NEGOTIATION
Salvatore StockhamFranceAnna Fali QUALIFIED
Aditya KuskoAustraliaStephen Shaw NEGOTIATION
Maria MarrierFranceOnyama Limba NEW
Jennifer AmigonAustraliaXuxue Feng UNQUALIFIED
Kaitlin OstroskyUnited KingdomIoni Bowcher PROPOSAL
Adams MorascaItalyIvan Magalhaes PROPOSAL
Isabel BowleyFranceOnyama Limba PROPOSAL
Antonio CaudySpainOnyama Limba PROPOSAL
Aruna FigeroaSpainBernardo Dominic NEW
Kadeem FlosiFranceIvan Magalhaes NEGOTIATION
Johnson SergiJapanAnna Fali QUALIFIED
Maisha RulapaughItalyAsiya Javayant PROPOSAL
Wickens NestleAustraliaAsiya Javayant UNQUALIFIED
Claire TollnerUnited KingdomIoni Bowcher RENEWAL
Juan WieserItalyAsiya Javayant UNQUALIFIED
Jefferson SchemmerBrazilXuxue Feng NEW
Greenwood BologniaRussiaIoni Bowcher NEW
Jones VocelkaAustraliaAmy Elsner RENEWAL
Aika InouyeJapanAmy Elsner RENEWAL
Leon OldroydUnited KingdomAnna Fali QUALIFIED
Aruna FigeroaCanadaAmy Elsner RENEWAL
James ButtFranceIoni Bowcher RENEWAL
Juan WieserUnited KingdomStephen Shaw RENEWAL
Silvio SlusarskiCanadaAsiya Javayant UNQUALIFIED
Adams MorascaCanadaIvan Magalhaes QUALIFIED
Antonio CaudyAustraliaBernardo Dominic QUALIFIED
Chavez BriddickGermanyStephen Shaw NEW
Wickens NestleUnited KingdomIvan Magalhaes QUALIFIED
Octavia MaletSpainXuxue Feng NEW
Tony FollerBrazilBernardo Dominic QUALIFIED
Leja CaldareraItalyIvan Magalhaes 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>