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
Jeanfrancois VenereCanadaStephen Shaw NEGOTIATION
Tony FollerFranceStephen Shaw NEGOTIATION
Juan WieserArgentinaElwin Sharvill RENEWAL
David DarakjyUnited KingdomElwin Sharvill PROPOSAL
Wickens NestleBrazilStephen Shaw UNQUALIFIED
Murillo MaletUnited KingdomAsiya Javayant QUALIFIED
Juan WieserItalyElwin Sharvill NEGOTIATION
Greenwood BologniaRussiaAsiya Javayant RENEWAL
Arvin AlbaresRussiaStephen Shaw NEGOTIATION
Maisha RulapaughSpainBernardo Dominic PROPOSAL
Emily WhobreyAustraliaElwin Sharvill QUALIFIED
Claire TollnerBrazilAmy Elsner NEGOTIATION
Maria MarrierBrazilAmy Elsner NEW
James ButtRussiaIoni Bowcher PROPOSAL
Leon OldroydUnited KingdomAnna Fali UNQUALIFIED
Nicolas IturbideSpainOnyama Limba RENEWAL
Smith GlickAustraliaOnyama Limba PROPOSAL
David DarakjyCanadaBernardo Dominic PROPOSAL
Kadeem FlosiGermanyIoni Bowcher RENEWAL
Jennifer AmigonItalyIvan Magalhaes NEW
Aika InouyeIndiaIvan Magalhaes QUALIFIED
Cody SaylorsUnited KingdomOnyama Limba UNQUALIFIED
Smith GlickCanadaBernardo Dominic NEGOTIATION
Aditya KuskoRussiaElwin Sharvill PROPOSAL
Izzy GarufiBrazilIvan Magalhaes RENEWAL
Silvio SlusarskiIndiaElwin Sharvill UNQUALIFIED
Mujtaba NickaAustraliaOnyama Limba UNQUALIFIED
Greenwood BologniaGermanyOnyama Limba NEGOTIATION
Mayumi KolmetzRussiaIvan Magalhaes NEW
Ivar PaprockiGermanyBernardo Dominic NEW
Kaitlin OstroskyIndiaAsiya Javayant QUALIFIED
Julie StensethSpainAsiya Javayant NEGOTIATION
Clifford RimRussiaAsiya Javayant NEGOTIATION
Greenwood BologniaSpainXuxue Feng RENEWAL
Claire TollnerGermanyBernardo Dominic UNQUALIFIED
Emily WhobreyBrazilAmy Elsner PROPOSAL
David DarakjyRussiaAnna Fali UNQUALIFIED
Cody SaylorsUnited KingdomAmy Elsner NEGOTIATION
Maria MarrierBrazilStephen Shaw NEW
Faith GillianGermanyStephen Shaw UNQUALIFIED
Kadeem FlosiFranceStephen Shaw NEGOTIATION
Sinclair WaycottFranceOnyama Limba UNQUALIFIED
Claire TollnerBrazilXuxue Feng NEGOTIATION
Alejandro PerinFranceIvan Magalhaes PROPOSAL
Isabel BowleySpainAnna Fali PROPOSAL
Johnson SergiIndiaXuxue Feng QUALIFIED
Mayumi KolmetzSpainAnna Fali UNQUALIFIED
Nicolas IturbideJapanIvan Magalhaes QUALIFIED
Ricardo GauchoFranceOnyama Limba NEGOTIATION
Wickens NestleItalyIoni Bowcher NEW
Horizontal
NameCountryRepresentativeStatus
Julie StensethUnited KingdomOnyama Limba NEGOTIATION
Costa DilliardUnited KingdomIoni Bowcher PROPOSAL
Leja CaldareraCanadaBernardo Dominic RENEWAL
Tony FollerBrazilStephen Shaw PROPOSAL
Sinclair WaycottAustraliaElwin Sharvill PROPOSAL
Clifford RimArgentinaElwin Sharvill RENEWAL
Jeanfrancois VenereJapanIoni Bowcher QUALIFIED
Julie StensethAustraliaXuxue Feng RENEWAL
Clifford RimUnited KingdomAnna Fali PROPOSAL
Adams MorascaCanadaElwin Sharvill UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Rodrigues CampainItaly2026-05-21Commercial Press UNQUALIFIED62Ioni Bowcher
1001Mayumi KolmetzItaly2026-05-22Benton, John B Jr RENEWAL82Asiya Javayant
1002Isabel BowleyArgentina2026-05-12King, Christopher A Esq UNQUALIFIED51Asiya Javayant
1003Octavia MaletIndia2026-05-30King, Christopher A Esq UNQUALIFIED97Onyama Limba
1004Aditya KuskoRussia2026-05-29Dorl, James J Esq RENEWAL67Asiya Javayant
1005Faith GillianItaly2026-05-19Rousseaux, Michael Esq NEW28Xuxue Feng
1006Claire TollnerGermany2026-05-07Morlong Associates UNQUALIFIED44Ivan Magalhaes
1007Misaki RoysterAustralia2026-05-20Buckley Miller Wright QUALIFIED94Elwin Sharvill
1008Rodrigues CampainGermany2026-05-28Truhlar And Truhlar Attys RENEWAL89Xuxue Feng
1009Salvatore StockhamBrazil2026-05-30King, Christopher A Esq NEGOTIATION4Asiya Javayant
1010Sinclair WaycottUnited Kingdom2026-06-01Feltz Printing Service QUALIFIED62Stephen Shaw
1011Julie StensethSpain2026-05-05Feltz Printing Service NEGOTIATION3Bernardo Dominic
1012Juan WieserJapan2026-05-17King, Christopher A Esq PROPOSAL13Asiya Javayant
1013James ButtJapan2026-05-11Commercial Press UNQUALIFIED15Elwin Sharvill
1014Maria MarrierJapan2026-05-31Buckley Miller Wright RENEWAL68Anna Fali
1015Aruna FigeroaUnited Kingdom2026-05-11Chanay, Jeffrey A Esq QUALIFIED10Elwin Sharvill
1016Antonio CaudyGermany2026-05-19Chanay, Jeffrey A Esq QUALIFIED25Xuxue Feng
1017Ivar PaprockiUnited Kingdom2026-05-21Dorl, James J Esq RENEWAL73Xuxue Feng
1018Nicolas IturbideUnited Kingdom2026-05-24Morlong Associates QUALIFIED53Asiya Javayant
1019Kaitlin OstroskyBrazil2026-05-27King, Christopher A Esq NEGOTIATION41Asiya Javayant
1020Alejandro PerinBrazil2026-05-20Chapman, Ross E Esq UNQUALIFIED31Elwin Sharvill
1021Leon OldroydSpain2026-05-09King, Christopher A Esq QUALIFIED39Amy Elsner
1022Leja CaldareraAustralia2026-05-20Chemel, James L Cpa NEGOTIATION69Amy Elsner
1023Aditya KuskoAustralia2026-05-12Feiner Bros UNQUALIFIED40Ivan Magalhaes
1024Misaki RoysterCanada2026-05-12Printing Dimensions UNQUALIFIED0Bernardo Dominic
1025Jefferson SchemmerItaly2026-05-27Chapman, Ross E Esq UNQUALIFIED58Bernardo Dominic
1026Kadeem FlosiUnited Kingdom2026-05-30Printing Dimensions PROPOSAL70Bernardo Dominic
1027Cody SaylorsRussia2026-05-13Commercial Press PROPOSAL75Ioni Bowcher
1028Antonio CaudyJapan2026-05-10Dorl, James J Esq UNQUALIFIED36Stephen Shaw
1029Kaitlin OstroskyRussia2026-05-22Benton, John B Jr NEGOTIATION19Bernardo Dominic
1030Aika InouyeIndia2026-05-08Chapman, Ross E Esq NEW48Elwin Sharvill
1031Claire TollnerJapan2026-05-12Chemel, James L Cpa UNQUALIFIED18Ivan Magalhaes
1032Salvatore StockhamRussia2026-05-28Commercial Press UNQUALIFIED20Amy Elsner
1033Jones VocelkaJapan2026-05-19King, Christopher A Esq QUALIFIED29Asiya Javayant
1034James ButtRussia2026-05-11Truhlar And Truhlar Attys UNQUALIFIED32Amy Elsner
1035Antonio CaudyCanada2026-05-13Dorl, James J Esq NEGOTIATION2Anna Fali
1036Darci PoquetteArgentina2026-05-03Commercial Press QUALIFIED2Anna Fali
1037Silvio SlusarskiFrance2026-05-26Feltz Printing Service QUALIFIED97Asiya Javayant
1038Faith GillianUnited Kingdom2026-05-21Chemel, James L Cpa PROPOSAL95Anna Fali
1039Munro FerenczFrance2026-05-17Chanay, Jeffrey A Esq RENEWAL24Stephen Shaw
1040Aika InouyeIndia2026-05-14Dorl, James J Esq PROPOSAL63Xuxue Feng
1041Mayumi KolmetzCanada2026-05-29Printing Dimensions PROPOSAL70Stephen Shaw
1042Antonio CaudyFrance2026-05-27Feltz Printing Service QUALIFIED57Stephen Shaw
1043Faith GillianUnited Kingdom2026-06-01Chapman, Ross E Esq PROPOSAL11Onyama Limba
1044Deepesh ChuiRussia2026-05-23Feltz Printing Service PROPOSAL2Elwin Sharvill
1045Sinclair WaycottBrazil2026-06-01Chanay, Jeffrey A Esq QUALIFIED30Anna Fali
1046Costa DilliardUnited Kingdom2026-05-19Chemel, James L Cpa NEGOTIATION81Asiya Javayant
1047Costa DilliardRussia2026-05-19Rangoni Of Florence NEGOTIATION90Asiya Javayant
1048Jennifer AmigonItaly2026-05-08Dorl, James J Esq UNQUALIFIED97Amy Elsner
1049Leon OldroydSpain2026-05-17King, Christopher A Esq RENEWAL64Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Antonio CaudyUnited KingdomXuxue Feng RENEWAL
Kadeem FlosiBrazilAmy Elsner NEGOTIATION
Clifford RimAustraliaXuxue Feng PROPOSAL
Greenwood BologniaUnited KingdomIvan Magalhaes QUALIFIED
Faith GillianRussiaOnyama Limba NEW
Johnson SergiFranceAsiya Javayant UNQUALIFIED
Claire TollnerArgentinaElwin Sharvill RENEWAL
Cody SaylorsItalyAmy Elsner NEW
Nicolas IturbideJapanIoni Bowcher RENEWAL
James ButtGermanyBernardo Dominic RENEWAL
Ricardo GauchoUnited KingdomStephen Shaw PROPOSAL
Adams MorascaUnited KingdomIvan Magalhaes QUALIFIED
Johnson SergiBrazilOnyama Limba UNQUALIFIED
Aditya KuskoGermanyAnna Fali PROPOSAL
Sinclair WaycottJapanIoni Bowcher QUALIFIED
Costa DilliardBrazilAsiya Javayant PROPOSAL
Greenwood BologniaBrazilAsiya Javayant UNQUALIFIED
Stacey MacleadCanadaBernardo Dominic RENEWAL
Wickens NestleAustraliaAmy Elsner NEGOTIATION
Smith GlickAustraliaElwin Sharvill RENEWAL
Faith GillianAustraliaIoni Bowcher QUALIFIED
Greenwood BologniaUnited KingdomIvan Magalhaes NEGOTIATION
Munro FerenczBrazilElwin Sharvill PROPOSAL
Sinclair WaycottArgentinaBernardo Dominic NEW
Salvatore StockhamCanadaAsiya Javayant QUALIFIED
Chavez BriddickUnited KingdomIoni Bowcher QUALIFIED
Jones VocelkaSpainAmy Elsner UNQUALIFIED
Faith GillianIndiaIvan Magalhaes UNQUALIFIED
Aika InouyeUnited KingdomIvan Magalhaes PROPOSAL
Antonio CaudyBrazilAmy Elsner PROPOSAL
Ivar PaprockiAustraliaElwin Sharvill QUALIFIED
Johnson SergiIndiaAmy Elsner RENEWAL
Jefferson SchemmerItalyElwin Sharvill UNQUALIFIED
Smith GlickBrazilOnyama Limba QUALIFIED
Mujtaba NickaGermanyOnyama Limba NEW
Isabel BowleyFranceIvan Magalhaes RENEWAL
Smith GlickFranceAmy Elsner UNQUALIFIED
Sinclair WaycottFranceOnyama Limba NEW
Misaki RoysterFranceBernardo Dominic PROPOSAL
Arvin AlbaresAustraliaAsiya Javayant PROPOSAL
Ashley DoeArgentinaAsiya Javayant PROPOSAL
Kaitlin OstroskyBrazilStephen Shaw NEGOTIATION
Adams MorascaFranceAsiya Javayant NEGOTIATION
Munro FerenczGermanyXuxue Feng NEW
Jones VocelkaItalyAmy Elsner NEGOTIATION
Maisha RulapaughGermanyOnyama Limba NEGOTIATION
Sinclair WaycottIndiaStephen Shaw PROPOSAL
James ButtFranceIvan Magalhaes QUALIFIED
Jennifer AmigonSpainXuxue Feng RENEWAL
David DarakjyFranceXuxue Feng PROPOSAL
Frozen Columns
Name
Aika Inouye
Emily Whobrey
Faith Gillian
Stacey Maclead
Izzy Garufi
Jennifer Amigon
Stacey Maclead
Clifford Rim
Ashley Doe
Octavia Malet
Aika Inouye
Emily Whobrey
Silvio Slusarski
Ashley Doe
Jefferson Schemmer
Maria Marrier
Sinclair Waycott
Ivar Paprocki
Leon Oldroyd
Francesco Shinko
David Darakjy
Stacey Maclead
Aruna Figeroa
David Darakjy
Antonio Caudy
Wickens Nestle
Maria Marrier
Leon Oldroyd
Cody Saylors
Ashley Doe
Claire Tollner
Johnson Sergi
Alejandro Perin
Misaki Royster
Chavez Briddick
Jennifer Amigon
Kadeem Flosi
Isabel Bowley
Darci Poquette
Francesco Shinko
Maisha Rulapaugh
Arvin Albares
Claire Tollner
Aditya Kusko
Salvatore Stockham
Rodrigues Campain
Emily Whobrey
Chavez Briddick
Jefferson Schemmer
Darci Poquette
IdCountryDate
1000Argentina2026-05-22
1001Russia2026-05-12
1002India2026-05-24
1003Australia2026-05-24
1004Argentina2026-05-15
1005Canada2026-05-20
1006United Kingdom2026-05-18
1007Germany2026-05-26
1008India2026-05-08
1009Italy2026-05-30
1010Brazil2026-05-04
1011Brazil2026-05-22
1012Brazil2026-05-19
1013India2026-05-18
1014Australia2026-05-14
1015India2026-05-16
1016Australia2026-05-17
1017Russia2026-05-08
1018Spain2026-05-20
1019Brazil2026-05-25
1020Spain2026-06-01
1021Japan2026-05-18
1022Italy2026-05-27
1023Germany2026-05-22
1024Russia2026-05-08
1025Argentina2026-05-08
1026Argentina2026-05-04
1027Italy2026-05-13
1028Argentina2026-05-29
1029Japan2026-05-17
1030Germany2026-05-09
1031Japan2026-05-16
1032Australia2026-06-01
1033Italy2026-05-21
1034Brazil2026-05-14
1035Argentina2026-05-26
1036France2026-05-25
1037India2026-05-18
1038Australia2026-05-11
1039Argentina2026-06-01
1040Brazil2026-05-12
1041Australia2026-05-03
1042Australia2026-05-04
1043United Kingdom2026-05-10
1044Canada2026-05-10
1045United Kingdom2026-05-08
1046India2026-05-07
1047India2026-05-04
1048Russia2026-05-31
1049France2026-05-13

On-Demand Data

NameIdCountryDate
Jones Vocelka1000India2026-05-16
Claire Tollner1001France2026-05-30
Arvin Albares1002France2026-05-11
Smith Glick1003Brazil2026-05-17
Nicolas Iturbide1004United Kingdom2026-05-05
Jefferson Schemmer1005Brazil2026-05-23
Johnson Sergi1006Russia2026-05-20
Jones Vocelka1007Russia2026-05-06
Isabel Bowley1008France2026-05-25
Salvatore Stockham1009India2026-05-12
Munro Ferencz1010France2026-05-03
Smith Glick1011India2026-05-18
Julie Stenseth1012Canada2026-05-20
Arvin Albares1013Italy2026-05-07
Rodrigues Campain1014Canada2026-05-28
Darci Poquette1015Italy2026-05-17
Leon Oldroyd1016Italy2026-05-11
Juan Wieser1017India2026-05-14
Jefferson Schemmer1018Argentina2026-05-09
Tony Foller1019Brazil2026-05-24
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Clifford RimFranceBernardo Dominic QUALIFIED
Darci PoquetteRussiaAmy Elsner NEW
David DarakjyCanadaBernardo Dominic NEGOTIATION
Chavez BriddickBrazilStephen Shaw QUALIFIED
Chavez BriddickRussiaBernardo Dominic RENEWAL
Antonio CaudySpainXuxue Feng PROPOSAL
Johnson SergiCanadaBernardo Dominic PROPOSAL
Julie StensethItalyStephen Shaw NEGOTIATION
Octavia MaletItalyBernardo Dominic NEGOTIATION
Mujtaba NickaArgentinaXuxue Feng UNQUALIFIED
Aditya KuskoIndiaAmy Elsner QUALIFIED
Salvatore StockhamCanadaOnyama Limba NEGOTIATION
Sinclair WaycottArgentinaIvan Magalhaes UNQUALIFIED
Wickens NestleRussiaAsiya Javayant PROPOSAL
Juan WieserIndiaXuxue Feng RENEWAL
Ivar PaprockiCanadaOnyama Limba UNQUALIFIED
Maria MarrierGermanyAmy Elsner RENEWAL
Ashley DoeBrazilStephen Shaw UNQUALIFIED
Sinclair WaycottUnited KingdomOnyama Limba UNQUALIFIED
Alejandro PerinBrazilIoni Bowcher RENEWAL
Jeanfrancois VenereFranceAnna Fali NEW
Darci PoquetteIndiaStephen Shaw QUALIFIED
Chavez BriddickUnited KingdomStephen Shaw PROPOSAL
Faith GillianRussiaXuxue Feng NEW
Juan WieserFranceElwin Sharvill UNQUALIFIED
Juan WieserUnited KingdomAsiya Javayant PROPOSAL
Leon OldroydCanadaIvan Magalhaes QUALIFIED
Isabel BowleySpainOnyama Limba PROPOSAL
Emily WhobreyGermanyBernardo Dominic NEGOTIATION
Misaki RoysterUnited KingdomIvan Magalhaes UNQUALIFIED
Clifford RimAustraliaAsiya Javayant NEGOTIATION
David DarakjyRussiaStephen Shaw NEGOTIATION
Misaki RoysterSpainXuxue Feng NEW
Smith GlickFranceAmy Elsner QUALIFIED
Cody SaylorsIndiaXuxue Feng NEW
Aruna FigeroaFranceAnna Fali UNQUALIFIED
Kaitlin OstroskyGermanyIvan Magalhaes NEW
Maria MarrierItalyElwin Sharvill PROPOSAL
Mujtaba NickaItalyOnyama Limba PROPOSAL
Leja CaldareraFranceAmy 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>