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
Leon OldroydCanadaAnna Fali QUALIFIED
Claire TollnerRussiaAsiya Javayant QUALIFIED
Ashley DoeItalyBernardo Dominic NEGOTIATION
Mayumi KolmetzFranceElwin Sharvill NEGOTIATION
Ivar PaprockiSpainStephen Shaw RENEWAL
Isabel BowleyArgentinaStephen Shaw QUALIFIED
Maria MarrierUnited KingdomBernardo Dominic NEW
Maria MarrierArgentinaOnyama Limba RENEWAL
Ivar PaprockiRussiaAnna Fali NEW
Salvatore StockhamArgentinaStephen Shaw PROPOSAL
Izzy GarufiGermanyIoni Bowcher RENEWAL
Costa DilliardFranceAmy Elsner PROPOSAL
Aika InouyeGermanyIoni Bowcher NEGOTIATION
Tony FollerItalyElwin Sharvill NEW
Rodrigues CampainArgentinaAmy Elsner NEW
Greenwood BologniaFranceStephen Shaw RENEWAL
Murillo MaletAustraliaAmy Elsner RENEWAL
Ricardo GauchoAustraliaBernardo Dominic NEGOTIATION
Sinclair WaycottArgentinaAnna Fali QUALIFIED
Aika InouyeBrazilAmy Elsner RENEWAL
Emily WhobreyJapanAnna Fali NEW
Darci PoquetteGermanyIvan Magalhaes QUALIFIED
Costa DilliardCanadaStephen Shaw NEGOTIATION
Stacey MacleadRussiaStephen Shaw UNQUALIFIED
Claire TollnerGermanyIoni Bowcher NEGOTIATION
Misaki RoysterJapanBernardo Dominic NEGOTIATION
Leja CaldareraCanadaElwin Sharvill NEGOTIATION
Ivar PaprockiCanadaAmy Elsner UNQUALIFIED
Munro FerenczJapanXuxue Feng QUALIFIED
Jefferson SchemmerAustraliaIvan Magalhaes PROPOSAL
Isabel BowleyUnited KingdomStephen Shaw NEGOTIATION
Munro FerenczItalyStephen Shaw UNQUALIFIED
Darci PoquetteArgentinaOnyama Limba RENEWAL
Misaki RoysterUnited KingdomAnna Fali NEGOTIATION
Ivar PaprockiAustraliaXuxue Feng QUALIFIED
Jefferson SchemmerItalyElwin Sharvill PROPOSAL
Salvatore StockhamAustraliaXuxue Feng NEW
Emily WhobreyUnited KingdomStephen Shaw UNQUALIFIED
Stacey MacleadItalyIvan Magalhaes UNQUALIFIED
Leja CaldareraIndiaIvan Magalhaes NEW
Octavia MaletArgentinaStephen Shaw NEGOTIATION
Aika InouyeIndiaBernardo Dominic PROPOSAL
Aruna FigeroaRussiaAmy Elsner NEGOTIATION
Johnson SergiGermanyAmy Elsner QUALIFIED
Francesco ShinkoAustraliaIoni Bowcher QUALIFIED
Francesco ShinkoItalyElwin Sharvill QUALIFIED
Mujtaba NickaBrazilIoni Bowcher NEGOTIATION
Stacey MacleadSpainBernardo Dominic UNQUALIFIED
Alejandro PerinFranceBernardo Dominic QUALIFIED
Costa DilliardArgentinaIoni Bowcher NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Darci PoquetteUnited KingdomOnyama Limba RENEWAL
Isabel BowleyGermanyAnna Fali PROPOSAL
Adams MorascaRussiaElwin Sharvill QUALIFIED
Stacey MacleadIndiaAnna Fali PROPOSAL
Leja CaldareraBrazilBernardo Dominic RENEWAL
Leon OldroydSpainAmy Elsner RENEWAL
Kadeem FlosiItalyAsiya Javayant PROPOSAL
Ivar PaprockiIndiaAnna Fali RENEWAL
Misaki RoysterSpainXuxue Feng NEGOTIATION
Jeanfrancois VenereGermanyAsiya Javayant NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Chavez BriddickCanada2025-07-26Rangoni Of Florence NEGOTIATION19Ioni Bowcher
1001Rodrigues CampainCanada2025-08-16Rangoni Of Florence UNQUALIFIED88Ivan Magalhaes
1002Jeanfrancois VenereRussia2025-08-03Benton, John B Jr NEGOTIATION51Amy Elsner
1003David DarakjyAustralia2025-07-28Feiner Bros RENEWAL45Ivan Magalhaes
1004Ivar PaprockiIndia2025-07-30Rangoni Of Florence UNQUALIFIED51Asiya Javayant
1005Aditya KuskoSpain2025-07-28Rousseaux, Michael Esq PROPOSAL27Stephen Shaw
1006Octavia MaletArgentina2025-07-29Morlong Associates PROPOSAL52Stephen Shaw
1007Arvin AlbaresSpain2025-08-08Chemel, James L Cpa NEGOTIATION63Stephen Shaw
1008Jones VocelkaUnited Kingdom2025-08-05Chanay, Jeffrey A Esq PROPOSAL65Stephen Shaw
1009Ivar PaprockiAustralia2025-08-12King, Christopher A Esq UNQUALIFIED52Asiya Javayant
1010Ashley DoeItaly2025-08-17Truhlar And Truhlar Attys NEW69Anna Fali
1011Francesco ShinkoAustralia2025-08-16Chanay, Jeffrey A Esq NEGOTIATION76Ioni Bowcher
1012Alejandro PerinSpain2025-08-10Rangoni Of Florence QUALIFIED34Ioni Bowcher
1013Clifford RimItaly2025-08-04Commercial Press NEW79Ioni Bowcher
1014Aika InouyeAustralia2025-08-15Buckley Miller Wright NEGOTIATION18Ioni Bowcher
1015Isabel BowleyBrazil2025-08-05Feltz Printing Service NEGOTIATION91Asiya Javayant
1016Sinclair WaycottIndia2025-08-02Morlong Associates QUALIFIED84Xuxue Feng
1017Alejandro PerinRussia2025-08-02Rousseaux, Michael Esq NEGOTIATION41Asiya Javayant
1018Costa DilliardRussia2025-08-17Chapman, Ross E Esq UNQUALIFIED46Ivan Magalhaes
1019Sinclair WaycottFrance2025-08-16Dorl, James J Esq UNQUALIFIED81Anna Fali
1020Leon OldroydBrazil2025-08-12Chapman, Ross E Esq RENEWAL31Elwin Sharvill
1021Darci PoquetteArgentina2025-07-20Dorl, James J Esq NEGOTIATION86Amy Elsner
1022Johnson SergiCanada2025-08-11Buckley Miller Wright QUALIFIED32Ioni Bowcher
1023Juan WieserAustralia2025-07-25King, Christopher A Esq NEW37Ioni Bowcher
1024Costa DilliardCanada2025-07-29Feiner Bros NEW16Ioni Bowcher
1025Julie StensethAustralia2025-07-28Printing Dimensions QUALIFIED95Amy Elsner
1026Adams MorascaCanada2025-08-07Commercial Press RENEWAL68Amy Elsner
1027Aruna FigeroaSpain2025-08-11Chapman, Ross E Esq RENEWAL55Ivan Magalhaes
1028Ashley DoeJapan2025-07-31Commercial Press UNQUALIFIED99Asiya Javayant
1029Sinclair WaycottUnited Kingdom2025-08-08Chapman, Ross E Esq QUALIFIED68Anna Fali
1030Ricardo GauchoItaly2025-08-15Buckley Miller Wright NEGOTIATION66Stephen Shaw
1031Antonio CaudyCanada2025-08-17Truhlar And Truhlar Attys NEGOTIATION52Bernardo Dominic
1032Izzy GarufiJapan2025-07-30Buckley Miller Wright UNQUALIFIED4Xuxue Feng
1033James ButtUnited Kingdom2025-07-31Morlong Associates RENEWAL24Elwin Sharvill
1034Aruna FigeroaAustralia2025-08-07Feltz Printing Service UNQUALIFIED87Anna Fali
1035Mujtaba NickaAustralia2025-08-05Morlong Associates NEGOTIATION90Bernardo Dominic
1036Claire TollnerUnited Kingdom2025-07-19Feltz Printing Service PROPOSAL95Onyama Limba
1037Francesco ShinkoRussia2025-08-06Commercial Press NEW40Stephen Shaw
1038Mayumi KolmetzItaly2025-08-01Feiner Bros QUALIFIED74Stephen Shaw
1039Maria MarrierFrance2025-07-20Rangoni Of Florence RENEWAL30Ivan Magalhaes
1040Nicolas IturbideIndia2025-08-07Printing Dimensions PROPOSAL6Bernardo Dominic
1041Jennifer AmigonFrance2025-08-12Rousseaux, Michael Esq UNQUALIFIED83Ioni Bowcher
1042Rodrigues CampainArgentina2025-08-03Feiner Bros RENEWAL30Elwin Sharvill
1043Smith GlickFrance2025-08-10Chemel, James L Cpa UNQUALIFIED52Bernardo Dominic
1044Maisha RulapaughRussia2025-08-17Rousseaux, Michael Esq QUALIFIED85Ioni Bowcher
1045Ivar PaprockiItaly2025-08-16Chemel, James L Cpa RENEWAL10Onyama Limba
1046David DarakjyItaly2025-08-08Chapman, Ross E Esq NEW26Stephen Shaw
1047Greenwood BologniaBrazil2025-08-17Commercial Press QUALIFIED26Bernardo Dominic
1048Emily WhobreyArgentina2025-07-29Chemel, James L Cpa QUALIFIED31Xuxue Feng
1049Faith GillianUnited Kingdom2025-08-10Chapman, Ross E Esq NEW62Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
James ButtCanadaXuxue Feng NEGOTIATION
Francesco ShinkoUnited KingdomAnna Fali PROPOSAL
Isabel BowleyRussiaStephen Shaw RENEWAL
David DarakjyFranceIvan Magalhaes QUALIFIED
Mayumi KolmetzAustraliaIvan Magalhaes RENEWAL
Darci PoquetteFranceXuxue Feng NEGOTIATION
Greenwood BologniaArgentinaOnyama Limba RENEWAL
Wickens NestleJapanStephen Shaw RENEWAL
Leja CaldareraFranceAnna Fali QUALIFIED
Emily WhobreyArgentinaIvan Magalhaes QUALIFIED
Isabel BowleyCanadaStephen Shaw QUALIFIED
Clifford RimItalyOnyama Limba NEW
Greenwood BologniaSpainAmy Elsner QUALIFIED
Greenwood BologniaItalyStephen Shaw NEGOTIATION
Alejandro PerinJapanAsiya Javayant NEW
Nicolas IturbideGermanyOnyama Limba RENEWAL
Greenwood BologniaIndiaIoni Bowcher RENEWAL
Ricardo GauchoSpainAmy Elsner QUALIFIED
Clifford RimArgentinaAsiya Javayant RENEWAL
Leon OldroydCanadaOnyama Limba NEGOTIATION
Wickens NestleArgentinaAnna Fali NEW
Ricardo GauchoSpainBernardo Dominic PROPOSAL
David DarakjyCanadaIoni Bowcher PROPOSAL
Wickens NestleCanadaAmy Elsner PROPOSAL
Jefferson SchemmerIndiaIvan Magalhaes UNQUALIFIED
Jefferson SchemmerItalyAsiya Javayant UNQUALIFIED
Octavia MaletJapanAmy Elsner NEW
Darci PoquetteSpainAmy Elsner QUALIFIED
Kadeem FlosiRussiaElwin Sharvill NEGOTIATION
Aruna FigeroaJapanBernardo Dominic NEGOTIATION
Julie StensethGermanyStephen Shaw PROPOSAL
Sinclair WaycottItalyAnna Fali PROPOSAL
Jefferson SchemmerIndiaAsiya Javayant UNQUALIFIED
Stacey MacleadFranceAmy Elsner UNQUALIFIED
Maisha RulapaughUnited KingdomAsiya Javayant NEGOTIATION
Tony FollerBrazilAnna Fali PROPOSAL
Julie StensethArgentinaXuxue Feng PROPOSAL
Misaki RoysterArgentinaAsiya Javayant QUALIFIED
Chavez BriddickItalyStephen Shaw UNQUALIFIED
Wickens NestleFranceBernardo Dominic UNQUALIFIED
Silvio SlusarskiFranceIoni Bowcher PROPOSAL
Jones VocelkaIndiaBernardo Dominic UNQUALIFIED
Isabel BowleyAustraliaBernardo Dominic NEGOTIATION
Wickens NestleJapanAmy Elsner RENEWAL
Salvatore StockhamSpainElwin Sharvill NEW
Sinclair WaycottGermanyAmy Elsner PROPOSAL
Adams MorascaIndiaIoni Bowcher UNQUALIFIED
Wickens NestleItalyIoni Bowcher QUALIFIED
Silvio SlusarskiFranceAnna Fali RENEWAL
Arvin AlbaresArgentinaOnyama Limba QUALIFIED
Frozen Columns
Name
Rodrigues Campain
Aruna Figeroa
Arvin Albares
Rodrigues Campain
Francesco Shinko
Misaki Royster
Octavia Malet
James Butt
Adams Morasca
Leja Caldarera
Leja Caldarera
Kadeem Flosi
Ivar Paprocki
Aika Inouye
Isabel Bowley
Wickens Nestle
Maisha Rulapaugh
Salvatore Stockham
Antonio Caudy
Murillo Malet
Wickens Nestle
Darci Poquette
Claire Tollner
Kadeem Flosi
Adams Morasca
Greenwood Bolognia
Izzy Garufi
Izzy Garufi
Ashley Doe
Izzy Garufi
Darci Poquette
Mayumi Kolmetz
Arvin Albares
Maisha Rulapaugh
Faith Gillian
Ashley Doe
Maisha Rulapaugh
Nicolas Iturbide
Nicolas Iturbide
Adams Morasca
Stacey Maclead
Nicolas Iturbide
Antonio Caudy
Francesco Shinko
Silvio Slusarski
Jones Vocelka
Juan Wieser
Maisha Rulapaugh
David Darakjy
James Butt
IdCountryDate
1000Australia2025-07-24
1001India2025-08-03
1002France2025-07-20
1003United Kingdom2025-08-05
1004Brazil2025-08-04
1005Germany2025-08-14
1006Germany2025-07-29
1007Brazil2025-08-10
1008United Kingdom2025-08-08
1009United Kingdom2025-07-19
1010Russia2025-07-27
1011Spain2025-08-12
1012France2025-08-13
1013France2025-08-10
1014Russia2025-08-04
1015Russia2025-07-28
1016France2025-08-11
1017Germany2025-08-17
1018Australia2025-08-09
1019Canada2025-08-06
1020Spain2025-08-03
1021Australia2025-08-11
1022Canada2025-08-04
1023France2025-08-11
1024United Kingdom2025-08-04
1025Spain2025-08-09
1026United Kingdom2025-08-03
1027Canada2025-07-19
1028United Kingdom2025-08-15
1029Italy2025-08-06
1030Australia2025-08-04
1031United Kingdom2025-08-09
1032France2025-08-13
1033Argentina2025-07-27
1034France2025-07-25
1035Italy2025-08-17
1036Australia2025-07-30
1037Japan2025-08-16
1038Argentina2025-07-24
1039Brazil2025-08-08
1040Argentina2025-08-07
1041Spain2025-08-04
1042Japan2025-07-30
1043Argentina2025-07-23
1044Germany2025-08-07
1045Canada2025-08-11
1046Brazil2025-08-01
1047France2025-08-13
1048Australia2025-08-14
1049Australia2025-08-13

On-Demand Data

NameIdCountryDate
Aika Inouye1000Italy2025-08-04
Costa Dilliard1001Japan2025-08-13
Mayumi Kolmetz1002Germany2025-07-21
Leon Oldroyd1003Argentina2025-07-31
Emily Whobrey1004Brazil2025-08-03
Ivar Paprocki1005Japan2025-07-29
Faith Gillian1006India2025-08-06
Jeanfrancois Venere1007Japan2025-07-27
Aika Inouye1008Australia2025-07-25
Emily Whobrey1009France2025-08-09
Faith Gillian1010Argentina2025-07-22
Costa Dilliard1011Russia2025-08-03
Greenwood Bolognia1012United Kingdom2025-08-12
Munro Ferencz1013Russia2025-08-04
Costa Dilliard1014Australia2025-08-09
Ricardo Gaucho1015India2025-07-31
Leon Oldroyd1016Australia2025-08-14
Isabel Bowley1017Argentina2025-08-07
Chavez Briddick1018France2025-08-13
David Darakjy1019Japan2025-08-06
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Wickens NestleJapanElwin Sharvill UNQUALIFIED
Deepesh ChuiAustraliaOnyama Limba RENEWAL
Maisha RulapaughCanadaAsiya Javayant PROPOSAL
Stacey MacleadItalyIoni Bowcher NEGOTIATION
Sinclair WaycottUnited KingdomIvan Magalhaes NEGOTIATION
Octavia MaletBrazilBernardo Dominic NEW
Tony FollerSpainIoni Bowcher NEW
Stacey MacleadItalyXuxue Feng UNQUALIFIED
Izzy GarufiBrazilAsiya Javayant PROPOSAL
Claire TollnerCanadaAnna Fali NEGOTIATION
Adams MorascaUnited KingdomBernardo Dominic QUALIFIED
Kadeem FlosiArgentinaAsiya Javayant UNQUALIFIED
Emily WhobreyFranceOnyama Limba QUALIFIED
Francesco ShinkoCanadaXuxue Feng RENEWAL
Salvatore StockhamRussiaAnna Fali NEGOTIATION
Francesco ShinkoUnited KingdomBernardo Dominic NEW
Salvatore StockhamJapanElwin Sharvill UNQUALIFIED
Ricardo GauchoIndiaIvan Magalhaes UNQUALIFIED
Mujtaba NickaGermanyElwin Sharvill PROPOSAL
Murillo MaletFranceAnna Fali RENEWAL
Ricardo GauchoBrazilStephen Shaw NEW
Antonio CaudyIndiaAmy Elsner NEGOTIATION
Aditya KuskoSpainBernardo Dominic NEGOTIATION
Ivar PaprockiJapanAnna Fali UNQUALIFIED
Sinclair WaycottRussiaBernardo Dominic PROPOSAL
Clifford RimRussiaXuxue Feng NEW
Aditya KuskoFranceIvan Magalhaes NEW
Ricardo GauchoGermanyXuxue Feng PROPOSAL
Greenwood BologniaItalyElwin Sharvill QUALIFIED
Maisha RulapaughAustraliaOnyama Limba UNQUALIFIED
Jeanfrancois VenereGermanyAmy Elsner NEW
Clifford RimCanadaAnna Fali UNQUALIFIED
James ButtUnited KingdomAnna Fali RENEWAL
Alejandro PerinCanadaXuxue Feng RENEWAL
Chavez BriddickRussiaAmy Elsner UNQUALIFIED
Cody SaylorsSpainIvan Magalhaes RENEWAL
Johnson SergiIndiaAsiya Javayant NEW
Greenwood BologniaArgentinaIoni Bowcher PROPOSAL
Johnson SergiAustraliaAnna Fali QUALIFIED
Juan WieserArgentinaStephen Shaw 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>