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
Aditya KuskoFranceBernardo Dominic NEW
Antonio CaudyItalyIoni Bowcher NEGOTIATION
Salvatore StockhamBrazilAnna Fali QUALIFIED
Adams MorascaFranceAmy Elsner UNQUALIFIED
Adams MorascaCanadaBernardo Dominic QUALIFIED
Leja CaldareraArgentinaXuxue Feng PROPOSAL
Mayumi KolmetzBrazilXuxue Feng PROPOSAL
Sinclair WaycottRussiaAnna Fali RENEWAL
Murillo MaletJapanBernardo Dominic UNQUALIFIED
Chavez BriddickArgentinaElwin Sharvill UNQUALIFIED
Ricardo GauchoBrazilElwin Sharvill PROPOSAL
James ButtJapanBernardo Dominic QUALIFIED
Murillo MaletUnited KingdomStephen Shaw NEW
Ivar PaprockiRussiaAsiya Javayant UNQUALIFIED
Arvin AlbaresIndiaBernardo Dominic NEW
Jeanfrancois VenereAustraliaXuxue Feng RENEWAL
Claire TollnerJapanBernardo Dominic NEW
Johnson SergiFranceElwin Sharvill UNQUALIFIED
Silvio SlusarskiItalyStephen Shaw PROPOSAL
Jefferson SchemmerArgentinaXuxue Feng PROPOSAL
Maria MarrierCanadaAsiya Javayant PROPOSAL
Isabel BowleyItalyStephen Shaw RENEWAL
Stacey MacleadIndiaElwin Sharvill QUALIFIED
Clifford RimBrazilIoni Bowcher PROPOSAL
Juan WieserItalyIvan Magalhaes RENEWAL
Jeanfrancois VenereFranceStephen Shaw PROPOSAL
Ivar PaprockiAustraliaStephen Shaw UNQUALIFIED
Alejandro PerinBrazilAsiya Javayant NEW
Juan WieserSpainAsiya Javayant NEGOTIATION
Antonio CaudyRussiaIoni Bowcher RENEWAL
Jones VocelkaJapanIvan Magalhaes UNQUALIFIED
Morrow RutaUnited KingdomBernardo Dominic PROPOSAL
Ricardo GauchoGermanyStephen Shaw NEGOTIATION
Smith GlickItalyXuxue Feng NEGOTIATION
Isabel BowleyRussiaAmy Elsner UNQUALIFIED
Arvin AlbaresItalyStephen Shaw UNQUALIFIED
Sinclair WaycottSpainIoni Bowcher UNQUALIFIED
Greenwood BologniaAustraliaAmy Elsner NEW
Kaitlin OstroskyIndiaElwin Sharvill QUALIFIED
Darci PoquetteArgentinaIvan Magalhaes NEGOTIATION
Ashley DoeIndiaElwin Sharvill NEW
Arvin AlbaresIndiaAsiya Javayant RENEWAL
Costa DilliardUnited KingdomOnyama Limba NEW
Aika InouyeSpainAsiya Javayant PROPOSAL
Leon OldroydFranceOnyama Limba RENEWAL
Antonio CaudyGermanyStephen Shaw QUALIFIED
David DarakjyBrazilElwin Sharvill QUALIFIED
Nicolas IturbideAustraliaOnyama Limba NEW
James ButtSpainAnna Fali RENEWAL
Faith GillianJapanBernardo Dominic NEW
Horizontal
NameCountryRepresentativeStatus
David DarakjyArgentinaStephen Shaw PROPOSAL
Izzy GarufiJapanAmy Elsner UNQUALIFIED
Sinclair WaycottBrazilElwin Sharvill PROPOSAL
Jefferson SchemmerCanadaAsiya Javayant NEW
Kaitlin OstroskyRussiaOnyama Limba UNQUALIFIED
Tony FollerBrazilIvan Magalhaes NEGOTIATION
Jefferson SchemmerArgentinaStephen Shaw UNQUALIFIED
Mayumi KolmetzItalyIvan Magalhaes PROPOSAL
Costa DilliardIndiaBernardo Dominic NEW
Antonio CaudyIndiaIvan Magalhaes NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Misaki RoysterSpain2026-05-02Buckley Miller Wright QUALIFIED49Stephen Shaw
1001Maisha RulapaughSpain2026-04-18Rangoni Of Florence QUALIFIED47Anna Fali
1002Deepesh ChuiAustralia2026-04-13Morlong Associates RENEWAL65Ivan Magalhaes
1003Jones VocelkaItaly2026-05-06Benton, John B Jr QUALIFIED61Bernardo Dominic
1004Izzy GarufiJapan2026-04-29Rousseaux, Michael Esq PROPOSAL54Asiya Javayant
1005Arvin AlbaresAustralia2026-04-19Chapman, Ross E Esq UNQUALIFIED0Stephen Shaw
1006James ButtItaly2026-04-21Commercial Press PROPOSAL67Bernardo Dominic
1007Jefferson SchemmerJapan2026-05-04Chemel, James L Cpa NEGOTIATION64Anna Fali
1008Alejandro PerinUnited Kingdom2026-05-01Chapman, Ross E Esq NEW27Onyama Limba
1009Chavez BriddickAustralia2026-04-14Chemel, James L Cpa NEGOTIATION97Asiya Javayant
1010Adams MorascaArgentina2026-05-04Feiner Bros NEGOTIATION69Elwin Sharvill
1011Emily WhobreyGermany2026-04-19Feltz Printing Service QUALIFIED91Ivan Magalhaes
1012Jefferson SchemmerIndia2026-04-27King, Christopher A Esq QUALIFIED13Bernardo Dominic
1013Emily WhobreyIndia2026-05-04Rangoni Of Florence NEW46Amy Elsner
1014Costa DilliardGermany2026-05-02Morlong Associates NEW15Stephen Shaw
1015Greenwood BologniaAustralia2026-05-04Chapman, Ross E Esq NEW44Asiya Javayant
1016Murillo MaletUnited Kingdom2026-05-04Morlong Associates UNQUALIFIED73Xuxue Feng
1017Octavia MaletBrazil2026-05-01Feltz Printing Service RENEWAL60Bernardo Dominic
1018Jones VocelkaIndia2026-04-25Buckley Miller Wright RENEWAL69Bernardo Dominic
1019Emily WhobreyJapan2026-04-18Morlong Associates PROPOSAL61Onyama Limba
1020Tony FollerFrance2026-05-06Chemel, James L Cpa QUALIFIED75Amy Elsner
1021Murillo MaletArgentina2026-04-18Truhlar And Truhlar Attys NEW56Onyama Limba
1022Cody SaylorsCanada2026-05-04Rousseaux, Michael Esq QUALIFIED61Bernardo Dominic
1023Darci PoquetteRussia2026-04-12Morlong Associates NEW93Elwin Sharvill
1024Julie StensethSpain2026-05-04Commercial Press NEGOTIATION18Elwin Sharvill
1025Jeanfrancois VenereItaly2026-05-06Morlong Associates NEW53Ivan Magalhaes
1026Jefferson SchemmerBrazil2026-04-26Feiner Bros RENEWAL88Onyama Limba
1027Emily WhobreyBrazil2026-04-30Commercial Press QUALIFIED18Bernardo Dominic
1028Kadeem FlosiCanada2026-05-09Dorl, James J Esq PROPOSAL80Ivan Magalhaes
1029Stacey MacleadRussia2026-04-14Buckley Miller Wright NEGOTIATION95Ivan Magalhaes
1030James ButtArgentina2026-05-10Feltz Printing Service NEGOTIATION87Asiya Javayant
1031Munro FerenczCanada2026-05-10Rousseaux, Michael Esq NEGOTIATION47Stephen Shaw
1032Emily WhobreyIndia2026-04-15Rangoni Of Florence PROPOSAL40Ivan Magalhaes
1033Claire TollnerJapan2026-05-05Dorl, James J Esq NEGOTIATION25Amy Elsner
1034Leja CaldareraArgentina2026-04-19Rangoni Of Florence UNQUALIFIED89Ioni Bowcher
1035Cody SaylorsJapan2026-05-07Morlong Associates NEW24Xuxue Feng
1036Aditya KuskoUnited Kingdom2026-05-09King, Christopher A Esq UNQUALIFIED11Anna Fali
1037Aika InouyeCanada2026-04-25Feltz Printing Service UNQUALIFIED51Ivan Magalhaes
1038Darci PoquetteFrance2026-05-07Chanay, Jeffrey A Esq QUALIFIED6Ivan Magalhaes
1039Tony FollerRussia2026-04-19Feltz Printing Service PROPOSAL87Ivan Magalhaes
1040Tony FollerGermany2026-04-22Benton, John B Jr QUALIFIED69Asiya Javayant
1041Antonio CaudyFrance2026-05-06King, Christopher A Esq NEW44Stephen Shaw
1042Mayumi KolmetzSpain2026-04-15Feltz Printing Service QUALIFIED22Anna Fali
1043Leon OldroydJapan2026-05-07Feiner Bros UNQUALIFIED80Amy Elsner
1044Arvin AlbaresItaly2026-04-13King, Christopher A Esq PROPOSAL98Ivan Magalhaes
1045Smith GlickAustralia2026-04-12Chapman, Ross E Esq UNQUALIFIED28Elwin Sharvill
1046Isabel BowleyRussia2026-05-06King, Christopher A Esq NEW72Ioni Bowcher
1047Kaitlin OstroskyRussia2026-04-24Feltz Printing Service QUALIFIED76Ivan Magalhaes
1048Ashley DoeCanada2026-04-23Commercial Press UNQUALIFIED53Bernardo Dominic
1049Izzy GarufiUnited Kingdom2026-04-13Benton, John B Jr NEW46Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Nicolas IturbideJapanXuxue Feng RENEWAL
Antonio CaudyArgentinaAsiya Javayant PROPOSAL
Darci PoquetteSpainXuxue Feng NEW
David DarakjyIndiaOnyama Limba UNQUALIFIED
Stacey MacleadArgentinaAsiya Javayant QUALIFIED
Faith GillianCanadaAmy Elsner NEGOTIATION
Wickens NestleArgentinaAsiya Javayant NEW
Ricardo GauchoCanadaIvan Magalhaes RENEWAL
Leon OldroydArgentinaBernardo Dominic UNQUALIFIED
Munro FerenczRussiaAmy Elsner NEGOTIATION
Stacey MacleadJapanStephen Shaw PROPOSAL
Cody SaylorsCanadaStephen Shaw UNQUALIFIED
Maisha RulapaughCanadaXuxue Feng PROPOSAL
Deepesh ChuiCanadaIvan Magalhaes RENEWAL
Sinclair WaycottJapanOnyama Limba QUALIFIED
Julie StensethArgentinaAmy Elsner UNQUALIFIED
Mayumi KolmetzItalyXuxue Feng NEW
Jones VocelkaAustraliaBernardo Dominic UNQUALIFIED
Leja CaldareraJapanIoni Bowcher NEGOTIATION
Kaitlin OstroskyGermanyAnna Fali RENEWAL
Costa DilliardArgentinaBernardo Dominic PROPOSAL
Stacey MacleadIndiaOnyama Limba PROPOSAL
Juan WieserBrazilAmy Elsner NEGOTIATION
Ricardo GauchoArgentinaStephen Shaw QUALIFIED
David DarakjyFranceElwin Sharvill UNQUALIFIED
Kaitlin OstroskyFranceOnyama Limba PROPOSAL
Antonio CaudyAustraliaBernardo Dominic NEW
Johnson SergiFranceBernardo Dominic QUALIFIED
Leon OldroydBrazilIoni Bowcher NEGOTIATION
Octavia MaletGermanyElwin Sharvill NEGOTIATION
Rodrigues CampainSpainElwin Sharvill NEGOTIATION
Jeanfrancois VenereSpainAsiya Javayant UNQUALIFIED
Claire TollnerAustraliaAnna Fali PROPOSAL
Deepesh ChuiArgentinaStephen Shaw UNQUALIFIED
Leja CaldareraBrazilAmy Elsner QUALIFIED
Leon OldroydIndiaXuxue Feng RENEWAL
Maria MarrierGermanyAmy Elsner RENEWAL
Aruna FigeroaArgentinaElwin Sharvill RENEWAL
Deepesh ChuiIndiaElwin Sharvill NEW
James ButtItalyIvan Magalhaes PROPOSAL
Leon OldroydGermanyElwin Sharvill PROPOSAL
Emily WhobreyAustraliaXuxue Feng RENEWAL
Kaitlin OstroskyIndiaBernardo Dominic QUALIFIED
Morrow RutaFranceAnna Fali NEW
Claire TollnerFranceAnna Fali NEW
Octavia MaletItalyElwin Sharvill RENEWAL
Ashley DoeIndiaElwin Sharvill UNQUALIFIED
Maisha RulapaughIndiaAnna Fali NEW
James ButtAustraliaAnna Fali PROPOSAL
Mujtaba NickaAustraliaOnyama Limba QUALIFIED
Frozen Columns
Name
Nicolas Iturbide
Izzy Garufi
Jeanfrancois Venere
Ashley Doe
Sinclair Waycott
Jeanfrancois Venere
Johnson Sergi
Aruna Figeroa
Greenwood Bolognia
Claire Tollner
Aruna Figeroa
Tony Foller
Aditya Kusko
Salvatore Stockham
Jennifer Amigon
Johnson Sergi
Jones Vocelka
Leja Caldarera
Chavez Briddick
Wickens Nestle
Aditya Kusko
Smith Glick
Alejandro Perin
Mujtaba Nicka
Alejandro Perin
Aruna Figeroa
Jeanfrancois Venere
Darci Poquette
Leja Caldarera
James Butt
Morrow Ruta
Deepesh Chui
Aika Inouye
Greenwood Bolognia
Jones Vocelka
Octavia Malet
James Butt
Silvio Slusarski
Deepesh Chui
Isabel Bowley
Silvio Slusarski
Ricardo Gaucho
Jones Vocelka
Maisha Rulapaugh
Adams Morasca
Chavez Briddick
Kaitlin Ostrosky
Tony Foller
Faith Gillian
Johnson Sergi
IdCountryDate
1000Argentina2026-05-05
1001United Kingdom2026-04-28
1002Germany2026-05-08
1003Germany2026-04-23
1004India2026-04-15
1005Japan2026-04-24
1006Germany2026-05-08
1007Australia2026-05-09
1008India2026-05-07
1009Italy2026-04-24
1010Italy2026-05-03
1011Argentina2026-05-03
1012France2026-04-19
1013Brazil2026-04-13
1014Argentina2026-04-21
1015Japan2026-04-25
1016Russia2026-05-04
1017Germany2026-05-01
1018Italy2026-05-10
1019Canada2026-05-07
1020Australia2026-05-11
1021United Kingdom2026-04-28
1022Argentina2026-04-26
1023Argentina2026-05-04
1024Germany2026-05-02
1025Spain2026-05-03
1026Argentina2026-04-24
1027Australia2026-04-15
1028France2026-05-10
1029Russia2026-04-19
1030Germany2026-04-13
1031Brazil2026-04-28
1032Australia2026-04-21
1033Argentina2026-05-04
1034Australia2026-04-30
1035Italy2026-05-10
1036France2026-05-10
1037Canada2026-04-15
1038Japan2026-04-28
1039Germany2026-05-03
1040Australia2026-05-02
1041Russia2026-04-17
1042Japan2026-05-03
1043Italy2026-05-06
1044Italy2026-05-01
1045Russia2026-04-27
1046Russia2026-04-12
1047Spain2026-04-18
1048Italy2026-05-10
1049Spain2026-04-17

On-Demand Data

NameIdCountryDate
Mujtaba Nicka1000Germany2026-04-24
Aditya Kusko1001Germany2026-04-17
Maria Marrier1002Argentina2026-05-08
Greenwood Bolognia1003Italy2026-04-12
Julie Stenseth1004Spain2026-04-19
Clifford Rim1005India2026-05-01
Jones Vocelka1006Russia2026-04-22
Ivar Paprocki1007Spain2026-04-29
Wickens Nestle1008France2026-04-23
Julie Stenseth1009Japan2026-05-09
Johnson Sergi1010Brazil2026-04-30
Julie Stenseth1011Russia2026-05-07
Darci Poquette1012Germany2026-05-08
Maisha Rulapaugh1013France2026-04-16
Aika Inouye1014Argentina2026-05-05
Morrow Ruta1015Japan2026-04-25
Chavez Briddick1016Argentina2026-05-10
Claire Tollner1017Spain2026-04-28
Cody Saylors1018United Kingdom2026-05-03
Aika Inouye1019Russia2026-04-17
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Isabel BowleyFranceIvan Magalhaes PROPOSAL
Isabel BowleyArgentinaElwin Sharvill UNQUALIFIED
Maisha RulapaughIndiaStephen Shaw UNQUALIFIED
Wickens NestleGermanyAnna Fali NEW
David DarakjyRussiaXuxue Feng PROPOSAL
Kadeem FlosiAustraliaAnna Fali PROPOSAL
Silvio SlusarskiFranceAmy Elsner NEW
Izzy GarufiBrazilXuxue Feng NEGOTIATION
Adams MorascaItalyStephen Shaw RENEWAL
Rodrigues CampainRussiaAsiya Javayant QUALIFIED
Alejandro PerinItalyAnna Fali UNQUALIFIED
Smith GlickFranceAsiya Javayant NEW
Clifford RimBrazilAnna Fali NEW
Johnson SergiUnited KingdomBernardo Dominic PROPOSAL
Maria MarrierSpainStephen Shaw NEW
Jefferson SchemmerUnited KingdomBernardo Dominic UNQUALIFIED
Maisha RulapaughGermanyBernardo Dominic RENEWAL
Kaitlin OstroskyFranceStephen Shaw UNQUALIFIED
Sinclair WaycottBrazilIoni Bowcher NEGOTIATION
Kaitlin OstroskyCanadaBernardo Dominic QUALIFIED
Chavez BriddickSpainAnna Fali QUALIFIED
Jennifer AmigonCanadaBernardo Dominic PROPOSAL
Morrow RutaAustraliaAmy Elsner NEGOTIATION
Nicolas IturbideGermanyBernardo Dominic NEGOTIATION
Kaitlin OstroskyArgentinaIvan Magalhaes NEGOTIATION
Munro FerenczGermanyOnyama Limba PROPOSAL
Munro FerenczFranceOnyama Limba UNQUALIFIED
Greenwood BologniaGermanyAmy Elsner UNQUALIFIED
Ashley DoeFranceStephen Shaw RENEWAL
Chavez BriddickAustraliaAmy Elsner NEW
Stacey MacleadUnited KingdomIoni Bowcher NEW
Arvin AlbaresSpainStephen Shaw RENEWAL
Smith GlickGermanyXuxue Feng NEW
Misaki RoysterFranceElwin Sharvill NEGOTIATION
Julie StensethGermanyStephen Shaw NEGOTIATION
Francesco ShinkoAustraliaElwin Sharvill RENEWAL
Rodrigues CampainUnited KingdomStephen Shaw NEW
Nicolas IturbideRussiaAmy Elsner PROPOSAL
Ashley DoeUnited KingdomOnyama Limba QUALIFIED
Leon OldroydJapanBernardo Dominic NEGOTIATION

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