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
James ButtFranceIoni Bowcher RENEWAL
Deepesh ChuiCanadaAnna Fali UNQUALIFIED
Kadeem FlosiJapanXuxue Feng NEW
Aika InouyeSpainIvan Magalhaes UNQUALIFIED
Ivar PaprockiCanadaXuxue Feng NEW
Maisha RulapaughFranceBernardo Dominic RENEWAL
Silvio SlusarskiCanadaBernardo Dominic RENEWAL
Arvin AlbaresAustraliaAmy Elsner UNQUALIFIED
Tony FollerIndiaOnyama Limba NEGOTIATION
Jeanfrancois VenereArgentinaElwin Sharvill QUALIFIED
Arvin AlbaresIndiaAmy Elsner UNQUALIFIED
Mayumi KolmetzSpainStephen Shaw RENEWAL
Adams MorascaCanadaXuxue Feng QUALIFIED
Ivar PaprockiGermanyIoni Bowcher RENEWAL
Deepesh ChuiCanadaOnyama Limba UNQUALIFIED
Deepesh ChuiArgentinaStephen Shaw RENEWAL
Julie StensethJapanAsiya Javayant PROPOSAL
Deepesh ChuiUnited KingdomAmy Elsner UNQUALIFIED
Wickens NestleCanadaElwin Sharvill RENEWAL
Ashley DoeBrazilAsiya Javayant NEW
Smith GlickRussiaElwin Sharvill QUALIFIED
Nicolas IturbideSpainAnna Fali UNQUALIFIED
James ButtUnited KingdomIvan Magalhaes RENEWAL
Arvin AlbaresFranceElwin Sharvill PROPOSAL
Ashley DoeItalyAnna Fali NEGOTIATION
Rodrigues CampainItalyElwin Sharvill NEGOTIATION
Isabel BowleyRussiaElwin Sharvill PROPOSAL
Morrow RutaSpainBernardo Dominic UNQUALIFIED
Clifford RimBrazilIvan Magalhaes UNQUALIFIED
Mujtaba NickaArgentinaElwin Sharvill UNQUALIFIED
Munro FerenczBrazilAsiya Javayant QUALIFIED
James ButtBrazilAnna Fali QUALIFIED
Jeanfrancois VenereJapanAnna Fali PROPOSAL
Sinclair WaycottGermanyBernardo Dominic PROPOSAL
Rodrigues CampainArgentinaAnna Fali PROPOSAL
Chavez BriddickArgentinaAsiya Javayant QUALIFIED
Sinclair WaycottFranceIvan Magalhaes QUALIFIED
Deepesh ChuiBrazilAnna Fali UNQUALIFIED
Alejandro PerinUnited KingdomOnyama Limba PROPOSAL
Antonio CaudyRussiaAmy Elsner RENEWAL
Kaitlin OstroskySpainAmy Elsner UNQUALIFIED
Antonio CaudyUnited KingdomOnyama Limba RENEWAL
Munro FerenczJapanOnyama Limba UNQUALIFIED
Greenwood BologniaFranceElwin Sharvill NEGOTIATION
Jones VocelkaIndiaAsiya Javayant NEW
Antonio CaudyAustraliaAnna Fali RENEWAL
Clifford RimBrazilBernardo Dominic NEW
Emily WhobreyItalyAnna Fali NEGOTIATION
Faith GillianItalyIoni Bowcher NEGOTIATION
Francesco ShinkoUnited KingdomOnyama Limba NEW
Horizontal
NameCountryRepresentativeStatus
Kadeem FlosiAustraliaStephen Shaw QUALIFIED
Aika InouyeItalyIvan Magalhaes NEW
Alejandro PerinUnited KingdomIvan Magalhaes QUALIFIED
Ricardo GauchoSpainOnyama Limba PROPOSAL
Kadeem FlosiGermanyStephen Shaw PROPOSAL
Adams MorascaSpainElwin Sharvill NEW
Ricardo GauchoRussiaAmy Elsner NEGOTIATION
Sinclair WaycottFranceStephen Shaw RENEWAL
Salvatore StockhamBrazilIvan Magalhaes UNQUALIFIED
Arvin AlbaresSpainBernardo Dominic QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Clifford RimItaly2026-04-29Dorl, James J Esq UNQUALIFIED31Stephen Shaw
1001Ricardo GauchoBrazil2026-05-08Morlong Associates NEW47Ivan Magalhaes
1002Greenwood BologniaJapan2026-05-20Rousseaux, Michael Esq NEW74Onyama Limba
1003Murillo MaletItaly2026-05-19Rangoni Of Florence NEGOTIATION88Xuxue Feng
1004Tony FollerBrazil2026-05-10Buckley Miller Wright RENEWAL65Asiya Javayant
1005Aditya KuskoAustralia2026-05-04Chapman, Ross E Esq RENEWAL99Ivan Magalhaes
1006Leon OldroydFrance2026-05-23Rousseaux, Michael Esq PROPOSAL91Stephen Shaw
1007Kadeem FlosiUnited Kingdom2026-05-16Chanay, Jeffrey A Esq NEGOTIATION96Asiya Javayant
1008Maisha RulapaughSpain2026-05-09Benton, John B Jr PROPOSAL35Ivan Magalhaes
1009Stacey MacleadRussia2026-05-18Rangoni Of Florence NEGOTIATION73Bernardo Dominic
1010Emily WhobreyRussia2026-05-04Chemel, James L Cpa UNQUALIFIED80Ivan Magalhaes
1011Mayumi KolmetzCanada2026-04-24Morlong Associates RENEWAL25Anna Fali
1012Claire TollnerIndia2026-04-28Chanay, Jeffrey A Esq QUALIFIED42Ioni Bowcher
1013Claire TollnerFrance2026-05-21Chanay, Jeffrey A Esq UNQUALIFIED68Elwin Sharvill
1014Maisha RulapaughFrance2026-05-13Feiner Bros NEGOTIATION81Ioni Bowcher
1015Misaki RoysterUnited Kingdom2026-05-02Dorl, James J Esq RENEWAL70Ioni Bowcher
1016Munro FerenczJapan2026-05-17Feiner Bros NEGOTIATION91Amy Elsner
1017David DarakjyRussia2026-05-17Feiner Bros UNQUALIFIED12Anna Fali
1018Kadeem FlosiItaly2026-05-14Rousseaux, Michael Esq NEGOTIATION32Ivan Magalhaes
1019Ricardo GauchoArgentina2026-05-16Rangoni Of Florence QUALIFIED79Xuxue Feng
1020James ButtItaly2026-05-21Commercial Press QUALIFIED39Ioni Bowcher
1021Tony FollerFrance2026-04-24Chapman, Ross E Esq QUALIFIED70Anna Fali
1022Ashley DoeCanada2026-05-14Feltz Printing Service PROPOSAL57Asiya Javayant
1023Jones VocelkaRussia2026-05-08Chemel, James L Cpa QUALIFIED56Ivan Magalhaes
1024Aditya KuskoJapan2026-05-16King, Christopher A Esq RENEWAL36Ivan Magalhaes
1025Claire TollnerJapan2026-04-27Morlong Associates QUALIFIED97Ioni Bowcher
1026Juan WieserBrazil2026-05-08Rousseaux, Michael Esq UNQUALIFIED12Asiya Javayant
1027Smith GlickUnited Kingdom2026-05-12Feltz Printing Service QUALIFIED28Amy Elsner
1028Kaitlin OstroskySpain2026-04-29Dorl, James J Esq QUALIFIED15Ivan Magalhaes
1029Adams MorascaCanada2026-05-04Rousseaux, Michael Esq PROPOSAL58Anna Fali
1030Izzy GarufiGermany2026-05-06Feiner Bros PROPOSAL56Ivan Magalhaes
1031Ivar PaprockiBrazil2026-04-24Truhlar And Truhlar Attys UNQUALIFIED22Anna Fali
1032Isabel BowleyItaly2026-04-27Chapman, Ross E Esq NEW24Elwin Sharvill
1033Smith GlickAustralia2026-05-14Chemel, James L Cpa NEW59Xuxue Feng
1034Faith GillianJapan2026-05-10Morlong Associates QUALIFIED20Anna Fali
1035Tony FollerAustralia2026-05-21Chemel, James L Cpa RENEWAL9Asiya Javayant
1036Juan WieserArgentina2026-05-15Morlong Associates QUALIFIED3Amy Elsner
1037Kaitlin OstroskyAustralia2026-05-07Chapman, Ross E Esq PROPOSAL74Asiya Javayant
1038Smith GlickFrance2026-04-26Dorl, James J Esq PROPOSAL26Xuxue Feng
1039David DarakjyBrazil2026-05-09Dorl, James J Esq QUALIFIED25Bernardo Dominic
1040Aruna FigeroaItaly2026-05-03Dorl, James J Esq PROPOSAL69Onyama Limba
1041Wickens NestleIndia2026-05-16Rangoni Of Florence PROPOSAL5Elwin Sharvill
1042Leja CaldareraArgentina2026-05-13King, Christopher A Esq QUALIFIED72Bernardo Dominic
1043Aruna FigeroaIndia2026-04-24Rangoni Of Florence NEGOTIATION79Bernardo Dominic
1044Cody SaylorsSpain2026-05-03Rousseaux, Michael Esq PROPOSAL70Elwin Sharvill
1045Emily WhobreyIndia2026-05-19Chemel, James L Cpa QUALIFIED27Bernardo Dominic
1046Alejandro PerinItaly2026-05-04Buckley Miller Wright QUALIFIED10Amy Elsner
1047Izzy GarufiUnited Kingdom2026-05-12Rangoni Of Florence NEGOTIATION9Xuxue Feng
1048Faith GillianJapan2026-05-12Chapman, Ross E Esq NEW44Bernardo Dominic
1049Mujtaba NickaBrazil2026-05-22Chemel, James L Cpa QUALIFIED59Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Nicolas IturbideFranceElwin Sharvill PROPOSAL
Greenwood BologniaAustraliaIoni Bowcher RENEWAL
Costa DilliardCanadaAnna Fali RENEWAL
Cody SaylorsGermanyStephen Shaw PROPOSAL
Darci PoquetteGermanyOnyama Limba NEGOTIATION
Aditya KuskoFranceElwin Sharvill RENEWAL
Murillo MaletAustraliaElwin Sharvill UNQUALIFIED
Misaki RoysterUnited KingdomStephen Shaw NEW
Juan WieserAustraliaOnyama Limba PROPOSAL
Jones VocelkaGermanyAnna Fali QUALIFIED
Juan WieserJapanOnyama Limba NEGOTIATION
Kadeem FlosiGermanyIoni Bowcher NEW
Faith GillianRussiaAmy Elsner PROPOSAL
Darci PoquetteGermanyStephen Shaw RENEWAL
Morrow RutaBrazilElwin Sharvill UNQUALIFIED
David DarakjyAustraliaIoni Bowcher NEW
Chavez BriddickCanadaAmy Elsner QUALIFIED
Leja CaldareraItalyElwin Sharvill PROPOSAL
Octavia MaletItalyAmy Elsner NEW
Johnson SergiGermanyIvan Magalhaes NEW
Mujtaba NickaArgentinaIvan Magalhaes UNQUALIFIED
Munro FerenczCanadaAsiya Javayant PROPOSAL
Francesco ShinkoArgentinaStephen Shaw NEW
Nicolas IturbideSpainElwin Sharvill RENEWAL
Costa DilliardJapanStephen Shaw PROPOSAL
Silvio SlusarskiAustraliaAmy Elsner NEW
Emily WhobreyArgentinaAnna Fali UNQUALIFIED
Murillo MaletJapanElwin Sharvill PROPOSAL
Jennifer AmigonJapanElwin Sharvill RENEWAL
Leon OldroydIndiaAmy Elsner NEW
Maisha RulapaughFranceIvan Magalhaes RENEWAL
Johnson SergiCanadaIoni Bowcher UNQUALIFIED
Francesco ShinkoFranceStephen Shaw NEGOTIATION
Julie StensethFranceElwin Sharvill RENEWAL
David DarakjyFranceXuxue Feng NEGOTIATION
Isabel BowleyBrazilStephen Shaw PROPOSAL
Jefferson SchemmerGermanyIvan Magalhaes UNQUALIFIED
Wickens NestleSpainStephen Shaw NEW
Ricardo GauchoSpainBernardo Dominic RENEWAL
James ButtIndiaXuxue Feng UNQUALIFIED
Antonio CaudyFranceBernardo Dominic PROPOSAL
Antonio CaudyAustraliaAnna Fali QUALIFIED
Mujtaba NickaItalyAnna Fali UNQUALIFIED
Maisha RulapaughBrazilAnna Fali PROPOSAL
Leon OldroydJapanStephen Shaw RENEWAL
Alejandro PerinUnited KingdomAnna Fali NEGOTIATION
David DarakjyAustraliaBernardo Dominic RENEWAL
Emily WhobreyGermanyXuxue Feng NEGOTIATION
Kadeem FlosiAustraliaElwin Sharvill NEGOTIATION
Arvin AlbaresUnited KingdomAnna Fali NEW
Frozen Columns
Name
Sinclair Waycott
Julie Stenseth
Clifford Rim
Kadeem Flosi
Ricardo Gaucho
Nicolas Iturbide
Johnson Sergi
Nicolas Iturbide
Leja Caldarera
Murillo Malet
Deepesh Chui
Octavia Malet
Aruna Figeroa
Greenwood Bolognia
Tony Foller
Kadeem Flosi
Murillo Malet
Julie Stenseth
David Darakjy
Clifford Rim
Rodrigues Campain
Leon Oldroyd
Francesco Shinko
David Darakjy
Antonio Caudy
Juan Wieser
Darci Poquette
Juan Wieser
Aruna Figeroa
Octavia Malet
Darci Poquette
Munro Ferencz
Ivar Paprocki
Murillo Malet
Deepesh Chui
Maisha Rulapaugh
James Butt
Aruna Figeroa
Alejandro Perin
Kaitlin Ostrosky
Johnson Sergi
Arvin Albares
Antonio Caudy
Faith Gillian
Rodrigues Campain
Salvatore Stockham
Johnson Sergi
Mujtaba Nicka
Francesco Shinko
Kadeem Flosi
IdCountryDate
1000Germany2026-05-21
1001Argentina2026-05-18
1002Brazil2026-05-05
1003Japan2026-05-04
1004Italy2026-05-09
1005France2026-05-06
1006Germany2026-05-05
1007Argentina2026-04-27
1008France2026-05-14
1009Spain2026-04-27
1010Canada2026-05-11
1011Australia2026-05-05
1012Australia2026-04-28
1013Australia2026-05-18
1014India2026-04-25
1015Japan2026-05-07
1016Russia2026-05-07
1017Germany2026-05-08
1018Germany2026-04-27
1019Russia2026-05-08
1020Spain2026-05-08
1021Canada2026-05-08
1022Japan2026-05-21
1023Brazil2026-05-15
1024Spain2026-04-29
1025Canada2026-05-20
1026Germany2026-04-30
1027Germany2026-05-03
1028Japan2026-05-17
1029United Kingdom2026-05-09
1030Italy2026-05-20
1031Italy2026-05-04
1032Argentina2026-05-16
1033United Kingdom2026-05-15
1034Spain2026-04-30
1035Brazil2026-05-05
1036Spain2026-05-06
1037Italy2026-05-16
1038United Kingdom2026-05-10
1039Italy2026-05-15
1040Russia2026-04-26
1041France2026-04-24
1042Canada2026-05-04
1043Germany2026-05-05
1044Spain2026-05-09
1045Argentina2026-05-20
1046Russia2026-04-29
1047France2026-04-27
1048Brazil2026-05-03
1049Brazil2026-04-26

On-Demand Data

NameIdCountryDate
Costa Dilliard1000Japan2026-05-10
Nicolas Iturbide1001Italy2026-04-27
Faith Gillian1002Argentina2026-05-18
Kadeem Flosi1003Brazil2026-04-30
Deepesh Chui1004Russia2026-05-01
Misaki Royster1005Canada2026-05-16
Tony Foller1006Spain2026-05-11
Francesco Shinko1007Germany2026-05-17
Ivar Paprocki1008France2026-04-25
Emily Whobrey1009Canada2026-05-08
Ricardo Gaucho1010United Kingdom2026-05-20
Jennifer Amigon1011Australia2026-05-18
Kaitlin Ostrosky1012France2026-05-11
Stacey Maclead1013Italy2026-05-15
Isabel Bowley1014Russia2026-05-19
Misaki Royster1015Italy2026-05-02
Cody Saylors1016Canada2026-04-25
Ricardo Gaucho1017Argentina2026-05-05
Aditya Kusko1018Spain2026-05-17
Tony Foller1019Italy2026-05-15
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jones VocelkaArgentinaIoni Bowcher RENEWAL
Mayumi KolmetzItalyAnna Fali RENEWAL
Faith GillianCanadaAmy Elsner NEGOTIATION
Leon OldroydRussiaIvan Magalhaes UNQUALIFIED
David DarakjyAustraliaBernardo Dominic PROPOSAL
Maria MarrierSpainOnyama Limba PROPOSAL
James ButtGermanyStephen Shaw QUALIFIED
Aditya KuskoCanadaIvan Magalhaes NEGOTIATION
Jones VocelkaGermanyAsiya Javayant PROPOSAL
Adams MorascaUnited KingdomElwin Sharvill NEW
Darci PoquetteArgentinaIoni Bowcher NEW
Ricardo GauchoSpainAmy Elsner NEGOTIATION
Mujtaba NickaIndiaElwin Sharvill NEW
Deepesh ChuiCanadaAmy Elsner PROPOSAL
Emily WhobreyAustraliaAmy Elsner UNQUALIFIED
Leon OldroydCanadaXuxue Feng NEW
James ButtSpainOnyama Limba NEW
Greenwood BologniaSpainAmy Elsner RENEWAL
Leja CaldareraBrazilAmy Elsner NEGOTIATION
Octavia MaletAustraliaElwin Sharvill UNQUALIFIED
Kadeem FlosiArgentinaOnyama Limba QUALIFIED
Julie StensethGermanyAmy Elsner RENEWAL
Juan WieserUnited KingdomIvan Magalhaes PROPOSAL
Misaki RoysterArgentinaIoni Bowcher UNQUALIFIED
Francesco ShinkoJapanStephen Shaw PROPOSAL
James ButtCanadaIoni Bowcher NEW
Johnson SergiItalyAnna Fali PROPOSAL
Clifford RimAustraliaAsiya Javayant NEW
Mujtaba NickaUnited KingdomBernardo Dominic QUALIFIED
Claire TollnerSpainStephen Shaw NEW
Deepesh ChuiJapanXuxue Feng QUALIFIED
Deepesh ChuiFranceAsiya Javayant NEW
Nicolas IturbideJapanAmy Elsner PROPOSAL
Arvin AlbaresUnited KingdomAmy Elsner NEGOTIATION
Deepesh ChuiIndiaBernardo Dominic RENEWAL
Aditya KuskoFranceIvan Magalhaes PROPOSAL
Jones VocelkaRussiaIvan Magalhaes NEW
Arvin AlbaresJapanElwin Sharvill RENEWAL
Silvio SlusarskiIndiaXuxue Feng RENEWAL
Darci PoquetteArgentinaElwin Sharvill 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>