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
Emily WhobreyFranceAmy Elsner QUALIFIED
Morrow RutaSpainIoni Bowcher NEW
Claire TollnerRussiaBernardo Dominic NEW
Jones VocelkaRussiaBernardo Dominic RENEWAL
Clifford RimIndiaElwin Sharvill PROPOSAL
Cody SaylorsArgentinaStephen Shaw UNQUALIFIED
Jones VocelkaUnited KingdomAnna Fali NEGOTIATION
Leja CaldareraArgentinaOnyama Limba PROPOSAL
Claire TollnerUnited KingdomAnna Fali PROPOSAL
Leja CaldareraJapanElwin Sharvill PROPOSAL
Antonio CaudyUnited KingdomElwin Sharvill PROPOSAL
Francesco ShinkoItalyXuxue Feng RENEWAL
Ricardo GauchoGermanyAsiya Javayant RENEWAL
Misaki RoysterIndiaBernardo Dominic QUALIFIED
Alejandro PerinBrazilIvan Magalhaes UNQUALIFIED
Claire TollnerCanadaAnna Fali RENEWAL
Antonio CaudyRussiaAnna Fali QUALIFIED
Ricardo GauchoUnited KingdomIoni Bowcher RENEWAL
Jones VocelkaSpainAmy Elsner PROPOSAL
Jefferson SchemmerSpainXuxue Feng PROPOSAL
Greenwood BologniaSpainOnyama Limba NEW
Sinclair WaycottArgentinaXuxue Feng RENEWAL
Ivar PaprockiBrazilIvan Magalhaes NEGOTIATION
Kadeem FlosiBrazilElwin Sharvill UNQUALIFIED
Faith GillianAustraliaIvan Magalhaes UNQUALIFIED
Leja CaldareraUnited KingdomIoni Bowcher NEW
Kadeem FlosiCanadaBernardo Dominic UNQUALIFIED
Silvio SlusarskiRussiaAsiya Javayant NEW
Clifford RimAustraliaAmy Elsner PROPOSAL
Kadeem FlosiFranceAmy Elsner RENEWAL
Aika InouyeIndiaIvan Magalhaes RENEWAL
Mayumi KolmetzRussiaIvan Magalhaes PROPOSAL
Arvin AlbaresArgentinaElwin Sharvill PROPOSAL
Costa DilliardItalyXuxue Feng QUALIFIED
Sinclair WaycottRussiaAnna Fali QUALIFIED
Maria MarrierSpainStephen Shaw NEW
Stacey MacleadRussiaAmy Elsner NEGOTIATION
Aditya KuskoArgentinaXuxue Feng PROPOSAL
Aika InouyeArgentinaStephen Shaw RENEWAL
Morrow RutaBrazilStephen Shaw PROPOSAL
Emily WhobreyJapanBernardo Dominic QUALIFIED
Octavia MaletRussiaIvan Magalhaes QUALIFIED
Julie StensethAustraliaAmy Elsner PROPOSAL
Aditya KuskoUnited KingdomAsiya Javayant UNQUALIFIED
Emily WhobreyItalyElwin Sharvill QUALIFIED
Leja CaldareraFranceElwin Sharvill QUALIFIED
Jones VocelkaUnited KingdomElwin Sharvill PROPOSAL
Darci PoquetteGermanyIoni Bowcher PROPOSAL
Leja CaldareraAustraliaXuxue Feng RENEWAL
Claire TollnerArgentinaIvan Magalhaes PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Mujtaba NickaUnited KingdomAsiya Javayant NEGOTIATION
Mayumi KolmetzAustraliaIoni Bowcher PROPOSAL
Johnson SergiGermanyAsiya Javayant UNQUALIFIED
David DarakjyAustraliaAnna Fali PROPOSAL
Jones VocelkaCanadaElwin Sharvill NEGOTIATION
Claire TollnerArgentinaBernardo Dominic PROPOSAL
Tony FollerAustraliaElwin Sharvill QUALIFIED
Chavez BriddickJapanXuxue Feng NEW
Ashley DoeRussiaOnyama Limba UNQUALIFIED
Leon OldroydAustraliaIvan Magalhaes UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Morrow RutaArgentina2025-07-26Printing Dimensions UNQUALIFIED7Xuxue Feng
1001Juan WieserFrance2025-07-30Rangoni Of Florence NEW72Onyama Limba
1002Aruna FigeroaArgentina2025-08-23Printing Dimensions UNQUALIFIED8Onyama Limba
1003Arvin AlbaresCanada2025-07-31Commercial Press PROPOSAL26Onyama Limba
1004Rodrigues CampainIndia2025-08-17King, Christopher A Esq RENEWAL4Ioni Bowcher
1005Silvio SlusarskiFrance2025-07-29Commercial Press NEW84Anna Fali
1006Julie StensethIndia2025-08-18Chemel, James L Cpa QUALIFIED49Asiya Javayant
1007Wickens NestleArgentina2025-08-03Chapman, Ross E Esq QUALIFIED50Amy Elsner
1008Munro FerenczSpain2025-08-04Rousseaux, Michael Esq RENEWAL72Bernardo Dominic
1009Ricardo GauchoCanada2025-08-16Dorl, James J Esq NEGOTIATION7Asiya Javayant
1010Darci PoquetteRussia2025-08-16Printing Dimensions RENEWAL88Asiya Javayant
1011Izzy GarufiBrazil2025-07-26Chanay, Jeffrey A Esq UNQUALIFIED77Amy Elsner
1012Nicolas IturbideSpain2025-08-10Chanay, Jeffrey A Esq NEGOTIATION19Ivan Magalhaes
1013Aditya KuskoJapan2025-07-29Rousseaux, Michael Esq NEW34Onyama Limba
1014Isabel BowleyIndia2025-07-30Buckley Miller Wright NEW81Stephen Shaw
1015Ricardo GauchoBrazil2025-08-18Feiner Bros UNQUALIFIED66Xuxue Feng
1016Adams MorascaIndia2025-07-29Feiner Bros UNQUALIFIED80Stephen Shaw
1017Murillo MaletUnited Kingdom2025-08-17Chanay, Jeffrey A Esq NEW51Ivan Magalhaes
1018Clifford RimAustralia2025-08-16Morlong Associates PROPOSAL62Bernardo Dominic
1019Costa DilliardCanada2025-08-23Morlong Associates NEGOTIATION32Bernardo Dominic
1020Alejandro PerinAustralia2025-08-03Dorl, James J Esq QUALIFIED80Ivan Magalhaes
1021Tony FollerCanada2025-08-17Commercial Press NEGOTIATION75Onyama Limba
1022Cody SaylorsCanada2025-08-06Feiner Bros NEGOTIATION90Asiya Javayant
1023Greenwood BologniaBrazil2025-07-26Chapman, Ross E Esq PROPOSAL95Asiya Javayant
1024Deepesh ChuiGermany2025-08-07Chanay, Jeffrey A Esq QUALIFIED4Anna Fali
1025Antonio CaudyUnited Kingdom2025-08-16Commercial Press RENEWAL30Bernardo Dominic
1026David DarakjyIndia2025-08-10Commercial Press QUALIFIED26Elwin Sharvill
1027Jeanfrancois VenereJapan2025-08-17King, Christopher A Esq NEW42Ivan Magalhaes
1028Tony FollerBrazil2025-07-30Chapman, Ross E Esq QUALIFIED0Ivan Magalhaes
1029Mayumi KolmetzBrazil2025-08-07Chanay, Jeffrey A Esq UNQUALIFIED7Amy Elsner
1030Jennifer AmigonGermany2025-08-15Commercial Press RENEWAL21Bernardo Dominic
1031Aditya KuskoUnited Kingdom2025-07-26Rousseaux, Michael Esq RENEWAL91Asiya Javayant
1032Tony FollerJapan2025-08-04King, Christopher A Esq RENEWAL44Ioni Bowcher
1033Ricardo GauchoSpain2025-08-14Buckley Miller Wright PROPOSAL10Amy Elsner
1034Adams MorascaBrazil2025-07-27Printing Dimensions PROPOSAL57Anna Fali
1035Kaitlin OstroskyItaly2025-08-13Truhlar And Truhlar Attys QUALIFIED87Ivan Magalhaes
1036Jennifer AmigonBrazil2025-07-30Benton, John B Jr RENEWAL16Bernardo Dominic
1037Deepesh ChuiAustralia2025-08-16Chanay, Jeffrey A Esq PROPOSAL97Elwin Sharvill
1038Greenwood BologniaBrazil2025-08-01Feltz Printing Service NEGOTIATION60Xuxue Feng
1039Rodrigues CampainGermany2025-08-11Morlong Associates NEGOTIATION3Anna Fali
1040Octavia MaletBrazil2025-07-30Printing Dimensions UNQUALIFIED86Amy Elsner
1041Faith GillianGermany2025-08-07Chemel, James L Cpa NEW8Amy Elsner
1042Mujtaba NickaAustralia2025-08-15Morlong Associates NEGOTIATION61Elwin Sharvill
1043Jones VocelkaBrazil2025-07-31Chemel, James L Cpa RENEWAL47Bernardo Dominic
1044Jones VocelkaItaly2025-07-28Rangoni Of Florence PROPOSAL69Xuxue Feng
1045Mayumi KolmetzArgentina2025-07-26Benton, John B Jr PROPOSAL93Asiya Javayant
1046Cody SaylorsCanada2025-08-08Truhlar And Truhlar Attys QUALIFIED49Asiya Javayant
1047Mujtaba NickaFrance2025-07-26Buckley Miller Wright UNQUALIFIED18Bernardo Dominic
1048Sinclair WaycottRussia2025-08-05Rangoni Of Florence RENEWAL82Amy Elsner
1049Arvin AlbaresItaly2025-08-23Feltz Printing Service PROPOSAL89Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Octavia MaletGermanyAmy Elsner PROPOSAL
Aika InouyeIndiaAnna Fali NEW
Francesco ShinkoAustraliaAsiya Javayant RENEWAL
Aika InouyeIndiaIoni Bowcher UNQUALIFIED
Johnson SergiCanadaBernardo Dominic NEW
Adams MorascaRussiaAnna Fali PROPOSAL
Munro FerenczCanadaXuxue Feng UNQUALIFIED
Jennifer AmigonBrazilBernardo Dominic RENEWAL
Wickens NestleItalyXuxue Feng PROPOSAL
Clifford RimAustraliaStephen Shaw RENEWAL
Maisha RulapaughCanadaAsiya Javayant RENEWAL
Murillo MaletGermanyIoni Bowcher NEW
Octavia MaletUnited KingdomBernardo Dominic NEW
Chavez BriddickBrazilBernardo Dominic NEW
Darci PoquetteSpainAsiya Javayant RENEWAL
Aika InouyeBrazilBernardo Dominic PROPOSAL
Mayumi KolmetzRussiaStephen Shaw RENEWAL
Tony FollerBrazilStephen Shaw NEW
Claire TollnerArgentinaBernardo Dominic QUALIFIED
Greenwood BologniaGermanyElwin Sharvill NEW
Jones VocelkaArgentinaElwin Sharvill NEW
Darci PoquetteBrazilBernardo Dominic QUALIFIED
Jennifer AmigonCanadaIoni Bowcher UNQUALIFIED
Jeanfrancois VenereIndiaBernardo Dominic RENEWAL
Izzy GarufiBrazilIvan Magalhaes QUALIFIED
Mujtaba NickaSpainIoni Bowcher QUALIFIED
David DarakjyJapanStephen Shaw QUALIFIED
Leja CaldareraUnited KingdomXuxue Feng NEW
Darci PoquetteSpainIoni Bowcher QUALIFIED
Ivar PaprockiCanadaElwin Sharvill NEW
Darci PoquetteArgentinaElwin Sharvill NEGOTIATION
Francesco ShinkoUnited KingdomStephen Shaw PROPOSAL
Greenwood BologniaUnited KingdomBernardo Dominic PROPOSAL
Silvio SlusarskiUnited KingdomIvan Magalhaes UNQUALIFIED
Mayumi KolmetzJapanBernardo Dominic QUALIFIED
Leon OldroydJapanAnna Fali NEGOTIATION
Nicolas IturbideGermanyIvan Magalhaes RENEWAL
Leon OldroydIndiaOnyama Limba RENEWAL
Julie StensethFranceOnyama Limba NEW
Ivar PaprockiArgentinaStephen Shaw RENEWAL
Rodrigues CampainAustraliaElwin Sharvill PROPOSAL
Claire TollnerGermanyIoni Bowcher NEW
James ButtAustraliaStephen Shaw UNQUALIFIED
Maisha RulapaughJapanElwin Sharvill RENEWAL
Leon OldroydJapanXuxue Feng QUALIFIED
Kadeem FlosiItalyAmy Elsner PROPOSAL
Clifford RimGermanyAsiya Javayant RENEWAL
Octavia MaletRussiaIoni Bowcher QUALIFIED
Aika InouyeAustraliaAsiya Javayant NEW
Leon OldroydFranceIoni Bowcher QUALIFIED
Frozen Columns
Name
Alejandro Perin
Octavia Malet
Leon Oldroyd
Aruna Figeroa
Munro Ferencz
Costa Dilliard
Mujtaba Nicka
Sinclair Waycott
Mujtaba Nicka
Juan Wieser
Alejandro Perin
Juan Wieser
Stacey Maclead
Isabel Bowley
Sinclair Waycott
Claire Tollner
Kadeem Flosi
Clifford Rim
Jeanfrancois Venere
Rodrigues Campain
Deepesh Chui
Octavia Malet
Clifford Rim
Morrow Ruta
Alejandro Perin
Octavia Malet
Francesco Shinko
Aika Inouye
Isabel Bowley
Juan Wieser
Faith Gillian
Ashley Doe
Smith Glick
Ricardo Gaucho
Silvio Slusarski
Leja Caldarera
Costa Dilliard
David Darakjy
Faith Gillian
Wickens Nestle
Kadeem Flosi
Ricardo Gaucho
Leja Caldarera
Jennifer Amigon
Juan Wieser
Tony Foller
Mujtaba Nicka
Julie Stenseth
Chavez Briddick
Aika Inouye
IdCountryDate
1000Brazil2025-08-05
1001India2025-08-15
1002France2025-08-16
1003Canada2025-08-19
1004France2025-08-03
1005India2025-08-04
1006Italy2025-07-31
1007Canada2025-08-09
1008Spain2025-08-13
1009Russia2025-08-17
1010Japan2025-08-17
1011Spain2025-07-26
1012Japan2025-08-18
1013United Kingdom2025-08-06
1014Italy2025-08-06
1015Germany2025-08-15
1016United Kingdom2025-08-19
1017Brazil2025-07-29
1018Australia2025-07-29
1019France2025-08-07
1020Australia2025-08-12
1021United Kingdom2025-08-21
1022Italy2025-07-26
1023France2025-08-22
1024Russia2025-08-03
1025United Kingdom2025-08-02
1026Germany2025-08-07
1027Argentina2025-08-14
1028Spain2025-07-31
1029Germany2025-08-05
1030Australia2025-08-11
1031India2025-07-31
1032Italy2025-07-29
1033Spain2025-08-20
1034United Kingdom2025-08-20
1035Brazil2025-08-11
1036Japan2025-08-15
1037Russia2025-08-01
1038France2025-07-31
1039Japan2025-08-22
1040Japan2025-08-13
1041Japan2025-08-09
1042France2025-08-19
1043France2025-08-12
1044United Kingdom2025-07-31
1045Italy2025-08-03
1046Italy2025-08-23
1047Brazil2025-08-19
1048Russia2025-08-23
1049Russia2025-07-25

On-Demand Data

NameIdCountryDate
Isabel Bowley1000United Kingdom2025-08-15
Ivar Paprocki1001Italy2025-08-05
Johnson Sergi1002Argentina2025-08-09
Mujtaba Nicka1003France2025-08-02
Sinclair Waycott1004Japan2025-08-13
Aruna Figeroa1005Russia2025-08-08
Wickens Nestle1006Australia2025-08-05
Alejandro Perin1007Russia2025-08-19
Izzy Garufi1008Russia2025-08-21
Greenwood Bolognia1009Brazil2025-08-18
Jennifer Amigon1010Canada2025-08-18
Arvin Albares1011Argentina2025-07-26
Claire Tollner1012Canada2025-08-18
Claire Tollner1013Spain2025-08-08
Francesco Shinko1014Australia2025-07-27
Mayumi Kolmetz1015Argentina2025-08-13
Julie Stenseth1016Brazil2025-07-28
Aditya Kusko1017Canada2025-07-30
Kaitlin Ostrosky1018Australia2025-08-03
Jennifer Amigon1019Russia2025-07-31
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Claire TollnerBrazilAnna Fali NEW
Chavez BriddickFranceAmy Elsner RENEWAL
Darci PoquetteIndiaOnyama Limba NEW
Aika InouyeCanadaAsiya Javayant NEW
Kadeem FlosiRussiaAsiya Javayant RENEWAL
Antonio CaudyGermanyStephen Shaw RENEWAL
Faith GillianBrazilElwin Sharvill NEW
Ricardo GauchoRussiaIoni Bowcher QUALIFIED
Jennifer AmigonJapanStephen Shaw RENEWAL
Izzy GarufiIndiaStephen Shaw NEGOTIATION
Murillo MaletArgentinaAsiya Javayant RENEWAL
Jones VocelkaUnited KingdomIvan Magalhaes UNQUALIFIED
Rodrigues CampainIndiaOnyama Limba RENEWAL
Isabel BowleyArgentinaIoni Bowcher UNQUALIFIED
Leja CaldareraUnited KingdomIvan Magalhaes QUALIFIED
Aika InouyeCanadaAsiya Javayant NEW
Ashley DoeUnited KingdomAmy Elsner RENEWAL
Francesco ShinkoIndiaOnyama Limba NEGOTIATION
Smith GlickRussiaIvan Magalhaes QUALIFIED
Clifford RimCanadaAmy Elsner NEGOTIATION
Mujtaba NickaSpainBernardo Dominic PROPOSAL
Juan WieserItalyBernardo Dominic NEGOTIATION
Salvatore StockhamGermanyOnyama Limba QUALIFIED
Francesco ShinkoFranceOnyama Limba QUALIFIED
Stacey MacleadAustraliaIoni Bowcher QUALIFIED
Leja CaldareraJapanAnna Fali QUALIFIED
Ashley DoeBrazilStephen Shaw RENEWAL
Aika InouyeCanadaOnyama Limba RENEWAL
Adams MorascaCanadaOnyama Limba NEW
Claire TollnerUnited KingdomElwin Sharvill NEW
Octavia MaletCanadaBernardo Dominic NEGOTIATION
Mujtaba NickaJapanAsiya Javayant RENEWAL
Kadeem FlosiFranceAmy Elsner NEW
Tony FollerUnited KingdomXuxue Feng NEGOTIATION
Kaitlin OstroskyRussiaStephen Shaw NEGOTIATION
Mujtaba NickaJapanAmy Elsner QUALIFIED
Maria MarrierFranceBernardo Dominic NEW
Isabel BowleyIndiaOnyama Limba UNQUALIFIED
Sinclair WaycottAustraliaXuxue Feng NEGOTIATION
Izzy GarufiGermanyAmy Elsner 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>