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
Faith GillianItalyAnna Fali RENEWAL
Jones VocelkaArgentinaXuxue Feng PROPOSAL
Clifford RimArgentinaAmy Elsner NEGOTIATION
Claire TollnerIndiaIvan Magalhaes QUALIFIED
Juan WieserItalyBernardo Dominic PROPOSAL
Arvin AlbaresGermanyBernardo Dominic RENEWAL
Johnson SergiGermanyIvan Magalhaes RENEWAL
Octavia MaletGermanyOnyama Limba UNQUALIFIED
Misaki RoysterCanadaStephen Shaw NEGOTIATION
Adams MorascaJapanAsiya Javayant PROPOSAL
Smith GlickFranceAnna Fali PROPOSAL
Octavia MaletFranceAmy Elsner RENEWAL
Jeanfrancois VenereUnited KingdomElwin Sharvill RENEWAL
Jones VocelkaGermanyXuxue Feng PROPOSAL
Faith GillianItalyAsiya Javayant UNQUALIFIED
Julie StensethIndiaStephen Shaw NEW
Emily WhobreyUnited KingdomAnna Fali RENEWAL
Misaki RoysterFranceXuxue Feng RENEWAL
Silvio SlusarskiFranceAsiya Javayant UNQUALIFIED
James ButtArgentinaElwin Sharvill RENEWAL
Darci PoquetteJapanAnna Fali QUALIFIED
Cody SaylorsIndiaBernardo Dominic PROPOSAL
Ashley DoeJapanAnna Fali NEGOTIATION
Chavez BriddickItalyStephen Shaw PROPOSAL
Maisha RulapaughRussiaElwin Sharvill UNQUALIFIED
Costa DilliardUnited KingdomBernardo Dominic QUALIFIED
Alejandro PerinUnited KingdomAsiya Javayant PROPOSAL
Antonio CaudyAustraliaIvan Magalhaes QUALIFIED
Antonio CaudySpainOnyama Limba RENEWAL
Mayumi KolmetzFranceElwin Sharvill QUALIFIED
Claire TollnerAustraliaOnyama Limba UNQUALIFIED
James ButtRussiaIvan Magalhaes NEW
Aika InouyeJapanIoni Bowcher NEW
Aika InouyeRussiaBernardo Dominic NEW
Aditya KuskoUnited KingdomElwin Sharvill QUALIFIED
Mujtaba NickaSpainIvan Magalhaes RENEWAL
Cody SaylorsCanadaXuxue Feng RENEWAL
David DarakjyRussiaBernardo Dominic UNQUALIFIED
Darci PoquetteRussiaBernardo Dominic RENEWAL
Aika InouyeRussiaIvan Magalhaes NEW
Emily WhobreySpainAsiya Javayant PROPOSAL
Silvio SlusarskiItalyBernardo Dominic PROPOSAL
Salvatore StockhamBrazilElwin Sharvill RENEWAL
Costa DilliardCanadaAnna Fali UNQUALIFIED
Misaki RoysterIndiaBernardo Dominic NEW
Arvin AlbaresJapanStephen Shaw NEGOTIATION
Claire TollnerAustraliaAnna Fali QUALIFIED
Murillo MaletArgentinaIvan Magalhaes UNQUALIFIED
Darci PoquetteCanadaStephen Shaw UNQUALIFIED
Misaki RoysterUnited KingdomAnna Fali NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Sinclair WaycottIndiaBernardo Dominic UNQUALIFIED
Francesco ShinkoIndiaAmy Elsner PROPOSAL
Ivar PaprockiSpainIvan Magalhaes UNQUALIFIED
Claire TollnerCanadaAnna Fali QUALIFIED
Adams MorascaJapanStephen Shaw PROPOSAL
Emily WhobreyArgentinaOnyama Limba NEGOTIATION
Chavez BriddickBrazilXuxue Feng NEGOTIATION
Murillo MaletSpainStephen Shaw UNQUALIFIED
Ashley DoeIndiaXuxue Feng UNQUALIFIED
Sinclair WaycottCanadaIvan Magalhaes PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Juan WieserFrance2025-09-30Chemel, James L Cpa UNQUALIFIED96Bernardo Dominic
1001Alejandro PerinJapan2025-09-27Benton, John B Jr UNQUALIFIED79Bernardo Dominic
1002Izzy GarufiCanada2025-09-26King, Christopher A Esq NEW80Ioni Bowcher
1003Chavez BriddickIndia2025-09-25Chemel, James L Cpa UNQUALIFIED53Onyama Limba
1004Maria MarrierUnited Kingdom2025-09-08Rousseaux, Michael Esq NEGOTIATION64Xuxue Feng
1005Silvio SlusarskiItaly2025-09-22Chapman, Ross E Esq NEW66Elwin Sharvill
1006Stacey MacleadFrance2025-09-30Buckley Miller Wright PROPOSAL1Bernardo Dominic
1007James ButtGermany2025-09-29Rangoni Of Florence NEGOTIATION59Stephen Shaw
1008Nicolas IturbideCanada2025-09-12Printing Dimensions NEGOTIATION99Xuxue Feng
1009Ivar PaprockiFrance2025-09-10Feltz Printing Service NEGOTIATION20Anna Fali
1010Morrow RutaArgentina2025-09-13Feltz Printing Service QUALIFIED98Ivan Magalhaes
1011Ricardo GauchoBrazil2025-09-26Printing Dimensions UNQUALIFIED46Ioni Bowcher
1012Arvin AlbaresIndia2025-09-16Rangoni Of Florence NEGOTIATION19Ivan Magalhaes
1013Aditya KuskoItaly2025-09-12Dorl, James J Esq RENEWAL67Asiya Javayant
1014Sinclair WaycottRussia2025-10-04Dorl, James J Esq RENEWAL83Amy Elsner
1015Mayumi KolmetzRussia2025-09-08Buckley Miller Wright NEW15Elwin Sharvill
1016Greenwood BologniaItaly2025-09-07Rangoni Of Florence RENEWAL85Bernardo Dominic
1017Jennifer AmigonArgentina2025-09-21Rangoni Of Florence UNQUALIFIED5Amy Elsner
1018Octavia MaletJapan2025-09-28Buckley Miller Wright NEW29Onyama Limba
1019Alejandro PerinJapan2025-09-21Chapman, Ross E Esq QUALIFIED58Asiya Javayant
1020Jefferson SchemmerSpain2025-09-06Benton, John B Jr PROPOSAL31Ivan Magalhaes
1021Alejandro PerinRussia2025-09-29Chanay, Jeffrey A Esq UNQUALIFIED17Anna Fali
1022Ivar PaprockiAustralia2025-10-02Chemel, James L Cpa UNQUALIFIED16Onyama Limba
1023Rodrigues CampainSpain2025-09-24Dorl, James J Esq PROPOSAL45Bernardo Dominic
1024Leja CaldareraAustralia2025-10-03Rangoni Of Florence NEGOTIATION17Stephen Shaw
1025Murillo MaletAustralia2025-09-09Chemel, James L Cpa NEW23Stephen Shaw
1026Morrow RutaItaly2025-09-21Rousseaux, Michael Esq RENEWAL53Elwin Sharvill
1027Nicolas IturbideRussia2025-09-29Morlong Associates NEGOTIATION62Onyama Limba
1028Emily WhobreyJapan2025-09-20Chemel, James L Cpa NEW50Bernardo Dominic
1029Salvatore StockhamFrance2025-09-20Feltz Printing Service UNQUALIFIED50Xuxue Feng
1030Kadeem FlosiSpain2025-09-20Printing Dimensions QUALIFIED90Elwin Sharvill
1031Kaitlin OstroskyUnited Kingdom2025-10-02Morlong Associates UNQUALIFIED96Anna Fali
1032Mayumi KolmetzUnited Kingdom2025-09-08Chapman, Ross E Esq NEGOTIATION30Stephen Shaw
1033Stacey MacleadItaly2025-09-09Chemel, James L Cpa RENEWAL85Anna Fali
1034Alejandro PerinGermany2025-09-21Rousseaux, Michael Esq QUALIFIED22Ioni Bowcher
1035Juan WieserItaly2025-09-15Feiner Bros NEGOTIATION26Stephen Shaw
1036Silvio SlusarskiJapan2025-09-22Rangoni Of Florence NEGOTIATION19Asiya Javayant
1037Francesco ShinkoAustralia2025-10-03Rousseaux, Michael Esq QUALIFIED22Asiya Javayant
1038Cody SaylorsIndia2025-09-07Commercial Press RENEWAL34Bernardo Dominic
1039Tony FollerGermany2025-10-02Truhlar And Truhlar Attys NEGOTIATION83Onyama Limba
1040Munro FerenczJapan2025-09-06Truhlar And Truhlar Attys RENEWAL67Asiya Javayant
1041Emily WhobreyFrance2025-09-25Rangoni Of Florence QUALIFIED80Bernardo Dominic
1042Arvin AlbaresArgentina2025-09-07Chanay, Jeffrey A Esq QUALIFIED47Xuxue Feng
1043Greenwood BologniaGermany2025-09-19Commercial Press RENEWAL52Ivan Magalhaes
1044James ButtBrazil2025-09-09Morlong Associates NEW90Xuxue Feng
1045Smith GlickIndia2025-10-01Buckley Miller Wright PROPOSAL7Ivan Magalhaes
1046Johnson SergiSpain2025-09-06Chanay, Jeffrey A Esq NEW28Ivan Magalhaes
1047Juan WieserFrance2025-09-12King, Christopher A Esq QUALIFIED94Bernardo Dominic
1048Misaki RoysterCanada2025-09-29Chapman, Ross E Esq QUALIFIED84Anna Fali
1049Clifford RimItaly2025-09-19Chemel, James L Cpa NEGOTIATION25Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Murillo MaletAustraliaAsiya Javayant UNQUALIFIED
Francesco ShinkoBrazilBernardo Dominic PROPOSAL
Deepesh ChuiFranceAsiya Javayant NEW
Clifford RimFranceAnna Fali RENEWAL
Ashley DoeGermanyAmy Elsner RENEWAL
Mayumi KolmetzItalyXuxue Feng UNQUALIFIED
James ButtCanadaOnyama Limba NEGOTIATION
Jeanfrancois VenereBrazilIvan Magalhaes RENEWAL
Faith GillianFranceIoni Bowcher NEGOTIATION
Tony FollerFranceXuxue Feng NEW
Adams MorascaGermanyIvan Magalhaes PROPOSAL
Isabel BowleyArgentinaBernardo Dominic NEW
Faith GillianBrazilXuxue Feng UNQUALIFIED
Misaki RoysterGermanyIoni Bowcher NEW
Kadeem FlosiIndiaStephen Shaw QUALIFIED
Deepesh ChuiRussiaIvan Magalhaes NEW
Leon OldroydAustraliaAsiya Javayant QUALIFIED
Arvin AlbaresCanadaAnna Fali PROPOSAL
Misaki RoysterRussiaStephen Shaw PROPOSAL
Deepesh ChuiGermanyOnyama Limba UNQUALIFIED
Greenwood BologniaJapanElwin Sharvill PROPOSAL
Murillo MaletGermanyBernardo Dominic UNQUALIFIED
Murillo MaletIndiaIvan Magalhaes QUALIFIED
Juan WieserJapanXuxue Feng RENEWAL
Maria MarrierCanadaBernardo Dominic QUALIFIED
Antonio CaudyAustraliaOnyama Limba PROPOSAL
Nicolas IturbideItalyAnna Fali QUALIFIED
Jennifer AmigonItalyIvan Magalhaes NEGOTIATION
Morrow RutaUnited KingdomBernardo Dominic QUALIFIED
Johnson SergiItalyAnna Fali UNQUALIFIED
Ashley DoeUnited KingdomXuxue Feng RENEWAL
Maisha RulapaughAustraliaStephen Shaw RENEWAL
Arvin AlbaresBrazilXuxue Feng RENEWAL
Emily WhobreyRussiaIoni Bowcher NEW
Jeanfrancois VenereGermanyBernardo Dominic NEW
Jennifer AmigonGermanyAsiya Javayant PROPOSAL
Adams MorascaBrazilElwin Sharvill RENEWAL
Stacey MacleadCanadaIvan Magalhaes UNQUALIFIED
Nicolas IturbideFranceIvan Magalhaes QUALIFIED
Greenwood BologniaGermanyStephen Shaw NEGOTIATION
Juan WieserCanadaBernardo Dominic RENEWAL
Claire TollnerAustraliaAnna Fali PROPOSAL
Johnson SergiFranceAsiya Javayant QUALIFIED
James ButtJapanBernardo Dominic UNQUALIFIED
Mujtaba NickaJapanAnna Fali UNQUALIFIED
Aditya KuskoJapanBernardo Dominic PROPOSAL
Johnson SergiIndiaOnyama Limba QUALIFIED
Maria MarrierGermanyElwin Sharvill UNQUALIFIED
Ivar PaprockiFranceIvan Magalhaes QUALIFIED
Kaitlin OstroskyJapanElwin Sharvill NEGOTIATION
Frozen Columns
Name
Emily Whobrey
Faith Gillian
Antonio Caudy
Chavez Briddick
Octavia Malet
Jeanfrancois Venere
Tony Foller
Kaitlin Ostrosky
Aika Inouye
Julie Stenseth
Murillo Malet
Wickens Nestle
Ivar Paprocki
Silvio Slusarski
Chavez Briddick
Alejandro Perin
Alejandro Perin
Silvio Slusarski
Rodrigues Campain
Murillo Malet
Antonio Caudy
Claire Tollner
James Butt
Silvio Slusarski
Morrow Ruta
Adams Morasca
Antonio Caudy
Greenwood Bolognia
Julie Stenseth
Ricardo Gaucho
Leja Caldarera
James Butt
Jennifer Amigon
Maisha Rulapaugh
Aditya Kusko
Rodrigues Campain
Leon Oldroyd
Jennifer Amigon
Rodrigues Campain
Aruna Figeroa
Francesco Shinko
Salvatore Stockham
Ashley Doe
Rodrigues Campain
Greenwood Bolognia
Costa Dilliard
Jones Vocelka
Greenwood Bolognia
Jennifer Amigon
Ivar Paprocki
IdCountryDate
1000Italy2025-09-28
1001Germany2025-09-27
1002France2025-10-03
1003Canada2025-09-19
1004France2025-09-30
1005Brazil2025-09-05
1006Germany2025-09-25
1007France2025-09-17
1008Germany2025-09-23
1009Russia2025-09-07
1010Canada2025-09-28
1011Russia2025-09-11
1012Russia2025-09-18
1013Spain2025-09-23
1014United Kingdom2025-09-17
1015Canada2025-09-06
1016Brazil2025-09-08
1017India2025-09-07
1018Australia2025-09-22
1019France2025-09-05
1020Italy2025-10-04
1021Japan2025-09-30
1022United Kingdom2025-09-11
1023Brazil2025-09-10
1024Spain2025-09-27
1025Argentina2025-10-04
1026Japan2025-09-15
1027Australia2025-09-27
1028Spain2025-09-25
1029Canada2025-09-20
1030Argentina2025-09-19
1031Spain2025-09-06
1032Canada2025-09-17
1033Russia2025-09-06
1034India2025-09-20
1035Australia2025-09-27
1036Germany2025-09-08
1037Spain2025-09-17
1038Spain2025-10-03
1039Australia2025-09-05
1040Germany2025-09-29
1041Japan2025-09-17
1042Spain2025-09-18
1043Russia2025-09-18
1044Brazil2025-09-16
1045Argentina2025-09-23
1046Argentina2025-09-12
1047Spain2025-09-09
1048Germany2025-09-24
1049Spain2025-09-23

On-Demand Data

NameIdCountryDate
Jennifer Amigon1000Japan2025-09-09
Leon Oldroyd1001India2025-09-15
Aditya Kusko1002France2025-09-07
Arvin Albares1003Germany2025-09-27
Sinclair Waycott1004Argentina2025-09-22
Ashley Doe1005Japan2025-09-07
Jennifer Amigon1006India2025-09-06
Alejandro Perin1007Germany2025-09-06
Juan Wieser1008Italy2025-09-24
Darci Poquette1009Argentina2025-09-15
Stacey Maclead1010Brazil2025-09-20
Darci Poquette1011Argentina2025-09-12
Antonio Caudy1012Spain2025-09-12
Cody Saylors1013United Kingdom2025-09-08
Nicolas Iturbide1014India2025-09-16
Isabel Bowley1015Canada2025-09-28
Tony Foller1016Germany2025-10-01
Aruna Figeroa1017Germany2025-09-24
Aruna Figeroa1018Australia2025-09-09
Leon Oldroyd1019Canada2025-09-20
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Cody SaylorsSpainIvan Magalhaes NEW
Jeanfrancois VenereFranceAsiya Javayant UNQUALIFIED
Stacey MacleadAustraliaOnyama Limba NEGOTIATION
Emily WhobreyJapanOnyama Limba RENEWAL
Murillo MaletUnited KingdomElwin Sharvill UNQUALIFIED
Alejandro PerinBrazilStephen Shaw UNQUALIFIED
Juan WieserAustraliaOnyama Limba NEW
Aditya KuskoRussiaIvan Magalhaes QUALIFIED
Leon OldroydBrazilAsiya Javayant NEGOTIATION
Jones VocelkaJapanIoni Bowcher NEGOTIATION
Silvio SlusarskiUnited KingdomIoni Bowcher UNQUALIFIED
David DarakjyBrazilBernardo Dominic RENEWAL
Salvatore StockhamAustraliaIoni Bowcher UNQUALIFIED
Tony FollerAustraliaAsiya Javayant QUALIFIED
Ashley DoeArgentinaStephen Shaw NEW
Nicolas IturbideAustraliaAsiya Javayant RENEWAL
Rodrigues CampainUnited KingdomAmy Elsner UNQUALIFIED
Jennifer AmigonAustraliaBernardo Dominic QUALIFIED
Greenwood BologniaCanadaOnyama Limba NEW
Isabel BowleySpainElwin Sharvill UNQUALIFIED
Leja CaldareraCanadaElwin Sharvill RENEWAL
Kaitlin OstroskyAustraliaStephen Shaw RENEWAL
Arvin AlbaresItalyStephen Shaw QUALIFIED
Francesco ShinkoGermanyAnna Fali UNQUALIFIED
Maria MarrierGermanyIoni Bowcher PROPOSAL
Misaki RoysterArgentinaAmy Elsner QUALIFIED
Antonio CaudyItalyXuxue Feng PROPOSAL
Izzy GarufiFranceIvan Magalhaes PROPOSAL
Ricardo GauchoAustraliaElwin Sharvill PROPOSAL
Octavia MaletItalyIvan Magalhaes NEW
Claire TollnerCanadaElwin Sharvill NEGOTIATION
Salvatore StockhamCanadaAnna Fali QUALIFIED
Salvatore StockhamAustraliaStephen Shaw NEGOTIATION
Faith GillianGermanyXuxue Feng NEW
David DarakjyUnited KingdomStephen Shaw NEW
Juan WieserFranceOnyama Limba PROPOSAL
Adams MorascaGermanyOnyama Limba UNQUALIFIED
Maisha RulapaughJapanAsiya Javayant QUALIFIED
Deepesh ChuiRussiaAnna Fali QUALIFIED
Tony FollerUnited KingdomIvan Magalhaes 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>