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
Antonio CaudyIndiaStephen Shaw NEGOTIATION
Salvatore StockhamIndiaIvan Magalhaes NEGOTIATION
Claire TollnerUnited KingdomAsiya Javayant RENEWAL
Jones VocelkaBrazilXuxue Feng NEGOTIATION
Greenwood BologniaArgentinaElwin Sharvill NEGOTIATION
Salvatore StockhamGermanyIvan Magalhaes NEGOTIATION
Ricardo GauchoFranceIoni Bowcher QUALIFIED
Stacey MacleadRussiaOnyama Limba QUALIFIED
Emily WhobreyItalyBernardo Dominic RENEWAL
Julie StensethSpainIoni Bowcher PROPOSAL
Leon OldroydSpainXuxue Feng QUALIFIED
Murillo MaletAustraliaStephen Shaw NEGOTIATION
Morrow RutaCanadaElwin Sharvill QUALIFIED
Maisha RulapaughBrazilAnna Fali UNQUALIFIED
Johnson SergiBrazilStephen Shaw RENEWAL
Izzy GarufiFranceIvan Magalhaes PROPOSAL
Ashley DoeFranceAnna Fali NEGOTIATION
Ricardo GauchoAustraliaAmy Elsner NEW
Kadeem FlosiSpainAmy Elsner PROPOSAL
Murillo MaletGermanyIvan Magalhaes PROPOSAL
Claire TollnerUnited KingdomAnna Fali NEW
Morrow RutaAustraliaIvan Magalhaes NEGOTIATION
James ButtCanadaAsiya Javayant PROPOSAL
Tony FollerSpainAmy Elsner NEW
Sinclair WaycottFranceBernardo Dominic PROPOSAL
Nicolas IturbideGermanyAsiya Javayant NEW
Claire TollnerUnited KingdomStephen Shaw PROPOSAL
Stacey MacleadFranceStephen Shaw RENEWAL
Octavia MaletArgentinaStephen Shaw NEGOTIATION
Tony FollerBrazilElwin Sharvill QUALIFIED
Juan WieserJapanAsiya Javayant NEW
Silvio SlusarskiCanadaAsiya Javayant UNQUALIFIED
Alejandro PerinCanadaBernardo Dominic NEGOTIATION
Chavez BriddickCanadaAsiya Javayant PROPOSAL
Ashley DoeSpainBernardo Dominic RENEWAL
Maria MarrierIndiaAmy Elsner UNQUALIFIED
Johnson SergiArgentinaBernardo Dominic NEGOTIATION
Isabel BowleyAustraliaOnyama Limba RENEWAL
Deepesh ChuiJapanAnna Fali NEGOTIATION
James ButtFranceElwin Sharvill NEW
Smith GlickItalyOnyama Limba QUALIFIED
Misaki RoysterCanadaElwin Sharvill NEW
Maria MarrierGermanyAnna Fali NEW
Mayumi KolmetzUnited KingdomAsiya Javayant RENEWAL
Silvio SlusarskiGermanyOnyama Limba NEGOTIATION
David DarakjyAustraliaAnna Fali PROPOSAL
Julie StensethBrazilBernardo Dominic RENEWAL
Claire TollnerRussiaElwin Sharvill PROPOSAL
Johnson SergiSpainAnna Fali NEGOTIATION
Julie StensethJapanIvan Magalhaes UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
David DarakjyFranceXuxue Feng PROPOSAL
Tony FollerUnited KingdomElwin Sharvill PROPOSAL
Greenwood BologniaRussiaOnyama Limba QUALIFIED
Kadeem FlosiSpainAmy Elsner NEGOTIATION
Smith GlickSpainBernardo Dominic RENEWAL
Munro FerenczFranceIoni Bowcher PROPOSAL
Sinclair WaycottJapanStephen Shaw QUALIFIED
Ricardo GauchoArgentinaStephen Shaw NEW
Faith GillianRussiaElwin Sharvill QUALIFIED
Silvio SlusarskiAustraliaAsiya Javayant QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Morrow RutaFrance2026-05-28Feiner Bros NEW88Amy Elsner
1001Antonio CaudyFrance2026-05-03Buckley Miller Wright PROPOSAL51Elwin Sharvill
1002Mayumi KolmetzGermany2026-05-27Printing Dimensions PROPOSAL31Asiya Javayant
1003Jefferson SchemmerFrance2026-05-13Chapman, Ross E Esq UNQUALIFIED70Ivan Magalhaes
1004Clifford RimIndia2026-05-13Buckley Miller Wright RENEWAL34Anna Fali
1005Misaki RoysterUnited Kingdom2026-05-26Commercial Press NEGOTIATION49Ivan Magalhaes
1006Johnson SergiFrance2026-05-03Truhlar And Truhlar Attys NEW15Bernardo Dominic
1007Arvin AlbaresCanada2026-05-27Chemel, James L Cpa QUALIFIED84Xuxue Feng
1008Murillo MaletArgentina2026-05-16Rousseaux, Michael Esq NEGOTIATION80Stephen Shaw
1009David DarakjyGermany2026-05-25Printing Dimensions QUALIFIED52Stephen Shaw
1010Maria MarrierUnited Kingdom2026-05-30Dorl, James J Esq UNQUALIFIED82Stephen Shaw
1011Kadeem FlosiJapan2026-05-24Rangoni Of Florence NEW65Asiya Javayant
1012Costa DilliardAustralia2026-05-28Feltz Printing Service NEW62Ivan Magalhaes
1013Nicolas IturbideGermany2026-05-09Rangoni Of Florence NEW0Onyama Limba
1014Costa DilliardCanada2026-05-26Chapman, Ross E Esq UNQUALIFIED40Ioni Bowcher
1015Maria MarrierFrance2026-05-04Rousseaux, Michael Esq PROPOSAL23Bernardo Dominic
1016Juan WieserJapan2026-05-08Chapman, Ross E Esq QUALIFIED66Onyama Limba
1017David DarakjyUnited Kingdom2026-05-22Rangoni Of Florence NEGOTIATION52Anna Fali
1018Rodrigues CampainCanada2026-05-03Rangoni Of Florence PROPOSAL38Ivan Magalhaes
1019Jeanfrancois VenereGermany2026-05-13Buckley Miller Wright NEGOTIATION27Stephen Shaw
1020Maria MarrierArgentina2026-05-18Chanay, Jeffrey A Esq UNQUALIFIED70Ioni Bowcher
1021Clifford RimGermany2026-05-27Feiner Bros NEW51Stephen Shaw
1022Jeanfrancois VenereAustralia2026-05-07Chemel, James L Cpa UNQUALIFIED80Ioni Bowcher
1023Johnson SergiAustralia2026-05-13Feiner Bros RENEWAL64Amy Elsner
1024Cody SaylorsIndia2026-05-27Feiner Bros RENEWAL34Asiya Javayant
1025Wickens NestleRussia2026-05-04Benton, John B Jr NEGOTIATION27Asiya Javayant
1026Alejandro PerinBrazil2026-05-26Rangoni Of Florence NEGOTIATION57Bernardo Dominic
1027David DarakjyGermany2026-05-20Dorl, James J Esq UNQUALIFIED33Stephen Shaw
1028Silvio SlusarskiUnited Kingdom2026-05-17Morlong Associates NEGOTIATION10Ioni Bowcher
1029Izzy GarufiSpain2026-05-31Chemel, James L Cpa NEGOTIATION1Onyama Limba
1030Murillo MaletSpain2026-05-31Printing Dimensions NEW1Xuxue Feng
1031Ricardo GauchoArgentina2026-05-23Commercial Press NEGOTIATION70Ioni Bowcher
1032Deepesh ChuiGermany2026-05-23Feltz Printing Service QUALIFIED98Onyama Limba
1033Mujtaba NickaFrance2026-05-26Commercial Press PROPOSAL46Ivan Magalhaes
1034Jefferson SchemmerUnited Kingdom2026-05-21Chapman, Ross E Esq NEGOTIATION58Xuxue Feng
1035Isabel BowleyBrazil2026-05-18Chemel, James L Cpa UNQUALIFIED44Bernardo Dominic
1036Julie StensethRussia2026-05-03Feiner Bros UNQUALIFIED49Asiya Javayant
1037Greenwood BologniaArgentina2026-05-31Buckley Miller Wright NEGOTIATION20Onyama Limba
1038Emily WhobreyArgentina2026-05-06Rousseaux, Michael Esq RENEWAL71Xuxue Feng
1039Costa DilliardJapan2026-05-31Commercial Press NEW28Anna Fali
1040Wickens NestleIndia2026-05-16Commercial Press UNQUALIFIED42Stephen Shaw
1041Kadeem FlosiRussia2026-05-07Dorl, James J Esq UNQUALIFIED57Onyama Limba
1042David DarakjyArgentina2026-05-27Chemel, James L Cpa QUALIFIED35Ioni Bowcher
1043Aruna FigeroaFrance2026-05-27Feiner Bros NEGOTIATION92Stephen Shaw
1044Kaitlin OstroskyAustralia2026-05-03Feltz Printing Service NEGOTIATION81Anna Fali
1045Johnson SergiIndia2026-05-30Dorl, James J Esq PROPOSAL51Asiya Javayant
1046Aditya KuskoUnited Kingdom2026-05-07Printing Dimensions NEW94Asiya Javayant
1047Izzy GarufiBrazil2026-05-19Morlong Associates NEW52Stephen Shaw
1048Deepesh ChuiGermany2026-05-06Feltz Printing Service NEW34Onyama Limba
1049Aditya KuskoIndia2026-05-27Benton, John B Jr NEW5Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Nicolas IturbideArgentinaElwin Sharvill UNQUALIFIED
Darci PoquetteGermanyStephen Shaw PROPOSAL
Greenwood BologniaGermanyStephen Shaw RENEWAL
Ivar PaprockiUnited KingdomStephen Shaw UNQUALIFIED
Greenwood BologniaJapanElwin Sharvill QUALIFIED
Aika InouyeCanadaAsiya Javayant PROPOSAL
Tony FollerAustraliaBernardo Dominic RENEWAL
Adams MorascaItalyOnyama Limba QUALIFIED
Deepesh ChuiSpainBernardo Dominic QUALIFIED
Jeanfrancois VenereGermanyXuxue Feng NEW
Kaitlin OstroskyBrazilAmy Elsner RENEWAL
Octavia MaletCanadaAsiya Javayant UNQUALIFIED
Jefferson SchemmerItalyAsiya Javayant UNQUALIFIED
Munro FerenczUnited KingdomIoni Bowcher QUALIFIED
Isabel BowleyGermanyElwin Sharvill NEGOTIATION
Tony FollerFranceAmy Elsner RENEWAL
Rodrigues CampainAustraliaBernardo Dominic PROPOSAL
Clifford RimBrazilXuxue Feng QUALIFIED
Emily WhobreyGermanyOnyama Limba RENEWAL
Antonio CaudyIndiaElwin Sharvill UNQUALIFIED
Antonio CaudyCanadaXuxue Feng RENEWAL
Francesco ShinkoRussiaIoni Bowcher UNQUALIFIED
Aruna FigeroaBrazilIoni Bowcher QUALIFIED
Adams MorascaArgentinaOnyama Limba UNQUALIFIED
Cody SaylorsBrazilAnna Fali QUALIFIED
Stacey MacleadSpainAsiya Javayant QUALIFIED
Adams MorascaItalyAmy Elsner NEGOTIATION
Maria MarrierArgentinaOnyama Limba RENEWAL
Ricardo GauchoAustraliaStephen Shaw NEW
Juan WieserAustraliaAnna Fali RENEWAL
Emily WhobreyCanadaXuxue Feng UNQUALIFIED
Chavez BriddickArgentinaOnyama Limba QUALIFIED
Juan WieserRussiaIoni Bowcher NEGOTIATION
Tony FollerAustraliaXuxue Feng PROPOSAL
Julie StensethRussiaElwin Sharvill NEGOTIATION
Misaki RoysterAustraliaIvan Magalhaes PROPOSAL
Greenwood BologniaItalyAmy Elsner NEW
Aika InouyeJapanBernardo Dominic UNQUALIFIED
Arvin AlbaresUnited KingdomAmy Elsner NEGOTIATION
Silvio SlusarskiJapanAsiya Javayant UNQUALIFIED
Ricardo GauchoAustraliaOnyama Limba UNQUALIFIED
Jefferson SchemmerBrazilBernardo Dominic QUALIFIED
Mayumi KolmetzBrazilXuxue Feng PROPOSAL
Salvatore StockhamIndiaOnyama Limba QUALIFIED
Leja CaldareraJapanAsiya Javayant UNQUALIFIED
Deepesh ChuiCanadaStephen Shaw UNQUALIFIED
Aika InouyeBrazilXuxue Feng NEW
Clifford RimArgentinaBernardo Dominic UNQUALIFIED
Nicolas IturbideAustraliaAnna Fali QUALIFIED
Aika InouyeArgentinaBernardo Dominic UNQUALIFIED
Frozen Columns
Name
Izzy Garufi
Emily Whobrey
Johnson Sergi
Faith Gillian
Maria Marrier
Claire Tollner
Mujtaba Nicka
David Darakjy
Aditya Kusko
Aika Inouye
Izzy Garufi
Ivar Paprocki
Salvatore Stockham
Greenwood Bolognia
Izzy Garufi
Jefferson Schemmer
David Darakjy
Izzy Garufi
Faith Gillian
Octavia Malet
Jefferson Schemmer
Jeanfrancois Venere
David Darakjy
Cody Saylors
Emily Whobrey
Emily Whobrey
Adams Morasca
Munro Ferencz
Aditya Kusko
Morrow Ruta
Silvio Slusarski
Murillo Malet
Faith Gillian
Claire Tollner
Maisha Rulapaugh
David Darakjy
Jeanfrancois Venere
Clifford Rim
Jefferson Schemmer
Julie Stenseth
Juan Wieser
Silvio Slusarski
Nicolas Iturbide
Aika Inouye
Kaitlin Ostrosky
Jeanfrancois Venere
Jones Vocelka
Alejandro Perin
Murillo Malet
Smith Glick
IdCountryDate
1000India2026-06-01
1001India2026-05-05
1002Spain2026-05-07
1003Japan2026-05-30
1004France2026-05-27
1005Canada2026-05-03
1006France2026-05-20
1007Canada2026-05-21
1008United Kingdom2026-05-17
1009United Kingdom2026-05-29
1010Spain2026-05-10
1011Brazil2026-05-14
1012Canada2026-05-18
1013Spain2026-05-27
1014Japan2026-06-01
1015Australia2026-05-20
1016Spain2026-05-21
1017Argentina2026-05-12
1018Brazil2026-05-28
1019Argentina2026-05-16
1020Spain2026-05-18
1021Argentina2026-05-12
1022Brazil2026-05-14
1023United Kingdom2026-05-22
1024Canada2026-05-27
1025Australia2026-05-14
1026India2026-05-19
1027Italy2026-05-25
1028Brazil2026-05-10
1029Australia2026-05-19
1030Italy2026-05-27
1031Japan2026-05-05
1032Russia2026-05-16
1033Russia2026-05-21
1034Italy2026-05-18
1035Germany2026-05-06
1036Spain2026-05-10
1037Australia2026-05-31
1038Canada2026-05-26
1039Russia2026-05-23
1040France2026-05-23
1041Spain2026-05-09
1042India2026-05-31
1043Germany2026-05-10
1044Russia2026-05-10
1045India2026-05-21
1046Canada2026-05-24
1047Spain2026-05-12
1048Canada2026-05-19
1049Argentina2026-05-23

On-Demand Data

NameIdCountryDate
Arvin Albares1000Italy2026-05-29
Rodrigues Campain1001United Kingdom2026-05-20
Deepesh Chui1002Japan2026-05-30
Rodrigues Campain1003Spain2026-05-10
Jones Vocelka1004Germany2026-05-17
Aika Inouye1005Argentina2026-05-11
Jeanfrancois Venere1006Russia2026-05-10
Silvio Slusarski1007Japan2026-05-05
Mayumi Kolmetz1008India2026-05-10
Salvatore Stockham1009Germany2026-05-24
Smith Glick1010Argentina2026-05-09
Izzy Garufi1011Brazil2026-05-06
Faith Gillian1012France2026-05-28
James Butt1013France2026-05-25
Aruna Figeroa1014Germany2026-05-27
Rodrigues Campain1015Italy2026-06-01
Murillo Malet1016Argentina2026-05-06
Ivar Paprocki1017France2026-05-11
Francesco Shinko1018Canada2026-05-03
Tony Foller1019France2026-05-30
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Stacey MacleadArgentinaOnyama Limba NEGOTIATION
Smith GlickRussiaStephen Shaw UNQUALIFIED
Greenwood BologniaAustraliaIvan Magalhaes QUALIFIED
Maisha RulapaughAustraliaIvan Magalhaes NEW
Ivar PaprockiUnited KingdomIoni Bowcher NEW
Jefferson SchemmerIndiaBernardo Dominic PROPOSAL
Mujtaba NickaItalyBernardo Dominic PROPOSAL
Darci PoquetteCanadaOnyama Limba RENEWAL
Mayumi KolmetzBrazilXuxue Feng NEW
Isabel BowleyGermanyXuxue Feng PROPOSAL
Juan WieserCanadaIoni Bowcher PROPOSAL
Smith GlickArgentinaAnna Fali RENEWAL
Ivar PaprockiJapanOnyama Limba UNQUALIFIED
Jeanfrancois VenereGermanyStephen Shaw RENEWAL
Julie StensethBrazilAmy Elsner PROPOSAL
Munro FerenczGermanyBernardo Dominic NEGOTIATION
Emily WhobreyBrazilAmy Elsner NEW
Ashley DoeGermanyStephen Shaw PROPOSAL
Smith GlickRussiaIoni Bowcher PROPOSAL
Morrow RutaJapanBernardo Dominic QUALIFIED
Wickens NestleUnited KingdomAnna Fali QUALIFIED
Adams MorascaSpainIoni Bowcher RENEWAL
Rodrigues CampainUnited KingdomXuxue Feng NEW
Jennifer AmigonArgentinaAsiya Javayant RENEWAL
Izzy GarufiItalyXuxue Feng UNQUALIFIED
Sinclair WaycottItalyXuxue Feng NEGOTIATION
Ashley DoeSpainIvan Magalhaes PROPOSAL
Antonio CaudyUnited KingdomBernardo Dominic NEGOTIATION
Jeanfrancois VenereUnited KingdomOnyama Limba PROPOSAL
Murillo MaletBrazilIoni Bowcher NEW
Ashley DoeArgentinaStephen Shaw NEW
James ButtGermanyIvan Magalhaes UNQUALIFIED
Salvatore StockhamJapanOnyama Limba NEGOTIATION
Leon OldroydCanadaXuxue Feng QUALIFIED
Kadeem FlosiIndiaAmy Elsner QUALIFIED
Cody SaylorsJapanOnyama Limba QUALIFIED
Kadeem FlosiGermanyAmy Elsner UNQUALIFIED
Ashley DoeJapanStephen Shaw UNQUALIFIED
Misaki RoysterJapanAnna Fali PROPOSAL
Jennifer AmigonIndiaAsiya Javayant 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>