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
Arvin AlbaresRussiaXuxue Feng PROPOSAL
Jefferson SchemmerBrazilIoni Bowcher UNQUALIFIED
Johnson SergiIndiaIoni Bowcher NEGOTIATION
Julie StensethGermanyAsiya Javayant NEW
Aditya KuskoCanadaAsiya Javayant UNQUALIFIED
Emily WhobreyItalyStephen Shaw NEGOTIATION
Misaki RoysterItalyElwin Sharvill NEW
Johnson SergiRussiaIoni Bowcher UNQUALIFIED
Cody SaylorsBrazilStephen Shaw NEGOTIATION
Chavez BriddickRussiaIvan Magalhaes UNQUALIFIED
Claire TollnerItalyIvan Magalhaes UNQUALIFIED
Murillo MaletCanadaBernardo Dominic UNQUALIFIED
Isabel BowleyItalyAmy Elsner RENEWAL
Tony FollerSpainOnyama Limba PROPOSAL
Stacey MacleadAustraliaXuxue Feng PROPOSAL
Emily WhobreyBrazilIvan Magalhaes QUALIFIED
Stacey MacleadAustraliaBernardo Dominic NEW
Alejandro PerinAustraliaIvan Magalhaes NEGOTIATION
Alejandro PerinJapanBernardo Dominic NEGOTIATION
Mujtaba NickaJapanStephen Shaw QUALIFIED
Ricardo GauchoCanadaXuxue Feng NEW
Nicolas IturbideFranceAnna Fali PROPOSAL
Julie StensethCanadaAmy Elsner RENEWAL
Octavia MaletIndiaAmy Elsner PROPOSAL
Misaki RoysterAustraliaElwin Sharvill PROPOSAL
Ricardo GauchoJapanAnna Fali NEW
Smith GlickBrazilAnna Fali QUALIFIED
Izzy GarufiItalyIoni Bowcher NEGOTIATION
Murillo MaletCanadaAmy Elsner NEW
Greenwood BologniaSpainAsiya Javayant RENEWAL
Kadeem FlosiSpainAmy Elsner QUALIFIED
Smith GlickGermanyStephen Shaw NEGOTIATION
Isabel BowleyUnited KingdomAnna Fali NEGOTIATION
Tony FollerIndiaBernardo Dominic PROPOSAL
Antonio CaudyRussiaOnyama Limba QUALIFIED
Maisha RulapaughRussiaXuxue Feng NEGOTIATION
Salvatore StockhamArgentinaBernardo Dominic RENEWAL
Deepesh ChuiBrazilIvan Magalhaes NEGOTIATION
Octavia MaletFranceXuxue Feng PROPOSAL
Costa DilliardJapanIoni Bowcher PROPOSAL
Aika InouyeArgentinaIoni Bowcher QUALIFIED
Morrow RutaSpainIvan Magalhaes RENEWAL
Nicolas IturbideBrazilAsiya Javayant QUALIFIED
Faith GillianRussiaXuxue Feng NEGOTIATION
Claire TollnerGermanyIvan Magalhaes PROPOSAL
Maisha RulapaughUnited KingdomElwin Sharvill PROPOSAL
Nicolas IturbideIndiaElwin Sharvill NEW
Mujtaba NickaSpainAnna Fali NEGOTIATION
Nicolas IturbideItalyIoni Bowcher UNQUALIFIED
Cody SaylorsJapanIvan Magalhaes NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Darci PoquetteUnited KingdomIoni Bowcher NEGOTIATION
Alejandro PerinAustraliaAnna Fali QUALIFIED
Jennifer AmigonJapanIvan Magalhaes QUALIFIED
Nicolas IturbideRussiaAsiya Javayant RENEWAL
Jones VocelkaArgentinaAmy Elsner NEGOTIATION
Chavez BriddickGermanyStephen Shaw NEW
Leon OldroydUnited KingdomIoni Bowcher UNQUALIFIED
Greenwood BologniaArgentinaStephen Shaw RENEWAL
Darci PoquetteItalyStephen Shaw UNQUALIFIED
Jennifer AmigonAustraliaXuxue Feng NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Leon OldroydGermany2026-06-18Dorl, James J Esq NEGOTIATION5Stephen Shaw
1001Juan WieserIndia2026-06-20Printing Dimensions RENEWAL41Onyama Limba
1002Salvatore StockhamFrance2026-06-20Benton, John B Jr UNQUALIFIED25Anna Fali
1003Claire TollnerGermany2026-06-19King, Christopher A Esq RENEWAL47Asiya Javayant
1004Izzy GarufiIndia2026-06-10Feiner Bros RENEWAL58Anna Fali
1005Maisha RulapaughJapan2026-05-31Commercial Press QUALIFIED85Xuxue Feng
1006Silvio SlusarskiFrance2026-05-27King, Christopher A Esq UNQUALIFIED38Stephen Shaw
1007Aruna FigeroaFrance2026-05-23Truhlar And Truhlar Attys UNQUALIFIED2Bernardo Dominic
1008Juan WieserItaly2026-06-21King, Christopher A Esq RENEWAL23Anna Fali
1009Kadeem FlosiRussia2026-06-14Chanay, Jeffrey A Esq NEW47Ioni Bowcher
1010Costa DilliardSpain2026-06-20Chanay, Jeffrey A Esq QUALIFIED54Bernardo Dominic
1011Adams MorascaAustralia2026-05-29Rangoni Of Florence UNQUALIFIED36Onyama Limba
1012Adams MorascaIndia2026-06-12Commercial Press NEW76Asiya Javayant
1013Octavia MaletIndia2026-06-03Chanay, Jeffrey A Esq RENEWAL24Asiya Javayant
1014Nicolas IturbideFrance2026-06-14Printing Dimensions QUALIFIED12Bernardo Dominic
1015Jeanfrancois VenereJapan2026-06-02Chemel, James L Cpa NEGOTIATION14Anna Fali
1016Maisha RulapaughIndia2026-06-12Chapman, Ross E Esq UNQUALIFIED48Xuxue Feng
1017Aditya KuskoArgentina2026-05-26Dorl, James J Esq UNQUALIFIED88Bernardo Dominic
1018Sinclair WaycottJapan2026-06-10Printing Dimensions NEW47Anna Fali
1019Murillo MaletCanada2026-06-13Feiner Bros NEW56Asiya Javayant
1020Octavia MaletRussia2026-06-17Chapman, Ross E Esq RENEWAL61Elwin Sharvill
1021Izzy GarufiSpain2026-05-24Rangoni Of Florence QUALIFIED40Ioni Bowcher
1022Deepesh ChuiUnited Kingdom2026-06-05King, Christopher A Esq QUALIFIED73Ivan Magalhaes
1023Johnson SergiCanada2026-06-07Truhlar And Truhlar Attys UNQUALIFIED16Bernardo Dominic
1024Leja CaldareraArgentina2026-06-07King, Christopher A Esq RENEWAL5Bernardo Dominic
1025Jones VocelkaFrance2026-06-18Chanay, Jeffrey A Esq PROPOSAL90Elwin Sharvill
1026Nicolas IturbideArgentina2026-05-28Chanay, Jeffrey A Esq NEW59Anna Fali
1027Kadeem FlosiUnited Kingdom2026-06-01King, Christopher A Esq QUALIFIED31Onyama Limba
1028Deepesh ChuiJapan2026-05-29Chemel, James L Cpa NEW0Elwin Sharvill
1029Emily WhobreyIndia2026-06-02King, Christopher A Esq RENEWAL46Anna Fali
1030Darci PoquetteItaly2026-05-23Rangoni Of Florence NEW8Onyama Limba
1031Alejandro PerinArgentina2026-06-04Buckley Miller Wright UNQUALIFIED11Bernardo Dominic
1032Julie StensethBrazil2026-06-09Rousseaux, Michael Esq PROPOSAL84Ioni Bowcher
1033Mujtaba NickaGermany2026-06-16Dorl, James J Esq RENEWAL66Stephen Shaw
1034Cody SaylorsArgentina2026-05-25Dorl, James J Esq PROPOSAL3Ivan Magalhaes
1035Salvatore StockhamBrazil2026-05-23Rangoni Of Florence QUALIFIED96Elwin Sharvill
1036Alejandro PerinRussia2026-06-03King, Christopher A Esq PROPOSAL18Bernardo Dominic
1037Greenwood BologniaRussia2026-05-25Rousseaux, Michael Esq NEW23Stephen Shaw
1038James ButtSpain2026-06-14Buckley Miller Wright PROPOSAL7Anna Fali
1039Deepesh ChuiItaly2026-06-19Chemel, James L Cpa UNQUALIFIED44Ioni Bowcher
1040Stacey MacleadItaly2026-06-06Dorl, James J Esq UNQUALIFIED50Amy Elsner
1041Leon OldroydSpain2026-06-14King, Christopher A Esq RENEWAL18Xuxue Feng
1042Greenwood BologniaArgentina2026-06-19Feltz Printing Service RENEWAL73Amy Elsner
1043Alejandro PerinUnited Kingdom2026-06-17Chapman, Ross E Esq QUALIFIED84Elwin Sharvill
1044Emily WhobreyRussia2026-06-11Feiner Bros RENEWAL99Elwin Sharvill
1045Leon OldroydCanada2026-06-11Chapman, Ross E Esq QUALIFIED59Onyama Limba
1046Ivar PaprockiUnited Kingdom2026-06-07Chapman, Ross E Esq NEGOTIATION20Ioni Bowcher
1047Smith GlickFrance2026-06-16Commercial Press NEW2Amy Elsner
1048Wickens NestleBrazil2026-06-10Chemel, James L Cpa NEGOTIATION13Xuxue Feng
1049Greenwood BologniaRussia2026-05-24Buckley Miller Wright NEGOTIATION47Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Tony FollerJapanIvan Magalhaes UNQUALIFIED
Aditya KuskoFranceAnna Fali PROPOSAL
Kadeem FlosiItalyAmy Elsner NEW
Ivar PaprockiUnited KingdomOnyama Limba PROPOSAL
Greenwood BologniaArgentinaIvan Magalhaes UNQUALIFIED
Clifford RimAustraliaXuxue Feng PROPOSAL
Leon OldroydIndiaXuxue Feng UNQUALIFIED
Adams MorascaArgentinaElwin Sharvill QUALIFIED
Deepesh ChuiRussiaAmy Elsner RENEWAL
Stacey MacleadSpainIvan Magalhaes NEW
Ricardo GauchoAustraliaAmy Elsner NEGOTIATION
Faith GillianJapanStephen Shaw QUALIFIED
Aruna FigeroaBrazilBernardo Dominic NEGOTIATION
Antonio CaudyJapanElwin Sharvill UNQUALIFIED
Ashley DoeItalyStephen Shaw NEW
Jennifer AmigonBrazilIoni Bowcher QUALIFIED
Salvatore StockhamUnited KingdomXuxue Feng RENEWAL
Jones VocelkaFranceOnyama Limba UNQUALIFIED
Kadeem FlosiFranceXuxue Feng QUALIFIED
Salvatore StockhamFranceIvan Magalhaes UNQUALIFIED
Octavia MaletGermanyAmy Elsner RENEWAL
Kaitlin OstroskyCanadaAnna Fali NEW
Leja CaldareraBrazilOnyama Limba NEGOTIATION
Stacey MacleadCanadaStephen Shaw UNQUALIFIED
Claire TollnerUnited KingdomAnna Fali NEW
Aika InouyeRussiaXuxue Feng PROPOSAL
Francesco ShinkoAustraliaStephen Shaw NEGOTIATION
Antonio CaudyItalyStephen Shaw UNQUALIFIED
Wickens NestleGermanyAnna Fali RENEWAL
Adams MorascaCanadaElwin Sharvill UNQUALIFIED
Clifford RimIndiaIvan Magalhaes NEW
Jefferson SchemmerGermanyStephen Shaw UNQUALIFIED
James ButtFranceAnna Fali RENEWAL
Munro FerenczAustraliaOnyama Limba PROPOSAL
Munro FerenczRussiaOnyama Limba PROPOSAL
Izzy GarufiArgentinaBernardo Dominic NEGOTIATION
Maria MarrierFranceOnyama Limba UNQUALIFIED
Clifford RimAustraliaBernardo Dominic NEGOTIATION
Julie StensethBrazilAsiya Javayant UNQUALIFIED
Stacey MacleadIndiaIvan Magalhaes RENEWAL
Wickens NestleArgentinaIoni Bowcher QUALIFIED
Stacey MacleadBrazilAsiya Javayant NEW
Julie StensethArgentinaXuxue Feng UNQUALIFIED
Arvin AlbaresItalyIvan Magalhaes QUALIFIED
Aditya KuskoRussiaAmy Elsner NEW
Juan WieserRussiaIoni Bowcher RENEWAL
Silvio SlusarskiJapanBernardo Dominic RENEWAL
Ricardo GauchoSpainAmy Elsner QUALIFIED
Costa DilliardAustraliaElwin Sharvill NEGOTIATION
Mayumi KolmetzFranceStephen Shaw UNQUALIFIED
Frozen Columns
Name
Morrow Ruta
Juan Wieser
Chavez Briddick
Rodrigues Campain
Darci Poquette
Smith Glick
Jennifer Amigon
Jefferson Schemmer
Sinclair Waycott
Smith Glick
Adams Morasca
Deepesh Chui
Greenwood Bolognia
Tony Foller
Misaki Royster
Ricardo Gaucho
Silvio Slusarski
Kaitlin Ostrosky
Adams Morasca
Kaitlin Ostrosky
Arvin Albares
Darci Poquette
Silvio Slusarski
Jones Vocelka
Johnson Sergi
Murillo Malet
Maria Marrier
Ivar Paprocki
Aruna Figeroa
Aika Inouye
Johnson Sergi
Rodrigues Campain
Leon Oldroyd
Julie Stenseth
Claire Tollner
Mujtaba Nicka
Greenwood Bolognia
Leja Caldarera
Kaitlin Ostrosky
Tony Foller
Adams Morasca
Izzy Garufi
Ashley Doe
Alejandro Perin
Claire Tollner
Leon Oldroyd
Adams Morasca
Maisha Rulapaugh
Aika Inouye
Munro Ferencz
IdCountryDate
1000Germany2026-06-14
1001France2026-05-31
1002Italy2026-06-06
1003Germany2026-06-14
1004Argentina2026-06-06
1005Australia2026-06-17
1006Australia2026-06-15
1007Brazil2026-06-17
1008Argentina2026-05-29
1009Spain2026-06-07
1010Germany2026-06-05
1011Germany2026-05-27
1012United Kingdom2026-06-20
1013Italy2026-06-12
1014Canada2026-06-20
1015Japan2026-05-23
1016Japan2026-06-21
1017Brazil2026-06-11
1018Japan2026-06-04
1019Spain2026-06-11
1020Canada2026-06-12
1021Spain2026-05-23
1022Russia2026-06-03
1023Brazil2026-06-20
1024Germany2026-05-24
1025Argentina2026-06-06
1026United Kingdom2026-06-04
1027Spain2026-06-21
1028Russia2026-06-07
1029Japan2026-06-03
1030Japan2026-06-11
1031Japan2026-06-17
1032Russia2026-05-27
1033Germany2026-05-30
1034Italy2026-05-26
1035Argentina2026-05-27
1036Brazil2026-05-24
1037Germany2026-06-11
1038Brazil2026-06-15
1039Canada2026-06-14
1040Australia2026-05-26
1041Russia2026-06-08
1042Japan2026-06-18
1043United Kingdom2026-06-03
1044Spain2026-06-07
1045Spain2026-06-14
1046Russia2026-06-13
1047Spain2026-06-05
1048Japan2026-06-17
1049Australia2026-06-15

On-Demand Data

NameIdCountryDate
Emily Whobrey1000Japan2026-06-13
Murillo Malet1001Argentina2026-06-04
Mayumi Kolmetz1002Australia2026-06-20
Silvio Slusarski1003India2026-06-11
Greenwood Bolognia1004Brazil2026-06-09
Nicolas Iturbide1005Spain2026-06-09
Wickens Nestle1006Argentina2026-06-09
Isabel Bowley1007Brazil2026-05-31
Ivar Paprocki1008Brazil2026-06-14
Juan Wieser1009Spain2026-06-10
Claire Tollner1010Canada2026-05-30
Munro Ferencz1011Spain2026-06-09
Salvatore Stockham1012France2026-05-26
Cody Saylors1013Russia2026-05-27
Kaitlin Ostrosky1014Spain2026-06-12
Emily Whobrey1015Brazil2026-06-01
Aruna Figeroa1016India2026-06-10
Silvio Slusarski1017Canada2026-05-31
Aika Inouye1018Canada2026-05-24
Leon Oldroyd1019Canada2026-05-23
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
David DarakjyGermanyIoni Bowcher NEW
Aruna FigeroaIndiaAmy Elsner QUALIFIED
Munro FerenczItalyBernardo Dominic RENEWAL
Salvatore StockhamFranceOnyama Limba NEGOTIATION
Munro FerenczIndiaXuxue Feng UNQUALIFIED
Darci PoquetteIndiaIoni Bowcher QUALIFIED
Stacey MacleadRussiaAsiya Javayant UNQUALIFIED
Stacey MacleadRussiaStephen Shaw UNQUALIFIED
Leja CaldareraUnited KingdomAmy Elsner PROPOSAL
Salvatore StockhamFranceStephen Shaw NEGOTIATION
Juan WieserArgentinaAmy Elsner PROPOSAL
James ButtSpainOnyama Limba UNQUALIFIED
Antonio CaudySpainIoni Bowcher PROPOSAL
Francesco ShinkoSpainAnna Fali QUALIFIED
Antonio CaudyGermanyAnna Fali NEGOTIATION
Ricardo GauchoUnited KingdomAsiya Javayant NEGOTIATION
Alejandro PerinItalyBernardo Dominic PROPOSAL
Francesco ShinkoAustraliaIvan Magalhaes UNQUALIFIED
Alejandro PerinSpainXuxue Feng PROPOSAL
Ivar PaprockiGermanyXuxue Feng NEW
Aditya KuskoBrazilOnyama Limba RENEWAL
Aruna FigeroaCanadaAmy Elsner RENEWAL
Adams MorascaSpainXuxue Feng PROPOSAL
Nicolas IturbideArgentinaXuxue Feng PROPOSAL
Ashley DoeJapanOnyama Limba QUALIFIED
Faith GillianArgentinaAsiya Javayant RENEWAL
Clifford RimSpainOnyama Limba RENEWAL
James ButtFranceIvan Magalhaes PROPOSAL
Izzy GarufiUnited KingdomAnna Fali RENEWAL
Leon OldroydUnited KingdomStephen Shaw QUALIFIED
Aruna FigeroaSpainOnyama Limba NEGOTIATION
Octavia MaletCanadaIoni Bowcher QUALIFIED
Sinclair WaycottGermanyOnyama Limba UNQUALIFIED
Jeanfrancois VenereAustraliaStephen Shaw NEW
Leon OldroydArgentinaStephen Shaw QUALIFIED
Nicolas IturbideArgentinaBernardo Dominic RENEWAL
Maria MarrierAustraliaAnna Fali RENEWAL
Mayumi KolmetzGermanyAsiya Javayant PROPOSAL
Costa DilliardArgentinaBernardo Dominic NEGOTIATION
Alejandro PerinItalyOnyama Limba 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>