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
Stacey MacleadUnited KingdomXuxue Feng NEW
Ricardo GauchoJapanAmy Elsner QUALIFIED
Mujtaba NickaSpainIvan Magalhaes NEW
Rodrigues CampainRussiaOnyama Limba PROPOSAL
Kaitlin OstroskyBrazilBernardo Dominic UNQUALIFIED
Cody SaylorsSpainOnyama Limba NEGOTIATION
Aruna FigeroaIndiaOnyama Limba UNQUALIFIED
Deepesh ChuiGermanyElwin Sharvill RENEWAL
Tony FollerAustraliaXuxue Feng NEW
Costa DilliardGermanyStephen Shaw UNQUALIFIED
Arvin AlbaresSpainAnna Fali QUALIFIED
Alejandro PerinJapanIvan Magalhaes NEGOTIATION
Murillo MaletCanadaElwin Sharvill RENEWAL
Juan WieserGermanyBernardo Dominic QUALIFIED
Izzy GarufiAustraliaIvan Magalhaes QUALIFIED
Greenwood BologniaIndiaAsiya Javayant NEGOTIATION
Arvin AlbaresUnited KingdomBernardo Dominic NEW
Salvatore StockhamSpainAsiya Javayant PROPOSAL
Ivar PaprockiCanadaIoni Bowcher PROPOSAL
Ashley DoeSpainXuxue Feng PROPOSAL
Isabel BowleyRussiaIvan Magalhaes NEW
Mujtaba NickaGermanyIoni Bowcher NEGOTIATION
Smith GlickBrazilIoni Bowcher NEW
Jeanfrancois VenereJapanAnna Fali RENEWAL
Arvin AlbaresSpainIvan Magalhaes QUALIFIED
Rodrigues CampainIndiaIvan Magalhaes QUALIFIED
Jennifer AmigonRussiaIvan Magalhaes UNQUALIFIED
Smith GlickBrazilXuxue Feng QUALIFIED
Rodrigues CampainRussiaStephen Shaw UNQUALIFIED
Jefferson SchemmerGermanyAnna Fali NEW
Emily WhobreySpainIvan Magalhaes PROPOSAL
Darci PoquetteJapanAmy Elsner PROPOSAL
Morrow RutaGermanyBernardo Dominic NEGOTIATION
Ivar PaprockiIndiaBernardo Dominic QUALIFIED
Mayumi KolmetzFranceAnna Fali QUALIFIED
Aditya KuskoArgentinaIvan Magalhaes QUALIFIED
Isabel BowleyFranceAmy Elsner NEW
Darci PoquetteJapanAmy Elsner UNQUALIFIED
Adams MorascaAustraliaAnna Fali RENEWAL
Adams MorascaSpainAsiya Javayant UNQUALIFIED
Morrow RutaAustraliaBernardo Dominic RENEWAL
Silvio SlusarskiRussiaIvan Magalhaes RENEWAL
Jeanfrancois VenereRussiaAmy Elsner PROPOSAL
Kadeem FlosiAustraliaAsiya Javayant QUALIFIED
Jennifer AmigonJapanStephen Shaw QUALIFIED
Claire TollnerGermanyAnna Fali NEW
Aruna FigeroaGermanyIoni Bowcher RENEWAL
Ashley DoeUnited KingdomStephen Shaw NEW
Kadeem FlosiItalyAsiya Javayant NEW
Octavia MaletBrazilIvan Magalhaes UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Clifford RimIndiaXuxue Feng NEGOTIATION
Juan WieserCanadaAsiya Javayant PROPOSAL
Costa DilliardGermanyIvan Magalhaes UNQUALIFIED
Jennifer AmigonGermanyBernardo Dominic PROPOSAL
Aika InouyeBrazilElwin Sharvill NEGOTIATION
Smith GlickRussiaElwin Sharvill PROPOSAL
Ashley DoeCanadaAnna Fali NEGOTIATION
Nicolas IturbideRussiaBernardo Dominic RENEWAL
Izzy GarufiAustraliaElwin Sharvill PROPOSAL
Mujtaba NickaAustraliaOnyama Limba NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Adams MorascaIndia2025-09-13Chapman, Ross E Esq QUALIFIED54Onyama Limba
1001Salvatore StockhamSpain2025-10-02Commercial Press NEW24Elwin Sharvill
1002James ButtIndia2025-09-30Buckley Miller Wright QUALIFIED79Ivan Magalhaes
1003Clifford RimSpain2025-10-02Rousseaux, Michael Esq NEGOTIATION31Ivan Magalhaes
1004Sinclair WaycottUnited Kingdom2025-09-12Feiner Bros PROPOSAL4Asiya Javayant
1005Nicolas IturbideGermany2025-09-24Printing Dimensions UNQUALIFIED55Elwin Sharvill
1006Ashley DoeJapan2025-10-08Dorl, James J Esq PROPOSAL70Bernardo Dominic
1007Jeanfrancois VenereBrazil2025-09-18Truhlar And Truhlar Attys NEW2Amy Elsner
1008Alejandro PerinGermany2025-09-27Rangoni Of Florence UNQUALIFIED74Amy Elsner
1009Claire TollnerAustralia2025-10-02Commercial Press QUALIFIED46Ivan Magalhaes
1010Ivar PaprockiRussia2025-09-26Dorl, James J Esq RENEWAL43Onyama Limba
1011Maria MarrierArgentina2025-10-02Morlong Associates NEGOTIATION10Ioni Bowcher
1012Faith GillianIndia2025-10-06Chapman, Ross E Esq RENEWAL22Ioni Bowcher
1013Jones VocelkaAustralia2025-09-17Morlong Associates UNQUALIFIED3Onyama Limba
1014Isabel BowleyAustralia2025-10-08Benton, John B Jr UNQUALIFIED29Stephen Shaw
1015Greenwood BologniaAustralia2025-09-17Rangoni Of Florence RENEWAL51Elwin Sharvill
1016James ButtGermany2025-10-07Chapman, Ross E Esq NEGOTIATION58Xuxue Feng
1017Maisha RulapaughGermany2025-10-05Chanay, Jeffrey A Esq QUALIFIED10Ioni Bowcher
1018Salvatore StockhamAustralia2025-09-30Commercial Press UNQUALIFIED1Stephen Shaw
1019Smith GlickItaly2025-10-04Morlong Associates QUALIFIED8Elwin Sharvill
1020David DarakjyGermany2025-09-21Morlong Associates RENEWAL0Ioni Bowcher
1021Aika InouyeBrazil2025-09-26Benton, John B Jr NEW28Bernardo Dominic
1022Aditya KuskoRussia2025-09-15Morlong Associates NEW92Stephen Shaw
1023Nicolas IturbideBrazil2025-10-01Rangoni Of Florence UNQUALIFIED79Asiya Javayant
1024Arvin AlbaresRussia2025-09-22Chanay, Jeffrey A Esq QUALIFIED95Stephen Shaw
1025Antonio CaudyIndia2025-10-07Feiner Bros UNQUALIFIED55Ivan Magalhaes
1026Alejandro PerinItaly2025-10-04Rousseaux, Michael Esq UNQUALIFIED87Ivan Magalhaes
1027Antonio CaudyFrance2025-09-22Chemel, James L Cpa NEGOTIATION66Onyama Limba
1028Murillo MaletUnited Kingdom2025-09-22Benton, John B Jr RENEWAL30Stephen Shaw
1029Jefferson SchemmerUnited Kingdom2025-09-15Buckley Miller Wright UNQUALIFIED56Ivan Magalhaes
1030Munro FerenczUnited Kingdom2025-09-10Chanay, Jeffrey A Esq RENEWAL93Anna Fali
1031Salvatore StockhamRussia2025-09-22Commercial Press UNQUALIFIED35Anna Fali
1032Arvin AlbaresArgentina2025-09-12Morlong Associates UNQUALIFIED42Asiya Javayant
1033Costa DilliardArgentina2025-09-28Morlong Associates PROPOSAL62Elwin Sharvill
1034James ButtRussia2025-09-19Rangoni Of Florence UNQUALIFIED50Amy Elsner
1035Cody SaylorsFrance2025-09-10Chemel, James L Cpa QUALIFIED77Anna Fali
1036James ButtRussia2025-10-04Dorl, James J Esq UNQUALIFIED5Ivan Magalhaes
1037Rodrigues CampainArgentina2025-10-03Dorl, James J Esq UNQUALIFIED20Ioni Bowcher
1038Ashley DoeJapan2025-09-15Chanay, Jeffrey A Esq PROPOSAL44Asiya Javayant
1039Greenwood BologniaRussia2025-09-22Rousseaux, Michael Esq QUALIFIED78Asiya Javayant
1040Mujtaba NickaRussia2025-09-10Rangoni Of Florence QUALIFIED95Ioni Bowcher
1041Salvatore StockhamUnited Kingdom2025-10-02Rangoni Of Florence QUALIFIED33Amy Elsner
1042Aditya KuskoItaly2025-09-13Rangoni Of Florence NEW39Asiya Javayant
1043Jones VocelkaBrazil2025-09-11Chanay, Jeffrey A Esq RENEWAL70Onyama Limba
1044Stacey MacleadSpain2025-09-30Benton, John B Jr NEGOTIATION92Anna Fali
1045Silvio SlusarskiCanada2025-09-16Rousseaux, Michael Esq QUALIFIED73Elwin Sharvill
1046Izzy GarufiUnited Kingdom2025-09-12Dorl, James J Esq UNQUALIFIED56Bernardo Dominic
1047Kadeem FlosiJapan2025-09-28Commercial Press NEW53Xuxue Feng
1048Emily WhobreyItaly2025-09-28Printing Dimensions NEGOTIATION15Anna Fali
1049Faith GillianCanada2025-09-14Rangoni Of Florence UNQUALIFIED51Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Cody SaylorsJapanBernardo Dominic RENEWAL
Izzy GarufiAustraliaOnyama Limba NEGOTIATION
Rodrigues CampainIndiaAmy Elsner PROPOSAL
Rodrigues CampainBrazilAnna Fali NEGOTIATION
Salvatore StockhamItalyAmy Elsner RENEWAL
Isabel BowleyFranceXuxue Feng RENEWAL
Jeanfrancois VenereRussiaBernardo Dominic QUALIFIED
Darci PoquetteFranceAnna Fali NEW
Rodrigues CampainBrazilIoni Bowcher UNQUALIFIED
Faith GillianSpainIvan Magalhaes NEW
Izzy GarufiItalyXuxue Feng RENEWAL
Juan WieserUnited KingdomAnna Fali NEW
Chavez BriddickSpainIoni Bowcher PROPOSAL
James ButtBrazilIoni Bowcher RENEWAL
Chavez BriddickBrazilAsiya Javayant QUALIFIED
Munro FerenczJapanOnyama Limba RENEWAL
Salvatore StockhamSpainIvan Magalhaes QUALIFIED
Leja CaldareraFranceAmy Elsner RENEWAL
Francesco ShinkoItalyIvan Magalhaes UNQUALIFIED
Isabel BowleyUnited KingdomAsiya Javayant NEGOTIATION
James ButtUnited KingdomStephen Shaw PROPOSAL
Ashley DoeAustraliaOnyama Limba NEGOTIATION
Aika InouyeFranceBernardo Dominic UNQUALIFIED
Costa DilliardGermanyBernardo Dominic UNQUALIFIED
Aditya KuskoItalyAnna Fali QUALIFIED
Ashley DoeUnited KingdomIoni Bowcher UNQUALIFIED
Arvin AlbaresRussiaOnyama Limba NEW
Ashley DoeRussiaXuxue Feng UNQUALIFIED
Alejandro PerinFranceIoni Bowcher NEGOTIATION
Ricardo GauchoSpainOnyama Limba QUALIFIED
Stacey MacleadItalyOnyama Limba NEGOTIATION
Francesco ShinkoSpainStephen Shaw NEW
Ricardo GauchoItalyBernardo Dominic NEGOTIATION
Arvin AlbaresUnited KingdomOnyama Limba NEW
Ivar PaprockiAustraliaXuxue Feng RENEWAL
Kaitlin OstroskyJapanAsiya Javayant UNQUALIFIED
James ButtGermanyStephen Shaw UNQUALIFIED
Arvin AlbaresItalyBernardo Dominic NEW
Julie StensethRussiaBernardo Dominic NEGOTIATION
David DarakjyAustraliaElwin Sharvill NEW
David DarakjyRussiaAmy Elsner UNQUALIFIED
Sinclair WaycottArgentinaBernardo Dominic NEGOTIATION
Greenwood BologniaAustraliaAnna Fali RENEWAL
Isabel BowleyArgentinaXuxue Feng NEGOTIATION
Alejandro PerinRussiaXuxue Feng PROPOSAL
Aditya KuskoSpainAsiya Javayant RENEWAL
Leja CaldareraArgentinaXuxue Feng NEW
Aruna FigeroaCanadaBernardo Dominic PROPOSAL
Alejandro PerinItalyAsiya Javayant NEW
Morrow RutaIndiaIvan Magalhaes NEW
Frozen Columns
Name
Munro Ferencz
Jeanfrancois Venere
Cody Saylors
Jones Vocelka
Murillo Malet
Sinclair Waycott
Faith Gillian
Maria Marrier
Darci Poquette
Adams Morasca
Alejandro Perin
Rodrigues Campain
Mayumi Kolmetz
Leja Caldarera
Smith Glick
Nicolas Iturbide
Faith Gillian
Jeanfrancois Venere
Darci Poquette
Isabel Bowley
Julie Stenseth
Isabel Bowley
Jennifer Amigon
James Butt
Maria Marrier
Smith Glick
Murillo Malet
Emily Whobrey
Jeanfrancois Venere
Greenwood Bolognia
Ricardo Gaucho
Smith Glick
Jones Vocelka
Emily Whobrey
Darci Poquette
David Darakjy
Ivar Paprocki
Costa Dilliard
Clifford Rim
Kadeem Flosi
Ashley Doe
Mujtaba Nicka
Cody Saylors
Wickens Nestle
Chavez Briddick
Aruna Figeroa
Aruna Figeroa
Isabel Bowley
Francesco Shinko
Stacey Maclead
IdCountryDate
1000Germany2025-09-23
1001Germany2025-10-09
1002Argentina2025-09-13
1003Russia2025-10-02
1004Argentina2025-09-16
1005Germany2025-09-29
1006Brazil2025-10-05
1007Argentina2025-09-19
1008Canada2025-10-01
1009Argentina2025-09-14
1010Argentina2025-10-02
1011Argentina2025-10-02
1012Argentina2025-09-22
1013Australia2025-09-11
1014Russia2025-10-09
1015United Kingdom2025-09-29
1016Argentina2025-10-05
1017Spain2025-09-24
1018Spain2025-09-29
1019Brazil2025-10-03
1020Canada2025-09-21
1021Australia2025-09-26
1022United Kingdom2025-10-09
1023Russia2025-09-12
1024Spain2025-09-16
1025Brazil2025-09-26
1026Italy2025-10-01
1027Spain2025-09-23
1028Japan2025-09-23
1029United Kingdom2025-09-18
1030Argentina2025-10-05
1031Australia2025-09-18
1032Japan2025-09-27
1033Canada2025-09-23
1034Argentina2025-09-20
1035Argentina2025-10-03
1036Spain2025-09-22
1037Argentina2025-10-07
1038United Kingdom2025-09-10
1039Italy2025-09-13
1040Canada2025-10-01
1041Australia2025-09-29
1042United Kingdom2025-09-20
1043Germany2025-09-12
1044Brazil2025-09-10
1045Spain2025-10-09
1046United Kingdom2025-09-29
1047United Kingdom2025-09-27
1048Germany2025-09-15
1049United Kingdom2025-09-27

On-Demand Data

NameIdCountryDate
Maria Marrier1000Germany2025-09-13
Adams Morasca1001France2025-09-17
Salvatore Stockham1002India2025-09-20
Isabel Bowley1003Russia2025-10-09
Silvio Slusarski1004Argentina2025-10-05
Deepesh Chui1005India2025-09-13
Leon Oldroyd1006Canada2025-09-19
Antonio Caudy1007Italy2025-09-20
Tony Foller1008Spain2025-09-13
Rodrigues Campain1009Italy2025-09-12
Chavez Briddick1010Canada2025-09-22
Aruna Figeroa1011Spain2025-09-14
Leja Caldarera1012Japan2025-09-15
Octavia Malet1013Japan2025-09-14
Antonio Caudy1014Canada2025-10-01
Cody Saylors1015Italy2025-09-13
Morrow Ruta1016Australia2025-09-21
Smith Glick1017India2025-09-16
Tony Foller1018Canada2025-09-30
Jefferson Schemmer1019Australia2025-09-22
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Costa DilliardAustraliaBernardo Dominic QUALIFIED
Costa DilliardJapanIvan Magalhaes QUALIFIED
Maisha RulapaughSpainOnyama Limba PROPOSAL
Emily WhobreyBrazilXuxue Feng UNQUALIFIED
Clifford RimUnited KingdomBernardo Dominic UNQUALIFIED
Greenwood BologniaArgentinaIvan Magalhaes QUALIFIED
Tony FollerUnited KingdomOnyama Limba NEW
Juan WieserGermanyIoni Bowcher RENEWAL
Jefferson SchemmerIndiaAnna Fali QUALIFIED
Deepesh ChuiFranceStephen Shaw NEGOTIATION
Ashley DoeIndiaXuxue Feng QUALIFIED
Darci PoquetteGermanyBernardo Dominic NEW
Jones VocelkaAustraliaAmy Elsner RENEWAL
Juan WieserSpainBernardo Dominic PROPOSAL
Mujtaba NickaIndiaElwin Sharvill NEGOTIATION
Mayumi KolmetzBrazilIoni Bowcher RENEWAL
Aditya KuskoRussiaXuxue Feng NEGOTIATION
Jones VocelkaGermanyBernardo Dominic PROPOSAL
Isabel BowleyBrazilIvan Magalhaes PROPOSAL
Cody SaylorsRussiaIoni Bowcher RENEWAL
Misaki RoysterArgentinaOnyama Limba NEGOTIATION
Aika InouyeSpainOnyama Limba QUALIFIED
Ricardo GauchoBrazilAmy Elsner NEGOTIATION
Clifford RimFranceIvan Magalhaes RENEWAL
Leja CaldareraIndiaBernardo Dominic UNQUALIFIED
Julie StensethIndiaStephen Shaw NEW
Ivar PaprockiCanadaOnyama Limba PROPOSAL
Greenwood BologniaGermanyOnyama Limba QUALIFIED
Salvatore StockhamAustraliaBernardo Dominic PROPOSAL
Arvin AlbaresCanadaBernardo Dominic NEGOTIATION
Darci PoquetteArgentinaIoni Bowcher NEGOTIATION
Silvio SlusarskiSpainIvan Magalhaes QUALIFIED
Maisha RulapaughFranceBernardo Dominic RENEWAL
Darci PoquetteItalyAsiya Javayant RENEWAL
David DarakjyBrazilAnna Fali NEW
Mujtaba NickaItalyIoni Bowcher NEGOTIATION
Ivar PaprockiSpainBernardo Dominic NEGOTIATION
Murillo MaletUnited KingdomAnna Fali QUALIFIED
Greenwood BologniaUnited KingdomElwin Sharvill NEGOTIATION
Ivar PaprockiGermanyAsiya Javayant 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>