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 DarakjyAustraliaBernardo Dominic PROPOSAL
Misaki RoysterBrazilIoni Bowcher PROPOSAL
Jefferson SchemmerFranceElwin Sharvill NEW
Jefferson SchemmerGermanyElwin Sharvill NEGOTIATION
Julie StensethRussiaXuxue Feng RENEWAL
Emily WhobreyJapanAmy Elsner NEGOTIATION
Deepesh ChuiRussiaAsiya Javayant UNQUALIFIED
Munro FerenczArgentinaAmy Elsner QUALIFIED
Jeanfrancois VenereJapanIoni Bowcher NEGOTIATION
Jones VocelkaRussiaElwin Sharvill NEGOTIATION
Nicolas IturbideBrazilOnyama Limba QUALIFIED
Emily WhobreyRussiaBernardo Dominic PROPOSAL
Ivar PaprockiRussiaElwin Sharvill NEGOTIATION
Murillo MaletArgentinaAsiya Javayant QUALIFIED
Darci PoquetteCanadaAmy Elsner UNQUALIFIED
Maisha RulapaughSpainAnna Fali RENEWAL
Greenwood BologniaItalyAsiya Javayant PROPOSAL
Juan WieserItalyElwin Sharvill NEGOTIATION
Deepesh ChuiBrazilIoni Bowcher NEGOTIATION
Jennifer AmigonGermanyStephen Shaw NEGOTIATION
Leja CaldareraSpainIvan Magalhaes UNQUALIFIED
Francesco ShinkoBrazilOnyama Limba UNQUALIFIED
Deepesh ChuiJapanOnyama Limba UNQUALIFIED
Ashley DoeUnited KingdomOnyama Limba QUALIFIED
Smith GlickBrazilOnyama Limba PROPOSAL
Jennifer AmigonJapanBernardo Dominic NEW
Darci PoquetteBrazilXuxue Feng PROPOSAL
Jefferson SchemmerJapanIoni Bowcher NEW
Jennifer AmigonJapanOnyama Limba UNQUALIFIED
Ricardo GauchoJapanIoni Bowcher NEW
Clifford RimRussiaAnna Fali NEGOTIATION
Jefferson SchemmerArgentinaIoni Bowcher QUALIFIED
Kadeem FlosiAustraliaStephen Shaw QUALIFIED
Mayumi KolmetzItalyIoni Bowcher RENEWAL
Kaitlin OstroskyAustraliaIvan Magalhaes RENEWAL
Misaki RoysterJapanIoni Bowcher UNQUALIFIED
Arvin AlbaresGermanyElwin Sharvill UNQUALIFIED
Maisha RulapaughIndiaAsiya Javayant NEGOTIATION
David DarakjyGermanyOnyama Limba NEW
Johnson SergiAustraliaIoni Bowcher PROPOSAL
Costa DilliardSpainOnyama Limba RENEWAL
Johnson SergiFranceAmy Elsner QUALIFIED
Costa DilliardFranceBernardo Dominic UNQUALIFIED
Izzy GarufiItalyStephen Shaw UNQUALIFIED
David DarakjyUnited KingdomElwin Sharvill QUALIFIED
Costa DilliardGermanyIoni Bowcher UNQUALIFIED
Maria MarrierRussiaIoni Bowcher UNQUALIFIED
Alejandro PerinRussiaStephen Shaw NEW
Mayumi KolmetzAustraliaAmy Elsner QUALIFIED
Arvin AlbaresArgentinaAsiya Javayant NEW
Horizontal
NameCountryRepresentativeStatus
Jennifer AmigonRussiaElwin Sharvill NEW
Silvio SlusarskiGermanyBernardo Dominic NEW
Silvio SlusarskiJapanStephen Shaw UNQUALIFIED
Aditya KuskoIndiaAmy Elsner RENEWAL
Mayumi KolmetzBrazilXuxue Feng PROPOSAL
Maisha RulapaughIndiaAsiya Javayant QUALIFIED
Johnson SergiAustraliaAsiya Javayant PROPOSAL
Jeanfrancois VenereBrazilStephen Shaw PROPOSAL
Greenwood BologniaItalyIoni Bowcher QUALIFIED
Morrow RutaIndiaAnna Fali QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Greenwood BologniaRussia2026-04-04Rangoni Of Florence RENEWAL93Asiya Javayant
1001Costa DilliardArgentina2026-04-10Feiner Bros PROPOSAL51Anna Fali
1002Julie StensethJapan2026-04-06Rangoni Of Florence UNQUALIFIED44Xuxue Feng
1003Alejandro PerinFrance2026-04-21Rousseaux, Michael Esq NEGOTIATION29Bernardo Dominic
1004Maisha RulapaughItaly2026-04-22Buckley Miller Wright PROPOSAL77Bernardo Dominic
1005Izzy GarufiAustralia2026-04-11Truhlar And Truhlar Attys NEGOTIATION68Xuxue Feng
1006Kaitlin OstroskyIndia2026-03-29Rousseaux, Michael Esq NEGOTIATION59Xuxue Feng
1007Izzy GarufiCanada2026-04-25Chemel, James L Cpa NEW98Elwin Sharvill
1008Munro FerenczCanada2026-04-06Rangoni Of Florence UNQUALIFIED15Anna Fali
1009Sinclair WaycottAustralia2026-04-03Benton, John B Jr PROPOSAL5Asiya Javayant
1010Silvio SlusarskiBrazil2026-04-18Benton, John B Jr NEGOTIATION47Xuxue Feng
1011Stacey MacleadBrazil2026-04-05Chemel, James L Cpa NEGOTIATION94Bernardo Dominic
1012Juan WieserFrance2026-04-23Feltz Printing Service NEGOTIATION37Ioni Bowcher
1013Ashley DoeItaly2026-04-19Rangoni Of Florence NEGOTIATION46Onyama Limba
1014Izzy GarufiCanada2026-04-12Rousseaux, Michael Esq PROPOSAL79Xuxue Feng
1015Nicolas IturbideFrance2026-04-19Morlong Associates NEGOTIATION54Stephen Shaw
1016Morrow RutaJapan2026-04-23King, Christopher A Esq QUALIFIED80Bernardo Dominic
1017Deepesh ChuiCanada2026-04-26Truhlar And Truhlar Attys QUALIFIED74Onyama Limba
1018Stacey MacleadArgentina2026-03-31Buckley Miller Wright UNQUALIFIED82Amy Elsner
1019Sinclair WaycottIndia2026-04-06Rousseaux, Michael Esq NEGOTIATION4Amy Elsner
1020Johnson SergiArgentina2026-03-30Rousseaux, Michael Esq NEW84Elwin Sharvill
1021Salvatore StockhamItaly2026-04-23King, Christopher A Esq NEGOTIATION72Stephen Shaw
1022Maisha RulapaughIndia2026-04-11Benton, John B Jr RENEWAL21Anna Fali
1023Jennifer AmigonJapan2026-04-01Benton, John B Jr UNQUALIFIED86Ioni Bowcher
1024Emily WhobreyCanada2026-04-21Chapman, Ross E Esq NEGOTIATION44Asiya Javayant
1025Izzy GarufiAustralia2026-04-23Chanay, Jeffrey A Esq PROPOSAL5Asiya Javayant
1026Emily WhobreyIndia2026-04-22Feltz Printing Service QUALIFIED51Xuxue Feng
1027Kadeem FlosiGermany2026-03-31Morlong Associates PROPOSAL4Bernardo Dominic
1028Jennifer AmigonIndia2026-04-21Dorl, James J Esq PROPOSAL6Ioni Bowcher
1029Jeanfrancois VenereFrance2026-03-29Commercial Press NEW2Stephen Shaw
1030Jeanfrancois VenereFrance2026-04-22Chapman, Ross E Esq PROPOSAL38Amy Elsner
1031David DarakjyItaly2026-04-13Benton, John B Jr NEW35Ivan Magalhaes
1032Sinclair WaycottAustralia2026-04-18Chapman, Ross E Esq PROPOSAL72Amy Elsner
1033Greenwood BologniaUnited Kingdom2026-04-10Truhlar And Truhlar Attys RENEWAL60Amy Elsner
1034Leon OldroydRussia2026-03-29Rousseaux, Michael Esq PROPOSAL63Ioni Bowcher
1035Ivar PaprockiAustralia2026-04-02Feiner Bros RENEWAL28Amy Elsner
1036Nicolas IturbideJapan2026-04-20Commercial Press PROPOSAL41Xuxue Feng
1037Jefferson SchemmerItaly2026-04-25Feltz Printing Service NEGOTIATION58Stephen Shaw
1038Clifford RimRussia2026-04-13Morlong Associates QUALIFIED98Stephen Shaw
1039Kaitlin OstroskyRussia2026-04-02Morlong Associates QUALIFIED99Asiya Javayant
1040Kaitlin OstroskyFrance2026-04-22Buckley Miller Wright NEW48Ivan Magalhaes
1041Wickens NestleAustralia2026-03-30Chemel, James L Cpa RENEWAL55Ivan Magalhaes
1042Greenwood BologniaAustralia2026-04-09King, Christopher A Esq NEGOTIATION41Elwin Sharvill
1043Leon OldroydArgentina2026-04-05Buckley Miller Wright NEW1Anna Fali
1044Clifford RimSpain2026-04-19King, Christopher A Esq QUALIFIED10Amy Elsner
1045Aika InouyeAustralia2026-03-31Rangoni Of Florence PROPOSAL2Ivan Magalhaes
1046Emily WhobreyUnited Kingdom2026-04-14Buckley Miller Wright NEGOTIATION55Ivan Magalhaes
1047Claire TollnerAustralia2026-04-06Benton, John B Jr PROPOSAL98Xuxue Feng
1048Stacey MacleadRussia2026-04-10Rangoni Of Florence UNQUALIFIED38Elwin Sharvill
1049Aika InouyeBrazil2026-04-05Rousseaux, Michael Esq UNQUALIFIED83Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Maisha RulapaughRussiaElwin Sharvill NEGOTIATION
Sinclair WaycottFranceStephen Shaw RENEWAL
Maria MarrierCanadaAnna Fali PROPOSAL
Kadeem FlosiAustraliaStephen Shaw QUALIFIED
Clifford RimBrazilStephen Shaw UNQUALIFIED
Octavia MaletAustraliaAnna Fali RENEWAL
Mayumi KolmetzArgentinaIoni Bowcher NEW
Arvin AlbaresFranceAmy Elsner NEGOTIATION
Jennifer AmigonSpainStephen Shaw PROPOSAL
Cody SaylorsBrazilAmy Elsner NEGOTIATION
Nicolas IturbideCanadaStephen Shaw UNQUALIFIED
Mujtaba NickaGermanyStephen Shaw QUALIFIED
Octavia MaletFranceIvan Magalhaes NEGOTIATION
Ricardo GauchoIndiaAnna Fali NEGOTIATION
Greenwood BologniaSpainElwin Sharvill PROPOSAL
Nicolas IturbideIndiaAsiya Javayant PROPOSAL
Arvin AlbaresGermanyOnyama Limba RENEWAL
Murillo MaletRussiaAsiya Javayant QUALIFIED
Rodrigues CampainJapanAmy Elsner UNQUALIFIED
Jennifer AmigonItalyAsiya Javayant NEGOTIATION
Jefferson SchemmerIndiaOnyama Limba UNQUALIFIED
Johnson SergiBrazilElwin Sharvill NEGOTIATION
Kadeem FlosiAustraliaElwin Sharvill NEGOTIATION
Jennifer AmigonFranceAnna Fali UNQUALIFIED
Silvio SlusarskiFranceBernardo Dominic NEGOTIATION
Arvin AlbaresRussiaOnyama Limba NEGOTIATION
Mayumi KolmetzItalyAsiya Javayant NEGOTIATION
David DarakjySpainAnna Fali UNQUALIFIED
Emily WhobreyCanadaElwin Sharvill PROPOSAL
Darci PoquetteSpainElwin Sharvill NEGOTIATION
Ashley DoeUnited KingdomAsiya Javayant QUALIFIED
Misaki RoysterUnited KingdomAsiya Javayant QUALIFIED
Jones VocelkaJapanAsiya Javayant UNQUALIFIED
Arvin AlbaresCanadaAsiya Javayant NEGOTIATION
Julie StensethArgentinaStephen Shaw NEGOTIATION
Jennifer AmigonUnited KingdomBernardo Dominic NEGOTIATION
Maria MarrierFranceAmy Elsner PROPOSAL
Johnson SergiIndiaStephen Shaw NEW
Aditya KuskoIndiaAnna Fali RENEWAL
Chavez BriddickItalyOnyama Limba RENEWAL
Kadeem FlosiCanadaAnna Fali UNQUALIFIED
Octavia MaletSpainIoni Bowcher RENEWAL
Greenwood BologniaRussiaAsiya Javayant PROPOSAL
Mujtaba NickaRussiaIoni Bowcher UNQUALIFIED
David DarakjyFranceAsiya Javayant NEW
Izzy GarufiCanadaIoni Bowcher UNQUALIFIED
Nicolas IturbideArgentinaAmy Elsner NEW
Kaitlin OstroskyGermanyStephen Shaw NEW
Faith GillianIndiaIoni Bowcher RENEWAL
Rodrigues CampainSpainBernardo Dominic PROPOSAL
Frozen Columns
Name
David Darakjy
Misaki Royster
Clifford Rim
Chavez Briddick
Ashley Doe
Nicolas Iturbide
Ricardo Gaucho
Kadeem Flosi
Morrow Ruta
Clifford Rim
Wickens Nestle
Kaitlin Ostrosky
Alejandro Perin
Ivar Paprocki
Aditya Kusko
Silvio Slusarski
Ivar Paprocki
Arvin Albares
Izzy Garufi
Cody Saylors
Antonio Caudy
Julie Stenseth
Antonio Caudy
Kadeem Flosi
Murillo Malet
Francesco Shinko
Ivar Paprocki
Chavez Briddick
Alejandro Perin
Emily Whobrey
Silvio Slusarski
Aditya Kusko
Julie Stenseth
Izzy Garufi
Tony Foller
Ashley Doe
David Darakjy
Faith Gillian
Rodrigues Campain
Deepesh Chui
Kadeem Flosi
Francesco Shinko
Salvatore Stockham
Kadeem Flosi
Cody Saylors
Ashley Doe
Tony Foller
Deepesh Chui
Jennifer Amigon
Claire Tollner
IdCountryDate
1000Germany2026-04-16
1001United Kingdom2026-03-29
1002Australia2026-04-22
1003Australia2026-04-25
1004Germany2026-04-15
1005India2026-04-08
1006Italy2026-04-06
1007Spain2026-04-08
1008Russia2026-03-31
1009Germany2026-04-13
1010Argentina2026-04-17
1011Russia2026-04-13
1012Spain2026-04-21
1013United Kingdom2026-04-10
1014Canada2026-04-24
1015Italy2026-04-08
1016Germany2026-04-25
1017Germany2026-04-19
1018Argentina2026-04-16
1019Italy2026-04-06
1020Australia2026-04-20
1021Spain2026-03-30
1022France2026-04-08
1023France2026-04-11
1024United Kingdom2026-04-21
1025Argentina2026-04-02
1026India2026-04-23
1027United Kingdom2026-04-10
1028Italy2026-04-17
1029Germany2026-04-18
1030France2026-04-18
1031Argentina2026-04-21
1032Brazil2026-04-14
1033Australia2026-04-10
1034United Kingdom2026-04-25
1035Germany2026-03-29
1036Brazil2026-04-14
1037Brazil2026-04-16
1038India2026-04-20
1039Germany2026-03-31
1040France2026-04-24
1041Spain2026-03-29
1042Australia2026-03-31
1043Germany2026-03-28
1044Russia2026-04-18
1045Japan2026-03-29
1046Brazil2026-04-02
1047Canada2026-04-18
1048United Kingdom2026-04-22
1049Brazil2026-03-31

On-Demand Data

NameIdCountryDate
Isabel Bowley1000France2026-04-19
James Butt1001Italy2026-04-04
Ashley Doe1002Argentina2026-04-12
Morrow Ruta1003Italy2026-04-01
Ashley Doe1004Germany2026-04-19
Tony Foller1005Australia2026-04-16
Jones Vocelka1006Spain2026-04-26
Nicolas Iturbide1007France2026-04-22
Stacey Maclead1008Russia2026-04-25
Antonio Caudy1009Italy2026-04-18
Leja Caldarera1010Brazil2026-04-15
Faith Gillian1011Germany2026-04-12
Jones Vocelka1012Australia2026-04-07
Izzy Garufi1013Australia2026-04-18
Chavez Briddick1014Brazil2026-04-01
Jefferson Schemmer1015United Kingdom2026-03-28
Leon Oldroyd1016France2026-04-22
Leja Caldarera1017India2026-04-24
Emily Whobrey1018Australia2026-03-30
Sinclair Waycott1019Italy2026-04-26
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Silvio SlusarskiFranceStephen Shaw NEGOTIATION
David DarakjyRussiaStephen Shaw QUALIFIED
Jefferson SchemmerSpainStephen Shaw NEW
Claire TollnerCanadaAnna Fali NEW
Johnson SergiItalyOnyama Limba PROPOSAL
Maria MarrierUnited KingdomAmy Elsner NEW
Jennifer AmigonSpainIoni Bowcher NEGOTIATION
Leon OldroydRussiaAmy Elsner UNQUALIFIED
Silvio SlusarskiFranceIoni Bowcher PROPOSAL
Greenwood BologniaRussiaIoni Bowcher NEW
Deepesh ChuiUnited KingdomAsiya Javayant RENEWAL
Morrow RutaFranceElwin Sharvill UNQUALIFIED
James ButtUnited KingdomBernardo Dominic QUALIFIED
Aika InouyeUnited KingdomBernardo Dominic PROPOSAL
Kaitlin OstroskyIndiaAmy Elsner NEW
Greenwood BologniaArgentinaAnna Fali NEW
Jones VocelkaUnited KingdomElwin Sharvill NEW
Jefferson SchemmerUnited KingdomXuxue Feng RENEWAL
Deepesh ChuiIndiaElwin Sharvill QUALIFIED
Octavia MaletItalyAnna Fali RENEWAL
Izzy GarufiRussiaOnyama Limba NEGOTIATION
Darci PoquetteUnited KingdomIvan Magalhaes UNQUALIFIED
Isabel BowleyGermanyStephen Shaw QUALIFIED
Sinclair WaycottSpainIvan Magalhaes RENEWAL
Aditya KuskoGermanyElwin Sharvill QUALIFIED
Jefferson SchemmerUnited KingdomIvan Magalhaes NEGOTIATION
Ivar PaprockiRussiaIvan Magalhaes QUALIFIED
Mayumi KolmetzGermanyXuxue Feng PROPOSAL
Aika InouyeBrazilAmy Elsner NEGOTIATION
Francesco ShinkoAustraliaAsiya Javayant RENEWAL
Sinclair WaycottAustraliaAmy Elsner QUALIFIED
Jennifer AmigonUnited KingdomElwin Sharvill QUALIFIED
James ButtItalyAmy Elsner PROPOSAL
Cody SaylorsAustraliaAmy Elsner UNQUALIFIED
Munro FerenczSpainIoni Bowcher QUALIFIED
Ashley DoeUnited KingdomXuxue Feng PROPOSAL
Murillo MaletRussiaIoni Bowcher NEW
Maisha RulapaughAustraliaIvan Magalhaes QUALIFIED
Leon OldroydFranceElwin Sharvill NEW
Ricardo GauchoBrazilOnyama Limba PROPOSAL

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