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
Jones VocelkaAustraliaStephen Shaw UNQUALIFIED
Deepesh ChuiItalyIoni Bowcher NEGOTIATION
Morrow RutaUnited KingdomXuxue Feng NEGOTIATION
Clifford RimUnited KingdomOnyama Limba RENEWAL
Julie StensethUnited KingdomAsiya Javayant UNQUALIFIED
Greenwood BologniaFranceBernardo Dominic NEGOTIATION
Mayumi KolmetzUnited KingdomIoni Bowcher PROPOSAL
Clifford RimJapanIoni Bowcher UNQUALIFIED
Nicolas IturbideIndiaElwin Sharvill UNQUALIFIED
Jefferson SchemmerFranceIoni Bowcher QUALIFIED
Antonio CaudyUnited KingdomBernardo Dominic RENEWAL
Antonio CaudyRussiaStephen Shaw UNQUALIFIED
Sinclair WaycottFranceOnyama Limba PROPOSAL
Morrow RutaJapanAsiya Javayant NEW
Tony FollerIndiaElwin Sharvill PROPOSAL
Cody SaylorsIndiaXuxue Feng NEW
Misaki RoysterSpainOnyama Limba UNQUALIFIED
James ButtRussiaOnyama Limba PROPOSAL
James ButtSpainBernardo Dominic QUALIFIED
Greenwood BologniaJapanOnyama Limba UNQUALIFIED
Greenwood BologniaItalyAnna Fali PROPOSAL
Jeanfrancois VenereGermanyXuxue Feng PROPOSAL
Wickens NestleGermanyXuxue Feng QUALIFIED
Izzy GarufiFranceOnyama Limba RENEWAL
Faith GillianIndiaAsiya Javayant NEW
Juan WieserCanadaAmy Elsner UNQUALIFIED
Adams MorascaBrazilOnyama Limba NEW
Jeanfrancois VenereAustraliaIoni Bowcher NEW
Johnson SergiSpainOnyama Limba QUALIFIED
Isabel BowleySpainAnna Fali PROPOSAL
Ivar PaprockiGermanyAmy Elsner QUALIFIED
Jennifer AmigonUnited KingdomAsiya Javayant UNQUALIFIED
Julie StensethCanadaIvan Magalhaes QUALIFIED
Kaitlin OstroskyUnited KingdomElwin Sharvill UNQUALIFIED
Aruna FigeroaFranceIvan Magalhaes QUALIFIED
Aditya KuskoAustraliaXuxue Feng RENEWAL
Murillo MaletRussiaStephen Shaw NEGOTIATION
Mayumi KolmetzBrazilAnna Fali NEW
Francesco ShinkoJapanIoni Bowcher NEGOTIATION
Maria MarrierCanadaElwin Sharvill NEGOTIATION
Chavez BriddickIndiaStephen Shaw RENEWAL
Emily WhobreyAustraliaIoni Bowcher QUALIFIED
Ashley DoeIndiaIvan Magalhaes NEW
Ricardo GauchoFranceOnyama Limba PROPOSAL
Julie StensethAustraliaOnyama Limba NEGOTIATION
Emily WhobreyRussiaBernardo Dominic PROPOSAL
Aruna FigeroaBrazilAmy Elsner QUALIFIED
Adams MorascaIndiaAmy Elsner NEW
Aruna FigeroaArgentinaAmy Elsner RENEWAL
Costa DilliardJapanStephen Shaw UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Maisha RulapaughArgentinaAsiya Javayant RENEWAL
Sinclair WaycottGermanyIoni Bowcher QUALIFIED
Rodrigues CampainGermanyAnna Fali NEGOTIATION
Rodrigues CampainIndiaXuxue Feng PROPOSAL
Claire TollnerFranceXuxue Feng RENEWAL
Julie StensethFranceAnna Fali PROPOSAL
David DarakjyArgentinaIoni Bowcher NEW
Aditya KuskoGermanyAnna Fali UNQUALIFIED
Johnson SergiSpainAsiya Javayant UNQUALIFIED
Aika InouyeBrazilIoni Bowcher NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Francesco ShinkoUnited Kingdom2025-10-08Dorl, James J Esq UNQUALIFIED58Asiya Javayant
1001Rodrigues CampainIndia2025-09-17Chapman, Ross E Esq PROPOSAL6Xuxue Feng
1002Adams MorascaArgentina2025-09-25King, Christopher A Esq PROPOSAL81Anna Fali
1003Arvin AlbaresJapan2025-09-17Truhlar And Truhlar Attys NEGOTIATION16Ioni Bowcher
1004Greenwood BologniaItaly2025-10-09Morlong Associates PROPOSAL62Xuxue Feng
1005Chavez BriddickArgentina2025-09-27Chemel, James L Cpa NEW94Onyama Limba
1006Claire TollnerFrance2025-09-17Printing Dimensions RENEWAL25Elwin Sharvill
1007Octavia MaletGermany2025-10-05Feiner Bros QUALIFIED0Bernardo Dominic
1008Salvatore StockhamJapan2025-10-10Dorl, James J Esq RENEWAL90Bernardo Dominic
1009Adams MorascaFrance2025-09-25Chapman, Ross E Esq UNQUALIFIED81Onyama Limba
1010Rodrigues CampainCanada2025-09-18Rangoni Of Florence RENEWAL71Stephen Shaw
1011Antonio CaudyUnited Kingdom2025-10-03Chapman, Ross E Esq PROPOSAL96Bernardo Dominic
1012Leja CaldareraCanada2025-09-21Truhlar And Truhlar Attys QUALIFIED64Anna Fali
1013Misaki RoysterUnited Kingdom2025-10-06Buckley Miller Wright NEW30Elwin Sharvill
1014Deepesh ChuiGermany2025-10-13Chemel, James L Cpa NEGOTIATION39Asiya Javayant
1015Tony FollerGermany2025-10-01Chanay, Jeffrey A Esq RENEWAL31Asiya Javayant
1016Claire TollnerUnited Kingdom2025-09-25Printing Dimensions NEGOTIATION6Onyama Limba
1017Arvin AlbaresArgentina2025-09-30Benton, John B Jr QUALIFIED9Amy Elsner
1018Sinclair WaycottBrazil2025-09-25Morlong Associates RENEWAL48Anna Fali
1019Greenwood BologniaAustralia2025-09-20Feiner Bros UNQUALIFIED47Onyama Limba
1020Izzy GarufiArgentina2025-09-15Rousseaux, Michael Esq RENEWAL16Ivan Magalhaes
1021Francesco ShinkoAustralia2025-09-18Chemel, James L Cpa UNQUALIFIED8Elwin Sharvill
1022Ivar PaprockiSpain2025-09-26Chanay, Jeffrey A Esq QUALIFIED41Asiya Javayant
1023Nicolas IturbideBrazil2025-10-13Rousseaux, Michael Esq UNQUALIFIED93Ioni Bowcher
1024Alejandro PerinFrance2025-10-04Chemel, James L Cpa NEW74Ioni Bowcher
1025Nicolas IturbideArgentina2025-10-07Rousseaux, Michael Esq NEW85Elwin Sharvill
1026Salvatore StockhamArgentina2025-10-07Chemel, James L Cpa UNQUALIFIED39Stephen Shaw
1027Murillo MaletFrance2025-10-04Benton, John B Jr UNQUALIFIED6Stephen Shaw
1028Aika InouyeFrance2025-10-02Printing Dimensions NEW38Ivan Magalhaes
1029Aruna FigeroaUnited Kingdom2025-10-07Printing Dimensions PROPOSAL68Anna Fali
1030Jennifer AmigonArgentina2025-10-12Chemel, James L Cpa QUALIFIED94Anna Fali
1031Stacey MacleadJapan2025-09-28Chapman, Ross E Esq QUALIFIED10Asiya Javayant
1032Jennifer AmigonIndia2025-10-03Benton, John B Jr PROPOSAL73Anna Fali
1033Leja CaldareraUnited Kingdom2025-10-03Buckley Miller Wright NEGOTIATION83Stephen Shaw
1034Sinclair WaycottBrazil2025-09-21Feltz Printing Service PROPOSAL55Xuxue Feng
1035Jennifer AmigonIndia2025-10-07King, Christopher A Esq NEW78Amy Elsner
1036Misaki RoysterBrazil2025-10-02Buckley Miller Wright NEW36Stephen Shaw
1037Rodrigues CampainSpain2025-10-04Chemel, James L Cpa QUALIFIED27Xuxue Feng
1038Isabel BowleyRussia2025-09-24Chemel, James L Cpa NEW20Ioni Bowcher
1039Francesco ShinkoUnited Kingdom2025-10-10Chapman, Ross E Esq UNQUALIFIED62Asiya Javayant
1040Kadeem FlosiIndia2025-09-23Benton, John B Jr UNQUALIFIED56Ivan Magalhaes
1041Tony FollerFrance2025-10-07Commercial Press NEW15Stephen Shaw
1042Sinclair WaycottIndia2025-09-22Commercial Press NEGOTIATION12Onyama Limba
1043Ashley DoeUnited Kingdom2025-09-29Rangoni Of Florence QUALIFIED43Stephen Shaw
1044Jones VocelkaFrance2025-09-20King, Christopher A Esq RENEWAL14Asiya Javayant
1045Darci PoquetteGermany2025-10-01Chapman, Ross E Esq NEW61Anna Fali
1046Maisha RulapaughItaly2025-10-12Rangoni Of Florence QUALIFIED44Ivan Magalhaes
1047Nicolas IturbideJapan2025-10-06Dorl, James J Esq QUALIFIED81Anna Fali
1048Aditya KuskoSpain2025-09-14Benton, John B Jr QUALIFIED54Anna Fali
1049Cody SaylorsAustralia2025-09-18Rousseaux, Michael Esq NEGOTIATION85Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Aruna FigeroaUnited KingdomIoni Bowcher NEW
Mujtaba NickaAustraliaXuxue Feng UNQUALIFIED
Jennifer AmigonBrazilIvan Magalhaes PROPOSAL
Aika InouyeItalyIoni Bowcher NEW
Sinclair WaycottSpainXuxue Feng NEGOTIATION
Maisha RulapaughUnited KingdomAmy Elsner UNQUALIFIED
Murillo MaletArgentinaXuxue Feng PROPOSAL
Izzy GarufiAustraliaElwin Sharvill UNQUALIFIED
Maisha RulapaughJapanXuxue Feng NEGOTIATION
Leja CaldareraRussiaXuxue Feng RENEWAL
Claire TollnerFranceStephen Shaw NEW
James ButtRussiaBernardo Dominic NEW
Kadeem FlosiGermanyElwin Sharvill QUALIFIED
Francesco ShinkoSpainStephen Shaw UNQUALIFIED
Silvio SlusarskiAustraliaElwin Sharvill NEW
Mayumi KolmetzAustraliaOnyama Limba NEGOTIATION
Alejandro PerinAustraliaBernardo Dominic PROPOSAL
Sinclair WaycottGermanyAmy Elsner NEGOTIATION
Maisha RulapaughJapanIvan Magalhaes NEGOTIATION
Juan WieserFranceAnna Fali PROPOSAL
Misaki RoysterIndiaXuxue Feng PROPOSAL
Murillo MaletJapanXuxue Feng QUALIFIED
Misaki RoysterJapanElwin Sharvill NEGOTIATION
Stacey MacleadIndiaXuxue Feng UNQUALIFIED
Nicolas IturbideCanadaAmy Elsner NEGOTIATION
Darci PoquetteArgentinaStephen Shaw NEW
Arvin AlbaresJapanAsiya Javayant QUALIFIED
Ashley DoeFranceAmy Elsner NEGOTIATION
Aditya KuskoRussiaBernardo Dominic UNQUALIFIED
Ashley DoeRussiaXuxue Feng PROPOSAL
Claire TollnerIndiaStephen Shaw PROPOSAL
Munro FerenczGermanyStephen Shaw UNQUALIFIED
Kadeem FlosiUnited KingdomAmy Elsner PROPOSAL
Silvio SlusarskiAustraliaAnna Fali NEW
Stacey MacleadJapanStephen Shaw NEW
Salvatore StockhamUnited KingdomStephen Shaw RENEWAL
Darci PoquetteRussiaOnyama Limba PROPOSAL
Alejandro PerinBrazilIvan Magalhaes RENEWAL
Munro FerenczIndiaAnna Fali NEGOTIATION
Darci PoquetteBrazilAnna Fali PROPOSAL
Chavez BriddickSpainOnyama Limba NEW
Jefferson SchemmerFranceBernardo Dominic QUALIFIED
James ButtRussiaIoni Bowcher UNQUALIFIED
Adams MorascaItalyAmy Elsner PROPOSAL
Murillo MaletRussiaStephen Shaw RENEWAL
Nicolas IturbideGermanyBernardo Dominic NEGOTIATION
Darci PoquetteArgentinaAnna Fali PROPOSAL
Francesco ShinkoAustraliaAmy Elsner RENEWAL
Salvatore StockhamFranceAmy Elsner QUALIFIED
Tony FollerJapanElwin Sharvill QUALIFIED
Frozen Columns
Name
James Butt
Misaki Royster
Deepesh Chui
Darci Poquette
Claire Tollner
Arvin Albares
Wickens Nestle
Silvio Slusarski
Cody Saylors
Misaki Royster
Maria Marrier
Tony Foller
Kadeem Flosi
Sinclair Waycott
Murillo Malet
Deepesh Chui
Morrow Ruta
Kaitlin Ostrosky
Octavia Malet
Darci Poquette
Morrow Ruta
Mujtaba Nicka
Adams Morasca
Tony Foller
Jennifer Amigon
Munro Ferencz
Kadeem Flosi
Rodrigues Campain
Rodrigues Campain
Chavez Briddick
Cody Saylors
Adams Morasca
Wickens Nestle
Maria Marrier
James Butt
Clifford Rim
Kadeem Flosi
Francesco Shinko
David Darakjy
Maisha Rulapaugh
Silvio Slusarski
Costa Dilliard
Mujtaba Nicka
Jefferson Schemmer
Aditya Kusko
Ashley Doe
Antonio Caudy
Jones Vocelka
Julie Stenseth
Nicolas Iturbide
IdCountryDate
1000Russia2025-10-12
1001United Kingdom2025-09-16
1002Japan2025-10-10
1003Russia2025-10-11
1004India2025-09-15
1005France2025-09-30
1006India2025-09-14
1007United Kingdom2025-10-07
1008Spain2025-09-14
1009Russia2025-09-19
1010Italy2025-10-09
1011Russia2025-09-28
1012Russia2025-09-24
1013Germany2025-09-26
1014Australia2025-10-09
1015Germany2025-09-14
1016Canada2025-09-24
1017India2025-09-23
1018Brazil2025-09-24
1019Australia2025-10-07
1020Italy2025-10-03
1021France2025-10-04
1022India2025-09-24
1023Brazil2025-10-05
1024Japan2025-10-04
1025Argentina2025-10-13
1026Argentina2025-09-24
1027United Kingdom2025-10-01
1028Japan2025-09-25
1029Brazil2025-09-30
1030Japan2025-09-25
1031Russia2025-10-11
1032Japan2025-09-25
1033Germany2025-10-08
1034India2025-09-22
1035France2025-09-15
1036Brazil2025-09-19
1037Italy2025-10-02
1038Canada2025-10-07
1039Canada2025-10-04
1040Argentina2025-10-02
1041Canada2025-09-30
1042India2025-10-08
1043Italy2025-09-21
1044India2025-10-05
1045Russia2025-10-01
1046Spain2025-09-28
1047Brazil2025-09-14
1048Australia2025-10-13
1049Spain2025-09-19

On-Demand Data

NameIdCountryDate
Mujtaba Nicka1000Brazil2025-09-25
Mujtaba Nicka1001France2025-09-25
Munro Ferencz1002India2025-09-30
Julie Stenseth1003Canada2025-10-08
Jeanfrancois Venere1004Russia2025-09-21
Mujtaba Nicka1005Italy2025-09-25
Murillo Malet1006Japan2025-09-14
Silvio Slusarski1007India2025-09-18
Chavez Briddick1008India2025-09-14
Juan Wieser1009Brazil2025-10-09
Aika Inouye1010Russia2025-09-30
Maisha Rulapaugh1011Italy2025-09-22
Munro Ferencz1012Germany2025-09-30
Sinclair Waycott1013Spain2025-09-17
Ashley Doe1014United Kingdom2025-09-14
Claire Tollner1015Canada2025-09-25
Ashley Doe1016Germany2025-09-30
Munro Ferencz1017France2025-09-15
Antonio Caudy1018Australia2025-10-13
Jeanfrancois Venere1019Canada2025-10-11
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jefferson SchemmerFranceXuxue Feng NEW
Jones VocelkaIndiaBernardo Dominic UNQUALIFIED
Ricardo GauchoJapanElwin Sharvill NEGOTIATION
Costa DilliardGermanyAsiya Javayant RENEWAL
Jones VocelkaItalyOnyama Limba QUALIFIED
Francesco ShinkoItalyIoni Bowcher NEW
Isabel BowleyItalyBernardo Dominic QUALIFIED
Chavez BriddickSpainIvan Magalhaes QUALIFIED
Salvatore StockhamIndiaOnyama Limba PROPOSAL
Ricardo GauchoJapanAmy Elsner NEGOTIATION
Greenwood BologniaAustraliaElwin Sharvill QUALIFIED
Francesco ShinkoFranceAsiya Javayant QUALIFIED
Ivar PaprockiUnited KingdomElwin Sharvill NEGOTIATION
Claire TollnerCanadaStephen Shaw NEGOTIATION
Rodrigues CampainIndiaOnyama Limba PROPOSAL
Deepesh ChuiFranceAmy Elsner PROPOSAL
Alejandro PerinUnited KingdomAnna Fali RENEWAL
Greenwood BologniaIndiaBernardo Dominic NEW
Ricardo GauchoFranceAnna Fali QUALIFIED
Isabel BowleyRussiaIvan Magalhaes QUALIFIED
Kadeem FlosiCanadaElwin Sharvill RENEWAL
Emily WhobreyItalyBernardo Dominic PROPOSAL
Jeanfrancois VenereRussiaElwin Sharvill NEGOTIATION
Deepesh ChuiAustraliaIoni Bowcher NEGOTIATION
Darci PoquetteArgentinaStephen Shaw PROPOSAL
Murillo MaletItalyAsiya Javayant UNQUALIFIED
Kaitlin OstroskyAustraliaStephen Shaw NEGOTIATION
Munro FerenczSpainAnna Fali RENEWAL
Greenwood BologniaItalyAmy Elsner PROPOSAL
Smith GlickRussiaAnna Fali QUALIFIED
Greenwood BologniaGermanyStephen Shaw UNQUALIFIED
Ashley DoeBrazilIoni Bowcher UNQUALIFIED
Darci PoquetteFranceBernardo Dominic UNQUALIFIED
Jefferson SchemmerSpainAnna Fali UNQUALIFIED
Isabel BowleyFranceElwin Sharvill NEGOTIATION
Clifford RimSpainBernardo Dominic QUALIFIED
Aditya KuskoBrazilAnna Fali PROPOSAL
Tony FollerItalyAsiya Javayant RENEWAL
Maisha RulapaughFranceOnyama Limba UNQUALIFIED
Tony FollerIndiaIoni Bowcher RENEWAL

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