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
David DarakjyGermanyBernardo Dominic NEGOTIATION
Francesco ShinkoArgentinaOnyama Limba NEW
Jefferson SchemmerIndiaOnyama Limba NEW
Juan WieserJapanElwin Sharvill UNQUALIFIED
Deepesh ChuiArgentinaAsiya Javayant NEGOTIATION
Darci PoquetteGermanyAmy Elsner UNQUALIFIED
Francesco ShinkoItalyAnna Fali NEGOTIATION
Antonio CaudyItalyIvan Magalhaes NEW
Smith GlickCanadaElwin Sharvill PROPOSAL
Greenwood BologniaArgentinaBernardo Dominic UNQUALIFIED
Rodrigues CampainGermanyXuxue Feng NEGOTIATION
Jennifer AmigonJapanAmy Elsner PROPOSAL
Adams MorascaArgentinaStephen Shaw NEW
Munro FerenczBrazilElwin Sharvill QUALIFIED
James ButtSpainOnyama Limba NEGOTIATION
Maisha RulapaughSpainOnyama Limba NEGOTIATION
Claire TollnerJapanIvan Magalhaes NEGOTIATION
Chavez BriddickUnited KingdomAsiya Javayant PROPOSAL
Mujtaba NickaRussiaOnyama Limba NEGOTIATION
Ashley DoeAustraliaBernardo Dominic NEGOTIATION
Wickens NestleGermanyIvan Magalhaes RENEWAL
Sinclair WaycottAustraliaXuxue Feng RENEWAL
Kadeem FlosiIndiaOnyama Limba RENEWAL
Johnson SergiFranceIoni Bowcher PROPOSAL
Smith GlickSpainAnna Fali PROPOSAL
Kaitlin OstroskyRussiaAmy Elsner NEGOTIATION
Octavia MaletSpainIoni Bowcher QUALIFIED
Ricardo GauchoIndiaXuxue Feng PROPOSAL
Misaki RoysterIndiaOnyama Limba PROPOSAL
Adams MorascaFranceAsiya Javayant UNQUALIFIED
Ivar PaprockiRussiaIoni Bowcher NEW
Francesco ShinkoCanadaAsiya Javayant NEGOTIATION
Octavia MaletRussiaOnyama Limba RENEWAL
Nicolas IturbideAustraliaIvan Magalhaes QUALIFIED
Clifford RimGermanyIoni Bowcher NEW
Ricardo GauchoUnited KingdomAnna Fali QUALIFIED
Wickens NestleSpainElwin Sharvill NEGOTIATION
Leon OldroydBrazilStephen Shaw QUALIFIED
Tony FollerIndiaAmy Elsner NEW
Aika InouyeUnited KingdomXuxue Feng NEGOTIATION
Stacey MacleadCanadaBernardo Dominic QUALIFIED
Juan WieserFranceAsiya Javayant UNQUALIFIED
Antonio CaudyBrazilOnyama Limba RENEWAL
Francesco ShinkoUnited KingdomBernardo Dominic NEW
Isabel BowleyCanadaAsiya Javayant PROPOSAL
Greenwood BologniaBrazilAmy Elsner PROPOSAL
David DarakjyGermanyIoni Bowcher NEGOTIATION
Jones VocelkaBrazilAsiya Javayant NEGOTIATION
Aruna FigeroaJapanOnyama Limba NEGOTIATION
James ButtAustraliaXuxue Feng PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Kadeem FlosiUnited KingdomElwin Sharvill RENEWAL
Jennifer AmigonJapanAsiya Javayant QUALIFIED
Smith GlickCanadaIoni Bowcher NEGOTIATION
Salvatore StockhamRussiaElwin Sharvill QUALIFIED
Alejandro PerinFranceAsiya Javayant NEW
Sinclair WaycottJapanAsiya Javayant RENEWAL
Misaki RoysterArgentinaStephen Shaw RENEWAL
Leon OldroydCanadaStephen Shaw UNQUALIFIED
Costa DilliardIndiaIvan Magalhaes NEW
Morrow RutaFranceAnna Fali RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Adams MorascaCanada2026-05-28Benton, John B Jr NEGOTIATION84Asiya Javayant
1001Leon OldroydUnited Kingdom2026-05-16Morlong Associates QUALIFIED38Elwin Sharvill
1002Arvin AlbaresRussia2026-06-08Printing Dimensions NEGOTIATION14Asiya Javayant
1003Alejandro PerinAustralia2026-05-17Commercial Press UNQUALIFIED51Amy Elsner
1004Aditya KuskoIndia2026-05-27Printing Dimensions UNQUALIFIED31Xuxue Feng
1005Stacey MacleadFrance2026-06-03Feltz Printing Service PROPOSAL49Onyama Limba
1006Rodrigues CampainBrazil2026-05-17Feltz Printing Service QUALIFIED14Stephen Shaw
1007Rodrigues CampainItaly2026-05-22Benton, John B Jr NEGOTIATION78Stephen Shaw
1008Salvatore StockhamAustralia2026-05-18Truhlar And Truhlar Attys NEGOTIATION53Amy Elsner
1009Morrow RutaGermany2026-06-10Feiner Bros NEGOTIATION66Asiya Javayant
1010Darci PoquetteUnited Kingdom2026-06-10Morlong Associates NEGOTIATION44Amy Elsner
1011Kaitlin OstroskyFrance2026-05-29Feiner Bros UNQUALIFIED31Xuxue Feng
1012Chavez BriddickItaly2026-05-21Dorl, James J Esq UNQUALIFIED35Anna Fali
1013Ashley DoeFrance2026-06-05Buckley Miller Wright QUALIFIED96Stephen Shaw
1014Ricardo GauchoArgentina2026-05-12Benton, John B Jr UNQUALIFIED98Anna Fali
1015Faith GillianUnited Kingdom2026-05-14Chanay, Jeffrey A Esq RENEWAL69Xuxue Feng
1016Cody SaylorsRussia2026-05-16Buckley Miller Wright NEW70Onyama Limba
1017Arvin AlbaresAustralia2026-05-14Truhlar And Truhlar Attys NEW27Onyama Limba
1018Rodrigues CampainGermany2026-05-29Printing Dimensions PROPOSAL75Asiya Javayant
1019Juan WieserAustralia2026-06-04Truhlar And Truhlar Attys QUALIFIED59Elwin Sharvill
1020James ButtItaly2026-05-12Feltz Printing Service RENEWAL4Stephen Shaw
1021Mujtaba NickaJapan2026-05-27Truhlar And Truhlar Attys UNQUALIFIED80Xuxue Feng
1022Salvatore StockhamItaly2026-06-03Rangoni Of Florence UNQUALIFIED78Amy Elsner
1023Tony FollerJapan2026-05-31Buckley Miller Wright RENEWAL73Onyama Limba
1024Adams MorascaRussia2026-06-10Feiner Bros QUALIFIED70Onyama Limba
1025Jennifer AmigonFrance2026-05-12Feiner Bros PROPOSAL47Stephen Shaw
1026Alejandro PerinBrazil2026-06-01Chanay, Jeffrey A Esq QUALIFIED19Onyama Limba
1027Ashley DoeJapan2026-05-23Feltz Printing Service QUALIFIED5Ivan Magalhaes
1028Munro FerenczIndia2026-06-08Printing Dimensions RENEWAL98Elwin Sharvill
1029Claire TollnerCanada2026-06-01Rousseaux, Michael Esq QUALIFIED54Anna Fali
1030Costa DilliardSpain2026-05-29Rangoni Of Florence UNQUALIFIED21Anna Fali
1031Rodrigues CampainCanada2026-05-23Morlong Associates QUALIFIED71Amy Elsner
1032Ricardo GauchoArgentina2026-05-26Printing Dimensions NEGOTIATION14Amy Elsner
1033Emily WhobreyCanada2026-05-12Buckley Miller Wright RENEWAL32Elwin Sharvill
1034Johnson SergiAustralia2026-05-15Dorl, James J Esq RENEWAL60Onyama Limba
1035Tony FollerSpain2026-05-29Chemel, James L Cpa PROPOSAL1Onyama Limba
1036Jefferson SchemmerFrance2026-06-10Morlong Associates NEGOTIATION35Anna Fali
1037Maria MarrierBrazil2026-05-16Printing Dimensions QUALIFIED3Amy Elsner
1038Chavez BriddickItaly2026-06-02Feiner Bros NEW21Asiya Javayant
1039Isabel BowleyRussia2026-05-25Rousseaux, Michael Esq NEGOTIATION48Xuxue Feng
1040Jennifer AmigonAustralia2026-05-15Buckley Miller Wright NEGOTIATION98Stephen Shaw
1041Leja CaldareraAustralia2026-05-19Morlong Associates QUALIFIED58Elwin Sharvill
1042Deepesh ChuiCanada2026-05-23Truhlar And Truhlar Attys PROPOSAL87Ioni Bowcher
1043Isabel BowleyBrazil2026-06-05Truhlar And Truhlar Attys NEGOTIATION75Onyama Limba
1044Greenwood BologniaSpain2026-05-26Buckley Miller Wright NEGOTIATION62Ioni Bowcher
1045Silvio SlusarskiIndia2026-06-04Rousseaux, Michael Esq PROPOSAL37Onyama Limba
1046Deepesh ChuiUnited Kingdom2026-05-20Dorl, James J Esq NEGOTIATION5Elwin Sharvill
1047Greenwood BologniaRussia2026-05-30Feiner Bros UNQUALIFIED40Bernardo Dominic
1048Kadeem FlosiIndia2026-05-20Rangoni Of Florence NEW39Asiya Javayant
1049Aika InouyeGermany2026-05-30Chemel, James L Cpa QUALIFIED95Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Silvio SlusarskiAustraliaOnyama Limba PROPOSAL
Salvatore StockhamFranceXuxue Feng NEGOTIATION
Sinclair WaycottGermanyAmy Elsner NEW
Wickens NestleFranceOnyama Limba RENEWAL
Kaitlin OstroskyUnited KingdomXuxue Feng NEGOTIATION
Chavez BriddickFranceAnna Fali UNQUALIFIED
Greenwood BologniaBrazilAmy Elsner NEGOTIATION
Smith GlickIndiaXuxue Feng QUALIFIED
Stacey MacleadGermanyAnna Fali PROPOSAL
Maria MarrierFranceXuxue Feng QUALIFIED
Aruna FigeroaAustraliaBernardo Dominic QUALIFIED
Adams MorascaRussiaIoni Bowcher NEW
Cody SaylorsCanadaXuxue Feng QUALIFIED
Ashley DoeArgentinaElwin Sharvill RENEWAL
Greenwood BologniaFranceAmy Elsner PROPOSAL
Morrow RutaArgentinaOnyama Limba QUALIFIED
Mujtaba NickaFranceAnna Fali QUALIFIED
Greenwood BologniaItalyBernardo Dominic RENEWAL
Arvin AlbaresItalyAmy Elsner QUALIFIED
Costa DilliardIndiaIoni Bowcher NEW
Jones VocelkaUnited KingdomAnna Fali NEGOTIATION
Isabel BowleyJapanAsiya Javayant QUALIFIED
Wickens NestleUnited KingdomAmy Elsner PROPOSAL
Faith GillianUnited KingdomBernardo Dominic UNQUALIFIED
Misaki RoysterGermanyAnna Fali NEW
Morrow RutaFranceXuxue Feng RENEWAL
Wickens NestleCanadaStephen Shaw UNQUALIFIED
Johnson SergiCanadaBernardo Dominic NEGOTIATION
Ricardo GauchoRussiaElwin Sharvill NEGOTIATION
Mayumi KolmetzIndiaIoni Bowcher UNQUALIFIED
Aditya KuskoAustraliaElwin Sharvill NEW
Darci PoquetteAustraliaIoni Bowcher RENEWAL
Rodrigues CampainJapanOnyama Limba RENEWAL
Greenwood BologniaIndiaOnyama Limba NEGOTIATION
Chavez BriddickSpainOnyama Limba UNQUALIFIED
Leon OldroydJapanStephen Shaw QUALIFIED
Silvio SlusarskiArgentinaAmy Elsner NEGOTIATION
Smith GlickBrazilOnyama Limba RENEWAL
Kadeem FlosiGermanyElwin Sharvill NEGOTIATION
Tony FollerRussiaAmy Elsner NEW
Maria MarrierFranceAnna Fali UNQUALIFIED
Silvio SlusarskiBrazilIvan Magalhaes RENEWAL
Greenwood BologniaIndiaElwin Sharvill UNQUALIFIED
Sinclair WaycottSpainIoni Bowcher NEW
Munro FerenczGermanyIoni Bowcher PROPOSAL
Tony FollerFranceXuxue Feng UNQUALIFIED
Octavia MaletBrazilAmy Elsner UNQUALIFIED
Kaitlin OstroskyRussiaOnyama Limba QUALIFIED
Jones VocelkaCanadaOnyama Limba NEGOTIATION
Leja CaldareraBrazilOnyama Limba PROPOSAL
Frozen Columns
Name
Mujtaba Nicka
David Darakjy
Isabel Bowley
Leja Caldarera
Aruna Figeroa
Nicolas Iturbide
Rodrigues Campain
Jeanfrancois Venere
David Darakjy
Mayumi Kolmetz
Darci Poquette
Emily Whobrey
Rodrigues Campain
Aditya Kusko
Mayumi Kolmetz
Claire Tollner
Izzy Garufi
Darci Poquette
Claire Tollner
Emily Whobrey
Cody Saylors
Johnson Sergi
Antonio Caudy
Rodrigues Campain
Sinclair Waycott
Tony Foller
Julie Stenseth
Leon Oldroyd
Maisha Rulapaugh
David Darakjy
Darci Poquette
Mayumi Kolmetz
Murillo Malet
Rodrigues Campain
Jefferson Schemmer
Darci Poquette
Cody Saylors
Maisha Rulapaugh
Izzy Garufi
Johnson Sergi
Julie Stenseth
Juan Wieser
Jennifer Amigon
Tony Foller
Costa Dilliard
Smith Glick
Isabel Bowley
Munro Ferencz
Rodrigues Campain
James Butt
IdCountryDate
1000Canada2026-05-29
1001Canada2026-05-30
1002Australia2026-05-28
1003France2026-05-12
1004India2026-05-31
1005Argentina2026-05-25
1006India2026-05-28
1007Argentina2026-05-13
1008Japan2026-05-12
1009Argentina2026-05-26
1010Germany2026-05-22
1011United Kingdom2026-05-23
1012Italy2026-05-17
1013Argentina2026-06-02
1014Brazil2026-06-04
1015Russia2026-06-10
1016India2026-05-28
1017India2026-06-10
1018Japan2026-06-02
1019Spain2026-05-27
1020Brazil2026-05-18
1021Argentina2026-05-20
1022Australia2026-05-17
1023Australia2026-05-12
1024India2026-05-12
1025Canada2026-06-09
1026Brazil2026-05-23
1027United Kingdom2026-06-03
1028Australia2026-05-15
1029Japan2026-05-22
1030Russia2026-05-29
1031Italy2026-06-02
1032Spain2026-06-05
1033Canada2026-06-03
1034Brazil2026-05-25
1035Argentina2026-06-03
1036United Kingdom2026-05-30
1037Argentina2026-05-26
1038Australia2026-06-04
1039Germany2026-05-29
1040United Kingdom2026-05-12
1041India2026-05-12
1042Argentina2026-05-21
1043Canada2026-06-05
1044United Kingdom2026-05-17
1045India2026-05-29
1046Italy2026-05-27
1047Italy2026-06-02
1048Japan2026-05-27
1049Russia2026-05-22

On-Demand Data

NameIdCountryDate
Misaki Royster1000Germany2026-05-19
Arvin Albares1001Argentina2026-05-17
David Darakjy1002France2026-06-06
Aruna Figeroa1003India2026-06-05
Maria Marrier1004Italy2026-05-23
Izzy Garufi1005Argentina2026-05-23
Costa Dilliard1006India2026-05-15
Kaitlin Ostrosky1007France2026-05-28
Ashley Doe1008India2026-05-24
Rodrigues Campain1009France2026-05-31
Ricardo Gaucho1010Spain2026-05-26
Arvin Albares1011Australia2026-05-20
Munro Ferencz1012Spain2026-05-21
Smith Glick1013Spain2026-06-10
Ricardo Gaucho1014Italy2026-06-05
Johnson Sergi1015Canada2026-06-08
Leja Caldarera1016Japan2026-05-21
Jennifer Amigon1017France2026-06-02
Salvatore Stockham1018United Kingdom2026-05-12
Alejandro Perin1019Spain2026-05-23
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
James ButtCanadaBernardo Dominic PROPOSAL
Aditya KuskoAustraliaIoni Bowcher NEGOTIATION
Tony FollerGermanyAsiya Javayant QUALIFIED
Izzy GarufiRussiaAmy Elsner UNQUALIFIED
Wickens NestleItalyOnyama Limba QUALIFIED
Claire TollnerJapanBernardo Dominic UNQUALIFIED
Maria MarrierJapanAnna Fali QUALIFIED
Aika InouyeUnited KingdomAsiya Javayant NEW
Morrow RutaIndiaStephen Shaw PROPOSAL
Izzy GarufiFranceIoni Bowcher RENEWAL
Alejandro PerinSpainAnna Fali UNQUALIFIED
Ashley DoeAustraliaElwin Sharvill NEGOTIATION
Ricardo GauchoAustraliaAmy Elsner PROPOSAL
Juan WieserRussiaOnyama Limba QUALIFIED
Isabel BowleyRussiaAsiya Javayant QUALIFIED
Alejandro PerinCanadaBernardo Dominic UNQUALIFIED
Aditya KuskoRussiaBernardo Dominic UNQUALIFIED
Tony FollerBrazilIvan Magalhaes QUALIFIED
Aruna FigeroaSpainAnna Fali UNQUALIFIED
Cody SaylorsUnited KingdomAsiya Javayant RENEWAL
Arvin AlbaresAustraliaXuxue Feng NEGOTIATION
Jennifer AmigonGermanyIoni Bowcher QUALIFIED
Deepesh ChuiFranceElwin Sharvill RENEWAL
Rodrigues CampainJapanIoni Bowcher QUALIFIED
James ButtFranceAmy Elsner NEW
Maisha RulapaughSpainAsiya Javayant RENEWAL
Wickens NestleAustraliaElwin Sharvill UNQUALIFIED
Julie StensethRussiaXuxue Feng PROPOSAL
Tony FollerGermanyAnna Fali NEW
Cody SaylorsItalyXuxue Feng RENEWAL
Mujtaba NickaCanadaElwin Sharvill NEW
Maria MarrierRussiaBernardo Dominic UNQUALIFIED
Leja CaldareraJapanIvan Magalhaes NEW
Ivar PaprockiAustraliaStephen Shaw UNQUALIFIED
Ivar PaprockiGermanyAnna Fali NEW
David DarakjyFranceAsiya Javayant QUALIFIED
Maria MarrierItalyStephen Shaw NEW
Arvin AlbaresItalyIoni Bowcher UNQUALIFIED
Jeanfrancois VenereCanadaXuxue Feng RENEWAL
Rodrigues CampainAustraliaAmy Elsner 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>