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
Izzy GarufiGermanyIvan Magalhaes UNQUALIFIED
Octavia MaletItalyOnyama Limba NEGOTIATION
Sinclair WaycottJapanIoni Bowcher RENEWAL
Costa DilliardCanadaOnyama Limba PROPOSAL
Aruna FigeroaBrazilAnna Fali UNQUALIFIED
Wickens NestleJapanIoni Bowcher NEW
Izzy GarufiCanadaAsiya Javayant NEGOTIATION
Mujtaba NickaJapanXuxue Feng RENEWAL
Antonio CaudyFranceXuxue Feng NEW
Aika InouyeBrazilAnna Fali QUALIFIED
Nicolas IturbideGermanyBernardo Dominic NEW
Sinclair WaycottGermanyAmy Elsner PROPOSAL
Ricardo GauchoItalyXuxue Feng NEW
Greenwood BologniaAustraliaAnna Fali PROPOSAL
Murillo MaletUnited KingdomIvan Magalhaes PROPOSAL
Murillo MaletFranceXuxue Feng PROPOSAL
Faith GillianAustraliaOnyama Limba UNQUALIFIED
Greenwood BologniaUnited KingdomIoni Bowcher UNQUALIFIED
Jones VocelkaItalyXuxue Feng NEGOTIATION
Izzy GarufiSpainIoni Bowcher NEW
Maisha RulapaughIndiaIvan Magalhaes RENEWAL
Aditya KuskoAustraliaAsiya Javayant NEGOTIATION
Antonio CaudyIndiaIoni Bowcher UNQUALIFIED
Greenwood BologniaRussiaIoni Bowcher RENEWAL
Adams MorascaUnited KingdomAmy Elsner QUALIFIED
Isabel BowleyArgentinaOnyama Limba QUALIFIED
Murillo MaletArgentinaBernardo Dominic RENEWAL
Misaki RoysterArgentinaIoni Bowcher NEW
Francesco ShinkoCanadaXuxue Feng PROPOSAL
Johnson SergiBrazilAnna Fali NEW
Morrow RutaIndiaAsiya Javayant UNQUALIFIED
Francesco ShinkoArgentinaIvan Magalhaes NEW
Claire TollnerItalyAmy Elsner QUALIFIED
Arvin AlbaresSpainAsiya Javayant NEGOTIATION
Julie StensethSpainAnna Fali UNQUALIFIED
Rodrigues CampainCanadaXuxue Feng NEW
Jennifer AmigonCanadaIvan Magalhaes PROPOSAL
Aika InouyeRussiaStephen Shaw NEGOTIATION
Stacey MacleadFranceElwin Sharvill RENEWAL
Morrow RutaCanadaBernardo Dominic PROPOSAL
Murillo MaletRussiaElwin Sharvill UNQUALIFIED
Emily WhobreyJapanXuxue Feng PROPOSAL
Emily WhobreyIndiaElwin Sharvill PROPOSAL
Emily WhobreyAustraliaBernardo Dominic RENEWAL
Izzy GarufiUnited KingdomStephen Shaw PROPOSAL
Ricardo GauchoGermanyStephen Shaw QUALIFIED
Johnson SergiSpainAnna Fali UNQUALIFIED
Johnson SergiIndiaIvan Magalhaes PROPOSAL
James ButtFranceIvan Magalhaes NEGOTIATION
Ashley DoeGermanyAsiya Javayant QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Leja CaldareraJapanIoni Bowcher PROPOSAL
Faith GillianBrazilOnyama Limba PROPOSAL
Julie StensethItalyElwin Sharvill RENEWAL
Kaitlin OstroskyItalyIvan Magalhaes RENEWAL
Stacey MacleadCanadaXuxue Feng UNQUALIFIED
Nicolas IturbideRussiaAnna Fali QUALIFIED
Costa DilliardAustraliaOnyama Limba PROPOSAL
Kadeem FlosiSpainBernardo Dominic RENEWAL
Salvatore StockhamIndiaBernardo Dominic UNQUALIFIED
Kadeem FlosiRussiaAmy Elsner RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Chavez BriddickArgentina2026-05-14King, Christopher A Esq RENEWAL40Elwin Sharvill
1001Leja CaldareraArgentina2026-05-16Feltz Printing Service PROPOSAL25Ioni Bowcher
1002Chavez BriddickCanada2026-05-30Feiner Bros NEGOTIATION56Amy Elsner
1003Silvio SlusarskiItaly2026-06-06Printing Dimensions UNQUALIFIED82Anna Fali
1004Chavez BriddickSpain2026-05-24Dorl, James J Esq NEGOTIATION23Amy Elsner
1005David DarakjyRussia2026-06-11Chanay, Jeffrey A Esq NEW1Asiya Javayant
1006Jefferson SchemmerSpain2026-05-14Buckley Miller Wright UNQUALIFIED37Amy Elsner
1007Ivar PaprockiItaly2026-05-17Feltz Printing Service QUALIFIED63Bernardo Dominic
1008Darci PoquetteIndia2026-06-08Chapman, Ross E Esq NEGOTIATION37Elwin Sharvill
1009Munro FerenczSpain2026-05-23Rousseaux, Michael Esq UNQUALIFIED26Xuxue Feng
1010Silvio SlusarskiArgentina2026-05-24Truhlar And Truhlar Attys QUALIFIED97Stephen Shaw
1011Greenwood BologniaRussia2026-05-19Chanay, Jeffrey A Esq NEGOTIATION11Ivan Magalhaes
1012Jeanfrancois VenereGermany2026-06-02Morlong Associates NEGOTIATION82Ioni Bowcher
1013David DarakjyArgentina2026-05-19Morlong Associates RENEWAL78Ivan Magalhaes
1014Ricardo GauchoSpain2026-05-31Dorl, James J Esq UNQUALIFIED66Onyama Limba
1015Sinclair WaycottItaly2026-06-07Benton, John B Jr NEW78Anna Fali
1016Ricardo GauchoGermany2026-05-22Rousseaux, Michael Esq NEW34Xuxue Feng
1017Emily WhobreyUnited Kingdom2026-06-08Benton, John B Jr NEW8Ivan Magalhaes
1018Rodrigues CampainItaly2026-05-26Truhlar And Truhlar Attys NEW14Xuxue Feng
1019Maisha RulapaughCanada2026-06-02Printing Dimensions QUALIFIED60Anna Fali
1020Ivar PaprockiBrazil2026-05-26Benton, John B Jr NEGOTIATION71Amy Elsner
1021Johnson SergiRussia2026-06-07Feltz Printing Service NEW64Asiya Javayant
1022Costa DilliardRussia2026-05-24Rangoni Of Florence NEGOTIATION19Asiya Javayant
1023Arvin AlbaresBrazil2026-06-09Truhlar And Truhlar Attys QUALIFIED17Elwin Sharvill
1024Jefferson SchemmerAustralia2026-05-21King, Christopher A Esq QUALIFIED84Stephen Shaw
1025Arvin AlbaresItaly2026-05-31Chemel, James L Cpa UNQUALIFIED65Anna Fali
1026Aruna FigeroaUnited Kingdom2026-05-22Truhlar And Truhlar Attys NEW38Ioni Bowcher
1027Arvin AlbaresIndia2026-05-23Commercial Press QUALIFIED29Xuxue Feng
1028Ivar PaprockiArgentina2026-05-14Chapman, Ross E Esq NEW1Stephen Shaw
1029Claire TollnerGermany2026-05-15King, Christopher A Esq QUALIFIED17Xuxue Feng
1030Clifford RimBrazil2026-06-03Truhlar And Truhlar Attys NEGOTIATION16Amy Elsner
1031Emily WhobreyItaly2026-05-21Rousseaux, Michael Esq PROPOSAL34Ivan Magalhaes
1032Smith GlickUnited Kingdom2026-06-04Buckley Miller Wright NEGOTIATION68Elwin Sharvill
1033Arvin AlbaresSpain2026-05-21Rousseaux, Michael Esq PROPOSAL71Onyama Limba
1034Ricardo GauchoAustralia2026-05-26Feltz Printing Service UNQUALIFIED63Elwin Sharvill
1035Rodrigues CampainAustralia2026-06-06Chemel, James L Cpa RENEWAL44Elwin Sharvill
1036James ButtIndia2026-05-13Truhlar And Truhlar Attys NEW10Anna Fali
1037Maria MarrierJapan2026-05-30King, Christopher A Esq NEGOTIATION21Onyama Limba
1038Kaitlin OstroskyGermany2026-06-08Chemel, James L Cpa NEGOTIATION41Asiya Javayant
1039James ButtBrazil2026-06-05Printing Dimensions NEW17Asiya Javayant
1040Deepesh ChuiJapan2026-05-21Commercial Press PROPOSAL37Stephen Shaw
1041Emily WhobreyGermany2026-05-26Benton, John B Jr NEGOTIATION37Anna Fali
1042Nicolas IturbideCanada2026-05-29Commercial Press NEGOTIATION78Asiya Javayant
1043Greenwood BologniaJapan2026-05-17Printing Dimensions QUALIFIED77Ioni Bowcher
1044Mujtaba NickaUnited Kingdom2026-05-22Dorl, James J Esq PROPOSAL36Ivan Magalhaes
1045Silvio SlusarskiArgentina2026-06-10Benton, John B Jr PROPOSAL44Amy Elsner
1046Francesco ShinkoGermany2026-05-30Chemel, James L Cpa NEGOTIATION55Bernardo Dominic
1047Julie StensethIndia2026-05-23Commercial Press QUALIFIED59Ivan Magalhaes
1048Ivar PaprockiSpain2026-05-24Feiner Bros RENEWAL56Stephen Shaw
1049Costa DilliardCanada2026-05-13Morlong Associates NEW37Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Greenwood BologniaGermanyAnna Fali QUALIFIED
Juan WieserItalyAnna Fali NEGOTIATION
Darci PoquetteUnited KingdomIvan Magalhaes NEGOTIATION
Costa DilliardAustraliaStephen Shaw NEGOTIATION
Jeanfrancois VenereAustraliaXuxue Feng NEGOTIATION
Julie StensethJapanIoni Bowcher PROPOSAL
David DarakjyFranceAnna Fali NEW
Cody SaylorsUnited KingdomStephen Shaw PROPOSAL
Octavia MaletRussiaOnyama Limba RENEWAL
Julie StensethFranceIvan Magalhaes RENEWAL
Francesco ShinkoGermanyAnna Fali NEW
Ivar PaprockiAustraliaElwin Sharvill RENEWAL
James ButtArgentinaIoni Bowcher UNQUALIFIED
Mujtaba NickaCanadaAmy Elsner NEGOTIATION
Munro FerenczIndiaAnna Fali QUALIFIED
Chavez BriddickRussiaXuxue Feng NEW
Greenwood BologniaIndiaElwin Sharvill UNQUALIFIED
Faith GillianIndiaBernardo Dominic NEW
Maria MarrierJapanStephen Shaw RENEWAL
Antonio CaudySpainAnna Fali UNQUALIFIED
Morrow RutaArgentinaAnna Fali NEW
Deepesh ChuiJapanAnna Fali QUALIFIED
Tony FollerRussiaXuxue Feng UNQUALIFIED
Aditya KuskoIndiaBernardo Dominic NEW
Misaki RoysterBrazilAsiya Javayant PROPOSAL
Mayumi KolmetzCanadaOnyama Limba RENEWAL
Izzy GarufiJapanIoni Bowcher QUALIFIED
Silvio SlusarskiItalyIoni Bowcher NEW
Jennifer AmigonGermanyIoni Bowcher NEGOTIATION
Murillo MaletJapanAnna Fali NEGOTIATION
Misaki RoysterBrazilElwin Sharvill PROPOSAL
Deepesh ChuiIndiaOnyama Limba QUALIFIED
Chavez BriddickItalyAsiya Javayant NEW
Jones VocelkaSpainIoni Bowcher UNQUALIFIED
Ashley DoeJapanIvan Magalhaes NEGOTIATION
Nicolas IturbideSpainBernardo Dominic QUALIFIED
Stacey MacleadItalyIoni Bowcher QUALIFIED
Silvio SlusarskiItalyAnna Fali QUALIFIED
Darci PoquetteSpainIoni Bowcher QUALIFIED
Cody SaylorsAustraliaElwin Sharvill RENEWAL
Jones VocelkaArgentinaElwin Sharvill QUALIFIED
Mayumi KolmetzSpainIvan Magalhaes QUALIFIED
Arvin AlbaresAustraliaBernardo Dominic PROPOSAL
Maria MarrierItalyIoni Bowcher NEW
Ashley DoeGermanyAsiya Javayant PROPOSAL
Munro FerenczBrazilIoni Bowcher NEGOTIATION
Emily WhobreyAustraliaAnna Fali PROPOSAL
Rodrigues CampainAustraliaIvan Magalhaes QUALIFIED
Jeanfrancois VenereRussiaBernardo Dominic RENEWAL
Cody SaylorsIndiaAmy Elsner QUALIFIED
Frozen Columns
Name
Greenwood Bolognia
Mujtaba Nicka
Costa Dilliard
Johnson Sergi
David Darakjy
Adams Morasca
Rodrigues Campain
Sinclair Waycott
Wickens Nestle
Tony Foller
Juan Wieser
Jones Vocelka
Mujtaba Nicka
Leon Oldroyd
Darci Poquette
Rodrigues Campain
Munro Ferencz
James Butt
Silvio Slusarski
Deepesh Chui
Silvio Slusarski
Wickens Nestle
Wickens Nestle
Antonio Caudy
Jefferson Schemmer
Isabel Bowley
Emily Whobrey
James Butt
Mujtaba Nicka
Faith Gillian
Misaki Royster
Arvin Albares
James Butt
James Butt
Maisha Rulapaugh
Octavia Malet
Jeanfrancois Venere
Chavez Briddick
Morrow Ruta
Greenwood Bolognia
Rodrigues Campain
Maisha Rulapaugh
Juan Wieser
Munro Ferencz
Leon Oldroyd
Darci Poquette
Ricardo Gaucho
Izzy Garufi
Nicolas Iturbide
David Darakjy
IdCountryDate
1000United Kingdom2026-05-24
1001Russia2026-05-19
1002Spain2026-05-30
1003Argentina2026-06-06
1004Japan2026-06-11
1005Brazil2026-05-18
1006India2026-05-18
1007Japan2026-06-03
1008Italy2026-05-14
1009India2026-05-15
1010Russia2026-06-07
1011Australia2026-05-15
1012France2026-05-22
1013Spain2026-05-20
1014United Kingdom2026-06-04
1015Russia2026-05-16
1016Spain2026-05-27
1017Russia2026-05-31
1018India2026-06-08
1019Argentina2026-05-28
1020Australia2026-05-30
1021Germany2026-05-16
1022United Kingdom2026-05-22
1023Argentina2026-06-03
1024Argentina2026-06-07
1025Russia2026-05-22
1026Brazil2026-05-25
1027Germany2026-06-07
1028Canada2026-05-30
1029Brazil2026-05-20
1030France2026-05-24
1031France2026-05-29
1032Japan2026-05-20
1033Germany2026-05-31
1034Russia2026-05-28
1035Russia2026-06-07
1036Canada2026-06-06
1037India2026-05-15
1038Germany2026-05-20
1039India2026-06-01
1040Japan2026-05-23
1041Russia2026-05-28
1042Japan2026-06-06
1043India2026-05-25
1044Canada2026-05-15
1045Italy2026-06-09
1046Canada2026-06-06
1047Germany2026-06-06
1048Japan2026-05-29
1049France2026-05-19

On-Demand Data

NameIdCountryDate
Leon Oldroyd1000Spain2026-05-16
Mayumi Kolmetz1001Argentina2026-05-21
James Butt1002Germany2026-05-27
Sinclair Waycott1003Canada2026-05-30
Juan Wieser1004Germany2026-06-03
Greenwood Bolognia1005Japan2026-06-02
Morrow Ruta1006France2026-06-01
Johnson Sergi1007India2026-05-25
Salvatore Stockham1008United Kingdom2026-05-14
Morrow Ruta1009Brazil2026-06-04
Adams Morasca1010Argentina2026-05-29
Julie Stenseth1011Russia2026-05-30
Kadeem Flosi1012Argentina2026-05-20
Greenwood Bolognia1013Japan2026-05-22
Arvin Albares1014France2026-06-08
Smith Glick1015Japan2026-06-04
Adams Morasca1016India2026-05-27
Stacey Maclead1017Argentina2026-06-03
Aika Inouye1018Canada2026-06-06
Jennifer Amigon1019Brazil2026-05-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Leja CaldareraItalyElwin Sharvill PROPOSAL
Salvatore StockhamAustraliaAmy Elsner QUALIFIED
Ricardo GauchoArgentinaAnna Fali RENEWAL
Jefferson SchemmerItalyElwin Sharvill NEGOTIATION
Octavia MaletItalyOnyama Limba NEW
Ivar PaprockiUnited KingdomOnyama Limba PROPOSAL
Leja CaldareraGermanyAmy Elsner QUALIFIED
Misaki RoysterSpainAmy Elsner NEGOTIATION
Kaitlin OstroskyFranceAmy Elsner UNQUALIFIED
Cody SaylorsJapanOnyama Limba UNQUALIFIED
Costa DilliardJapanAnna Fali RENEWAL
Rodrigues CampainArgentinaXuxue Feng NEGOTIATION
Maria MarrierItalyStephen Shaw UNQUALIFIED
Isabel BowleyAustraliaStephen Shaw NEW
Ivar PaprockiSpainIvan Magalhaes NEGOTIATION
Francesco ShinkoBrazilAsiya Javayant PROPOSAL
James ButtRussiaXuxue Feng NEW
Greenwood BologniaArgentinaAsiya Javayant NEGOTIATION
Kadeem FlosiRussiaStephen Shaw QUALIFIED
Faith GillianGermanyAnna Fali NEW
Arvin AlbaresSpainAmy Elsner NEW
Johnson SergiSpainStephen Shaw RENEWAL
Wickens NestleCanadaIoni Bowcher RENEWAL
Aika InouyeSpainStephen Shaw UNQUALIFIED
Costa DilliardItalyXuxue Feng PROPOSAL
Antonio CaudyArgentinaIvan Magalhaes PROPOSAL
Deepesh ChuiRussiaBernardo Dominic NEW
Nicolas IturbideGermanyIvan Magalhaes UNQUALIFIED
Antonio CaudySpainIvan Magalhaes NEW
Jones VocelkaAustraliaAnna Fali PROPOSAL
Leon OldroydCanadaAnna Fali NEGOTIATION
Smith GlickAustraliaAsiya Javayant QUALIFIED
Costa DilliardCanadaAsiya Javayant PROPOSAL
Clifford RimUnited KingdomXuxue Feng NEGOTIATION
Jeanfrancois VenereRussiaAmy Elsner UNQUALIFIED
Smith GlickCanadaIvan Magalhaes NEW
Smith GlickBrazilAnna Fali NEGOTIATION
Julie StensethRussiaIvan Magalhaes NEW
Munro FerenczUnited KingdomAnna Fali PROPOSAL
Rodrigues CampainBrazilAsiya Javayant QUALIFIED

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