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
James ButtFranceBernardo Dominic NEGOTIATION
Stacey MacleadRussiaIvan Magalhaes RENEWAL
Jones VocelkaAustraliaAsiya Javayant RENEWAL
Mujtaba NickaRussiaElwin Sharvill PROPOSAL
Octavia MaletItalyAnna Fali UNQUALIFIED
Leon OldroydIndiaIoni Bowcher QUALIFIED
Morrow RutaJapanStephen Shaw UNQUALIFIED
Ivar PaprockiFranceStephen Shaw NEGOTIATION
Tony FollerArgentinaXuxue Feng UNQUALIFIED
Smith GlickFranceAnna Fali UNQUALIFIED
Sinclair WaycottItalyXuxue Feng NEGOTIATION
Leon OldroydAustraliaAsiya Javayant QUALIFIED
Sinclair WaycottFranceStephen Shaw NEW
Chavez BriddickFranceIoni Bowcher NEW
Silvio SlusarskiJapanIvan Magalhaes QUALIFIED
Ashley DoeIndiaStephen Shaw RENEWAL
Leja CaldareraItalyIvan Magalhaes UNQUALIFIED
Isabel BowleyCanadaElwin Sharvill PROPOSAL
Octavia MaletJapanAnna Fali NEW
Juan WieserIndiaAnna Fali NEW
Morrow RutaAustraliaIvan Magalhaes RENEWAL
Leon OldroydCanadaBernardo Dominic QUALIFIED
Smith GlickSpainAnna Fali NEW
Cody SaylorsArgentinaStephen Shaw PROPOSAL
Deepesh ChuiAustraliaElwin Sharvill UNQUALIFIED
Jennifer AmigonUnited KingdomAnna Fali UNQUALIFIED
Antonio CaudyFranceAsiya Javayant NEW
Emily WhobreyArgentinaElwin Sharvill NEGOTIATION
Rodrigues CampainRussiaIvan Magalhaes NEW
Clifford RimAustraliaBernardo Dominic RENEWAL
Jeanfrancois VenereBrazilIoni Bowcher UNQUALIFIED
Murillo MaletJapanAsiya Javayant NEW
Murillo MaletJapanStephen Shaw RENEWAL
Julie StensethSpainAmy Elsner PROPOSAL
Misaki RoysterUnited KingdomXuxue Feng NEW
Smith GlickItalyAsiya Javayant UNQUALIFIED
Isabel BowleyJapanAmy Elsner NEW
Arvin AlbaresFranceBernardo Dominic NEGOTIATION
Juan WieserJapanOnyama Limba PROPOSAL
Arvin AlbaresBrazilBernardo Dominic PROPOSAL
Jefferson SchemmerItalyXuxue Feng PROPOSAL
Octavia MaletIndiaElwin Sharvill NEGOTIATION
Aruna FigeroaSpainXuxue Feng NEW
Kaitlin OstroskyIndiaIvan Magalhaes NEW
Jeanfrancois VenereCanadaIvan Magalhaes RENEWAL
Adams MorascaArgentinaIoni Bowcher UNQUALIFIED
Clifford RimGermanyIvan Magalhaes NEW
Juan WieserSpainStephen Shaw NEW
Cody SaylorsCanadaAmy Elsner NEGOTIATION
Wickens NestleJapanAsiya Javayant UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Ivar PaprockiFranceBernardo Dominic QUALIFIED
Jefferson SchemmerFranceOnyama Limba NEGOTIATION
Salvatore StockhamBrazilIoni Bowcher NEGOTIATION
Ricardo GauchoGermanyXuxue Feng RENEWAL
Misaki RoysterUnited KingdomElwin Sharvill RENEWAL
Jeanfrancois VenereFranceXuxue Feng QUALIFIED
Arvin AlbaresAustraliaStephen Shaw NEW
Darci PoquetteItalyAmy Elsner NEW
Darci PoquetteUnited KingdomXuxue Feng NEGOTIATION
Kadeem FlosiItalyXuxue Feng UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Chavez BriddickAustralia2026-05-25Chemel, James L Cpa NEW82Bernardo Dominic
1001Jefferson SchemmerItaly2026-05-26Buckley Miller Wright NEW25Amy Elsner
1002Darci PoquetteJapan2026-06-04Dorl, James J Esq RENEWAL49Ioni Bowcher
1003Ashley DoeIndia2026-05-21Feiner Bros NEGOTIATION6Ivan Magalhaes
1004Salvatore StockhamUnited Kingdom2026-06-05Buckley Miller Wright NEW70Xuxue Feng
1005Wickens NestleCanada2026-06-13Morlong Associates NEW85Elwin Sharvill
1006Kadeem FlosiFrance2026-06-08Truhlar And Truhlar Attys NEW0Bernardo Dominic
1007Alejandro PerinCanada2026-06-07Commercial Press NEW37Onyama Limba
1008Wickens NestleUnited Kingdom2026-06-14Truhlar And Truhlar Attys PROPOSAL97Onyama Limba
1009Adams MorascaRussia2026-06-02Morlong Associates NEGOTIATION77Anna Fali
1010Leon OldroydGermany2026-05-18Rousseaux, Michael Esq RENEWAL31Ioni Bowcher
1011Jefferson SchemmerCanada2026-05-26Chanay, Jeffrey A Esq NEGOTIATION37Amy Elsner
1012Faith GillianCanada2026-05-25Truhlar And Truhlar Attys RENEWAL74Bernardo Dominic
1013Juan WieserGermany2026-06-02Truhlar And Truhlar Attys NEGOTIATION45Bernardo Dominic
1014Francesco ShinkoArgentina2026-05-27Printing Dimensions UNQUALIFIED67Asiya Javayant
1015Greenwood BologniaArgentina2026-06-09Truhlar And Truhlar Attys UNQUALIFIED83Bernardo Dominic
1016Cody SaylorsIndia2026-06-10Chapman, Ross E Esq UNQUALIFIED86Amy Elsner
1017Costa DilliardBrazil2026-06-05Rangoni Of Florence NEGOTIATION38Bernardo Dominic
1018Aruna FigeroaSpain2026-05-30Dorl, James J Esq NEW17Xuxue Feng
1019Francesco ShinkoBrazil2026-06-06Buckley Miller Wright UNQUALIFIED47Bernardo Dominic
1020Maria MarrierItaly2026-06-14Chapman, Ross E Esq UNQUALIFIED73Xuxue Feng
1021Izzy GarufiGermany2026-06-04King, Christopher A Esq NEW11Xuxue Feng
1022Nicolas IturbideItaly2026-06-10Truhlar And Truhlar Attys PROPOSAL92Bernardo Dominic
1023Isabel BowleyCanada2026-05-18Feiner Bros NEW46Anna Fali
1024Claire TollnerJapan2026-06-10Buckley Miller Wright RENEWAL41Ioni Bowcher
1025Kaitlin OstroskyFrance2026-06-03Chanay, Jeffrey A Esq NEGOTIATION19Asiya Javayant
1026Stacey MacleadRussia2026-06-12Chemel, James L Cpa UNQUALIFIED21Bernardo Dominic
1027Deepesh ChuiUnited Kingdom2026-06-05Feltz Printing Service PROPOSAL27Bernardo Dominic
1028Chavez BriddickGermany2026-05-20Rousseaux, Michael Esq PROPOSAL46Asiya Javayant
1029James ButtItaly2026-05-21Buckley Miller Wright UNQUALIFIED23Asiya Javayant
1030Wickens NestleIndia2026-05-24Chanay, Jeffrey A Esq RENEWAL14Amy Elsner
1031Isabel BowleyRussia2026-05-25Morlong Associates QUALIFIED90Amy Elsner
1032Juan WieserCanada2026-06-06Rangoni Of Florence RENEWAL43Anna Fali
1033Sinclair WaycottSpain2026-05-28Chapman, Ross E Esq QUALIFIED56Ioni Bowcher
1034Jennifer AmigonJapan2026-06-02King, Christopher A Esq PROPOSAL97Elwin Sharvill
1035Kadeem FlosiSpain2026-06-04Chemel, James L Cpa NEGOTIATION38Elwin Sharvill
1036Leja CaldareraCanada2026-05-25Benton, John B Jr NEGOTIATION48Ioni Bowcher
1037Antonio CaudyArgentina2026-05-23Rangoni Of Florence QUALIFIED94Elwin Sharvill
1038Juan WieserIndia2026-06-14Chapman, Ross E Esq RENEWAL57Amy Elsner
1039Izzy GarufiJapan2026-06-01Chanay, Jeffrey A Esq UNQUALIFIED7Ivan Magalhaes
1040Morrow RutaCanada2026-06-14Chapman, Ross E Esq NEGOTIATION42Anna Fali
1041Jeanfrancois VenereBrazil2026-06-10Chemel, James L Cpa UNQUALIFIED68Ioni Bowcher
1042Deepesh ChuiCanada2026-06-06Buckley Miller Wright PROPOSAL64Anna Fali
1043Jefferson SchemmerIndia2026-05-31Feltz Printing Service NEW0Onyama Limba
1044Darci PoquetteRussia2026-05-23Rousseaux, Michael Esq NEW59Ivan Magalhaes
1045Maisha RulapaughArgentina2026-05-31Morlong Associates QUALIFIED89Ivan Magalhaes
1046Octavia MaletAustralia2026-05-30Chemel, James L Cpa UNQUALIFIED9Asiya Javayant
1047Aruna FigeroaJapan2026-06-16Feiner Bros NEW17Ioni Bowcher
1048Darci PoquetteSpain2026-06-05Benton, John B Jr QUALIFIED61Anna Fali
1049Stacey MacleadFrance2026-05-29King, Christopher A Esq QUALIFIED64Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Kaitlin OstroskyCanadaOnyama Limba RENEWAL
Maisha RulapaughRussiaBernardo Dominic UNQUALIFIED
Darci PoquetteBrazilIoni Bowcher UNQUALIFIED
Salvatore StockhamSpainAsiya Javayant NEGOTIATION
Juan WieserUnited KingdomBernardo Dominic UNQUALIFIED
Kadeem FlosiJapanBernardo Dominic NEGOTIATION
Costa DilliardGermanyXuxue Feng NEW
Juan WieserFranceOnyama Limba UNQUALIFIED
David DarakjyJapanElwin Sharvill RENEWAL
Morrow RutaJapanAsiya Javayant RENEWAL
Izzy GarufiRussiaOnyama Limba NEGOTIATION
Antonio CaudyJapanAsiya Javayant NEGOTIATION
Ashley DoeSpainAnna Fali PROPOSAL
Murillo MaletUnited KingdomBernardo Dominic RENEWAL
Maria MarrierBrazilAsiya Javayant RENEWAL
Kadeem FlosiBrazilIoni Bowcher PROPOSAL
Sinclair WaycottSpainIoni Bowcher UNQUALIFIED
Sinclair WaycottJapanAnna Fali UNQUALIFIED
Munro FerenczItalyAmy Elsner PROPOSAL
Julie StensethSpainIoni Bowcher NEW
Munro FerenczSpainAmy Elsner NEW
Leja CaldareraIndiaAmy Elsner NEW
Rodrigues CampainIndiaOnyama Limba NEGOTIATION
Julie StensethCanadaOnyama Limba NEW
Maria MarrierBrazilXuxue Feng RENEWAL
Julie StensethCanadaIvan Magalhaes UNQUALIFIED
Silvio SlusarskiRussiaIoni Bowcher UNQUALIFIED
Clifford RimRussiaBernardo Dominic NEW
Francesco ShinkoArgentinaIvan Magalhaes QUALIFIED
Misaki RoysterGermanyStephen Shaw NEW
Adams MorascaBrazilAsiya Javayant QUALIFIED
Antonio CaudyIndiaXuxue Feng NEGOTIATION
Izzy GarufiAustraliaBernardo Dominic RENEWAL
James ButtFranceElwin Sharvill UNQUALIFIED
Tony FollerAustraliaIvan Magalhaes QUALIFIED
Salvatore StockhamUnited KingdomAmy Elsner UNQUALIFIED
Isabel BowleyBrazilAsiya Javayant UNQUALIFIED
Maisha RulapaughItalyElwin Sharvill NEW
Munro FerenczGermanyStephen Shaw PROPOSAL
Murillo MaletSpainAnna Fali PROPOSAL
Maria MarrierUnited KingdomAsiya Javayant NEW
Sinclair WaycottUnited KingdomIvan Magalhaes QUALIFIED
Emily WhobreySpainIoni Bowcher QUALIFIED
Antonio CaudyJapanStephen Shaw NEW
Maisha RulapaughUnited KingdomAnna Fali NEGOTIATION
Silvio SlusarskiGermanyAmy Elsner QUALIFIED
David DarakjyBrazilXuxue Feng NEGOTIATION
Maisha RulapaughFranceElwin Sharvill NEGOTIATION
Juan WieserFranceXuxue Feng RENEWAL
Silvio SlusarskiGermanyIvan Magalhaes NEW
Frozen Columns
Name
Wickens Nestle
Darci Poquette
Smith Glick
Aruna Figeroa
Smith Glick
Jefferson Schemmer
Stacey Maclead
Aika Inouye
Octavia Malet
Alejandro Perin
Antonio Caudy
Cody Saylors
Silvio Slusarski
Claire Tollner
Adams Morasca
Mujtaba Nicka
Tony Foller
Rodrigues Campain
Murillo Malet
Smith Glick
Aika Inouye
Silvio Slusarski
Murillo Malet
Claire Tollner
Ivar Paprocki
Kaitlin Ostrosky
David Darakjy
Arvin Albares
Murillo Malet
Kaitlin Ostrosky
Arvin Albares
Chavez Briddick
Wickens Nestle
Jeanfrancois Venere
Costa Dilliard
Stacey Maclead
Wickens Nestle
Leon Oldroyd
Clifford Rim
Cody Saylors
James Butt
Claire Tollner
Clifford Rim
Julie Stenseth
Ivar Paprocki
Morrow Ruta
Emily Whobrey
Kadeem Flosi
Mayumi Kolmetz
Kaitlin Ostrosky
IdCountryDate
1000Canada2026-06-05
1001Argentina2026-06-12
1002United Kingdom2026-05-30
1003United Kingdom2026-05-18
1004Italy2026-05-27
1005Russia2026-06-14
1006Canada2026-05-31
1007Brazil2026-06-05
1008Spain2026-06-15
1009United Kingdom2026-06-08
1010Germany2026-06-14
1011Canada2026-05-29
1012Germany2026-06-08
1013Japan2026-05-22
1014Argentina2026-06-11
1015United Kingdom2026-05-30
1016Italy2026-05-27
1017France2026-06-06
1018Argentina2026-05-22
1019Italy2026-06-02
1020Russia2026-06-16
1021France2026-06-02
1022Italy2026-06-09
1023Russia2026-06-13
1024Russia2026-05-25
1025Brazil2026-05-29
1026United Kingdom2026-06-09
1027United Kingdom2026-06-04
1028Spain2026-05-27
1029Japan2026-05-29
1030Japan2026-06-16
1031United Kingdom2026-06-03
1032Italy2026-06-15
1033Australia2026-05-24
1034Brazil2026-06-10
1035Australia2026-06-07
1036Australia2026-05-28
1037Germany2026-05-28
1038United Kingdom2026-05-25
1039Brazil2026-05-25
1040Germany2026-05-22
1041Argentina2026-06-07
1042Canada2026-06-11
1043Spain2026-05-21
1044United Kingdom2026-05-21
1045Brazil2026-06-11
1046Germany2026-05-19
1047Germany2026-05-23
1048Japan2026-05-26
1049Italy2026-05-29

On-Demand Data

NameIdCountryDate
Jones Vocelka1000Germany2026-05-26
Leon Oldroyd1001France2026-06-06
Morrow Ruta1002Germany2026-06-02
Chavez Briddick1003Japan2026-05-20
Octavia Malet1004Argentina2026-05-29
Juan Wieser1005France2026-05-30
Jones Vocelka1006Russia2026-06-12
Aika Inouye1007Russia2026-06-16
Salvatore Stockham1008Italy2026-05-29
James Butt1009India2026-05-31
Murillo Malet1010Japan2026-05-24
Leja Caldarera1011United Kingdom2026-06-16
Isabel Bowley1012Canada2026-05-23
Darci Poquette1013Canada2026-05-20
Ricardo Gaucho1014Spain2026-06-03
Maisha Rulapaugh1015Russia2026-06-01
Maisha Rulapaugh1016India2026-05-29
Mayumi Kolmetz1017Italy2026-06-16
Leon Oldroyd1018Russia2026-05-19
Ricardo Gaucho1019Russia2026-05-26
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Ricardo GauchoCanadaXuxue Feng QUALIFIED
Maria MarrierGermanyIvan Magalhaes NEGOTIATION
Ricardo GauchoAustraliaAmy Elsner QUALIFIED
David DarakjySpainAsiya Javayant RENEWAL
Smith GlickUnited KingdomAsiya Javayant RENEWAL
Izzy GarufiItalyBernardo Dominic UNQUALIFIED
Murillo MaletSpainAsiya Javayant PROPOSAL
Mujtaba NickaJapanXuxue Feng UNQUALIFIED
Juan WieserUnited KingdomIvan Magalhaes NEGOTIATION
Jennifer AmigonFranceBernardo Dominic UNQUALIFIED
Jennifer AmigonBrazilBernardo Dominic NEGOTIATION
Julie StensethIndiaOnyama Limba PROPOSAL
Jones VocelkaAustraliaOnyama Limba NEGOTIATION
Wickens NestleAustraliaElwin Sharvill QUALIFIED
Nicolas IturbideArgentinaBernardo Dominic NEW
Jefferson SchemmerFranceIvan Magalhaes QUALIFIED
Antonio CaudyAustraliaElwin Sharvill QUALIFIED
Darci PoquetteSpainBernardo Dominic QUALIFIED
Leon OldroydIndiaAsiya Javayant QUALIFIED
Adams MorascaJapanOnyama Limba NEW
Nicolas IturbideItalyAsiya Javayant NEGOTIATION
Mujtaba NickaIndiaStephen Shaw NEW
Antonio CaudyGermanyIoni Bowcher UNQUALIFIED
Mayumi KolmetzUnited KingdomAsiya Javayant NEGOTIATION
Emily WhobreyBrazilOnyama Limba NEGOTIATION
Maisha RulapaughFranceBernardo Dominic UNQUALIFIED
Maisha RulapaughUnited KingdomStephen Shaw PROPOSAL
Darci PoquetteGermanyAmy Elsner QUALIFIED
Leon OldroydArgentinaIvan Magalhaes NEGOTIATION
Cody SaylorsCanadaAsiya Javayant QUALIFIED
Alejandro PerinUnited KingdomBernardo Dominic NEGOTIATION
Aruna FigeroaArgentinaStephen Shaw UNQUALIFIED
David DarakjyFranceXuxue Feng UNQUALIFIED
Isabel BowleyItalyXuxue Feng PROPOSAL
Maisha RulapaughFranceAmy Elsner UNQUALIFIED
Misaki RoysterIndiaAmy Elsner NEW
Jones VocelkaGermanyAnna Fali QUALIFIED
Nicolas IturbideUnited KingdomAmy Elsner QUALIFIED
Sinclair WaycottRussiaIvan Magalhaes PROPOSAL
Ivar PaprockiJapanStephen Shaw 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>