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
Ashley DoeJapanOnyama Limba QUALIFIED
Alejandro PerinIndiaAsiya Javayant PROPOSAL
Deepesh ChuiRussiaXuxue Feng RENEWAL
Izzy GarufiRussiaAnna Fali QUALIFIED
Aruna FigeroaArgentinaIoni Bowcher QUALIFIED
Kadeem FlosiFranceIoni Bowcher QUALIFIED
Kaitlin OstroskyUnited KingdomIvan Magalhaes NEGOTIATION
Faith GillianSpainAsiya Javayant NEW
Julie StensethUnited KingdomAmy Elsner RENEWAL
Ivar PaprockiFranceBernardo Dominic PROPOSAL
Tony FollerSpainBernardo Dominic UNQUALIFIED
Ashley DoeIndiaStephen Shaw QUALIFIED
Juan WieserJapanXuxue Feng UNQUALIFIED
Mayumi KolmetzArgentinaXuxue Feng NEW
Greenwood BologniaCanadaOnyama Limba PROPOSAL
Jennifer AmigonCanadaElwin Sharvill PROPOSAL
Kadeem FlosiAustraliaAsiya Javayant UNQUALIFIED
Cody SaylorsArgentinaElwin Sharvill UNQUALIFIED
Isabel BowleyArgentinaOnyama Limba NEW
Ashley DoeJapanAnna Fali NEW
Faith GillianSpainAmy Elsner NEGOTIATION
Isabel BowleyUnited KingdomIoni Bowcher PROPOSAL
Costa DilliardArgentinaAnna Fali QUALIFIED
Jefferson SchemmerCanadaIoni Bowcher NEW
Ricardo GauchoBrazilAsiya Javayant PROPOSAL
Emily WhobreyUnited KingdomIvan Magalhaes UNQUALIFIED
Adams MorascaJapanAmy Elsner NEGOTIATION
Jennifer AmigonAustraliaIvan Magalhaes RENEWAL
Ashley DoeJapanIoni Bowcher NEW
Octavia MaletIndiaXuxue Feng QUALIFIED
Arvin AlbaresFranceIoni Bowcher NEGOTIATION
Chavez BriddickFranceAnna Fali PROPOSAL
Isabel BowleySpainBernardo Dominic QUALIFIED
Jones VocelkaJapanElwin Sharvill UNQUALIFIED
Francesco ShinkoItalyIoni Bowcher UNQUALIFIED
Alejandro PerinAustraliaAnna Fali NEGOTIATION
Jefferson SchemmerBrazilBernardo Dominic UNQUALIFIED
Munro FerenczFranceIoni Bowcher NEGOTIATION
Chavez BriddickRussiaAsiya Javayant PROPOSAL
Kadeem FlosiFranceAmy Elsner NEGOTIATION
Faith GillianAustraliaElwin Sharvill NEW
Ashley DoeCanadaIvan Magalhaes PROPOSAL
Clifford RimCanadaStephen Shaw PROPOSAL
Munro FerenczJapanBernardo Dominic NEW
Munro FerenczRussiaBernardo Dominic PROPOSAL
Adams MorascaItalyAnna Fali PROPOSAL
Juan WieserUnited KingdomStephen Shaw UNQUALIFIED
Kadeem FlosiUnited KingdomOnyama Limba UNQUALIFIED
Darci PoquetteGermanyIoni Bowcher PROPOSAL
Kadeem FlosiUnited KingdomAsiya Javayant RENEWAL
Horizontal
NameCountryRepresentativeStatus
Salvatore StockhamUnited KingdomStephen Shaw NEW
Aika InouyeUnited KingdomAmy Elsner NEW
James ButtItalyIvan Magalhaes QUALIFIED
Deepesh ChuiUnited KingdomBernardo Dominic RENEWAL
Ivar PaprockiAustraliaStephen Shaw RENEWAL
Johnson SergiFranceIoni Bowcher UNQUALIFIED
Leon OldroydItalyOnyama Limba RENEWAL
Arvin AlbaresCanadaElwin Sharvill NEGOTIATION
Aruna FigeroaArgentinaOnyama Limba QUALIFIED
Claire TollnerIndiaAmy Elsner QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ashley DoeCanada2026-05-04Truhlar And Truhlar Attys UNQUALIFIED37Asiya Javayant
1001Arvin AlbaresJapan2026-04-22Chapman, Ross E Esq RENEWAL32Onyama Limba
1002Kadeem FlosiJapan2026-04-16Chapman, Ross E Esq NEGOTIATION3Amy Elsner
1003Ivar PaprockiSpain2026-04-15Feltz Printing Service QUALIFIED32Ivan Magalhaes
1004Greenwood BologniaArgentina2026-05-08Commercial Press QUALIFIED68Ioni Bowcher
1005Ashley DoeArgentina2026-04-29Feltz Printing Service NEGOTIATION5Xuxue Feng
1006Claire TollnerGermany2026-04-26Commercial Press NEGOTIATION38Bernardo Dominic
1007Faith GillianRussia2026-05-08Dorl, James J Esq NEW10Onyama Limba
1008Maisha RulapaughJapan2026-04-13Truhlar And Truhlar Attys QUALIFIED68Amy Elsner
1009Sinclair WaycottRussia2026-05-08Buckley Miller Wright NEGOTIATION77Ivan Magalhaes
1010Alejandro PerinSpain2026-04-30Chanay, Jeffrey A Esq RENEWAL76Xuxue Feng
1011Aika InouyeJapan2026-04-24Morlong Associates PROPOSAL84Anna Fali
1012Silvio SlusarskiBrazil2026-04-21Rangoni Of Florence NEGOTIATION60Elwin Sharvill
1013Ashley DoeFrance2026-04-18Chanay, Jeffrey A Esq UNQUALIFIED29Ivan Magalhaes
1014Silvio SlusarskiGermany2026-04-29Rousseaux, Michael Esq RENEWAL51Amy Elsner
1015Johnson SergiRussia2026-05-07Rangoni Of Florence UNQUALIFIED87Elwin Sharvill
1016Claire TollnerCanada2026-04-17Feiner Bros NEW72Stephen Shaw
1017Arvin AlbaresUnited Kingdom2026-04-16Rousseaux, Michael Esq UNQUALIFIED15Bernardo Dominic
1018Izzy GarufiArgentina2026-04-16Commercial Press RENEWAL72Bernardo Dominic
1019Francesco ShinkoJapan2026-04-22Dorl, James J Esq PROPOSAL27Xuxue Feng
1020Aika InouyeGermany2026-05-02Buckley Miller Wright UNQUALIFIED29Anna Fali
1021Antonio CaudyBrazil2026-05-09Feiner Bros NEGOTIATION45Elwin Sharvill
1022Greenwood BologniaArgentina2026-04-30King, Christopher A Esq QUALIFIED30Onyama Limba
1023Jennifer AmigonFrance2026-04-23Chemel, James L Cpa RENEWAL91Asiya Javayant
1024Jones VocelkaGermany2026-04-26Truhlar And Truhlar Attys RENEWAL60Onyama Limba
1025Aika InouyeFrance2026-05-11Benton, John B Jr RENEWAL0Ivan Magalhaes
1026Jennifer AmigonJapan2026-04-17Feltz Printing Service NEW89Asiya Javayant
1027Munro FerenczSpain2026-04-19Feiner Bros NEW70Amy Elsner
1028Wickens NestleAustralia2026-05-09Benton, John B Jr NEGOTIATION44Ioni Bowcher
1029Kadeem FlosiSpain2026-05-06Benton, John B Jr NEGOTIATION96Ivan Magalhaes
1030Johnson SergiSpain2026-04-20Rousseaux, Michael Esq PROPOSAL57Amy Elsner
1031Leon OldroydIndia2026-04-26Rousseaux, Michael Esq UNQUALIFIED26Anna Fali
1032Leja CaldareraUnited Kingdom2026-04-17Rousseaux, Michael Esq PROPOSAL29Onyama Limba
1033Stacey MacleadBrazil2026-05-10Feiner Bros NEGOTIATION74Onyama Limba
1034Antonio CaudyItaly2026-05-06Chanay, Jeffrey A Esq NEGOTIATION56Onyama Limba
1035Antonio CaudyUnited Kingdom2026-05-04Chapman, Ross E Esq NEW26Onyama Limba
1036Claire TollnerAustralia2026-04-18Printing Dimensions QUALIFIED29Ivan Magalhaes
1037Jones VocelkaIndia2026-05-06Printing Dimensions UNQUALIFIED77Xuxue Feng
1038Ricardo GauchoGermany2026-04-26Chemel, James L Cpa NEW4Stephen Shaw
1039Isabel BowleyBrazil2026-04-22Rousseaux, Michael Esq NEW70Xuxue Feng
1040Deepesh ChuiGermany2026-04-29Morlong Associates RENEWAL72Anna Fali
1041Leon OldroydBrazil2026-05-04Printing Dimensions NEGOTIATION61Anna Fali
1042Mujtaba NickaGermany2026-04-20Chemel, James L Cpa QUALIFIED54Onyama Limba
1043Jeanfrancois VenereUnited Kingdom2026-04-17Truhlar And Truhlar Attys NEGOTIATION68Ioni Bowcher
1044James ButtUnited Kingdom2026-04-15Benton, John B Jr NEGOTIATION0Onyama Limba
1045Chavez BriddickItaly2026-05-04Buckley Miller Wright NEW71Ioni Bowcher
1046Kadeem FlosiGermany2026-04-22Printing Dimensions UNQUALIFIED74Bernardo Dominic
1047James ButtArgentina2026-04-27Truhlar And Truhlar Attys UNQUALIFIED98Amy Elsner
1048Aruna FigeroaArgentina2026-05-05King, Christopher A Esq PROPOSAL9Elwin Sharvill
1049Wickens NestleSpain2026-04-17Feltz Printing Service NEW19Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Aika InouyeAustraliaXuxue Feng RENEWAL
Ricardo GauchoArgentinaAmy Elsner RENEWAL
Sinclair WaycottItalyAnna Fali NEGOTIATION
Aditya KuskoGermanyOnyama Limba PROPOSAL
Jeanfrancois VenereUnited KingdomXuxue Feng NEW
Tony FollerSpainStephen Shaw UNQUALIFIED
Jones VocelkaRussiaAmy Elsner UNQUALIFIED
Leja CaldareraArgentinaStephen Shaw NEGOTIATION
Stacey MacleadIndiaXuxue Feng RENEWAL
Emily WhobreyFranceAsiya Javayant UNQUALIFIED
Antonio CaudySpainBernardo Dominic QUALIFIED
Aditya KuskoIndiaAsiya Javayant UNQUALIFIED
Claire TollnerSpainOnyama Limba NEGOTIATION
Mujtaba NickaJapanBernardo Dominic QUALIFIED
Arvin AlbaresBrazilStephen Shaw UNQUALIFIED
Alejandro PerinIndiaIoni Bowcher NEW
Jefferson SchemmerCanadaStephen Shaw QUALIFIED
Silvio SlusarskiRussiaStephen Shaw NEW
Aditya KuskoArgentinaElwin Sharvill RENEWAL
Rodrigues CampainBrazilXuxue Feng PROPOSAL
David DarakjyCanadaOnyama Limba RENEWAL
Nicolas IturbideItalyAmy Elsner NEGOTIATION
Alejandro PerinUnited KingdomAsiya Javayant QUALIFIED
Leon OldroydGermanyAmy Elsner NEW
Clifford RimItalyXuxue Feng UNQUALIFIED
Jones VocelkaIndiaXuxue Feng NEGOTIATION
Aika InouyeItalyStephen Shaw RENEWAL
Leon OldroydBrazilBernardo Dominic QUALIFIED
Chavez BriddickRussiaAnna Fali QUALIFIED
Julie StensethUnited KingdomBernardo Dominic RENEWAL
Isabel BowleyGermanyBernardo Dominic NEW
Octavia MaletIndiaXuxue Feng QUALIFIED
Isabel BowleySpainIoni Bowcher RENEWAL
Cody SaylorsIndiaAsiya Javayant QUALIFIED
Ricardo GauchoSpainIoni Bowcher NEW
Jennifer AmigonSpainBernardo Dominic NEGOTIATION
Munro FerenczIndiaElwin Sharvill QUALIFIED
Misaki RoysterIndiaIoni Bowcher PROPOSAL
Maria MarrierSpainBernardo Dominic NEGOTIATION
James ButtAustraliaStephen Shaw RENEWAL
Stacey MacleadRussiaBernardo Dominic NEW
Faith GillianIndiaElwin Sharvill PROPOSAL
Jefferson SchemmerAustraliaAsiya Javayant NEW
Misaki RoysterFranceAmy Elsner NEGOTIATION
Tony FollerJapanOnyama Limba NEGOTIATION
Juan WieserAustraliaElwin Sharvill QUALIFIED
Rodrigues CampainSpainIvan Magalhaes NEW
Jeanfrancois VenereUnited KingdomIoni Bowcher QUALIFIED
Leja CaldareraIndiaElwin Sharvill UNQUALIFIED
Jennifer AmigonSpainXuxue Feng QUALIFIED
Frozen Columns
Name
Mayumi Kolmetz
Jefferson Schemmer
Ivar Paprocki
Mayumi Kolmetz
Cody Saylors
Kaitlin Ostrosky
Francesco Shinko
Greenwood Bolognia
Munro Ferencz
Adams Morasca
Faith Gillian
Antonio Caudy
Leja Caldarera
Sinclair Waycott
Arvin Albares
Jennifer Amigon
Darci Poquette
Juan Wieser
Tony Foller
Antonio Caudy
Tony Foller
Stacey Maclead
Chavez Briddick
Greenwood Bolognia
Francesco Shinko
Adams Morasca
Jones Vocelka
Jeanfrancois Venere
Deepesh Chui
Leon Oldroyd
Smith Glick
Alejandro Perin
Ivar Paprocki
Faith Gillian
Emily Whobrey
Darci Poquette
Leon Oldroyd
Nicolas Iturbide
Mujtaba Nicka
Misaki Royster
Leon Oldroyd
Mayumi Kolmetz
Wickens Nestle
Greenwood Bolognia
Faith Gillian
Ivar Paprocki
Costa Dilliard
Mayumi Kolmetz
Sinclair Waycott
Adams Morasca
IdCountryDate
1000Italy2026-04-17
1001Spain2026-04-21
1002Argentina2026-04-30
1003France2026-04-30
1004United Kingdom2026-04-13
1005Japan2026-04-22
1006Russia2026-05-06
1007India2026-04-23
1008Argentina2026-04-14
1009Spain2026-04-21
1010Argentina2026-04-20
1011Australia2026-05-07
1012Brazil2026-05-03
1013Australia2026-04-15
1014Spain2026-04-29
1015Germany2026-05-09
1016Brazil2026-04-28
1017Argentina2026-05-09
1018Germany2026-04-21
1019Japan2026-04-16
1020India2026-04-26
1021Russia2026-04-26
1022Russia2026-04-29
1023Japan2026-05-10
1024Germany2026-04-18
1025Germany2026-05-07
1026United Kingdom2026-04-23
1027Argentina2026-04-23
1028India2026-04-26
1029United Kingdom2026-05-06
1030Argentina2026-04-26
1031Spain2026-05-09
1032Argentina2026-05-11
1033India2026-04-24
1034Russia2026-04-14
1035Russia2026-04-27
1036Spain2026-05-12
1037Japan2026-05-03
1038Spain2026-04-30
1039France2026-05-06
1040Spain2026-04-15
1041Argentina2026-05-09
1042Spain2026-05-06
1043Japan2026-04-16
1044Italy2026-05-07
1045United Kingdom2026-05-12
1046Spain2026-04-24
1047Brazil2026-04-25
1048Argentina2026-05-08
1049Japan2026-05-02

On-Demand Data

NameIdCountryDate
Stacey Maclead1000Australia2026-04-14
Jefferson Schemmer1001Canada2026-04-22
Silvio Slusarski1002France2026-04-27
David Darakjy1003Canada2026-05-05
Aditya Kusko1004United Kingdom2026-04-27
Tony Foller1005United Kingdom2026-04-16
Cody Saylors1006Spain2026-05-10
Aruna Figeroa1007Germany2026-04-20
Julie Stenseth1008United Kingdom2026-04-28
Leja Caldarera1009Australia2026-05-02
Mayumi Kolmetz1010Spain2026-05-08
Jefferson Schemmer1011Italy2026-05-03
Julie Stenseth1012Spain2026-05-12
Silvio Slusarski1013Japan2026-04-22
Juan Wieser1014Russia2026-05-09
Antonio Caudy1015Australia2026-04-18
Leja Caldarera1016Italy2026-05-03
Aika Inouye1017Australia2026-04-25
Ivar Paprocki1018France2026-05-01
Stacey Maclead1019Canada2026-05-05
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Smith GlickAustraliaOnyama Limba NEGOTIATION
Murillo MaletItalyIoni Bowcher QUALIFIED
Greenwood BologniaGermanyElwin Sharvill NEW
Isabel BowleyArgentinaIoni Bowcher PROPOSAL
Adams MorascaItalyAsiya Javayant UNQUALIFIED
Deepesh ChuiUnited KingdomAsiya Javayant UNQUALIFIED
Smith GlickUnited KingdomStephen Shaw NEGOTIATION
Johnson SergiBrazilAmy Elsner UNQUALIFIED
Emily WhobreyFranceElwin Sharvill NEGOTIATION
Maria MarrierIndiaAmy Elsner NEW
Tony FollerUnited KingdomElwin Sharvill PROPOSAL
Ivar PaprockiCanadaAsiya Javayant QUALIFIED
Misaki RoysterFranceXuxue Feng RENEWAL
Mujtaba NickaJapanBernardo Dominic PROPOSAL
Ashley DoeIndiaIvan Magalhaes PROPOSAL
Wickens NestleAustraliaAmy Elsner UNQUALIFIED
Leja CaldareraRussiaOnyama Limba NEGOTIATION
Silvio SlusarskiAustraliaIvan Magalhaes QUALIFIED
Maria MarrierItalyIvan Magalhaes NEGOTIATION
Greenwood BologniaJapanBernardo Dominic NEW
Jefferson SchemmerUnited KingdomStephen Shaw NEGOTIATION
Alejandro PerinIndiaStephen Shaw UNQUALIFIED
Faith GillianIndiaBernardo Dominic NEGOTIATION
Aruna FigeroaCanadaAmy Elsner QUALIFIED
Aika InouyeGermanyOnyama Limba NEGOTIATION
Claire TollnerUnited KingdomXuxue Feng UNQUALIFIED
Isabel BowleyUnited KingdomStephen Shaw UNQUALIFIED
Julie StensethItalyAmy Elsner UNQUALIFIED
Emily WhobreyGermanyIoni Bowcher PROPOSAL
Arvin AlbaresItalyAsiya Javayant NEGOTIATION
Isabel BowleyBrazilStephen Shaw UNQUALIFIED
Jefferson SchemmerGermanyIoni Bowcher QUALIFIED
Aditya KuskoJapanAsiya Javayant RENEWAL
Aika InouyeGermanyBernardo Dominic QUALIFIED
Ashley DoeJapanIvan Magalhaes PROPOSAL
Kaitlin OstroskyIndiaIoni Bowcher RENEWAL
Rodrigues CampainArgentinaStephen Shaw NEGOTIATION
Mujtaba NickaFranceIoni Bowcher PROPOSAL
Francesco ShinkoAustraliaStephen Shaw RENEWAL
Deepesh ChuiIndiaIoni Bowcher NEGOTIATION

<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>