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
Clifford RimCanadaOnyama Limba NEW
David DarakjyIndiaElwin Sharvill NEGOTIATION
David DarakjyArgentinaOnyama Limba UNQUALIFIED
Juan WieserSpainBernardo Dominic QUALIFIED
Mujtaba NickaSpainIoni Bowcher RENEWAL
Silvio SlusarskiIndiaXuxue Feng PROPOSAL
Smith GlickArgentinaAnna Fali NEGOTIATION
Costa DilliardAustraliaStephen Shaw NEGOTIATION
Mayumi KolmetzRussiaAmy Elsner QUALIFIED
Costa DilliardBrazilAsiya Javayant UNQUALIFIED
James ButtAustraliaBernardo Dominic NEGOTIATION
Claire TollnerFranceStephen Shaw QUALIFIED
Ricardo GauchoFranceIvan Magalhaes NEGOTIATION
Clifford RimAustraliaBernardo Dominic QUALIFIED
Leon OldroydFranceElwin Sharvill QUALIFIED
Mayumi KolmetzSpainOnyama Limba NEW
Cody SaylorsBrazilXuxue Feng NEW
Greenwood BologniaSpainIvan Magalhaes PROPOSAL
Leja CaldareraIndiaElwin Sharvill QUALIFIED
Munro FerenczIndiaBernardo Dominic UNQUALIFIED
Wickens NestleJapanXuxue Feng RENEWAL
Cody SaylorsUnited KingdomIoni Bowcher NEGOTIATION
Jennifer AmigonCanadaAmy Elsner PROPOSAL
Ricardo GauchoFranceXuxue Feng QUALIFIED
Johnson SergiGermanyIvan Magalhaes UNQUALIFIED
Emily WhobreyRussiaAmy Elsner NEW
Juan WieserAustraliaOnyama Limba RENEWAL
Silvio SlusarskiItalyXuxue Feng UNQUALIFIED
David DarakjyArgentinaOnyama Limba PROPOSAL
Tony FollerArgentinaAsiya Javayant UNQUALIFIED
Arvin AlbaresAustraliaAsiya Javayant NEW
Salvatore StockhamBrazilAsiya Javayant RENEWAL
Kadeem FlosiItalyOnyama Limba PROPOSAL
David DarakjyGermanyAmy Elsner NEGOTIATION
Leja CaldareraJapanIvan Magalhaes NEGOTIATION
Adams MorascaIndiaAnna Fali NEW
Clifford RimCanadaElwin Sharvill UNQUALIFIED
Maria MarrierGermanyBernardo Dominic PROPOSAL
Sinclair WaycottCanadaXuxue Feng QUALIFIED
Sinclair WaycottItalyXuxue Feng NEGOTIATION
Kaitlin OstroskyFranceStephen Shaw UNQUALIFIED
Emily WhobreyFranceXuxue Feng NEGOTIATION
Izzy GarufiSpainBernardo Dominic QUALIFIED
Kaitlin OstroskySpainElwin Sharvill NEW
Arvin AlbaresRussiaIoni Bowcher RENEWAL
Munro FerenczArgentinaAsiya Javayant RENEWAL
Stacey MacleadGermanyXuxue Feng RENEWAL
Aika InouyeIndiaStephen Shaw NEGOTIATION
Chavez BriddickJapanIoni Bowcher UNQUALIFIED
Octavia MaletItalyStephen Shaw NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Izzy GarufiArgentinaIoni Bowcher NEGOTIATION
Emily WhobreyFranceIvan Magalhaes UNQUALIFIED
Jefferson SchemmerAustraliaIvan Magalhaes RENEWAL
Octavia MaletCanadaAnna Fali RENEWAL
Nicolas IturbideRussiaAmy Elsner RENEWAL
Munro FerenczUnited KingdomElwin Sharvill PROPOSAL
Stacey MacleadAustraliaAnna Fali RENEWAL
Claire TollnerCanadaIoni Bowcher UNQUALIFIED
Claire TollnerFranceIoni Bowcher NEW
Alejandro PerinIndiaIvan Magalhaes NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Salvatore StockhamItaly2026-04-05Dorl, James J Esq QUALIFIED35Ioni Bowcher
1001Stacey MacleadCanada2026-04-22Chanay, Jeffrey A Esq NEW60Bernardo Dominic
1002Leja CaldareraIndia2026-04-22Truhlar And Truhlar Attys NEGOTIATION7Elwin Sharvill
1003Misaki RoysterAustralia2026-04-04Benton, John B Jr NEGOTIATION69Stephen Shaw
1004Jefferson SchemmerGermany2026-04-10Feiner Bros QUALIFIED35Onyama Limba
1005Arvin AlbaresBrazil2026-04-04Rousseaux, Michael Esq NEGOTIATION17Ioni Bowcher
1006Adams MorascaGermany2026-04-13Morlong Associates RENEWAL44Amy Elsner
1007Cody SaylorsIndia2026-03-31Rangoni Of Florence NEGOTIATION50Elwin Sharvill
1008David DarakjyArgentina2026-04-20Printing Dimensions QUALIFIED39Stephen Shaw
1009Adams MorascaFrance2026-03-29Dorl, James J Esq RENEWAL42Ivan Magalhaes
1010David DarakjyFrance2026-04-05Printing Dimensions RENEWAL81Anna Fali
1011Adams MorascaIndia2026-04-14Chapman, Ross E Esq NEW21Ioni Bowcher
1012Adams MorascaBrazil2026-04-11Commercial Press UNQUALIFIED23Onyama Limba
1013Juan WieserCanada2026-04-11Chemel, James L Cpa UNQUALIFIED59Elwin Sharvill
1014Leja CaldareraJapan2026-04-08Printing Dimensions RENEWAL93Anna Fali
1015Rodrigues CampainGermany2026-04-08Feltz Printing Service PROPOSAL20Elwin Sharvill
1016Arvin AlbaresRussia2026-04-22Buckley Miller Wright NEW25Onyama Limba
1017Maria MarrierAustralia2026-04-18Morlong Associates NEGOTIATION34Asiya Javayant
1018Johnson SergiArgentina2026-04-08Printing Dimensions RENEWAL35Anna Fali
1019Ivar PaprockiRussia2026-04-09Feiner Bros QUALIFIED79Xuxue Feng
1020Jefferson SchemmerArgentina2026-03-26Printing Dimensions QUALIFIED8Stephen Shaw
1021James ButtRussia2026-04-01Morlong Associates NEGOTIATION6Ivan Magalhaes
1022Morrow RutaJapan2026-04-23Truhlar And Truhlar Attys PROPOSAL87Xuxue Feng
1023Ashley DoeCanada2026-04-21King, Christopher A Esq PROPOSAL22Ivan Magalhaes
1024James ButtJapan2026-04-11Chemel, James L Cpa UNQUALIFIED16Bernardo Dominic
1025James ButtUnited Kingdom2026-04-07Benton, John B Jr QUALIFIED93Xuxue Feng
1026Emily WhobreyArgentina2026-03-31Rousseaux, Michael Esq NEGOTIATION67Stephen Shaw
1027Aruna FigeroaCanada2026-04-14Feiner Bros PROPOSAL17Asiya Javayant
1028Arvin AlbaresArgentina2026-04-09Chapman, Ross E Esq UNQUALIFIED67Bernardo Dominic
1029Kadeem FlosiUnited Kingdom2026-03-30King, Christopher A Esq PROPOSAL97Stephen Shaw
1030Arvin AlbaresJapan2026-04-16Printing Dimensions QUALIFIED15Anna Fali
1031Julie StensethArgentina2026-03-27Rousseaux, Michael Esq QUALIFIED80Stephen Shaw
1032Deepesh ChuiGermany2026-04-21Rousseaux, Michael Esq NEW18Anna Fali
1033Antonio CaudyUnited Kingdom2026-04-10King, Christopher A Esq NEGOTIATION49Stephen Shaw
1034Antonio CaudyGermany2026-04-11Benton, John B Jr PROPOSAL39Amy Elsner
1035Claire TollnerRussia2026-04-23Rangoni Of Florence NEGOTIATION0Anna Fali
1036Greenwood BologniaArgentina2026-04-20Chapman, Ross E Esq NEW25Xuxue Feng
1037Aika InouyeCanada2026-04-22Truhlar And Truhlar Attys QUALIFIED17Asiya Javayant
1038Nicolas IturbideJapan2026-04-09Feltz Printing Service NEW97Xuxue Feng
1039Maisha RulapaughUnited Kingdom2026-04-18Morlong Associates QUALIFIED6Bernardo Dominic
1040Costa DilliardAustralia2026-04-21Chanay, Jeffrey A Esq NEW63Asiya Javayant
1041Antonio CaudyGermany2026-04-06Chapman, Ross E Esq PROPOSAL58Ioni Bowcher
1042Aditya KuskoGermany2026-04-12Morlong Associates NEW72Ivan Magalhaes
1043Faith GillianItaly2026-04-19Rangoni Of Florence NEGOTIATION58Ivan Magalhaes
1044Greenwood BologniaArgentina2026-04-05Commercial Press UNQUALIFIED30Amy Elsner
1045Morrow RutaGermany2026-04-17Rousseaux, Michael Esq RENEWAL17Amy Elsner
1046David DarakjyAustralia2026-04-08Chanay, Jeffrey A Esq UNQUALIFIED20Elwin Sharvill
1047Morrow RutaUnited Kingdom2026-04-07Morlong Associates RENEWAL74Ioni Bowcher
1048Ivar PaprockiRussia2026-03-27Commercial Press NEGOTIATION7Stephen Shaw
1049Johnson SergiJapan2026-03-28Morlong Associates PROPOSAL31Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Johnson SergiArgentinaAmy Elsner QUALIFIED
Alejandro PerinUnited KingdomBernardo Dominic NEW
Jeanfrancois VenereArgentinaIoni Bowcher NEW
Murillo MaletArgentinaXuxue Feng PROPOSAL
Izzy GarufiRussiaAmy Elsner NEW
David DarakjyItalyXuxue Feng UNQUALIFIED
Salvatore StockhamFranceXuxue Feng RENEWAL
Jones VocelkaAustraliaXuxue Feng UNQUALIFIED
Murillo MaletSpainOnyama Limba NEGOTIATION
Jennifer AmigonIndiaAmy Elsner UNQUALIFIED
Emily WhobreyAustraliaAmy Elsner UNQUALIFIED
Faith GillianRussiaStephen Shaw NEGOTIATION
Tony FollerArgentinaXuxue Feng QUALIFIED
Nicolas IturbideRussiaElwin Sharvill UNQUALIFIED
David DarakjyJapanElwin Sharvill UNQUALIFIED
Mayumi KolmetzRussiaAmy Elsner NEW
Julie StensethRussiaIvan Magalhaes RENEWAL
Francesco ShinkoGermanyStephen Shaw UNQUALIFIED
Wickens NestleGermanyAnna Fali NEW
Cody SaylorsFranceAnna Fali QUALIFIED
Clifford RimItalyAnna Fali UNQUALIFIED
Mujtaba NickaGermanyAnna Fali PROPOSAL
James ButtUnited KingdomBernardo Dominic NEGOTIATION
Aika InouyeItalyOnyama Limba UNQUALIFIED
Munro FerenczUnited KingdomXuxue Feng NEW
Rodrigues CampainUnited KingdomOnyama Limba RENEWAL
David DarakjyUnited KingdomAnna Fali QUALIFIED
Ricardo GauchoCanadaAnna Fali UNQUALIFIED
Aditya KuskoRussiaBernardo Dominic UNQUALIFIED
Kaitlin OstroskyItalyXuxue Feng RENEWAL
Isabel BowleyIndiaStephen Shaw NEW
Ricardo GauchoIndiaOnyama Limba NEGOTIATION
Aruna FigeroaJapanXuxue Feng PROPOSAL
Morrow RutaFranceAmy Elsner NEW
Kaitlin OstroskyUnited KingdomElwin Sharvill NEW
Francesco ShinkoUnited KingdomElwin Sharvill RENEWAL
David DarakjyItalyAnna Fali QUALIFIED
Jones VocelkaCanadaXuxue Feng RENEWAL
Smith GlickJapanAmy Elsner RENEWAL
Jefferson SchemmerArgentinaElwin Sharvill NEW
Wickens NestleJapanAnna Fali NEW
Deepesh ChuiAustraliaAmy Elsner QUALIFIED
Misaki RoysterCanadaStephen Shaw UNQUALIFIED
Emily WhobreyItalyAmy Elsner NEGOTIATION
Mujtaba NickaRussiaXuxue Feng PROPOSAL
Costa DilliardJapanBernardo Dominic RENEWAL
Ricardo GauchoIndiaIoni Bowcher UNQUALIFIED
Nicolas IturbideFranceAnna Fali UNQUALIFIED
Jennifer AmigonGermanyStephen Shaw PROPOSAL
Adams MorascaGermanyBernardo Dominic NEW
Frozen Columns
Name
Morrow Ruta
Izzy Garufi
Leja Caldarera
Leja Caldarera
Costa Dilliard
Sinclair Waycott
Johnson Sergi
Adams Morasca
Antonio Caudy
Jeanfrancois Venere
Alejandro Perin
Aruna Figeroa
Jeanfrancois Venere
Juan Wieser
Emily Whobrey
Kadeem Flosi
Costa Dilliard
Adams Morasca
James Butt
Murillo Malet
Claire Tollner
Jefferson Schemmer
Antonio Caudy
Ricardo Gaucho
Ivar Paprocki
Julie Stenseth
Juan Wieser
Morrow Ruta
Ashley Doe
Darci Poquette
Murillo Malet
Leon Oldroyd
Chavez Briddick
Johnson Sergi
Arvin Albares
Murillo Malet
Cody Saylors
Leon Oldroyd
Claire Tollner
Adams Morasca
Emily Whobrey
Smith Glick
Murillo Malet
Leja Caldarera
Aruna Figeroa
Ivar Paprocki
Mujtaba Nicka
Ivar Paprocki
Salvatore Stockham
Juan Wieser
IdCountryDate
1000Spain2026-04-10
1001Canada2026-04-03
1002Japan2026-04-05
1003Japan2026-03-29
1004Russia2026-04-16
1005Australia2026-04-21
1006Japan2026-04-12
1007United Kingdom2026-04-03
1008Argentina2026-04-21
1009Italy2026-04-02
1010France2026-03-28
1011Germany2026-04-02
1012Spain2026-04-12
1013United Kingdom2026-03-27
1014Japan2026-04-19
1015Canada2026-04-10
1016Italy2026-04-24
1017Brazil2026-04-22
1018Brazil2026-04-10
1019Canada2026-04-15
1020Japan2026-04-08
1021Germany2026-04-18
1022Australia2026-03-29
1023France2026-04-11
1024Canada2026-04-14
1025Germany2026-04-13
1026Argentina2026-04-17
1027Italy2026-04-01
1028France2026-04-20
1029Argentina2026-04-13
1030Italy2026-04-02
1031Canada2026-03-30
1032Russia2026-04-07
1033France2026-04-01
1034Germany2026-04-09
1035United Kingdom2026-03-26
1036Australia2026-04-09
1037Spain2026-04-02
1038Russia2026-03-28
1039Japan2026-04-13
1040Brazil2026-04-03
1041Brazil2026-04-24
1042Russia2026-04-24
1043Japan2026-04-06
1044Japan2026-04-07
1045Japan2026-04-12
1046India2026-04-07
1047Brazil2026-04-20
1048United Kingdom2026-03-28
1049United Kingdom2026-03-29

On-Demand Data

NameIdCountryDate
Alejandro Perin1000Australia2026-04-23
Kadeem Flosi1001India2026-04-12
Rodrigues Campain1002Japan2026-04-09
Leon Oldroyd1003Italy2026-04-08
Jeanfrancois Venere1004France2026-04-16
Morrow Ruta1005France2026-04-05
Salvatore Stockham1006Australia2026-04-16
Leja Caldarera1007Japan2026-04-11
Misaki Royster1008United Kingdom2026-04-21
James Butt1009France2026-03-26
Isabel Bowley1010Australia2026-04-03
Murillo Malet1011United Kingdom2026-04-08
Nicolas Iturbide1012Russia2026-04-03
Wickens Nestle1013Italy2026-04-05
Isabel Bowley1014India2026-04-20
David Darakjy1015Australia2026-04-20
Ivar Paprocki1016Japan2026-03-27
Clifford Rim1017Argentina2026-04-11
Darci Poquette1018India2026-04-01
Aruna Figeroa1019France2026-04-18
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Darci PoquetteArgentinaBernardo Dominic RENEWAL
Aruna FigeroaJapanIvan Magalhaes RENEWAL
Costa DilliardIndiaAsiya Javayant UNQUALIFIED
Claire TollnerBrazilAnna Fali NEW
Aruna FigeroaCanadaIoni Bowcher PROPOSAL
Murillo MaletRussiaStephen Shaw NEGOTIATION
Isabel BowleyCanadaIvan Magalhaes NEGOTIATION
Rodrigues CampainArgentinaIvan Magalhaes NEW
Stacey MacleadIndiaIvan Magalhaes NEGOTIATION
Francesco ShinkoCanadaBernardo Dominic PROPOSAL
Aruna FigeroaJapanAmy Elsner UNQUALIFIED
Octavia MaletUnited KingdomIvan Magalhaes RENEWAL
Murillo MaletRussiaAmy Elsner NEGOTIATION
Aditya KuskoBrazilIoni Bowcher QUALIFIED
Jefferson SchemmerCanadaXuxue Feng RENEWAL
Leja CaldareraSpainAmy Elsner RENEWAL
Tony FollerArgentinaElwin Sharvill NEGOTIATION
Arvin AlbaresBrazilAsiya Javayant QUALIFIED
Kadeem FlosiRussiaAsiya Javayant NEGOTIATION
Jennifer AmigonGermanyAsiya Javayant UNQUALIFIED
Alejandro PerinArgentinaIoni Bowcher PROPOSAL
Faith GillianFranceAmy Elsner UNQUALIFIED
Ricardo GauchoSpainIoni Bowcher RENEWAL
Silvio SlusarskiRussiaAmy Elsner NEW
Morrow RutaArgentinaIoni Bowcher NEGOTIATION
Maisha RulapaughCanadaElwin Sharvill NEGOTIATION
Jones VocelkaAustraliaIoni Bowcher PROPOSAL
Antonio CaudyGermanyOnyama Limba NEW
Leja CaldareraItalyAnna Fali NEGOTIATION
Izzy GarufiCanadaAmy Elsner NEW
Faith GillianFranceXuxue Feng NEGOTIATION
Aditya KuskoUnited KingdomElwin Sharvill QUALIFIED
Leja CaldareraFranceIvan Magalhaes PROPOSAL
Salvatore StockhamUnited KingdomOnyama Limba PROPOSAL
Mujtaba NickaBrazilAmy Elsner NEW
Tony FollerCanadaElwin Sharvill PROPOSAL
Jeanfrancois VenereItalyElwin Sharvill PROPOSAL
Smith GlickBrazilBernardo Dominic NEGOTIATION
Smith GlickRussiaBernardo Dominic PROPOSAL
Morrow RutaJapanStephen Shaw 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>