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
Wickens NestleFranceAnna Fali PROPOSAL
Jones VocelkaFranceElwin Sharvill QUALIFIED
Nicolas IturbideRussiaAmy Elsner QUALIFIED
Kadeem FlosiSpainBernardo Dominic RENEWAL
Aruna FigeroaCanadaAmy Elsner NEW
Aika InouyeJapanIoni Bowcher NEGOTIATION
Jefferson SchemmerJapanAmy Elsner NEW
Salvatore StockhamUnited KingdomAsiya Javayant NEGOTIATION
Francesco ShinkoItalyAsiya Javayant UNQUALIFIED
Silvio SlusarskiItalyXuxue Feng QUALIFIED
Silvio SlusarskiGermanyIvan Magalhaes PROPOSAL
Wickens NestleUnited KingdomIvan Magalhaes UNQUALIFIED
Isabel BowleySpainAmy Elsner NEW
Nicolas IturbideSpainIvan Magalhaes NEW
James ButtItalyAmy Elsner UNQUALIFIED
Costa DilliardCanadaBernardo Dominic NEW
Wickens NestleItalyAsiya Javayant NEGOTIATION
Maisha RulapaughItalyBernardo Dominic UNQUALIFIED
Maria MarrierArgentinaAmy Elsner PROPOSAL
Aruna FigeroaBrazilXuxue Feng RENEWAL
David DarakjyIndiaIvan Magalhaes PROPOSAL
Mayumi KolmetzGermanyStephen Shaw NEGOTIATION
Jennifer AmigonArgentinaElwin Sharvill RENEWAL
Ashley DoeGermanyStephen Shaw RENEWAL
Cody SaylorsArgentinaAsiya Javayant RENEWAL
Ivar PaprockiIndiaXuxue Feng QUALIFIED
Johnson SergiUnited KingdomBernardo Dominic NEW
Chavez BriddickSpainIvan Magalhaes NEGOTIATION
Murillo MaletCanadaOnyama Limba NEW
Murillo MaletIndiaAnna Fali UNQUALIFIED
Johnson SergiUnited KingdomOnyama Limba NEW
Isabel BowleyIndiaXuxue Feng NEW
Adams MorascaUnited KingdomIoni Bowcher QUALIFIED
Cody SaylorsArgentinaAsiya Javayant QUALIFIED
Faith GillianAustraliaOnyama Limba NEW
David DarakjyItalyXuxue Feng NEGOTIATION
Johnson SergiUnited KingdomIvan Magalhaes NEGOTIATION
Alejandro PerinSpainAnna Fali UNQUALIFIED
Ashley DoeRussiaAmy Elsner UNQUALIFIED
Clifford RimCanadaAsiya Javayant RENEWAL
James ButtRussiaIvan Magalhaes RENEWAL
Mayumi KolmetzGermanyStephen Shaw RENEWAL
Smith GlickBrazilIvan Magalhaes RENEWAL
Sinclair WaycottUnited KingdomIoni Bowcher PROPOSAL
Mujtaba NickaArgentinaOnyama Limba RENEWAL
Jefferson SchemmerItalyElwin Sharvill UNQUALIFIED
Johnson SergiRussiaAnna Fali RENEWAL
David DarakjyArgentinaIvan Magalhaes NEW
Costa DilliardItalyIvan Magalhaes QUALIFIED
James ButtJapanAmy Elsner RENEWAL
Horizontal
NameCountryRepresentativeStatus
Murillo MaletRussiaElwin Sharvill NEW
Alejandro PerinBrazilIvan Magalhaes NEGOTIATION
Maria MarrierGermanyAmy Elsner UNQUALIFIED
Costa DilliardGermanyBernardo Dominic NEGOTIATION
Sinclair WaycottCanadaElwin Sharvill UNQUALIFIED
Kadeem FlosiCanadaIvan Magalhaes QUALIFIED
Aditya KuskoFranceAnna Fali RENEWAL
Julie StensethIndiaIoni Bowcher QUALIFIED
Leja CaldareraJapanAsiya Javayant RENEWAL
Kaitlin OstroskyRussiaAnna Fali PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Isabel BowleyJapan2026-05-21Rousseaux, Michael Esq PROPOSAL42Elwin Sharvill
1001Maria MarrierFrance2026-05-16Chapman, Ross E Esq NEGOTIATION3Elwin Sharvill
1002Maisha RulapaughUnited Kingdom2026-05-17Printing Dimensions UNQUALIFIED7Xuxue Feng
1003Octavia MaletItaly2026-05-04Chemel, James L Cpa RENEWAL90Anna Fali
1004Jones VocelkaItaly2026-05-02Buckley Miller Wright UNQUALIFIED28Asiya Javayant
1005Kaitlin OstroskyCanada2026-05-19Truhlar And Truhlar Attys QUALIFIED56Xuxue Feng
1006Deepesh ChuiItaly2026-05-28Dorl, James J Esq UNQUALIFIED94Onyama Limba
1007Aditya KuskoJapan2026-05-14Buckley Miller Wright UNQUALIFIED16Amy Elsner
1008Johnson SergiGermany2026-05-14Morlong Associates RENEWAL74Bernardo Dominic
1009Mayumi KolmetzUnited Kingdom2026-05-04Chapman, Ross E Esq UNQUALIFIED31Ivan Magalhaes
1010Costa DilliardRussia2026-05-24Chemel, James L Cpa NEW83Bernardo Dominic
1011Jones VocelkaJapan2026-05-19Truhlar And Truhlar Attys QUALIFIED84Bernardo Dominic
1012Emily WhobreyBrazil2026-05-06King, Christopher A Esq UNQUALIFIED75Elwin Sharvill
1013Salvatore StockhamGermany2026-05-18Feiner Bros PROPOSAL62Bernardo Dominic
1014Octavia MaletUnited Kingdom2026-05-16Printing Dimensions RENEWAL60Xuxue Feng
1015Morrow RutaItaly2026-05-10Feiner Bros NEW95Onyama Limba
1016Claire TollnerJapan2026-05-28Printing Dimensions PROPOSAL26Xuxue Feng
1017Cody SaylorsRussia2026-05-24Rangoni Of Florence QUALIFIED77Amy Elsner
1018Smith GlickRussia2026-05-10Chanay, Jeffrey A Esq QUALIFIED3Bernardo Dominic
1019Francesco ShinkoArgentina2026-05-04Morlong Associates NEW54Elwin Sharvill
1020Izzy GarufiCanada2026-05-12King, Christopher A Esq NEGOTIATION58Bernardo Dominic
1021Ivar PaprockiCanada2026-05-23Morlong Associates NEGOTIATION76Amy Elsner
1022Mujtaba NickaFrance2026-05-16Chanay, Jeffrey A Esq QUALIFIED94Stephen Shaw
1023Chavez BriddickUnited Kingdom2026-05-09Rangoni Of Florence QUALIFIED30Elwin Sharvill
1024Jefferson SchemmerFrance2026-05-01Morlong Associates QUALIFIED44Stephen Shaw
1025Leja CaldareraJapan2026-05-25Dorl, James J Esq RENEWAL61Anna Fali
1026Rodrigues CampainGermany2026-05-26Buckley Miller Wright PROPOSAL7Onyama Limba
1027Aditya KuskoRussia2026-05-26Feiner Bros NEW32Asiya Javayant
1028Emily WhobreyJapan2026-05-21Chemel, James L Cpa QUALIFIED40Anna Fali
1029Morrow RutaUnited Kingdom2026-05-06Rousseaux, Michael Esq NEW37Stephen Shaw
1030Mayumi KolmetzGermany2026-05-06Chemel, James L Cpa QUALIFIED24Stephen Shaw
1031Stacey MacleadSpain2026-05-12King, Christopher A Esq UNQUALIFIED38Onyama Limba
1032Antonio CaudyBrazil2026-05-27King, Christopher A Esq QUALIFIED4Xuxue Feng
1033Arvin AlbaresSpain2026-05-28Feltz Printing Service QUALIFIED88Asiya Javayant
1034Morrow RutaAustralia2026-05-18Feltz Printing Service NEGOTIATION47Asiya Javayant
1035Aditya KuskoRussia2026-05-19Chanay, Jeffrey A Esq QUALIFIED6Ioni Bowcher
1036Ashley DoeUnited Kingdom2026-05-26Benton, John B Jr RENEWAL11Ivan Magalhaes
1037Wickens NestleItaly2026-05-21Benton, John B Jr RENEWAL1Bernardo Dominic
1038Greenwood BologniaGermany2026-05-07Chanay, Jeffrey A Esq RENEWAL7Onyama Limba
1039Chavez BriddickFrance2026-05-18Dorl, James J Esq PROPOSAL28Onyama Limba
1040Adams MorascaUnited Kingdom2026-05-13Chemel, James L Cpa NEW25Bernardo Dominic
1041Silvio SlusarskiItaly2026-05-07Rangoni Of Florence NEW32Ioni Bowcher
1042Leon OldroydIndia2026-05-10Rangoni Of Florence UNQUALIFIED47Bernardo Dominic
1043Maisha RulapaughGermany2026-05-25Rousseaux, Michael Esq RENEWAL24Anna Fali
1044Munro FerenczItaly2026-05-27Chanay, Jeffrey A Esq RENEWAL87Anna Fali
1045James ButtItaly2026-05-03Chanay, Jeffrey A Esq QUALIFIED65Ivan Magalhaes
1046Leon OldroydGermany2026-05-21Buckley Miller Wright PROPOSAL51Onyama Limba
1047Salvatore StockhamIndia2026-05-17Feiner Bros QUALIFIED78Ivan Magalhaes
1048Juan WieserAustralia2026-05-15Rousseaux, Michael Esq NEGOTIATION7Amy Elsner
1049Arvin AlbaresBrazil2026-05-13Rousseaux, Michael Esq QUALIFIED35Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Octavia MaletCanadaAnna Fali PROPOSAL
Jeanfrancois VenereGermanyIvan Magalhaes NEW
Salvatore StockhamItalyAsiya Javayant RENEWAL
Sinclair WaycottIndiaBernardo Dominic RENEWAL
Julie StensethBrazilIoni Bowcher NEW
Clifford RimItalyAsiya Javayant QUALIFIED
Rodrigues CampainJapanIoni Bowcher NEGOTIATION
Francesco ShinkoCanadaAnna Fali NEGOTIATION
Izzy GarufiFranceAsiya Javayant NEW
Rodrigues CampainUnited KingdomStephen Shaw PROPOSAL
Darci PoquetteUnited KingdomAnna Fali NEGOTIATION
Arvin AlbaresUnited KingdomAnna Fali QUALIFIED
Darci PoquetteSpainAmy Elsner UNQUALIFIED
Greenwood BologniaJapanAmy Elsner UNQUALIFIED
Stacey MacleadItalyIvan Magalhaes NEW
Cody SaylorsUnited KingdomAsiya Javayant PROPOSAL
Stacey MacleadItalyBernardo Dominic PROPOSAL
Kaitlin OstroskyFranceBernardo Dominic NEW
James ButtItalyAmy Elsner NEW
Aditya KuskoSpainStephen Shaw QUALIFIED
Alejandro PerinUnited KingdomAsiya Javayant NEGOTIATION
Costa DilliardItalyAmy Elsner NEGOTIATION
Leon OldroydGermanyXuxue Feng NEGOTIATION
Francesco ShinkoBrazilBernardo Dominic UNQUALIFIED
Clifford RimIndiaIoni Bowcher UNQUALIFIED
Ricardo GauchoJapanIoni Bowcher RENEWAL
Arvin AlbaresJapanIvan Magalhaes QUALIFIED
Kaitlin OstroskyIndiaOnyama Limba NEGOTIATION
David DarakjyGermanyAnna Fali NEGOTIATION
Julie StensethGermanyAnna Fali PROPOSAL
Arvin AlbaresItalyAsiya Javayant NEGOTIATION
Ivar PaprockiIndiaBernardo Dominic PROPOSAL
Isabel BowleyFranceAsiya Javayant RENEWAL
Maisha RulapaughFranceIvan Magalhaes PROPOSAL
Julie StensethSpainOnyama Limba RENEWAL
Jones VocelkaRussiaStephen Shaw NEGOTIATION
Francesco ShinkoJapanElwin Sharvill NEW
James ButtBrazilOnyama Limba NEW
Silvio SlusarskiIndiaAmy Elsner UNQUALIFIED
Kaitlin OstroskyJapanIvan Magalhaes NEGOTIATION
Jennifer AmigonSpainXuxue Feng PROPOSAL
Izzy GarufiAustraliaBernardo Dominic NEW
Misaki RoysterFranceAnna Fali RENEWAL
Claire TollnerAustraliaAmy Elsner UNQUALIFIED
Silvio SlusarskiGermanyAmy Elsner UNQUALIFIED
Mujtaba NickaFranceXuxue Feng NEW
Kadeem FlosiJapanXuxue Feng PROPOSAL
Emily WhobreyGermanyBernardo Dominic PROPOSAL
Aditya KuskoIndiaIoni Bowcher PROPOSAL
Deepesh ChuiJapanOnyama Limba PROPOSAL
Frozen Columns
Name
Juan Wieser
Cody Saylors
Ashley Doe
Munro Ferencz
Izzy Garufi
Tony Foller
Costa Dilliard
Rodrigues Campain
Rodrigues Campain
Arvin Albares
Leja Caldarera
Maisha Rulapaugh
Juan Wieser
Munro Ferencz
Claire Tollner
Kaitlin Ostrosky
Maisha Rulapaugh
Julie Stenseth
Cody Saylors
Izzy Garufi
Kadeem Flosi
Stacey Maclead
Leja Caldarera
Aika Inouye
Tony Foller
Isabel Bowley
Darci Poquette
Cody Saylors
Izzy Garufi
Chavez Briddick
Kadeem Flosi
Claire Tollner
Smith Glick
Johnson Sergi
Silvio Slusarski
Sinclair Waycott
Jeanfrancois Venere
Tony Foller
Darci Poquette
Morrow Ruta
Aika Inouye
Julie Stenseth
Maria Marrier
Deepesh Chui
Leja Caldarera
Wickens Nestle
Jennifer Amigon
Jones Vocelka
Jones Vocelka
Adams Morasca
IdCountryDate
1000Spain2026-05-24
1001Russia2026-05-06
1002Russia2026-05-24
1003Italy2026-05-23
1004Australia2026-05-03
1005Australia2026-05-27
1006Germany2026-05-06
1007Germany2026-05-07
1008India2026-05-04
1009Brazil2026-05-11
1010United Kingdom2026-05-26
1011Germany2026-05-27
1012Japan2026-05-04
1013Brazil2026-05-15
1014Spain2026-05-01
1015Russia2026-05-26
1016Italy2026-05-13
1017Spain2026-05-17
1018Brazil2026-05-22
1019United Kingdom2026-05-13
1020Canada2026-05-30
1021France2026-05-01
1022Argentina2026-05-26
1023Russia2026-05-05
1024United Kingdom2026-05-13
1025Germany2026-05-15
1026United Kingdom2026-05-27
1027Japan2026-05-01
1028India2026-05-23
1029Argentina2026-05-21
1030France2026-05-09
1031Russia2026-05-01
1032Canada2026-05-25
1033Spain2026-05-26
1034Russia2026-05-07
1035Russia2026-05-10
1036Canada2026-05-21
1037Russia2026-05-25
1038Australia2026-05-04
1039Spain2026-05-19
1040India2026-05-17
1041Italy2026-05-27
1042India2026-05-03
1043Spain2026-05-04
1044Russia2026-05-08
1045India2026-05-07
1046Australia2026-05-16
1047United Kingdom2026-05-06
1048United Kingdom2026-05-02
1049Argentina2026-05-25

On-Demand Data

NameIdCountryDate
Greenwood Bolognia1000Russia2026-05-26
Izzy Garufi1001India2026-05-13
Cody Saylors1002Australia2026-05-06
Izzy Garufi1003Germany2026-05-08
Chavez Briddick1004Argentina2026-05-14
Juan Wieser1005Japan2026-05-09
James Butt1006Italy2026-05-12
Claire Tollner1007Russia2026-05-23
Maisha Rulapaugh1008Spain2026-05-20
Smith Glick1009Spain2026-05-16
Mujtaba Nicka1010United Kingdom2026-05-13
Rodrigues Campain1011Russia2026-05-05
Smith Glick1012Spain2026-05-22
Ricardo Gaucho1013Germany2026-05-04
Nicolas Iturbide1014France2026-05-26
Costa Dilliard1015Australia2026-05-27
Tony Foller1016Italy2026-05-14
Arvin Albares1017Spain2026-05-06
Ivar Paprocki1018Australia2026-05-17
Silvio Slusarski1019Japan2026-05-29
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Adams MorascaFranceElwin Sharvill NEW
Julie StensethIndiaStephen Shaw QUALIFIED
Clifford RimArgentinaBernardo Dominic NEGOTIATION
Mujtaba NickaFranceAmy Elsner RENEWAL
Darci PoquetteItalyIoni Bowcher QUALIFIED
Salvatore StockhamIndiaStephen Shaw QUALIFIED
Claire TollnerIndiaElwin Sharvill UNQUALIFIED
Costa DilliardRussiaBernardo Dominic RENEWAL
Ashley DoeGermanyAsiya Javayant RENEWAL
Ashley DoeIndiaAmy Elsner PROPOSAL
Clifford RimItalyIoni Bowcher NEW
Rodrigues CampainGermanyStephen Shaw NEGOTIATION
Aika InouyeGermanyIoni Bowcher RENEWAL
Kaitlin OstroskyUnited KingdomAmy Elsner NEGOTIATION
Francesco ShinkoItalyXuxue Feng NEGOTIATION
Arvin AlbaresSpainOnyama Limba RENEWAL
Stacey MacleadSpainOnyama Limba UNQUALIFIED
Greenwood BologniaItalyAmy Elsner UNQUALIFIED
Johnson SergiIndiaAmy Elsner PROPOSAL
Darci PoquetteIndiaAmy Elsner RENEWAL
Greenwood BologniaSpainBernardo Dominic NEW
Tony FollerJapanIoni Bowcher NEGOTIATION
Antonio CaudyBrazilAsiya Javayant NEW
Wickens NestleJapanStephen Shaw UNQUALIFIED
Mayumi KolmetzFranceBernardo Dominic RENEWAL
Silvio SlusarskiFranceOnyama Limba PROPOSAL
Mayumi KolmetzArgentinaStephen Shaw PROPOSAL
Jennifer AmigonUnited KingdomIoni Bowcher UNQUALIFIED
Munro FerenczAustraliaAmy Elsner NEGOTIATION
Leon OldroydSpainAsiya Javayant PROPOSAL
Cody SaylorsBrazilAmy Elsner NEGOTIATION
Kaitlin OstroskyRussiaOnyama Limba PROPOSAL
Kaitlin OstroskyBrazilXuxue Feng UNQUALIFIED
Smith GlickItalyIvan Magalhaes PROPOSAL
Clifford RimFranceBernardo Dominic QUALIFIED
Aruna FigeroaGermanyIoni Bowcher PROPOSAL
Aruna FigeroaItalyElwin Sharvill NEGOTIATION
Aruna FigeroaBrazilOnyama Limba PROPOSAL
Isabel BowleyGermanyElwin Sharvill NEGOTIATION
Smith GlickGermanyElwin Sharvill NEW

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