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
Munro FerenczAustraliaAsiya Javayant NEW
David DarakjySpainOnyama Limba NEGOTIATION
Ivar PaprockiCanadaIoni Bowcher NEGOTIATION
Ricardo GauchoSpainElwin Sharvill NEW
Antonio CaudyUnited KingdomIoni Bowcher UNQUALIFIED
Smith GlickIndiaOnyama Limba RENEWAL
Johnson SergiRussiaIoni Bowcher NEGOTIATION
Leja CaldareraAustraliaElwin Sharvill NEGOTIATION
Maria MarrierItalyAsiya Javayant NEW
Deepesh ChuiAustraliaStephen Shaw NEGOTIATION
Cody SaylorsIndiaIvan Magalhaes QUALIFIED
Jennifer AmigonCanadaElwin Sharvill RENEWAL
Costa DilliardFranceElwin Sharvill UNQUALIFIED
Nicolas IturbideJapanElwin Sharvill QUALIFIED
Adams MorascaArgentinaAnna Fali RENEWAL
Adams MorascaIndiaOnyama Limba NEGOTIATION
Morrow RutaRussiaIoni Bowcher PROPOSAL
Smith GlickJapanAmy Elsner NEGOTIATION
Claire TollnerUnited KingdomBernardo Dominic RENEWAL
Jefferson SchemmerIndiaAnna Fali PROPOSAL
Julie StensethFranceBernardo Dominic NEW
Jennifer AmigonItalyAsiya Javayant RENEWAL
Salvatore StockhamIndiaElwin Sharvill NEW
Munro FerenczSpainAsiya Javayant NEW
Arvin AlbaresArgentinaElwin Sharvill RENEWAL
James ButtItalyAnna Fali RENEWAL
Mayumi KolmetzSpainIoni Bowcher UNQUALIFIED
Emily WhobreyItalyStephen Shaw UNQUALIFIED
Maria MarrierUnited KingdomIoni Bowcher NEW
Julie StensethSpainXuxue Feng PROPOSAL
Ivar PaprockiAustraliaStephen Shaw UNQUALIFIED
Octavia MaletAustraliaStephen Shaw QUALIFIED
Maria MarrierSpainElwin Sharvill QUALIFIED
James ButtSpainElwin Sharvill PROPOSAL
Jefferson SchemmerItalyIoni Bowcher RENEWAL
Octavia MaletAustraliaElwin Sharvill PROPOSAL
Aika InouyeUnited KingdomIvan Magalhaes NEGOTIATION
Johnson SergiArgentinaIvan Magalhaes PROPOSAL
Salvatore StockhamUnited KingdomOnyama Limba UNQUALIFIED
Mujtaba NickaJapanIvan Magalhaes QUALIFIED
Arvin AlbaresBrazilOnyama Limba UNQUALIFIED
Maria MarrierFranceAsiya Javayant QUALIFIED
Salvatore StockhamRussiaAnna Fali PROPOSAL
Antonio CaudyCanadaAsiya Javayant UNQUALIFIED
David DarakjyArgentinaAmy Elsner RENEWAL
Morrow RutaCanadaIoni Bowcher NEGOTIATION
Deepesh ChuiCanadaElwin Sharvill UNQUALIFIED
Julie StensethRussiaStephen Shaw UNQUALIFIED
Munro FerenczIndiaElwin Sharvill PROPOSAL
Aika InouyeArgentinaOnyama Limba NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Julie StensethFranceXuxue Feng PROPOSAL
Cody SaylorsIndiaOnyama Limba UNQUALIFIED
Juan WieserIndiaXuxue Feng QUALIFIED
Jefferson SchemmerIndiaIvan Magalhaes NEW
Francesco ShinkoArgentinaOnyama Limba PROPOSAL
Jeanfrancois VenereRussiaIoni Bowcher UNQUALIFIED
Adams MorascaRussiaAmy Elsner NEGOTIATION
Murillo MaletSpainElwin Sharvill RENEWAL
Smith GlickJapanAmy Elsner PROPOSAL
Antonio CaudyIndiaBernardo Dominic NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jones VocelkaBrazil2026-06-04Truhlar And Truhlar Attys UNQUALIFIED82Stephen Shaw
1001Johnson SergiGermany2026-06-14Chanay, Jeffrey A Esq RENEWAL44Xuxue Feng
1002Murillo MaletSpain2026-06-18Chapman, Ross E Esq QUALIFIED4Onyama Limba
1003Costa DilliardArgentina2026-06-12Rangoni Of Florence PROPOSAL98Ivan Magalhaes
1004Rodrigues CampainJapan2026-05-30Rousseaux, Michael Esq QUALIFIED53Elwin Sharvill
1005Tony FollerFrance2026-06-12Morlong Associates QUALIFIED98Elwin Sharvill
1006Darci PoquetteItaly2026-06-09Rangoni Of Florence RENEWAL7Ivan Magalhaes
1007Morrow RutaBrazil2026-06-03Chanay, Jeffrey A Esq QUALIFIED29Bernardo Dominic
1008Murillo MaletBrazil2026-06-14Chemel, James L Cpa QUALIFIED8Stephen Shaw
1009Darci PoquetteFrance2026-05-23King, Christopher A Esq QUALIFIED20Bernardo Dominic
1010Deepesh ChuiItaly2026-05-28Chanay, Jeffrey A Esq UNQUALIFIED25Asiya Javayant
1011Kadeem FlosiJapan2026-06-14Rousseaux, Michael Esq QUALIFIED20Ivan Magalhaes
1012Jefferson SchemmerGermany2026-06-19Feiner Bros NEGOTIATION60Onyama Limba
1013Maria MarrierSpain2026-06-07Chemel, James L Cpa UNQUALIFIED34Stephen Shaw
1014Kaitlin OstroskyRussia2026-06-03Chapman, Ross E Esq UNQUALIFIED14Asiya Javayant
1015Smith GlickItaly2026-06-06Truhlar And Truhlar Attys NEW15Stephen Shaw
1016James ButtUnited Kingdom2026-05-30Rangoni Of Florence PROPOSAL28Amy Elsner
1017Silvio SlusarskiAustralia2026-06-02Chapman, Ross E Esq UNQUALIFIED80Elwin Sharvill
1018Salvatore StockhamUnited Kingdom2026-05-26Buckley Miller Wright QUALIFIED11Xuxue Feng
1019Ivar PaprockiUnited Kingdom2026-06-13Benton, John B Jr NEW56Xuxue Feng
1020Deepesh ChuiJapan2026-05-27Commercial Press RENEWAL13Bernardo Dominic
1021Izzy GarufiAustralia2026-05-31Commercial Press QUALIFIED79Asiya Javayant
1022Silvio SlusarskiIndia2026-05-23Commercial Press PROPOSAL22Stephen Shaw
1023Johnson SergiJapan2026-05-24Feltz Printing Service UNQUALIFIED46Stephen Shaw
1024Jones VocelkaGermany2026-06-03Rangoni Of Florence UNQUALIFIED16Anna Fali
1025Clifford RimJapan2026-06-15Morlong Associates UNQUALIFIED85Ivan Magalhaes
1026Stacey MacleadItaly2026-06-11Feltz Printing Service NEW16Elwin Sharvill
1027Sinclair WaycottAustralia2026-06-08Chanay, Jeffrey A Esq RENEWAL94Ioni Bowcher
1028Wickens NestleIndia2026-06-10Buckley Miller Wright QUALIFIED5Ivan Magalhaes
1029Mujtaba NickaRussia2026-06-13Chapman, Ross E Esq PROPOSAL97Ioni Bowcher
1030Aruna FigeroaArgentina2026-06-12King, Christopher A Esq NEW46Elwin Sharvill
1031Aika InouyeIndia2026-06-02Printing Dimensions RENEWAL77Ivan Magalhaes
1032Johnson SergiIndia2026-06-21Benton, John B Jr RENEWAL76Ivan Magalhaes
1033Nicolas IturbideRussia2026-06-14Benton, John B Jr NEGOTIATION66Ivan Magalhaes
1034Juan WieserArgentina2026-06-18Rangoni Of Florence RENEWAL99Ivan Magalhaes
1035Sinclair WaycottIndia2026-05-26Feiner Bros QUALIFIED88Xuxue Feng
1036Juan WieserIndia2026-06-07Commercial Press QUALIFIED79Elwin Sharvill
1037Smith GlickSpain2026-06-20Feiner Bros NEW68Anna Fali
1038Sinclair WaycottJapan2026-05-25Rangoni Of Florence NEGOTIATION91Ivan Magalhaes
1039Sinclair WaycottBrazil2026-05-27King, Christopher A Esq PROPOSAL23Ioni Bowcher
1040Kaitlin OstroskyCanada2026-05-27Chapman, Ross E Esq NEGOTIATION97Asiya Javayant
1041Jennifer AmigonGermany2026-05-30Commercial Press NEW94Ivan Magalhaes
1042Aditya KuskoRussia2026-06-20King, Christopher A Esq QUALIFIED89Stephen Shaw
1043Julie StensethBrazil2026-06-07Rangoni Of Florence QUALIFIED83Asiya Javayant
1044Leja CaldareraArgentina2026-06-04Chemel, James L Cpa UNQUALIFIED17Xuxue Feng
1045Munro FerenczFrance2026-06-09Chanay, Jeffrey A Esq UNQUALIFIED37Asiya Javayant
1046Darci PoquetteCanada2026-06-14Commercial Press NEW48Onyama Limba
1047Ivar PaprockiUnited Kingdom2026-06-11Rousseaux, Michael Esq PROPOSAL92Amy Elsner
1048Deepesh ChuiItaly2026-06-14Buckley Miller Wright RENEWAL54Onyama Limba
1049Leon OldroydRussia2026-06-11Commercial Press RENEWAL93Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Rodrigues CampainGermanyIvan Magalhaes NEW
Aika InouyeBrazilIoni Bowcher PROPOSAL
Octavia MaletItalyIvan Magalhaes NEGOTIATION
David DarakjyItalyXuxue Feng NEGOTIATION
Nicolas IturbideJapanBernardo Dominic RENEWAL
Julie StensethIndiaAnna Fali PROPOSAL
Maisha RulapaughFranceBernardo Dominic PROPOSAL
Adams MorascaBrazilOnyama Limba UNQUALIFIED
Kaitlin OstroskyIndiaElwin Sharvill RENEWAL
Morrow RutaItalyXuxue Feng NEGOTIATION
Rodrigues CampainUnited KingdomOnyama Limba PROPOSAL
Faith GillianGermanyAnna Fali NEGOTIATION
Jefferson SchemmerSpainStephen Shaw PROPOSAL
Costa DilliardCanadaAnna Fali RENEWAL
Octavia MaletJapanXuxue Feng NEW
Jennifer AmigonIndiaAsiya Javayant NEW
Leon OldroydJapanAsiya Javayant UNQUALIFIED
Nicolas IturbideSpainIvan Magalhaes PROPOSAL
Leon OldroydBrazilStephen Shaw RENEWAL
Jones VocelkaIndiaOnyama Limba UNQUALIFIED
Silvio SlusarskiBrazilAsiya Javayant PROPOSAL
Stacey MacleadGermanyElwin Sharvill NEW
Jennifer AmigonBrazilIoni Bowcher RENEWAL
Faith GillianUnited KingdomOnyama Limba NEW
Emily WhobreyGermanyAmy Elsner NEW
Antonio CaudyAustraliaOnyama Limba PROPOSAL
Adams MorascaItalyAmy Elsner NEGOTIATION
Arvin AlbaresUnited KingdomOnyama Limba NEW
Leja CaldareraCanadaStephen Shaw NEW
Faith GillianBrazilIoni Bowcher RENEWAL
Nicolas IturbideItalyStephen Shaw PROPOSAL
Leon OldroydGermanyXuxue Feng PROPOSAL
Wickens NestleJapanBernardo Dominic RENEWAL
Morrow RutaFranceElwin Sharvill QUALIFIED
Sinclair WaycottFranceAsiya Javayant QUALIFIED
Faith GillianJapanAsiya Javayant RENEWAL
Nicolas IturbideBrazilAmy Elsner RENEWAL
Julie StensethUnited KingdomAsiya Javayant QUALIFIED
Cody SaylorsFranceIoni Bowcher NEW
Clifford RimJapanXuxue Feng RENEWAL
Nicolas IturbideCanadaOnyama Limba PROPOSAL
Johnson SergiRussiaBernardo Dominic QUALIFIED
Leja CaldareraJapanIoni Bowcher RENEWAL
Smith GlickUnited KingdomBernardo Dominic PROPOSAL
Nicolas IturbideAustraliaAnna Fali NEW
Wickens NestleAustraliaIvan Magalhaes UNQUALIFIED
Aruna FigeroaItalyXuxue Feng NEGOTIATION
Adams MorascaCanadaIoni Bowcher UNQUALIFIED
Silvio SlusarskiUnited KingdomIoni Bowcher UNQUALIFIED
Greenwood BologniaItalyAmy Elsner UNQUALIFIED
Frozen Columns
Name
Claire Tollner
Ashley Doe
Kaitlin Ostrosky
Misaki Royster
Claire Tollner
Faith Gillian
Salvatore Stockham
Mayumi Kolmetz
Alejandro Perin
Deepesh Chui
Isabel Bowley
Emily Whobrey
Isabel Bowley
Julie Stenseth
Leja Caldarera
Misaki Royster
Kadeem Flosi
Rodrigues Campain
James Butt
Mujtaba Nicka
Aika Inouye
Sinclair Waycott
Darci Poquette
Aika Inouye
Jefferson Schemmer
Jeanfrancois Venere
Greenwood Bolognia
Leon Oldroyd
Aruna Figeroa
David Darakjy
Clifford Rim
David Darakjy
Tony Foller
Arvin Albares
Stacey Maclead
Smith Glick
Rodrigues Campain
Kadeem Flosi
Adams Morasca
Nicolas Iturbide
Smith Glick
Octavia Malet
Ashley Doe
Kaitlin Ostrosky
Antonio Caudy
Julie Stenseth
Johnson Sergi
Ashley Doe
Emily Whobrey
Maria Marrier
IdCountryDate
1000Spain2026-06-07
1001India2026-06-11
1002Canada2026-06-10
1003India2026-06-03
1004Spain2026-06-14
1005Argentina2026-06-09
1006Spain2026-06-12
1007Russia2026-06-21
1008Japan2026-05-26
1009Japan2026-05-31
1010Australia2026-06-08
1011Germany2026-06-18
1012United Kingdom2026-05-25
1013France2026-05-23
1014France2026-05-24
1015France2026-06-17
1016United Kingdom2026-06-11
1017United Kingdom2026-06-04
1018Russia2026-06-03
1019Canada2026-06-20
1020Germany2026-05-24
1021Brazil2026-05-27
1022Argentina2026-06-19
1023United Kingdom2026-05-28
1024Russia2026-06-11
1025United Kingdom2026-06-11
1026Canada2026-05-31
1027Spain2026-06-05
1028Australia2026-06-15
1029France2026-06-18
1030Canada2026-05-26
1031Russia2026-05-30
1032France2026-05-26
1033United Kingdom2026-06-02
1034India2026-05-30
1035Germany2026-06-01
1036Argentina2026-06-08
1037Japan2026-06-03
1038Japan2026-06-15
1039Japan2026-05-26
1040Australia2026-05-27
1041Argentina2026-06-21
1042Japan2026-06-08
1043Russia2026-05-26
1044Argentina2026-06-18
1045France2026-06-19
1046Spain2026-06-06
1047Brazil2026-06-21
1048Brazil2026-05-28
1049Italy2026-06-01

On-Demand Data

NameIdCountryDate
Jennifer Amigon1000Russia2026-06-10
Kadeem Flosi1001Russia2026-06-19
Darci Poquette1002Italy2026-05-25
Julie Stenseth1003Japan2026-06-13
Francesco Shinko1004Japan2026-06-07
Aditya Kusko1005Italy2026-06-08
Cody Saylors1006Argentina2026-05-27
David Darakjy1007Germany2026-06-21
Darci Poquette1008Argentina2026-05-23
Emily Whobrey1009Brazil2026-05-25
Ivar Paprocki1010Germany2026-06-17
Julie Stenseth1011United Kingdom2026-05-26
Johnson Sergi1012United Kingdom2026-05-29
Francesco Shinko1013Japan2026-06-11
Misaki Royster1014Brazil2026-05-25
Costa Dilliard1015Argentina2026-06-06
Juan Wieser1016India2026-05-24
Murillo Malet1017Spain2026-05-30
Sinclair Waycott1018Canada2026-06-02
Silvio Slusarski1019Spain2026-05-25
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Alejandro PerinBrazilOnyama Limba NEGOTIATION
Octavia MaletArgentinaAnna Fali UNQUALIFIED
Maisha RulapaughAustraliaAnna Fali RENEWAL
Mayumi KolmetzItalyStephen Shaw QUALIFIED
Clifford RimArgentinaAsiya Javayant NEGOTIATION
David DarakjyIndiaBernardo Dominic RENEWAL
Tony FollerCanadaBernardo Dominic NEGOTIATION
Tony FollerCanadaIoni Bowcher PROPOSAL
Jones VocelkaAustraliaOnyama Limba UNQUALIFIED
Tony FollerAustraliaAnna Fali PROPOSAL
Adams MorascaItalyElwin Sharvill PROPOSAL
Mayumi KolmetzArgentinaIvan Magalhaes NEGOTIATION
Juan WieserSpainIoni Bowcher QUALIFIED
Misaki RoysterRussiaStephen Shaw NEW
Munro FerenczAustraliaIoni Bowcher QUALIFIED
Clifford RimFranceAnna Fali NEW
Isabel BowleyArgentinaAsiya Javayant NEGOTIATION
Maria MarrierCanadaXuxue Feng NEGOTIATION
Claire TollnerJapanIoni Bowcher RENEWAL
Izzy GarufiBrazilIvan Magalhaes NEGOTIATION
Alejandro PerinSpainIoni Bowcher NEW
Stacey MacleadItalyXuxue Feng QUALIFIED
Smith GlickRussiaAmy Elsner RENEWAL
Silvio SlusarskiBrazilAnna Fali NEW
James ButtSpainAmy Elsner UNQUALIFIED
David DarakjyFranceAmy Elsner NEGOTIATION
Adams MorascaFranceBernardo Dominic NEGOTIATION
Leja CaldareraBrazilAnna Fali RENEWAL
Rodrigues CampainBrazilXuxue Feng NEW
Leja CaldareraFranceAsiya Javayant NEGOTIATION
Leon OldroydGermanyIvan Magalhaes QUALIFIED
Izzy GarufiSpainAnna Fali PROPOSAL
Sinclair WaycottItalyIvan Magalhaes NEGOTIATION
Tony FollerArgentinaBernardo Dominic NEGOTIATION
Ivar PaprockiUnited KingdomXuxue Feng PROPOSAL
Claire TollnerFranceIvan Magalhaes QUALIFIED
Nicolas IturbideJapanIoni Bowcher QUALIFIED
David DarakjyAustraliaAsiya Javayant NEW
James ButtSpainOnyama Limba PROPOSAL
Tony FollerArgentinaElwin Sharvill UNQUALIFIED

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