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
Rodrigues CampainUnited KingdomAmy Elsner QUALIFIED
Misaki RoysterSpainIoni Bowcher NEGOTIATION
Alejandro PerinRussiaAmy Elsner NEGOTIATION
Juan WieserBrazilIvan Magalhaes NEGOTIATION
Tony FollerItalyAsiya Javayant QUALIFIED
Sinclair WaycottGermanyIvan Magalhaes NEW
Nicolas IturbideRussiaIoni Bowcher NEW
Arvin AlbaresCanadaIvan Magalhaes NEW
Alejandro PerinAustraliaAsiya Javayant NEW
Emily WhobreyBrazilStephen Shaw QUALIFIED
Claire TollnerCanadaStephen Shaw UNQUALIFIED
Deepesh ChuiCanadaXuxue Feng NEW
Kadeem FlosiAustraliaStephen Shaw UNQUALIFIED
Emily WhobreyIndiaAmy Elsner UNQUALIFIED
Mayumi KolmetzJapanIvan Magalhaes RENEWAL
Misaki RoysterGermanyXuxue Feng RENEWAL
Chavez BriddickAustraliaIvan Magalhaes NEW
Wickens NestleArgentinaXuxue Feng RENEWAL
Jones VocelkaJapanIvan Magalhaes NEW
Jefferson SchemmerSpainAnna Fali UNQUALIFIED
Francesco ShinkoUnited KingdomAnna Fali NEGOTIATION
Ricardo GauchoIndiaElwin Sharvill PROPOSAL
Maria MarrierAustraliaOnyama Limba QUALIFIED
Maria MarrierJapanXuxue Feng NEW
Ashley DoeSpainXuxue Feng QUALIFIED
Johnson SergiAustraliaOnyama Limba QUALIFIED
Munro FerenczJapanStephen Shaw NEGOTIATION
Ricardo GauchoItalyElwin Sharvill NEGOTIATION
Aika InouyeItalyAsiya Javayant UNQUALIFIED
Deepesh ChuiRussiaXuxue Feng NEGOTIATION
Juan WieserSpainAnna Fali QUALIFIED
Adams MorascaSpainBernardo Dominic UNQUALIFIED
Clifford RimJapanBernardo Dominic PROPOSAL
Mujtaba NickaBrazilStephen Shaw RENEWAL
Chavez BriddickItalyAsiya Javayant NEW
Salvatore StockhamArgentinaElwin Sharvill NEGOTIATION
Octavia MaletBrazilIvan Magalhaes QUALIFIED
Clifford RimCanadaAsiya Javayant NEW
Costa DilliardUnited KingdomAnna Fali QUALIFIED
Francesco ShinkoGermanyXuxue Feng QUALIFIED
Francesco ShinkoCanadaStephen Shaw NEW
Murillo MaletFranceAmy Elsner RENEWAL
Jeanfrancois VenereBrazilBernardo Dominic QUALIFIED
Jennifer AmigonAustraliaXuxue Feng NEGOTIATION
Rodrigues CampainArgentinaXuxue Feng RENEWAL
Izzy GarufiFranceOnyama Limba RENEWAL
Smith GlickRussiaIvan Magalhaes RENEWAL
Salvatore StockhamJapanStephen Shaw NEGOTIATION
Sinclair WaycottSpainElwin Sharvill NEW
Maria MarrierItalyAsiya Javayant UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Juan WieserJapanAnna Fali QUALIFIED
Wickens NestleGermanyXuxue Feng RENEWAL
Johnson SergiIndiaOnyama Limba PROPOSAL
Morrow RutaRussiaAnna Fali UNQUALIFIED
Aditya KuskoRussiaAsiya Javayant RENEWAL
Claire TollnerIndiaIvan Magalhaes RENEWAL
Sinclair WaycottJapanIvan Magalhaes NEW
Murillo MaletBrazilAnna Fali UNQUALIFIED
Aruna FigeroaRussiaAmy Elsner NEW
Salvatore StockhamGermanyXuxue Feng RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Darci PoquetteSpain2026-05-22Dorl, James J Esq UNQUALIFIED77Onyama Limba
1001Maria MarrierArgentina2026-05-02Feltz Printing Service NEGOTIATION31Xuxue Feng
1002Izzy GarufiBrazil2026-04-27Rousseaux, Michael Esq UNQUALIFIED30Stephen Shaw
1003Aruna FigeroaItaly2026-05-20Buckley Miller Wright NEW49Ivan Magalhaes
1004Salvatore StockhamAustralia2026-05-15Feiner Bros UNQUALIFIED60Asiya Javayant
1005Juan WieserJapan2026-05-06Chapman, Ross E Esq QUALIFIED60Ioni Bowcher
1006Salvatore StockhamIndia2026-05-01Chanay, Jeffrey A Esq RENEWAL7Xuxue Feng
1007Smith GlickAustralia2026-04-27Benton, John B Jr RENEWAL98Ivan Magalhaes
1008Misaki RoysterBrazil2026-04-27Rousseaux, Michael Esq QUALIFIED95Anna Fali
1009Greenwood BologniaGermany2026-05-04Commercial Press PROPOSAL78Xuxue Feng
1010Maria MarrierJapan2026-05-17Morlong Associates NEW83Elwin Sharvill
1011Deepesh ChuiRussia2026-05-09Dorl, James J Esq NEGOTIATION30Ioni Bowcher
1012Antonio CaudyUnited Kingdom2026-05-15Printing Dimensions NEW1Xuxue Feng
1013Julie StensethArgentina2026-05-23Chapman, Ross E Esq QUALIFIED15Bernardo Dominic
1014Isabel BowleyIndia2026-05-10Morlong Associates QUALIFIED18Anna Fali
1015Stacey MacleadItaly2026-05-13Printing Dimensions RENEWAL37Elwin Sharvill
1016Clifford RimGermany2026-05-21Chemel, James L Cpa QUALIFIED77Elwin Sharvill
1017Misaki RoysterArgentina2026-05-16Truhlar And Truhlar Attys NEW78Amy Elsner
1018Julie StensethBrazil2026-05-13Dorl, James J Esq QUALIFIED13Onyama Limba
1019Jefferson SchemmerGermany2026-05-17Morlong Associates NEGOTIATION65Stephen Shaw
1020Alejandro PerinBrazil2026-05-13Truhlar And Truhlar Attys NEW97Ivan Magalhaes
1021Wickens NestleGermany2026-05-07Chapman, Ross E Esq PROPOSAL90Asiya Javayant
1022Salvatore StockhamUnited Kingdom2026-05-09Rangoni Of Florence PROPOSAL56Asiya Javayant
1023Salvatore StockhamRussia2026-05-19Chemel, James L Cpa PROPOSAL5Onyama Limba
1024Costa DilliardJapan2026-04-28Truhlar And Truhlar Attys NEGOTIATION40Bernardo Dominic
1025Kadeem FlosiRussia2026-05-22Chanay, Jeffrey A Esq NEGOTIATION56Xuxue Feng
1026Mujtaba NickaSpain2026-05-05Chapman, Ross E Esq PROPOSAL16Bernardo Dominic
1027Adams MorascaUnited Kingdom2026-05-06Morlong Associates QUALIFIED39Elwin Sharvill
1028Chavez BriddickGermany2026-04-27Dorl, James J Esq UNQUALIFIED89Ioni Bowcher
1029Murillo MaletSpain2026-05-12Chapman, Ross E Esq NEGOTIATION37Ioni Bowcher
1030Kaitlin OstroskyJapan2026-05-22Buckley Miller Wright PROPOSAL88Amy Elsner
1031Aruna FigeroaSpain2026-05-17Chanay, Jeffrey A Esq PROPOSAL60Anna Fali
1032Mayumi KolmetzFrance2026-05-04Feiner Bros RENEWAL98Ioni Bowcher
1033Clifford RimCanada2026-05-15Dorl, James J Esq UNQUALIFIED71Onyama Limba
1034Arvin AlbaresSpain2026-05-16Morlong Associates QUALIFIED85Anna Fali
1035Jefferson SchemmerSpain2026-05-19Chapman, Ross E Esq NEGOTIATION84Asiya Javayant
1036Jones VocelkaJapan2026-05-14Rousseaux, Michael Esq UNQUALIFIED91Elwin Sharvill
1037Kadeem FlosiUnited Kingdom2026-05-09Rangoni Of Florence NEW26Anna Fali
1038Greenwood BologniaBrazil2026-05-24Chanay, Jeffrey A Esq RENEWAL5Stephen Shaw
1039Sinclair WaycottFrance2026-05-14Feltz Printing Service QUALIFIED71Stephen Shaw
1040Arvin AlbaresAustralia2026-05-24Dorl, James J Esq QUALIFIED61Ivan Magalhaes
1041Alejandro PerinSpain2026-05-11Chemel, James L Cpa UNQUALIFIED5Elwin Sharvill
1042Nicolas IturbideIndia2026-05-10Feltz Printing Service NEW58Asiya Javayant
1043Johnson SergiSpain2026-05-10Dorl, James J Esq UNQUALIFIED89Asiya Javayant
1044Isabel BowleyFrance2026-05-01Chanay, Jeffrey A Esq QUALIFIED61Elwin Sharvill
1045David DarakjyGermany2026-05-24Rousseaux, Michael Esq QUALIFIED96Anna Fali
1046Antonio CaudyRussia2026-04-26Commercial Press NEGOTIATION95Asiya Javayant
1047Sinclair WaycottJapan2026-04-27Morlong Associates RENEWAL88Stephen Shaw
1048Ashley DoeBrazil2026-05-22Chemel, James L Cpa UNQUALIFIED50Ioni Bowcher
1049Sinclair WaycottBrazil2026-05-14Truhlar And Truhlar Attys QUALIFIED95Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Johnson SergiUnited KingdomAmy Elsner NEW
Deepesh ChuiGermanyAnna Fali PROPOSAL
Nicolas IturbideRussiaIvan Magalhaes QUALIFIED
Adams MorascaRussiaAnna Fali NEW
Ivar PaprockiFranceStephen Shaw RENEWAL
Ricardo GauchoSpainIoni Bowcher NEW
Silvio SlusarskiIndiaAsiya Javayant QUALIFIED
Wickens NestleJapanOnyama Limba QUALIFIED
Smith GlickJapanBernardo Dominic UNQUALIFIED
Jeanfrancois VenereIndiaAnna Fali QUALIFIED
Tony FollerSpainStephen Shaw RENEWAL
Rodrigues CampainFranceStephen Shaw PROPOSAL
Nicolas IturbideCanadaIvan Magalhaes RENEWAL
David DarakjyFranceOnyama Limba NEW
Maria MarrierArgentinaAnna Fali QUALIFIED
Tony FollerSpainIvan Magalhaes QUALIFIED
Deepesh ChuiItalyOnyama Limba RENEWAL
Kaitlin OstroskyUnited KingdomStephen Shaw NEW
Morrow RutaJapanOnyama Limba QUALIFIED
Jones VocelkaBrazilAsiya Javayant QUALIFIED
Silvio SlusarskiSpainIoni Bowcher RENEWAL
Francesco ShinkoSpainIoni Bowcher RENEWAL
Wickens NestleCanadaIvan Magalhaes QUALIFIED
Adams MorascaRussiaIoni Bowcher RENEWAL
Ashley DoeFranceAmy Elsner PROPOSAL
Misaki RoysterGermanyAnna Fali PROPOSAL
Francesco ShinkoIndiaIvan Magalhaes NEW
Chavez BriddickItalyXuxue Feng PROPOSAL
Morrow RutaArgentinaOnyama Limba PROPOSAL
Jefferson SchemmerBrazilAsiya Javayant UNQUALIFIED
Claire TollnerAustraliaBernardo Dominic UNQUALIFIED
Jennifer AmigonBrazilAmy Elsner UNQUALIFIED
Isabel BowleyJapanStephen Shaw NEW
Kaitlin OstroskyItalyAmy Elsner RENEWAL
Morrow RutaJapanElwin Sharvill UNQUALIFIED
Leja CaldareraArgentinaIvan Magalhaes UNQUALIFIED
Antonio CaudyUnited KingdomIoni Bowcher RENEWAL
Izzy GarufiBrazilIoni Bowcher QUALIFIED
Aruna FigeroaRussiaIvan Magalhaes NEW
Julie StensethRussiaIvan Magalhaes NEGOTIATION
Greenwood BologniaFranceXuxue Feng NEW
Nicolas IturbideSpainAnna Fali PROPOSAL
Aditya KuskoJapanElwin Sharvill NEW
Emily WhobreyGermanyAsiya Javayant RENEWAL
Chavez BriddickJapanBernardo Dominic PROPOSAL
James ButtSpainXuxue Feng QUALIFIED
Juan WieserIndiaAmy Elsner QUALIFIED
Sinclair WaycottJapanIoni Bowcher PROPOSAL
Darci PoquetteFranceAmy Elsner QUALIFIED
Emily WhobreyAustraliaXuxue Feng NEW
Frozen Columns
Name
Morrow Ruta
Smith Glick
Izzy Garufi
Claire Tollner
Tony Foller
Cody Saylors
Ivar Paprocki
Arvin Albares
Jefferson Schemmer
Julie Stenseth
Murillo Malet
Leja Caldarera
Morrow Ruta
Johnson Sergi
Sinclair Waycott
Izzy Garufi
Aika Inouye
Costa Dilliard
Kadeem Flosi
Maria Marrier
Arvin Albares
Misaki Royster
Jennifer Amigon
Emily Whobrey
Mujtaba Nicka
Leon Oldroyd
Sinclair Waycott
Kaitlin Ostrosky
Johnson Sergi
Jennifer Amigon
Nicolas Iturbide
Jefferson Schemmer
Smith Glick
Aditya Kusko
Clifford Rim
Ashley Doe
James Butt
Rodrigues Campain
Aditya Kusko
Julie Stenseth
Maria Marrier
Johnson Sergi
Jennifer Amigon
Leon Oldroyd
Jefferson Schemmer
Costa Dilliard
Jeanfrancois Venere
Clifford Rim
Adams Morasca
Claire Tollner
IdCountryDate
1000Argentina2026-05-09
1001Brazil2026-05-04
1002Italy2026-05-08
1003Italy2026-05-10
1004Australia2026-05-07
1005United Kingdom2026-05-09
1006Canada2026-04-30
1007Japan2026-05-20
1008Japan2026-05-01
1009Germany2026-05-03
1010Italy2026-05-21
1011Spain2026-04-30
1012Spain2026-05-07
1013Germany2026-05-09
1014Germany2026-05-08
1015Russia2026-05-07
1016Russia2026-05-02
1017Germany2026-05-21
1018Argentina2026-05-10
1019Russia2026-05-01
1020Germany2026-05-08
1021Canada2026-05-04
1022India2026-05-20
1023Italy2026-05-11
1024India2026-05-10
1025Spain2026-05-12
1026India2026-05-24
1027Japan2026-05-11
1028Australia2026-04-30
1029Brazil2026-04-27
1030Italy2026-05-04
1031Spain2026-05-20
1032Australia2026-05-04
1033India2026-04-27
1034Australia2026-04-25
1035Canada2026-05-18
1036France2026-05-15
1037Brazil2026-04-28
1038Japan2026-05-11
1039India2026-05-07
1040Germany2026-05-05
1041Canada2026-05-09
1042Argentina2026-05-10
1043France2026-04-28
1044Australia2026-04-28
1045Australia2026-05-13
1046Spain2026-05-23
1047Australia2026-04-27
1048Russia2026-05-16
1049Argentina2026-05-07

On-Demand Data

NameIdCountryDate
Leja Caldarera1000Canada2026-05-14
Cody Saylors1001Spain2026-04-28
Costa Dilliard1002India2026-05-10
Isabel Bowley1003United Kingdom2026-05-02
Kaitlin Ostrosky1004United Kingdom2026-05-12
Isabel Bowley1005Italy2026-05-22
Nicolas Iturbide1006United Kingdom2026-05-24
Jeanfrancois Venere1007Canada2026-05-04
Munro Ferencz1008Germany2026-05-12
Izzy Garufi1009Australia2026-05-19
Wickens Nestle1010Japan2026-05-10
Mujtaba Nicka1011Canada2026-05-15
Costa Dilliard1012India2026-05-06
Juan Wieser1013Canada2026-05-20
Darci Poquette1014Argentina2026-05-13
Aruna Figeroa1015France2026-04-30
Octavia Malet1016United Kingdom2026-04-30
Deepesh Chui1017Russia2026-05-22
Mujtaba Nicka1018Russia2026-05-13
Smith Glick1019Germany2026-05-24
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
James ButtAustraliaAnna Fali RENEWAL
Jones VocelkaBrazilAmy Elsner NEW
Jennifer AmigonItalyAnna Fali NEW
Mayumi KolmetzUnited KingdomAnna Fali RENEWAL
Ricardo GauchoArgentinaIoni Bowcher UNQUALIFIED
Ricardo GauchoAustraliaIvan Magalhaes NEW
James ButtBrazilElwin Sharvill UNQUALIFIED
Deepesh ChuiArgentinaXuxue Feng NEGOTIATION
Stacey MacleadJapanAmy Elsner NEGOTIATION
Mayumi KolmetzSpainAnna Fali NEW
Murillo MaletBrazilIoni Bowcher UNQUALIFIED
Nicolas IturbideSpainStephen Shaw NEW
Kaitlin OstroskyItalyIvan Magalhaes NEW
Munro FerenczRussiaAsiya Javayant NEGOTIATION
Kadeem FlosiItalyElwin Sharvill NEGOTIATION
Mujtaba NickaArgentinaOnyama Limba NEGOTIATION
Kadeem FlosiIndiaElwin Sharvill UNQUALIFIED
Morrow RutaJapanElwin Sharvill PROPOSAL
Isabel BowleyRussiaBernardo Dominic PROPOSAL
Aditya KuskoUnited KingdomBernardo Dominic NEW
Leon OldroydRussiaAsiya Javayant NEW
Maisha RulapaughIndiaElwin Sharvill UNQUALIFIED
Mayumi KolmetzAustraliaAnna Fali RENEWAL
Adams MorascaArgentinaIoni Bowcher NEW
Leon OldroydSpainAmy Elsner RENEWAL
Adams MorascaFranceIoni Bowcher RENEWAL
Kaitlin OstroskySpainAnna Fali RENEWAL
Maria MarrierItalyIoni Bowcher QUALIFIED
Jefferson SchemmerJapanStephen Shaw NEW
Johnson SergiArgentinaBernardo Dominic RENEWAL
Tony FollerUnited KingdomOnyama Limba RENEWAL
Leon OldroydRussiaBernardo Dominic RENEWAL
Maisha RulapaughArgentinaAmy Elsner NEGOTIATION
Aruna FigeroaBrazilAnna Fali QUALIFIED
Darci PoquetteGermanyOnyama Limba QUALIFIED
Deepesh ChuiUnited KingdomStephen Shaw PROPOSAL
Greenwood BologniaJapanBernardo Dominic NEW
Chavez BriddickBrazilIoni Bowcher NEW
Cody SaylorsRussiaStephen Shaw QUALIFIED
Aika InouyeBrazilElwin Sharvill 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>