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
Adams MorascaFranceOnyama Limba NEGOTIATION
Julie StensethIndiaIoni Bowcher NEGOTIATION
Silvio SlusarskiSpainAsiya Javayant UNQUALIFIED
Octavia MaletGermanyIoni Bowcher UNQUALIFIED
Deepesh ChuiItalyAsiya Javayant RENEWAL
Juan WieserCanadaAnna Fali NEGOTIATION
Smith GlickIndiaIoni Bowcher QUALIFIED
Rodrigues CampainJapanOnyama Limba NEGOTIATION
Alejandro PerinItalyXuxue Feng QUALIFIED
James ButtFranceOnyama Limba QUALIFIED
Jeanfrancois VenereArgentinaIoni Bowcher UNQUALIFIED
Arvin AlbaresUnited KingdomAmy Elsner NEGOTIATION
Juan WieserIndiaAsiya Javayant UNQUALIFIED
Rodrigues CampainJapanAnna Fali UNQUALIFIED
Munro FerenczSpainAsiya Javayant UNQUALIFIED
Costa DilliardRussiaElwin Sharvill UNQUALIFIED
Mayumi KolmetzCanadaIvan Magalhaes RENEWAL
Izzy GarufiFranceBernardo Dominic QUALIFIED
Leja CaldareraCanadaXuxue Feng QUALIFIED
Octavia MaletIndiaBernardo Dominic NEGOTIATION
Kadeem FlosiAustraliaIvan Magalhaes RENEWAL
Antonio CaudyFranceStephen Shaw NEGOTIATION
Munro FerenczSpainIoni Bowcher PROPOSAL
Isabel BowleyAustraliaAnna Fali NEGOTIATION
Aika InouyeFranceOnyama Limba RENEWAL
Jefferson SchemmerSpainElwin Sharvill RENEWAL
Octavia MaletGermanyOnyama Limba NEW
Ashley DoeUnited KingdomOnyama Limba NEW
Darci PoquetteSpainElwin Sharvill PROPOSAL
Nicolas IturbideRussiaOnyama Limba PROPOSAL
Arvin AlbaresJapanAmy Elsner PROPOSAL
Wickens NestleArgentinaElwin Sharvill RENEWAL
Johnson SergiJapanElwin Sharvill PROPOSAL
Wickens NestleRussiaAmy Elsner UNQUALIFIED
Aditya KuskoBrazilIoni Bowcher RENEWAL
Kaitlin OstroskyAustraliaAsiya Javayant NEGOTIATION
Kadeem FlosiCanadaIvan Magalhaes NEW
Wickens NestleGermanyIvan Magalhaes UNQUALIFIED
Costa DilliardItalyIoni Bowcher NEGOTIATION
Aditya KuskoArgentinaBernardo Dominic PROPOSAL
Misaki RoysterGermanyIoni Bowcher PROPOSAL
Greenwood BologniaItalyElwin Sharvill NEW
Aruna FigeroaItalyXuxue Feng NEGOTIATION
Silvio SlusarskiGermanyAsiya Javayant RENEWAL
Antonio CaudyArgentinaXuxue Feng UNQUALIFIED
Jeanfrancois VenereSpainAsiya Javayant PROPOSAL
Jones VocelkaJapanAmy Elsner RENEWAL
Julie StensethArgentinaIvan Magalhaes RENEWAL
Johnson SergiFranceXuxue Feng QUALIFIED
Darci PoquetteJapanIvan Magalhaes RENEWAL
Horizontal
NameCountryRepresentativeStatus
Leon OldroydItalyElwin Sharvill NEGOTIATION
Juan WieserCanadaElwin Sharvill UNQUALIFIED
Leon OldroydGermanyOnyama Limba NEW
Johnson SergiCanadaElwin Sharvill PROPOSAL
Ashley DoeFranceAsiya Javayant UNQUALIFIED
Sinclair WaycottUnited KingdomAmy Elsner QUALIFIED
Tony FollerJapanAsiya Javayant UNQUALIFIED
Mujtaba NickaIndiaAmy Elsner NEGOTIATION
Salvatore StockhamJapanBernardo Dominic RENEWAL
Aditya KuskoRussiaOnyama Limba NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Kaitlin OstroskyFrance2026-04-29King, Christopher A Esq UNQUALIFIED18Amy Elsner
1001Adams MorascaGermany2026-05-13Dorl, James J Esq PROPOSAL55Elwin Sharvill
1002Alejandro PerinUnited Kingdom2026-04-30Feltz Printing Service QUALIFIED3Ioni Bowcher
1003Maria MarrierItaly2026-04-21Rangoni Of Florence QUALIFIED56Elwin Sharvill
1004Juan WieserItaly2026-04-25Chapman, Ross E Esq QUALIFIED73Elwin Sharvill
1005Leon OldroydRussia2026-05-01Feiner Bros NEGOTIATION92Bernardo Dominic
1006Maria MarrierArgentina2026-04-21Chemel, James L Cpa RENEWAL29Ioni Bowcher
1007Kadeem FlosiRussia2026-05-13Feiner Bros NEW62Xuxue Feng
1008Misaki RoysterIndia2026-04-16Rangoni Of Florence NEW4Ioni Bowcher
1009James ButtItaly2026-05-10Printing Dimensions NEW96Amy Elsner
1010James ButtFrance2026-04-30Feiner Bros RENEWAL8Onyama Limba
1011Sinclair WaycottRussia2026-04-21Morlong Associates UNQUALIFIED53Ioni Bowcher
1012Jeanfrancois VenereJapan2026-04-19Commercial Press UNQUALIFIED43Onyama Limba
1013Mujtaba NickaGermany2026-04-21Rangoni Of Florence NEW70Amy Elsner
1014Izzy GarufiFrance2026-05-07Chanay, Jeffrey A Esq QUALIFIED35Bernardo Dominic
1015Kaitlin OstroskyAustralia2026-04-24Chanay, Jeffrey A Esq QUALIFIED51Bernardo Dominic
1016Kaitlin OstroskyCanada2026-04-20Truhlar And Truhlar Attys NEGOTIATION14Anna Fali
1017Costa DilliardUnited Kingdom2026-05-06Buckley Miller Wright NEW20Stephen Shaw
1018Julie StensethUnited Kingdom2026-04-16Chapman, Ross E Esq UNQUALIFIED64Anna Fali
1019Isabel BowleyBrazil2026-05-07Dorl, James J Esq NEGOTIATION1Amy Elsner
1020Johnson SergiSpain2026-04-14Feltz Printing Service RENEWAL31Stephen Shaw
1021Darci PoquetteSpain2026-05-02Truhlar And Truhlar Attys QUALIFIED30Ioni Bowcher
1022Aika InouyeItaly2026-04-24Chemel, James L Cpa QUALIFIED2Onyama Limba
1023Adams MorascaSpain2026-05-06Rangoni Of Florence PROPOSAL17Asiya Javayant
1024Nicolas IturbideUnited Kingdom2026-04-15Morlong Associates QUALIFIED84Ioni Bowcher
1025Sinclair WaycottGermany2026-05-08Dorl, James J Esq RENEWAL19Asiya Javayant
1026Clifford RimCanada2026-04-22Feltz Printing Service PROPOSAL59Onyama Limba
1027Kaitlin OstroskyItaly2026-04-25Truhlar And Truhlar Attys QUALIFIED41Asiya Javayant
1028Mayumi KolmetzUnited Kingdom2026-04-22King, Christopher A Esq QUALIFIED2Asiya Javayant
1029Izzy GarufiGermany2026-05-03Rousseaux, Michael Esq PROPOSAL70Elwin Sharvill
1030Silvio SlusarskiCanada2026-05-09Rangoni Of Florence NEW84Asiya Javayant
1031Stacey MacleadGermany2026-05-13Morlong Associates QUALIFIED23Elwin Sharvill
1032Antonio CaudyFrance2026-05-01Truhlar And Truhlar Attys NEGOTIATION93Asiya Javayant
1033Tony FollerItaly2026-05-10Chanay, Jeffrey A Esq PROPOSAL18Amy Elsner
1034Smith GlickUnited Kingdom2026-05-01Commercial Press QUALIFIED6Elwin Sharvill
1035Kaitlin OstroskyIndia2026-05-01Feltz Printing Service RENEWAL44Xuxue Feng
1036Greenwood BologniaFrance2026-04-19Rousseaux, Michael Esq PROPOSAL36Xuxue Feng
1037Greenwood BologniaUnited Kingdom2026-05-13Chemel, James L Cpa UNQUALIFIED68Elwin Sharvill
1038Stacey MacleadUnited Kingdom2026-05-01Printing Dimensions RENEWAL44Stephen Shaw
1039Smith GlickJapan2026-04-29Feltz Printing Service RENEWAL63Ioni Bowcher
1040Juan WieserArgentina2026-05-11Commercial Press UNQUALIFIED14Onyama Limba
1041Jefferson SchemmerBrazil2026-05-03Buckley Miller Wright RENEWAL79Anna Fali
1042Stacey MacleadArgentina2026-05-01Rousseaux, Michael Esq QUALIFIED87Asiya Javayant
1043Francesco ShinkoCanada2026-05-04Chapman, Ross E Esq PROPOSAL56Elwin Sharvill
1044Emily WhobreyAustralia2026-04-26Commercial Press QUALIFIED14Stephen Shaw
1045Munro FerenczRussia2026-04-18Buckley Miller Wright NEGOTIATION60Xuxue Feng
1046Claire TollnerArgentina2026-04-18Chapman, Ross E Esq RENEWAL64Stephen Shaw
1047Octavia MaletAustralia2026-04-16Chemel, James L Cpa NEW32Anna Fali
1048Aditya KuskoFrance2026-04-27Feltz Printing Service RENEWAL8Asiya Javayant
1049Deepesh ChuiFrance2026-04-16Feiner Bros QUALIFIED79Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Kadeem FlosiUnited KingdomAnna Fali PROPOSAL
Jones VocelkaItalyBernardo Dominic PROPOSAL
Leja CaldareraFranceIvan Magalhaes UNQUALIFIED
Leon OldroydGermanyIoni Bowcher UNQUALIFIED
Munro FerenczIndiaOnyama Limba NEW
Julie StensethRussiaStephen Shaw RENEWAL
Aika InouyeFranceXuxue Feng UNQUALIFIED
Costa DilliardSpainXuxue Feng QUALIFIED
Emily WhobreyIndiaAsiya Javayant PROPOSAL
Maria MarrierJapanElwin Sharvill QUALIFIED
David DarakjyUnited KingdomIvan Magalhaes PROPOSAL
Costa DilliardArgentinaElwin Sharvill UNQUALIFIED
Tony FollerItalyIvan Magalhaes QUALIFIED
Adams MorascaBrazilElwin Sharvill UNQUALIFIED
Clifford RimRussiaXuxue Feng PROPOSAL
Leja CaldareraJapanElwin Sharvill UNQUALIFIED
Emily WhobreyRussiaBernardo Dominic NEGOTIATION
Leja CaldareraUnited KingdomAsiya Javayant UNQUALIFIED
Morrow RutaSpainAsiya Javayant NEGOTIATION
Antonio CaudyAustraliaAsiya Javayant UNQUALIFIED
Smith GlickFranceAnna Fali NEW
Tony FollerCanadaAsiya Javayant RENEWAL
David DarakjyGermanyIvan Magalhaes RENEWAL
Morrow RutaArgentinaOnyama Limba NEGOTIATION
Maisha RulapaughRussiaXuxue Feng NEGOTIATION
Adams MorascaItalyBernardo Dominic NEGOTIATION
Francesco ShinkoUnited KingdomAsiya Javayant QUALIFIED
Jefferson SchemmerCanadaStephen Shaw PROPOSAL
Silvio SlusarskiArgentinaAmy Elsner PROPOSAL
Chavez BriddickUnited KingdomOnyama Limba NEGOTIATION
Darci PoquetteAustraliaElwin Sharvill QUALIFIED
Leja CaldareraUnited KingdomIvan Magalhaes QUALIFIED
Aditya KuskoFranceAnna Fali RENEWAL
Emily WhobreyRussiaBernardo Dominic UNQUALIFIED
Ashley DoeArgentinaStephen Shaw NEGOTIATION
Deepesh ChuiJapanStephen Shaw NEW
Misaki RoysterArgentinaAmy Elsner QUALIFIED
Antonio CaudyIndiaOnyama Limba NEW
Tony FollerBrazilBernardo Dominic RENEWAL
Salvatore StockhamJapanAsiya Javayant UNQUALIFIED
Juan WieserSpainOnyama Limba NEW
Jennifer AmigonGermanyStephen Shaw NEGOTIATION
Chavez BriddickJapanStephen Shaw NEGOTIATION
Ricardo GauchoRussiaAmy Elsner PROPOSAL
Claire TollnerSpainIvan Magalhaes NEGOTIATION
Sinclair WaycottFranceBernardo Dominic RENEWAL
Octavia MaletItalyXuxue Feng PROPOSAL
Tony FollerSpainBernardo Dominic QUALIFIED
Maria MarrierJapanIoni Bowcher NEGOTIATION
Morrow RutaArgentinaIvan Magalhaes PROPOSAL
Frozen Columns
Name
Ashley Doe
Rodrigues Campain
Juan Wieser
Ivar Paprocki
Maria Marrier
Mayumi Kolmetz
Jennifer Amigon
Octavia Malet
Isabel Bowley
James Butt
Darci Poquette
Nicolas Iturbide
Morrow Ruta
Greenwood Bolognia
Greenwood Bolognia
Claire Tollner
Julie Stenseth
Faith Gillian
Alejandro Perin
Isabel Bowley
Sinclair Waycott
Ashley Doe
Octavia Malet
Mujtaba Nicka
Stacey Maclead
Octavia Malet
Jones Vocelka
Jeanfrancois Venere
Deepesh Chui
Salvatore Stockham
Mayumi Kolmetz
Johnson Sergi
Tony Foller
Darci Poquette
Juan Wieser
Smith Glick
Ivar Paprocki
Faith Gillian
Greenwood Bolognia
Faith Gillian
Costa Dilliard
Costa Dilliard
Tony Foller
Chavez Briddick
Adams Morasca
Smith Glick
Murillo Malet
Maria Marrier
Faith Gillian
Claire Tollner
IdCountryDate
1000Spain2026-05-11
1001Canada2026-04-22
1002Canada2026-05-10
1003Canada2026-04-28
1004France2026-05-04
1005Germany2026-05-08
1006France2026-04-26
1007Italy2026-04-20
1008Argentina2026-04-19
1009Spain2026-05-01
1010Russia2026-05-11
1011Germany2026-04-26
1012France2026-04-30
1013Argentina2026-04-26
1014France2026-04-19
1015France2026-04-29
1016Germany2026-04-19
1017Australia2026-05-11
1018Brazil2026-05-03
1019Japan2026-05-03
1020Spain2026-04-19
1021Spain2026-05-12
1022Italy2026-04-21
1023United Kingdom2026-04-17
1024France2026-04-18
1025Germany2026-05-02
1026Italy2026-05-06
1027Australia2026-04-30
1028Brazil2026-05-11
1029France2026-05-09
1030United Kingdom2026-05-11
1031Spain2026-04-30
1032Brazil2026-04-20
1033Japan2026-05-02
1034Brazil2026-05-09
1035Germany2026-05-11
1036Canada2026-04-25
1037Russia2026-04-25
1038Spain2026-05-05
1039Brazil2026-04-19
1040Argentina2026-05-05
1041Japan2026-05-04
1042Spain2026-05-12
1043Germany2026-05-13
1044India2026-04-27
1045France2026-04-26
1046Brazil2026-05-01
1047Spain2026-04-18
1048France2026-05-12
1049Italy2026-04-19

On-Demand Data

NameIdCountryDate
Alejandro Perin1000Spain2026-04-15
Munro Ferencz1001Russia2026-04-29
Mujtaba Nicka1002Italy2026-05-12
Costa Dilliard1003Italy2026-04-18
Mayumi Kolmetz1004Italy2026-05-08
Izzy Garufi1005Italy2026-04-14
Francesco Shinko1006Argentina2026-04-21
Maisha Rulapaugh1007Russia2026-05-01
Smith Glick1008Brazil2026-04-18
Darci Poquette1009India2026-04-28
Maisha Rulapaugh1010Russia2026-04-21
Francesco Shinko1011United Kingdom2026-04-28
Jones Vocelka1012Germany2026-04-20
Silvio Slusarski1013Spain2026-04-18
Francesco Shinko1014United Kingdom2026-04-24
Deepesh Chui1015Japan2026-04-28
Jones Vocelka1016Argentina2026-05-05
Rodrigues Campain1017Spain2026-05-01
Smith Glick1018Italy2026-05-05
Munro Ferencz1019Canada2026-05-10
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Clifford RimUnited KingdomElwin Sharvill PROPOSAL
Aditya KuskoFranceIoni Bowcher RENEWAL
Ricardo GauchoArgentinaStephen Shaw UNQUALIFIED
Jennifer AmigonJapanIoni Bowcher QUALIFIED
Aika InouyeAustraliaBernardo Dominic QUALIFIED
Mujtaba NickaIndiaOnyama Limba NEGOTIATION
Greenwood BologniaItalyAsiya Javayant PROPOSAL
Stacey MacleadAustraliaIoni Bowcher NEGOTIATION
Tony FollerSpainIoni Bowcher UNQUALIFIED
Aruna FigeroaArgentinaStephen Shaw NEGOTIATION
Tony FollerSpainIvan Magalhaes QUALIFIED
James ButtItalyIoni Bowcher RENEWAL
Jefferson SchemmerAustraliaAsiya Javayant PROPOSAL
Leon OldroydGermanyXuxue Feng NEGOTIATION
Aruna FigeroaCanadaBernardo Dominic RENEWAL
Greenwood BologniaGermanyAmy Elsner QUALIFIED
Ivar PaprockiIndiaAnna Fali RENEWAL
Greenwood BologniaIndiaAmy Elsner QUALIFIED
Jefferson SchemmerAustraliaBernardo Dominic UNQUALIFIED
Emily WhobreyFranceIoni Bowcher QUALIFIED
Aditya KuskoGermanyElwin Sharvill RENEWAL
Juan WieserCanadaAmy Elsner NEW
Izzy GarufiGermanyIoni Bowcher RENEWAL
Greenwood BologniaIndiaIoni Bowcher PROPOSAL
Stacey MacleadFranceOnyama Limba RENEWAL
Izzy GarufiGermanyXuxue Feng NEGOTIATION
Izzy GarufiRussiaAnna Fali PROPOSAL
Morrow RutaGermanyElwin Sharvill UNQUALIFIED
Juan WieserBrazilOnyama Limba NEGOTIATION
James ButtArgentinaBernardo Dominic PROPOSAL
Silvio SlusarskiAustraliaElwin Sharvill RENEWAL
Tony FollerFranceIvan Magalhaes UNQUALIFIED
David DarakjyGermanyAsiya Javayant PROPOSAL
Munro FerenczSpainElwin Sharvill PROPOSAL
Nicolas IturbideGermanyBernardo Dominic UNQUALIFIED
Silvio SlusarskiItalyBernardo Dominic PROPOSAL
Jefferson SchemmerAustraliaAmy Elsner NEGOTIATION
Kaitlin OstroskyAustraliaAnna Fali NEW
Wickens NestleItalyAnna Fali PROPOSAL
Antonio CaudyBrazilIvan Magalhaes QUALIFIED

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