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
Morrow RutaUnited KingdomOnyama Limba RENEWAL
Smith GlickSpainAnna Fali QUALIFIED
Sinclair WaycottItalyIoni Bowcher NEW
Nicolas IturbideSpainOnyama Limba NEGOTIATION
Nicolas IturbideJapanXuxue Feng UNQUALIFIED
Aditya KuskoSpainAnna Fali NEGOTIATION
Antonio CaudyGermanyBernardo Dominic UNQUALIFIED
Tony FollerJapanAnna Fali UNQUALIFIED
Wickens NestleIndiaAmy Elsner NEW
Aika InouyeCanadaStephen Shaw NEGOTIATION
Leja CaldareraRussiaIvan Magalhaes RENEWAL
Juan WieserItalyXuxue Feng RENEWAL
Tony FollerUnited KingdomIvan Magalhaes UNQUALIFIED
Greenwood BologniaFranceElwin Sharvill PROPOSAL
Julie StensethIndiaIoni Bowcher PROPOSAL
David DarakjyCanadaAnna Fali UNQUALIFIED
Wickens NestleArgentinaAnna Fali NEW
Morrow RutaJapanOnyama Limba UNQUALIFIED
Deepesh ChuiUnited KingdomBernardo Dominic QUALIFIED
Izzy GarufiUnited KingdomAmy Elsner QUALIFIED
Izzy GarufiAustraliaElwin Sharvill RENEWAL
Jefferson SchemmerIndiaBernardo Dominic UNQUALIFIED
Kadeem FlosiCanadaXuxue Feng PROPOSAL
Jeanfrancois VenereRussiaAmy Elsner UNQUALIFIED
Faith GillianSpainIvan Magalhaes UNQUALIFIED
Antonio CaudySpainElwin Sharvill RENEWAL
Stacey MacleadFranceAsiya Javayant NEW
Tony FollerArgentinaXuxue Feng RENEWAL
Jones VocelkaFranceIoni Bowcher RENEWAL
Tony FollerAustraliaStephen Shaw PROPOSAL
Tony FollerSpainAsiya Javayant RENEWAL
Kaitlin OstroskyRussiaOnyama Limba NEGOTIATION
Darci PoquetteBrazilStephen Shaw UNQUALIFIED
Aditya KuskoSpainIoni Bowcher NEGOTIATION
Kaitlin OstroskyCanadaIoni Bowcher PROPOSAL
Tony FollerSpainIvan Magalhaes NEGOTIATION
Arvin AlbaresCanadaBernardo Dominic UNQUALIFIED
Tony FollerGermanyAsiya Javayant NEGOTIATION
Clifford RimArgentinaOnyama Limba PROPOSAL
Munro FerenczFranceElwin Sharvill RENEWAL
Smith GlickItalyXuxue Feng NEW
David DarakjyFranceBernardo Dominic QUALIFIED
Isabel BowleyBrazilOnyama Limba NEGOTIATION
Deepesh ChuiUnited KingdomBernardo Dominic NEGOTIATION
Sinclair WaycottRussiaIvan Magalhaes QUALIFIED
Chavez BriddickSpainBernardo Dominic NEGOTIATION
Leon OldroydGermanyXuxue Feng NEGOTIATION
Clifford RimRussiaStephen Shaw UNQUALIFIED
Aruna FigeroaAustraliaIoni Bowcher PROPOSAL
Octavia MaletIndiaBernardo Dominic QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Rodrigues CampainUnited KingdomXuxue Feng UNQUALIFIED
Morrow RutaGermanyIoni Bowcher UNQUALIFIED
Leja CaldareraCanadaBernardo Dominic NEW
Aruna FigeroaArgentinaElwin Sharvill NEGOTIATION
Salvatore StockhamFranceBernardo Dominic RENEWAL
Adams MorascaAustraliaIoni Bowcher UNQUALIFIED
Salvatore StockhamBrazilBernardo Dominic UNQUALIFIED
Octavia MaletRussiaBernardo Dominic NEGOTIATION
Wickens NestleBrazilOnyama Limba RENEWAL
Maisha RulapaughSpainStephen Shaw UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Clifford RimJapan2025-09-04Morlong Associates UNQUALIFIED7Elwin Sharvill
1001Greenwood BologniaGermany2025-09-24Feltz Printing Service PROPOSAL39Ioni Bowcher
1002James ButtCanada2025-09-07Feiner Bros QUALIFIED50Bernardo Dominic
1003Darci PoquetteArgentina2025-09-12Printing Dimensions NEW91Ioni Bowcher
1004Sinclair WaycottAustralia2025-09-02Printing Dimensions QUALIFIED58Asiya Javayant
1005Aditya KuskoArgentina2025-09-15Chemel, James L Cpa PROPOSAL28Elwin Sharvill
1006Costa DilliardIndia2025-09-21Chanay, Jeffrey A Esq UNQUALIFIED64Elwin Sharvill
1007Kadeem FlosiGermany2025-09-05Commercial Press RENEWAL34Bernardo Dominic
1008Greenwood BologniaAustralia2025-09-07Benton, John B Jr RENEWAL39Ioni Bowcher
1009Antonio CaudyFrance2025-09-16Rousseaux, Michael Esq RENEWAL98Xuxue Feng
1010Darci PoquetteBrazil2025-09-07Feiner Bros NEW22Asiya Javayant
1011Munro FerenczIndia2025-08-31Chanay, Jeffrey A Esq RENEWAL28Amy Elsner
1012Isabel BowleyItaly2025-09-03Chapman, Ross E Esq QUALIFIED61Ivan Magalhaes
1013Jeanfrancois VenereRussia2025-09-08Feiner Bros UNQUALIFIED15Stephen Shaw
1014David DarakjyUnited Kingdom2025-09-21Buckley Miller Wright NEW65Onyama Limba
1015Cody SaylorsItaly2025-09-13Buckley Miller Wright UNQUALIFIED80Stephen Shaw
1016Rodrigues CampainSpain2025-09-17Commercial Press PROPOSAL37Ivan Magalhaes
1017Julie StensethItaly2025-09-18Morlong Associates NEW66Amy Elsner
1018Johnson SergiArgentina2025-09-27Dorl, James J Esq QUALIFIED96Anna Fali
1019Silvio SlusarskiBrazil2025-09-03Dorl, James J Esq PROPOSAL36Ioni Bowcher
1020Alejandro PerinJapan2025-09-21Rangoni Of Florence UNQUALIFIED37Anna Fali
1021Faith GillianItaly2025-09-15Chapman, Ross E Esq PROPOSAL4Amy Elsner
1022Emily WhobreyItaly2025-09-01Feiner Bros NEW23Asiya Javayant
1023Jeanfrancois VenereGermany2025-09-27Buckley Miller Wright NEGOTIATION67Anna Fali
1024Costa DilliardArgentina2025-09-19Morlong Associates UNQUALIFIED5Xuxue Feng
1025Claire TollnerCanada2025-09-11Dorl, James J Esq QUALIFIED56Amy Elsner
1026Jeanfrancois VenereSpain2025-08-31Chemel, James L Cpa PROPOSAL56Asiya Javayant
1027Maisha RulapaughRussia2025-09-24Benton, John B Jr NEW2Bernardo Dominic
1028Tony FollerIndia2025-09-04Chanay, Jeffrey A Esq NEW77Asiya Javayant
1029Aruna FigeroaBrazil2025-09-10Rousseaux, Michael Esq RENEWAL35Bernardo Dominic
1030Silvio SlusarskiRussia2025-09-01Buckley Miller Wright PROPOSAL11Ioni Bowcher
1031Kadeem FlosiArgentina2025-09-20Chanay, Jeffrey A Esq PROPOSAL23Onyama Limba
1032Adams MorascaCanada2025-08-29Chanay, Jeffrey A Esq UNQUALIFIED83Bernardo Dominic
1033Maria MarrierItaly2025-09-24Rousseaux, Michael Esq RENEWAL48Bernardo Dominic
1034Izzy GarufiIndia2025-09-26Feiner Bros UNQUALIFIED85Xuxue Feng
1035Jefferson SchemmerItaly2025-09-22Chapman, Ross E Esq NEGOTIATION34Bernardo Dominic
1036Arvin AlbaresRussia2025-09-09Feiner Bros PROPOSAL40Ioni Bowcher
1037Stacey MacleadFrance2025-09-26Feltz Printing Service UNQUALIFIED80Stephen Shaw
1038Jeanfrancois VenereJapan2025-09-24Morlong Associates UNQUALIFIED37Elwin Sharvill
1039James ButtItaly2025-09-02Morlong Associates PROPOSAL21Anna Fali
1040Rodrigues CampainGermany2025-09-01Rousseaux, Michael Esq NEW60Elwin Sharvill
1041Claire TollnerJapan2025-09-01King, Christopher A Esq NEGOTIATION79Bernardo Dominic
1042Mujtaba NickaArgentina2025-09-06Rangoni Of Florence RENEWAL47Xuxue Feng
1043Johnson SergiBrazil2025-09-11Printing Dimensions PROPOSAL70Bernardo Dominic
1044Munro FerenczUnited Kingdom2025-09-23Chanay, Jeffrey A Esq NEW46Ivan Magalhaes
1045Misaki RoysterBrazil2025-09-18Chemel, James L Cpa RENEWAL87Elwin Sharvill
1046Murillo MaletUnited Kingdom2025-08-29Morlong Associates NEGOTIATION83Bernardo Dominic
1047Mayumi KolmetzRussia2025-09-14Commercial Press QUALIFIED40Amy Elsner
1048Izzy GarufiAustralia2025-09-06Printing Dimensions UNQUALIFIED42Stephen Shaw
1049Stacey MacleadGermany2025-09-18Benton, John B Jr RENEWAL91Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Ricardo GauchoGermanyElwin Sharvill RENEWAL
Stacey MacleadArgentinaElwin Sharvill QUALIFIED
Murillo MaletArgentinaOnyama Limba UNQUALIFIED
Costa DilliardJapanBernardo Dominic UNQUALIFIED
Greenwood BologniaRussiaStephen Shaw NEGOTIATION
Jones VocelkaSpainOnyama Limba UNQUALIFIED
Costa DilliardCanadaElwin Sharvill NEGOTIATION
Jeanfrancois VenereFranceAmy Elsner RENEWAL
Jones VocelkaArgentinaAmy Elsner NEW
Alejandro PerinAustraliaAmy Elsner PROPOSAL
Emily WhobreyCanadaStephen Shaw PROPOSAL
Rodrigues CampainArgentinaElwin Sharvill QUALIFIED
Aika InouyeAustraliaBernardo Dominic UNQUALIFIED
Stacey MacleadArgentinaAsiya Javayant NEW
Aditya KuskoFranceOnyama Limba UNQUALIFIED
Ashley DoeRussiaAmy Elsner RENEWAL
Smith GlickGermanyStephen Shaw QUALIFIED
Alejandro PerinAustraliaAmy Elsner QUALIFIED
Jones VocelkaJapanIoni Bowcher UNQUALIFIED
Faith GillianRussiaBernardo Dominic RENEWAL
Izzy GarufiBrazilAmy Elsner NEGOTIATION
Aika InouyeCanadaStephen Shaw RENEWAL
Munro FerenczFranceIoni Bowcher UNQUALIFIED
Julie StensethCanadaElwin Sharvill NEGOTIATION
Izzy GarufiSpainIoni Bowcher NEGOTIATION
Greenwood BologniaIndiaStephen Shaw RENEWAL
Jefferson SchemmerItalyElwin Sharvill UNQUALIFIED
Claire TollnerRussiaAnna Fali PROPOSAL
Chavez BriddickUnited KingdomAnna Fali QUALIFIED
Morrow RutaCanadaIvan Magalhaes RENEWAL
Jones VocelkaCanadaElwin Sharvill NEW
Faith GillianSpainAsiya Javayant NEW
David DarakjyFranceIvan Magalhaes PROPOSAL
Rodrigues CampainItalyStephen Shaw QUALIFIED
Stacey MacleadIndiaAsiya Javayant NEW
Antonio CaudyUnited KingdomAmy Elsner NEGOTIATION
Kaitlin OstroskyGermanyStephen Shaw NEGOTIATION
Darci PoquetteRussiaElwin Sharvill UNQUALIFIED
Kaitlin OstroskyRussiaAsiya Javayant PROPOSAL
Julie StensethAustraliaAsiya Javayant UNQUALIFIED
Greenwood BologniaAustraliaBernardo Dominic NEW
Aika InouyeGermanyAnna Fali PROPOSAL
Alejandro PerinItalyAmy Elsner RENEWAL
Salvatore StockhamBrazilAsiya Javayant NEGOTIATION
Johnson SergiRussiaAmy Elsner QUALIFIED
Wickens NestleGermanyElwin Sharvill NEW
Adams MorascaAustraliaElwin Sharvill PROPOSAL
Mayumi KolmetzAustraliaAnna Fali NEW
Salvatore StockhamItalyAmy Elsner NEW
Jefferson SchemmerItalyAnna Fali PROPOSAL
Frozen Columns
Name
Greenwood Bolognia
Francesco Shinko
Leja Caldarera
Aditya Kusko
Sinclair Waycott
Ashley Doe
Juan Wieser
Wickens Nestle
Ricardo Gaucho
Jefferson Schemmer
Arvin Albares
Octavia Malet
Mayumi Kolmetz
Morrow Ruta
Munro Ferencz
Aika Inouye
Faith Gillian
Misaki Royster
Tony Foller
Kadeem Flosi
Clifford Rim
Mujtaba Nicka
Jeanfrancois Venere
Rodrigues Campain
Jennifer Amigon
Faith Gillian
Costa Dilliard
Mayumi Kolmetz
Mujtaba Nicka
Kadeem Flosi
Johnson Sergi
Alejandro Perin
Cody Saylors
David Darakjy
Emily Whobrey
Cody Saylors
Sinclair Waycott
Sinclair Waycott
Maisha Rulapaugh
James Butt
Salvatore Stockham
Ricardo Gaucho
Aika Inouye
Octavia Malet
Arvin Albares
Julie Stenseth
Aditya Kusko
Emily Whobrey
Darci Poquette
Mujtaba Nicka
IdCountryDate
1000Spain2025-09-20
1001Italy2025-09-16
1002United Kingdom2025-09-06
1003Argentina2025-09-23
1004Japan2025-09-14
1005United Kingdom2025-09-01
1006Japan2025-09-04
1007Germany2025-09-21
1008Italy2025-09-13
1009Argentina2025-09-25
1010Spain2025-09-16
1011France2025-09-22
1012Italy2025-09-07
1013Japan2025-09-17
1014Russia2025-09-10
1015India2025-09-03
1016Germany2025-09-18
1017Russia2025-09-08
1018Spain2025-09-05
1019Japan2025-09-25
1020Italy2025-09-20
1021Canada2025-08-30
1022India2025-09-05
1023Italy2025-09-15
1024Brazil2025-09-19
1025Germany2025-09-17
1026United Kingdom2025-09-27
1027Brazil2025-09-23
1028Japan2025-09-06
1029France2025-08-29
1030Spain2025-09-06
1031Germany2025-09-12
1032Russia2025-09-01
1033Italy2025-09-01
1034Australia2025-09-15
1035Spain2025-08-29
1036France2025-09-08
1037United Kingdom2025-09-16
1038Italy2025-08-30
1039Canada2025-08-31
1040Russia2025-09-04
1041Italy2025-09-12
1042Canada2025-09-01
1043United Kingdom2025-09-23
1044Australia2025-09-06
1045United Kingdom2025-09-08
1046Japan2025-09-16
1047Germany2025-09-13
1048Spain2025-09-03
1049Japan2025-09-15

On-Demand Data

NameIdCountryDate
Aika Inouye1000Russia2025-09-15
Jones Vocelka1001Germany2025-09-27
Aditya Kusko1002Italy2025-09-11
Adams Morasca1003Canada2025-09-13
Julie Stenseth1004Italy2025-08-30
Aditya Kusko1005Germany2025-09-10
Smith Glick1006Spain2025-09-14
Kaitlin Ostrosky1007India2025-09-09
Tony Foller1008Germany2025-09-21
Silvio Slusarski1009Italy2025-09-23
James Butt1010Spain2025-09-08
Nicolas Iturbide1011India2025-08-29
Aditya Kusko1012Germany2025-09-06
Antonio Caudy1013India2025-09-03
Alejandro Perin1014Australia2025-09-26
Silvio Slusarski1015Japan2025-09-14
Mujtaba Nicka1016Brazil2025-09-25
Misaki Royster1017Germany2025-09-08
Mujtaba Nicka1018Australia2025-09-22
Leon Oldroyd1019Canada2025-08-30
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Octavia MaletCanadaAsiya Javayant QUALIFIED
Izzy GarufiSpainStephen Shaw RENEWAL
Ashley DoeJapanAnna Fali NEGOTIATION
Silvio SlusarskiUnited KingdomStephen Shaw NEGOTIATION
Nicolas IturbideItalyXuxue Feng PROPOSAL
Murillo MaletItalyAsiya Javayant NEGOTIATION
Jennifer AmigonJapanIoni Bowcher PROPOSAL
Silvio SlusarskiSpainElwin Sharvill RENEWAL
Sinclair WaycottSpainIoni Bowcher NEGOTIATION
Claire TollnerSpainElwin Sharvill NEW
Wickens NestleUnited KingdomStephen Shaw UNQUALIFIED
Arvin AlbaresItalyBernardo Dominic QUALIFIED
Ashley DoeArgentinaBernardo Dominic PROPOSAL
Misaki RoysterArgentinaAsiya Javayant UNQUALIFIED
Morrow RutaGermanyElwin Sharvill NEGOTIATION
Aika InouyeFranceElwin Sharvill RENEWAL
Deepesh ChuiRussiaStephen Shaw PROPOSAL
Darci PoquetteArgentinaElwin Sharvill UNQUALIFIED
Ashley DoeBrazilIvan Magalhaes QUALIFIED
Aditya KuskoJapanIoni Bowcher QUALIFIED
Julie StensethRussiaXuxue Feng NEGOTIATION
Kadeem FlosiGermanyAsiya Javayant PROPOSAL
Izzy GarufiAustraliaBernardo Dominic PROPOSAL
Julie StensethJapanStephen Shaw NEW
Mujtaba NickaCanadaStephen Shaw QUALIFIED
Rodrigues CampainAustraliaIoni Bowcher NEW
Alejandro PerinRussiaOnyama Limba UNQUALIFIED
Clifford RimSpainStephen Shaw PROPOSAL
Izzy GarufiRussiaOnyama Limba PROPOSAL
Jeanfrancois VenereArgentinaIvan Magalhaes RENEWAL
Emily WhobreyItalyIoni Bowcher QUALIFIED
Isabel BowleyFranceAnna Fali UNQUALIFIED
Jefferson SchemmerBrazilIoni Bowcher PROPOSAL
Jeanfrancois VenereCanadaIoni Bowcher RENEWAL
Antonio CaudyIndiaIvan Magalhaes NEGOTIATION
Kaitlin OstroskyBrazilXuxue Feng QUALIFIED
Chavez BriddickJapanAnna Fali QUALIFIED
Jeanfrancois VenereUnited KingdomXuxue Feng RENEWAL
Morrow RutaArgentinaOnyama Limba UNQUALIFIED
Jones VocelkaRussiaElwin Sharvill 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>