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
Cody SaylorsUnited KingdomAnna Fali UNQUALIFIED
Ashley DoeIndiaOnyama Limba QUALIFIED
Rodrigues CampainJapanElwin Sharvill PROPOSAL
David DarakjySpainAnna Fali NEW
James ButtFranceAsiya Javayant PROPOSAL
Clifford RimCanadaAmy Elsner UNQUALIFIED
Darci PoquetteGermanyXuxue Feng RENEWAL
Ivar PaprockiUnited KingdomAnna Fali PROPOSAL
Isabel BowleySpainOnyama Limba PROPOSAL
Mayumi KolmetzRussiaBernardo Dominic PROPOSAL
Emily WhobreyRussiaStephen Shaw RENEWAL
Tony FollerSpainIoni Bowcher UNQUALIFIED
Mujtaba NickaAustraliaAsiya Javayant PROPOSAL
Jennifer AmigonIndiaElwin Sharvill UNQUALIFIED
Clifford RimArgentinaOnyama Limba NEW
Smith GlickCanadaAsiya Javayant PROPOSAL
Leon OldroydJapanBernardo Dominic QUALIFIED
Morrow RutaBrazilAsiya Javayant RENEWAL
Wickens NestleGermanyIvan Magalhaes UNQUALIFIED
Kadeem FlosiItalyOnyama Limba QUALIFIED
Jones VocelkaFranceAmy Elsner NEW
Maisha RulapaughGermanyAmy Elsner NEGOTIATION
Leon OldroydSpainXuxue Feng PROPOSAL
Aditya KuskoJapanOnyama Limba NEW
Costa DilliardSpainAmy Elsner PROPOSAL
Salvatore StockhamGermanyAsiya Javayant RENEWAL
Jefferson SchemmerFranceStephen Shaw RENEWAL
Jefferson SchemmerRussiaIoni Bowcher NEW
David DarakjyUnited KingdomAnna Fali QUALIFIED
Maisha RulapaughAustraliaAmy Elsner RENEWAL
Cody SaylorsCanadaElwin Sharvill PROPOSAL
Aditya KuskoItalyAsiya Javayant NEGOTIATION
Cody SaylorsBrazilXuxue Feng RENEWAL
Izzy GarufiFranceStephen Shaw NEW
Francesco ShinkoItalyOnyama Limba UNQUALIFIED
Morrow RutaAustraliaAsiya Javayant QUALIFIED
Johnson SergiAustraliaOnyama Limba UNQUALIFIED
Claire TollnerSpainStephen Shaw NEGOTIATION
Arvin AlbaresCanadaStephen Shaw NEW
Francesco ShinkoCanadaIoni Bowcher QUALIFIED
Salvatore StockhamItalyAsiya Javayant NEGOTIATION
Silvio SlusarskiItalyStephen Shaw QUALIFIED
Adams MorascaItalyStephen Shaw PROPOSAL
Nicolas IturbideIndiaAnna Fali QUALIFIED
Isabel BowleyRussiaIoni Bowcher QUALIFIED
Jefferson SchemmerItalyOnyama Limba NEGOTIATION
Kadeem FlosiFranceIoni Bowcher NEGOTIATION
Emily WhobreyGermanyAsiya Javayant RENEWAL
Faith GillianItalyAnna Fali RENEWAL
Juan WieserRussiaIvan Magalhaes QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Juan WieserCanadaOnyama Limba NEGOTIATION
Sinclair WaycottUnited KingdomBernardo Dominic NEW
Izzy GarufiUnited KingdomOnyama Limba RENEWAL
Kadeem FlosiArgentinaStephen Shaw PROPOSAL
Faith GillianIndiaXuxue Feng PROPOSAL
Stacey MacleadAustraliaAmy Elsner NEW
Octavia MaletItalyOnyama Limba PROPOSAL
Isabel BowleyIndiaOnyama Limba PROPOSAL
Leon OldroydUnited KingdomElwin Sharvill NEW
Salvatore StockhamUnited KingdomIoni Bowcher UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Rodrigues CampainIndia2026-05-20Buckley Miller Wright UNQUALIFIED35Bernardo Dominic
1001Francesco ShinkoUnited Kingdom2026-05-20Feiner Bros PROPOSAL23Ioni Bowcher
1002Salvatore StockhamRussia2026-06-10King, Christopher A Esq RENEWAL53Ioni Bowcher
1003Greenwood BologniaCanada2026-06-09Chanay, Jeffrey A Esq PROPOSAL13Bernardo Dominic
1004Alejandro PerinBrazil2026-06-16Buckley Miller Wright PROPOSAL53Ivan Magalhaes
1005Ivar PaprockiRussia2026-05-23Benton, John B Jr PROPOSAL88Ivan Magalhaes
1006Silvio SlusarskiIndia2026-06-01Feltz Printing Service NEGOTIATION42Amy Elsner
1007Maria MarrierGermany2026-05-31Commercial Press UNQUALIFIED10Stephen Shaw
1008Jennifer AmigonRussia2026-06-11Benton, John B Jr PROPOSAL25Ioni Bowcher
1009Greenwood BologniaItaly2026-06-14Benton, John B Jr NEW10Ivan Magalhaes
1010Kaitlin OstroskyFrance2026-05-21Truhlar And Truhlar Attys NEW9Ivan Magalhaes
1011Smith GlickAustralia2026-06-06Truhlar And Truhlar Attys PROPOSAL84Bernardo Dominic
1012Stacey MacleadRussia2026-05-29Chemel, James L Cpa UNQUALIFIED71Stephen Shaw
1013Isabel BowleyCanada2026-06-14Dorl, James J Esq NEGOTIATION96Ioni Bowcher
1014Costa DilliardIndia2026-06-17Feiner Bros RENEWAL48Ioni Bowcher
1015Aruna FigeroaBrazil2026-05-23Buckley Miller Wright QUALIFIED80Anna Fali
1016Jefferson SchemmerFrance2026-06-06Benton, John B Jr NEGOTIATION27Bernardo Dominic
1017Antonio CaudyJapan2026-06-14Chanay, Jeffrey A Esq PROPOSAL45Stephen Shaw
1018Kadeem FlosiIndia2026-06-13Morlong Associates NEW98Ioni Bowcher
1019Costa DilliardBrazil2026-05-26Chemel, James L Cpa RENEWAL34Xuxue Feng
1020Rodrigues CampainUnited Kingdom2026-05-29Chanay, Jeffrey A Esq NEGOTIATION29Ivan Magalhaes
1021Johnson SergiArgentina2026-06-16Truhlar And Truhlar Attys UNQUALIFIED24Amy Elsner
1022Murillo MaletUnited Kingdom2026-06-07Benton, John B Jr NEW46Asiya Javayant
1023Chavez BriddickIndia2026-06-01Truhlar And Truhlar Attys UNQUALIFIED41Xuxue Feng
1024Julie StensethAustralia2026-06-10Feiner Bros RENEWAL71Xuxue Feng
1025Misaki RoysterRussia2026-05-20Commercial Press NEGOTIATION68Xuxue Feng
1026Faith GillianItaly2026-06-05Benton, John B Jr NEGOTIATION42Elwin Sharvill
1027Aika InouyeBrazil2026-06-15Buckley Miller Wright NEW76Xuxue Feng
1028Julie StensethUnited Kingdom2026-06-04Feltz Printing Service QUALIFIED13Amy Elsner
1029Julie StensethAustralia2026-06-01Buckley Miller Wright UNQUALIFIED51Anna Fali
1030Claire TollnerSpain2026-06-10Dorl, James J Esq PROPOSAL92Amy Elsner
1031Emily WhobreyRussia2026-06-15Truhlar And Truhlar Attys NEW84Bernardo Dominic
1032Jones VocelkaRussia2026-06-06Truhlar And Truhlar Attys PROPOSAL29Stephen Shaw
1033Arvin AlbaresGermany2026-06-06Feiner Bros NEGOTIATION73Elwin Sharvill
1034Ashley DoeJapan2026-05-29Feltz Printing Service PROPOSAL34Amy Elsner
1035Maisha RulapaughItaly2026-06-13Commercial Press UNQUALIFIED89Anna Fali
1036Cody SaylorsIndia2026-05-22Rousseaux, Michael Esq UNQUALIFIED25Asiya Javayant
1037Smith GlickArgentina2026-06-13Chanay, Jeffrey A Esq RENEWAL0Xuxue Feng
1038Emily WhobreyArgentina2026-05-30Chapman, Ross E Esq RENEWAL98Stephen Shaw
1039Aika InouyeArgentina2026-06-10Morlong Associates PROPOSAL32Ivan Magalhaes
1040Johnson SergiArgentina2026-05-27Dorl, James J Esq NEGOTIATION44Stephen Shaw
1041David DarakjyFrance2026-05-26King, Christopher A Esq NEW65Ioni Bowcher
1042Maria MarrierRussia2026-05-26Feltz Printing Service NEW64Amy Elsner
1043Ivar PaprockiGermany2026-06-13Morlong Associates QUALIFIED68Bernardo Dominic
1044Sinclair WaycottItaly2026-06-11Buckley Miller Wright NEGOTIATION55Stephen Shaw
1045Kaitlin OstroskyRussia2026-05-24Chanay, Jeffrey A Esq PROPOSAL76Bernardo Dominic
1046Leja CaldareraGermany2026-06-09Benton, John B Jr PROPOSAL67Ioni Bowcher
1047Leja CaldareraUnited Kingdom2026-05-30Buckley Miller Wright PROPOSAL31Elwin Sharvill
1048Octavia MaletCanada2026-06-09Rangoni Of Florence QUALIFIED13Ioni Bowcher
1049Emily WhobreyArgentina2026-06-10Buckley Miller Wright NEW99Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Murillo MaletFranceAsiya Javayant UNQUALIFIED
Rodrigues CampainJapanBernardo Dominic NEGOTIATION
Francesco ShinkoAustraliaIvan Magalhaes PROPOSAL
Kaitlin OstroskyAustraliaAmy Elsner UNQUALIFIED
Antonio CaudyArgentinaBernardo Dominic UNQUALIFIED
Clifford RimAustraliaBernardo Dominic UNQUALIFIED
Juan WieserArgentinaAsiya Javayant PROPOSAL
Jeanfrancois VenereCanadaXuxue Feng RENEWAL
Antonio CaudyUnited KingdomAnna Fali NEW
Maisha RulapaughUnited KingdomAnna Fali NEGOTIATION
Aruna FigeroaAustraliaStephen Shaw NEW
Jeanfrancois VenereUnited KingdomElwin Sharvill QUALIFIED
Morrow RutaIndiaBernardo Dominic RENEWAL
Rodrigues CampainCanadaStephen Shaw NEGOTIATION
David DarakjyItalyXuxue Feng NEW
Johnson SergiGermanyElwin Sharvill NEW
David DarakjyBrazilXuxue Feng NEW
Mayumi KolmetzIndiaOnyama Limba RENEWAL
Arvin AlbaresItalyOnyama Limba RENEWAL
Stacey MacleadBrazilAsiya Javayant QUALIFIED
Chavez BriddickIndiaXuxue Feng UNQUALIFIED
Ivar PaprockiItalyOnyama Limba UNQUALIFIED
Francesco ShinkoItalyAnna Fali UNQUALIFIED
Aditya KuskoJapanAmy Elsner QUALIFIED
Adams MorascaCanadaXuxue Feng UNQUALIFIED
Darci PoquetteRussiaIoni Bowcher NEW
Chavez BriddickSpainElwin Sharvill QUALIFIED
Ricardo GauchoCanadaAmy Elsner QUALIFIED
Nicolas IturbideCanadaAmy Elsner NEGOTIATION
Julie StensethIndiaIvan Magalhaes NEW
Claire TollnerFranceAmy Elsner PROPOSAL
Misaki RoysterAustraliaIoni Bowcher QUALIFIED
Alejandro PerinJapanIoni Bowcher UNQUALIFIED
Munro FerenczIndiaIoni Bowcher NEW
Aditya KuskoItalyIvan Magalhaes RENEWAL
Octavia MaletAustraliaAnna Fali QUALIFIED
Smith GlickBrazilBernardo Dominic NEW
Claire TollnerGermanyIvan Magalhaes NEW
Jeanfrancois VenereArgentinaXuxue Feng NEGOTIATION
James ButtGermanyAnna Fali RENEWAL
Morrow RutaFranceAnna Fali QUALIFIED
Clifford RimCanadaElwin Sharvill NEW
Johnson SergiBrazilAmy Elsner RENEWAL
Adams MorascaJapanStephen Shaw NEW
Aruna FigeroaItalyIoni Bowcher PROPOSAL
Jennifer AmigonUnited KingdomBernardo Dominic NEGOTIATION
Misaki RoysterGermanyOnyama Limba RENEWAL
Arvin AlbaresItalyAsiya Javayant UNQUALIFIED
Mayumi KolmetzArgentinaAsiya Javayant RENEWAL
Johnson SergiFranceXuxue Feng UNQUALIFIED
Frozen Columns
Name
Johnson Sergi
Kadeem Flosi
Darci Poquette
Jeanfrancois Venere
Emily Whobrey
Ashley Doe
Tony Foller
Mayumi Kolmetz
Jones Vocelka
Munro Ferencz
Sinclair Waycott
David Darakjy
Murillo Malet
Izzy Garufi
Jones Vocelka
Sinclair Waycott
Greenwood Bolognia
Francesco Shinko
Izzy Garufi
Julie Stenseth
Jennifer Amigon
Isabel Bowley
Mayumi Kolmetz
Ricardo Gaucho
Jeanfrancois Venere
Maria Marrier
Aruna Figeroa
Sinclair Waycott
Nicolas Iturbide
Rodrigues Campain
Julie Stenseth
Ashley Doe
Juan Wieser
Jones Vocelka
Arvin Albares
Jones Vocelka
Izzy Garufi
Maisha Rulapaugh
Francesco Shinko
Emily Whobrey
Emily Whobrey
Aika Inouye
Costa Dilliard
Mujtaba Nicka
James Butt
Stacey Maclead
Cody Saylors
Aika Inouye
Francesco Shinko
Leja Caldarera
IdCountryDate
1000United Kingdom2026-06-08
1001India2026-05-25
1002Australia2026-05-22
1003Germany2026-05-26
1004Spain2026-06-14
1005Germany2026-06-16
1006Brazil2026-06-16
1007France2026-05-22
1008Canada2026-06-15
1009Russia2026-06-14
1010Argentina2026-06-03
1011United Kingdom2026-05-28
1012France2026-05-25
1013France2026-05-25
1014Italy2026-06-06
1015Spain2026-05-27
1016India2026-05-19
1017France2026-06-07
1018Spain2026-05-20
1019Italy2026-05-29
1020Italy2026-05-22
1021United Kingdom2026-05-21
1022Australia2026-06-15
1023Germany2026-05-20
1024Russia2026-06-12
1025Japan2026-06-12
1026Russia2026-05-25
1027Germany2026-06-09
1028Australia2026-06-14
1029Argentina2026-06-07
1030Canada2026-05-30
1031Australia2026-05-29
1032Spain2026-05-21
1033Germany2026-06-05
1034Japan2026-06-11
1035Italy2026-06-11
1036Brazil2026-05-26
1037Italy2026-06-02
1038United Kingdom2026-06-17
1039Argentina2026-05-29
1040Canada2026-06-01
1041Japan2026-06-17
1042Australia2026-05-26
1043France2026-05-31
1044Argentina2026-05-19
1045Spain2026-06-09
1046Germany2026-05-27
1047Argentina2026-06-07
1048Japan2026-05-22
1049Canada2026-05-24

On-Demand Data

NameIdCountryDate
Jennifer Amigon1000Australia2026-06-12
Ashley Doe1001United Kingdom2026-06-09
Cody Saylors1002Russia2026-05-29
Tony Foller1003Russia2026-06-14
Kadeem Flosi1004Spain2026-05-26
Tony Foller1005Japan2026-05-27
Salvatore Stockham1006Italy2026-05-20
Juan Wieser1007Canada2026-06-10
Nicolas Iturbide1008India2026-05-22
Wickens Nestle1009Brazil2026-06-14
Ashley Doe1010France2026-06-15
Adams Morasca1011Russia2026-06-12
Izzy Garufi1012Japan2026-05-31
Nicolas Iturbide1013Russia2026-06-16
Stacey Maclead1014India2026-05-21
Claire Tollner1015Italy2026-05-20
Nicolas Iturbide1016Japan2026-05-22
Isabel Bowley1017Italy2026-06-16
Kaitlin Ostrosky1018Canada2026-06-17
Cody Saylors1019Canada2026-06-12
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Cody SaylorsFranceIoni Bowcher NEGOTIATION
Greenwood BologniaUnited KingdomBernardo Dominic UNQUALIFIED
Wickens NestleGermanyIvan Magalhaes PROPOSAL
Leon OldroydSpainBernardo Dominic QUALIFIED
Leja CaldareraRussiaElwin Sharvill QUALIFIED
Nicolas IturbideJapanAsiya Javayant PROPOSAL
Isabel BowleyArgentinaIoni Bowcher RENEWAL
Murillo MaletRussiaAsiya Javayant PROPOSAL
Deepesh ChuiJapanOnyama Limba RENEWAL
David DarakjyIndiaBernardo Dominic PROPOSAL
Izzy GarufiAustraliaIoni Bowcher UNQUALIFIED
Ashley DoeJapanStephen Shaw QUALIFIED
Murillo MaletGermanyIoni Bowcher NEGOTIATION
Maria MarrierJapanIoni Bowcher PROPOSAL
David DarakjyAustraliaXuxue Feng NEGOTIATION
Juan WieserAustraliaAmy Elsner RENEWAL
Ivar PaprockiRussiaOnyama Limba UNQUALIFIED
Tony FollerUnited KingdomAsiya Javayant NEGOTIATION
Octavia MaletIndiaStephen Shaw QUALIFIED
James ButtItalyAsiya Javayant NEW
Ricardo GauchoRussiaOnyama Limba UNQUALIFIED
Jeanfrancois VenereUnited KingdomIoni Bowcher PROPOSAL
Jefferson SchemmerGermanyIoni Bowcher NEW
Maria MarrierCanadaElwin Sharvill RENEWAL
Tony FollerIndiaAsiya Javayant RENEWAL
Silvio SlusarskiCanadaAsiya Javayant NEGOTIATION
Izzy GarufiRussiaBernardo Dominic PROPOSAL
Octavia MaletArgentinaElwin Sharvill NEW
Jennifer AmigonJapanElwin Sharvill NEGOTIATION
Arvin AlbaresIndiaIoni Bowcher NEW
Ricardo GauchoBrazilOnyama Limba NEGOTIATION
Izzy GarufiUnited KingdomXuxue Feng NEW
Silvio SlusarskiRussiaOnyama Limba NEW
Nicolas IturbideBrazilAmy Elsner QUALIFIED
Wickens NestleArgentinaAsiya Javayant NEW
Chavez BriddickAustraliaAmy Elsner PROPOSAL
Deepesh ChuiBrazilAnna Fali PROPOSAL
Faith GillianRussiaAnna Fali RENEWAL
Aditya KuskoSpainXuxue Feng NEGOTIATION
Morrow RutaBrazilElwin Sharvill 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>