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
Kaitlin OstroskyAustraliaIvan Magalhaes NEW
Juan WieserGermanyAmy Elsner PROPOSAL
Jeanfrancois VenereJapanIoni Bowcher RENEWAL
Izzy GarufiArgentinaIvan Magalhaes UNQUALIFIED
David DarakjyArgentinaElwin Sharvill NEGOTIATION
Ashley DoeFranceIoni Bowcher NEGOTIATION
Mujtaba NickaSpainXuxue Feng QUALIFIED
Arvin AlbaresUnited KingdomBernardo Dominic NEW
Jefferson SchemmerBrazilIoni Bowcher NEGOTIATION
Faith GillianUnited KingdomIoni Bowcher NEGOTIATION
Francesco ShinkoIndiaXuxue Feng QUALIFIED
Adams MorascaGermanyOnyama Limba RENEWAL
Aika InouyeFranceXuxue Feng UNQUALIFIED
Sinclair WaycottJapanBernardo Dominic RENEWAL
Ricardo GauchoCanadaIoni Bowcher NEGOTIATION
Silvio SlusarskiCanadaAnna Fali RENEWAL
Morrow RutaFranceAmy Elsner UNQUALIFIED
Ricardo GauchoFranceElwin Sharvill NEW
Murillo MaletArgentinaAnna Fali RENEWAL
Murillo MaletUnited KingdomAmy Elsner QUALIFIED
Rodrigues CampainRussiaOnyama Limba NEW
Aditya KuskoItalyAmy Elsner NEW
Leja CaldareraArgentinaStephen Shaw NEW
Claire TollnerIndiaIvan Magalhaes QUALIFIED
Smith GlickJapanAnna Fali NEGOTIATION
Adams MorascaItalyIoni Bowcher QUALIFIED
Emily WhobreyCanadaXuxue Feng QUALIFIED
Deepesh ChuiUnited KingdomAmy Elsner QUALIFIED
Ricardo GauchoRussiaIvan Magalhaes RENEWAL
Francesco ShinkoRussiaAnna Fali UNQUALIFIED
Ivar PaprockiUnited KingdomStephen Shaw UNQUALIFIED
Tony FollerRussiaAmy Elsner UNQUALIFIED
Clifford RimAustraliaAmy Elsner NEGOTIATION
Arvin AlbaresSpainXuxue Feng RENEWAL
Adams MorascaGermanyAnna Fali PROPOSAL
Leon OldroydItalyAnna Fali PROPOSAL
Greenwood BologniaArgentinaElwin Sharvill RENEWAL
Mayumi KolmetzUnited KingdomIvan Magalhaes UNQUALIFIED
Antonio CaudyItalyAmy Elsner RENEWAL
Aruna FigeroaJapanIoni Bowcher NEGOTIATION
Antonio CaudyFranceOnyama Limba NEGOTIATION
Greenwood BologniaGermanyIoni Bowcher NEGOTIATION
Murillo MaletUnited KingdomOnyama Limba NEGOTIATION
Murillo MaletRussiaBernardo Dominic NEGOTIATION
Jeanfrancois VenereItalyAnna Fali QUALIFIED
Alejandro PerinIndiaIvan Magalhaes NEW
Maisha RulapaughJapanIoni Bowcher QUALIFIED
James ButtIndiaIvan Magalhaes UNQUALIFIED
Ricardo GauchoJapanElwin Sharvill RENEWAL
Greenwood BologniaIndiaOnyama Limba UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Misaki RoysterArgentinaIvan Magalhaes PROPOSAL
Darci PoquetteAustraliaIvan Magalhaes NEW
Tony FollerFranceStephen Shaw RENEWAL
Cody SaylorsGermanyElwin Sharvill UNQUALIFIED
Smith GlickSpainAnna Fali NEW
Sinclair WaycottFranceAnna Fali PROPOSAL
Costa DilliardJapanXuxue Feng NEGOTIATION
Greenwood BologniaArgentinaStephen Shaw QUALIFIED
Juan WieserUnited KingdomXuxue Feng NEW
Leja CaldareraAustraliaStephen Shaw NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Maria MarrierArgentina2026-04-08Feltz Printing Service UNQUALIFIED47Bernardo Dominic
1001Claire TollnerArgentina2026-04-01King, Christopher A Esq UNQUALIFIED0Anna Fali
1002Costa DilliardCanada2026-04-04Printing Dimensions NEW98Ioni Bowcher
1003Faith GillianItaly2026-04-02Chapman, Ross E Esq QUALIFIED7Ivan Magalhaes
1004Morrow RutaArgentina2026-04-12Benton, John B Jr RENEWAL95Stephen Shaw
1005Kadeem FlosiRussia2026-04-23Truhlar And Truhlar Attys NEW96Onyama Limba
1006Munro FerenczRussia2026-04-05Chapman, Ross E Esq UNQUALIFIED51Anna Fali
1007Aditya KuskoFrance2026-04-25Truhlar And Truhlar Attys PROPOSAL10Elwin Sharvill
1008Smith GlickAustralia2026-04-23Truhlar And Truhlar Attys UNQUALIFIED45Stephen Shaw
1009Izzy GarufiGermany2026-04-25Dorl, James J Esq NEGOTIATION54Ivan Magalhaes
1010Aditya KuskoItaly2026-04-25Morlong Associates QUALIFIED8Anna Fali
1011Leja CaldareraFrance2026-04-17Benton, John B Jr QUALIFIED58Anna Fali
1012Francesco ShinkoIndia2026-04-25Rangoni Of Florence NEW26Stephen Shaw
1013Ashley DoeItaly2026-04-18Dorl, James J Esq PROPOSAL27Onyama Limba
1014Mujtaba NickaCanada2026-04-11Dorl, James J Esq QUALIFIED72Ioni Bowcher
1015Ricardo GauchoIndia2026-03-31Buckley Miller Wright RENEWAL72Bernardo Dominic
1016Wickens NestleArgentina2026-04-17Chapman, Ross E Esq QUALIFIED25Anna Fali
1017Maria MarrierCanada2026-04-01Feiner Bros QUALIFIED42Ioni Bowcher
1018Emily WhobreyBrazil2026-04-23Chemel, James L Cpa NEW74Asiya Javayant
1019Adams MorascaArgentina2026-04-22Chemel, James L Cpa PROPOSAL53Asiya Javayant
1020Jennifer AmigonIndia2026-03-30Buckley Miller Wright RENEWAL33Ioni Bowcher
1021Kaitlin OstroskyCanada2026-04-16Morlong Associates RENEWAL28Asiya Javayant
1022Jeanfrancois VenereJapan2026-04-23Buckley Miller Wright QUALIFIED61Xuxue Feng
1023Murillo MaletGermany2026-04-23Printing Dimensions NEW35Anna Fali
1024Juan WieserRussia2026-04-11Truhlar And Truhlar Attys QUALIFIED54Xuxue Feng
1025Nicolas IturbideArgentina2026-04-02Buckley Miller Wright PROPOSAL57Amy Elsner
1026Izzy GarufiUnited Kingdom2026-04-03Feiner Bros NEW13Stephen Shaw
1027Kaitlin OstroskyAustralia2026-04-12Feiner Bros UNQUALIFIED83Onyama Limba
1028Izzy GarufiBrazil2026-04-18Rangoni Of Florence NEW42Stephen Shaw
1029Jennifer AmigonArgentina2026-04-20Chemel, James L Cpa NEGOTIATION41Amy Elsner
1030Ivar PaprockiBrazil2026-04-10Dorl, James J Esq NEGOTIATION51Ivan Magalhaes
1031Tony FollerArgentina2026-04-13Printing Dimensions QUALIFIED73Amy Elsner
1032Alejandro PerinArgentina2026-04-22King, Christopher A Esq UNQUALIFIED18Xuxue Feng
1033Ivar PaprockiJapan2026-04-19Feltz Printing Service QUALIFIED32Anna Fali
1034Greenwood BologniaSpain2026-03-31Chapman, Ross E Esq QUALIFIED39Elwin Sharvill
1035Izzy GarufiCanada2026-04-22King, Christopher A Esq QUALIFIED34Elwin Sharvill
1036Cody SaylorsAustralia2026-04-14Chanay, Jeffrey A Esq UNQUALIFIED21Xuxue Feng
1037Aditya KuskoFrance2026-04-09King, Christopher A Esq PROPOSAL60Anna Fali
1038Adams MorascaAustralia2026-03-30Feltz Printing Service UNQUALIFIED52Amy Elsner
1039Mujtaba NickaCanada2026-04-25Chapman, Ross E Esq RENEWAL96Onyama Limba
1040Salvatore StockhamIndia2026-04-22Dorl, James J Esq UNQUALIFIED16Bernardo Dominic
1041Aika InouyeBrazil2026-04-20Chapman, Ross E Esq RENEWAL89Stephen Shaw
1042Mayumi KolmetzCanada2026-04-12Chanay, Jeffrey A Esq NEW4Asiya Javayant
1043Stacey MacleadBrazil2026-04-05Morlong Associates QUALIFIED30Amy Elsner
1044Jefferson SchemmerUnited Kingdom2026-04-18Commercial Press QUALIFIED98Elwin Sharvill
1045Sinclair WaycottJapan2026-04-12Chemel, James L Cpa PROPOSAL83Elwin Sharvill
1046Faith GillianBrazil2026-04-25Printing Dimensions QUALIFIED84Stephen Shaw
1047Julie StensethFrance2026-04-16Morlong Associates PROPOSAL7Asiya Javayant
1048Chavez BriddickJapan2026-04-18Printing Dimensions PROPOSAL30Ioni Bowcher
1049Murillo MaletRussia2026-04-09Feiner Bros NEW63Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Francesco ShinkoGermanyIvan Magalhaes QUALIFIED
Cody SaylorsArgentinaIvan Magalhaes QUALIFIED
Ashley DoeItalyOnyama Limba PROPOSAL
Nicolas IturbideJapanIoni Bowcher NEGOTIATION
Costa DilliardGermanyAsiya Javayant QUALIFIED
Ashley DoeIndiaStephen Shaw UNQUALIFIED
Darci PoquetteGermanyBernardo Dominic NEGOTIATION
Rodrigues CampainJapanIoni Bowcher PROPOSAL
Smith GlickGermanyOnyama Limba PROPOSAL
Faith GillianCanadaStephen Shaw RENEWAL
Emily WhobreyFranceIvan Magalhaes RENEWAL
Ricardo GauchoFranceStephen Shaw NEW
Munro FerenczAustraliaAmy Elsner QUALIFIED
Maisha RulapaughIndiaIvan Magalhaes NEW
Deepesh ChuiItalyIoni Bowcher PROPOSAL
Smith GlickFranceXuxue Feng UNQUALIFIED
Leja CaldareraBrazilOnyama Limba PROPOSAL
Ivar PaprockiArgentinaAnna Fali RENEWAL
Antonio CaudyAustraliaOnyama Limba QUALIFIED
Aruna FigeroaSpainIoni Bowcher NEGOTIATION
Ricardo GauchoGermanyAsiya Javayant QUALIFIED
Leja CaldareraBrazilIvan Magalhaes PROPOSAL
Ashley DoeFranceBernardo Dominic QUALIFIED
Sinclair WaycottItalyIoni Bowcher QUALIFIED
Ricardo GauchoRussiaIoni Bowcher NEGOTIATION
Aika InouyeSpainXuxue Feng PROPOSAL
Izzy GarufiBrazilAsiya Javayant UNQUALIFIED
Francesco ShinkoAustraliaAnna Fali NEW
Clifford RimUnited KingdomStephen Shaw RENEWAL
Kaitlin OstroskyArgentinaIvan Magalhaes RENEWAL
Claire TollnerFranceAmy Elsner PROPOSAL
Emily WhobreyCanadaBernardo Dominic QUALIFIED
Alejandro PerinCanadaAmy Elsner PROPOSAL
Tony FollerItalyIoni Bowcher RENEWAL
Ivar PaprockiAustraliaIvan Magalhaes QUALIFIED
Maria MarrierGermanyAmy Elsner NEW
Greenwood BologniaGermanyElwin Sharvill NEW
Deepesh ChuiGermanyOnyama Limba NEW
Greenwood BologniaRussiaBernardo Dominic QUALIFIED
Mujtaba NickaCanadaStephen Shaw RENEWAL
Misaki RoysterGermanyElwin Sharvill NEGOTIATION
Ashley DoeRussiaXuxue Feng RENEWAL
Salvatore StockhamItalyAmy Elsner NEW
Ricardo GauchoFranceAsiya Javayant NEW
Rodrigues CampainUnited KingdomBernardo Dominic NEGOTIATION
Adams MorascaUnited KingdomXuxue Feng NEW
Clifford RimIndiaXuxue Feng RENEWAL
Deepesh ChuiSpainElwin Sharvill RENEWAL
Clifford RimUnited KingdomBernardo Dominic NEW
Rodrigues CampainArgentinaAnna Fali QUALIFIED
Frozen Columns
Name
Darci Poquette
Chavez Briddick
Tony Foller
Kadeem Flosi
Faith Gillian
Isabel Bowley
Arvin Albares
Jennifer Amigon
Darci Poquette
Chavez Briddick
Morrow Ruta
Greenwood Bolognia
Wickens Nestle
Ricardo Gaucho
Jones Vocelka
Antonio Caudy
Leon Oldroyd
Aruna Figeroa
Aika Inouye
Isabel Bowley
Jeanfrancois Venere
Morrow Ruta
Tony Foller
Costa Dilliard
Aditya Kusko
Leja Caldarera
Alejandro Perin
Stacey Maclead
Darci Poquette
Francesco Shinko
Maria Marrier
Munro Ferencz
Aditya Kusko
Maisha Rulapaugh
Jeanfrancois Venere
Octavia Malet
Smith Glick
Salvatore Stockham
Izzy Garufi
Claire Tollner
Jeanfrancois Venere
Izzy Garufi
Murillo Malet
Costa Dilliard
Sinclair Waycott
Cody Saylors
Darci Poquette
Sinclair Waycott
Darci Poquette
Munro Ferencz
IdCountryDate
1000Argentina2026-04-17
1001Australia2026-04-27
1002France2026-04-02
1003Germany2026-04-23
1004Japan2026-04-15
1005India2026-04-09
1006Canada2026-04-08
1007Japan2026-04-04
1008Australia2026-04-21
1009Australia2026-04-09
1010France2026-04-03
1011Italy2026-03-31
1012Australia2026-04-21
1013Australia2026-04-13
1014Japan2026-04-13
1015Spain2026-04-20
1016Germany2026-04-19
1017India2026-04-02
1018Canada2026-04-14
1019India2026-04-26
1020Australia2026-04-27
1021Australia2026-04-18
1022Italy2026-04-08
1023Canada2026-04-22
1024France2026-04-20
1025Australia2026-04-04
1026France2026-04-07
1027Brazil2026-04-14
1028Canada2026-04-07
1029Canada2026-04-23
1030Japan2026-04-25
1031United Kingdom2026-04-28
1032Australia2026-04-05
1033Canada2026-04-10
1034Argentina2026-04-17
1035Spain2026-04-03
1036Argentina2026-04-14
1037Australia2026-04-09
1038Brazil2026-04-19
1039India2026-04-27
1040Japan2026-04-20
1041Japan2026-04-04
1042Germany2026-04-06
1043India2026-04-23
1044Canada2026-04-17
1045Russia2026-04-07
1046Italy2026-04-27
1047India2026-04-14
1048France2026-04-09
1049France2026-04-23

On-Demand Data

NameIdCountryDate
Ivar Paprocki1000India2026-04-28
Aika Inouye1001Spain2026-04-26
Clifford Rim1002Spain2026-04-19
Kaitlin Ostrosky1003Brazil2026-04-20
Darci Poquette1004Australia2026-04-04
Maria Marrier1005Germany2026-04-26
Juan Wieser1006Japan2026-04-25
Claire Tollner1007France2026-03-31
Izzy Garufi1008Italy2026-04-18
Kadeem Flosi1009Argentina2026-04-24
Murillo Malet1010Japan2026-04-25
Julie Stenseth1011United Kingdom2026-04-04
Darci Poquette1012Germany2026-04-08
Leon Oldroyd1013Australia2026-04-23
Ivar Paprocki1014Japan2026-03-31
Rodrigues Campain1015Australia2026-04-25
Jennifer Amigon1016Italy2026-04-02
Aditya Kusko1017Australia2026-04-05
Smith Glick1018Brazil2026-04-15
Jefferson Schemmer1019France2026-04-17
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jones VocelkaCanadaIoni Bowcher UNQUALIFIED
Sinclair WaycottRussiaAnna Fali NEGOTIATION
Wickens NestleAustraliaAsiya Javayant RENEWAL
Tony FollerAustraliaElwin Sharvill QUALIFIED
Clifford RimCanadaAnna Fali RENEWAL
Francesco ShinkoSpainBernardo Dominic NEGOTIATION
Octavia MaletJapanAsiya Javayant RENEWAL
Aruna FigeroaArgentinaAsiya Javayant UNQUALIFIED
Antonio CaudyIndiaBernardo Dominic QUALIFIED
Francesco ShinkoSpainStephen Shaw NEW
Juan WieserCanadaIoni Bowcher PROPOSAL
Antonio CaudyRussiaAmy Elsner RENEWAL
Clifford RimUnited KingdomAmy Elsner NEGOTIATION
Octavia MaletAustraliaAsiya Javayant NEGOTIATION
Alejandro PerinRussiaAmy Elsner NEGOTIATION
Tony FollerItalyBernardo Dominic RENEWAL
David DarakjyAustraliaXuxue Feng UNQUALIFIED
Johnson SergiSpainAmy Elsner NEW
Kaitlin OstroskyRussiaBernardo Dominic PROPOSAL
Costa DilliardUnited KingdomElwin Sharvill RENEWAL
Morrow RutaSpainIvan Magalhaes PROPOSAL
Rodrigues CampainUnited KingdomStephen Shaw NEW
Juan WieserFranceXuxue Feng PROPOSAL
Jeanfrancois VenereItalyIoni Bowcher QUALIFIED
Morrow RutaAustraliaIoni Bowcher PROPOSAL
Clifford RimIndiaElwin Sharvill UNQUALIFIED
Jeanfrancois VenereBrazilIoni Bowcher PROPOSAL
Aditya KuskoAustraliaIoni Bowcher NEGOTIATION
Silvio SlusarskiIndiaStephen Shaw UNQUALIFIED
Deepesh ChuiUnited KingdomAnna Fali RENEWAL
Leon OldroydRussiaStephen Shaw NEGOTIATION
Claire TollnerAustraliaAsiya Javayant QUALIFIED
Murillo MaletAustraliaAnna Fali NEGOTIATION
Salvatore StockhamBrazilIoni Bowcher PROPOSAL
Julie StensethAustraliaXuxue Feng PROPOSAL
Misaki RoysterArgentinaXuxue Feng NEW
Julie StensethSpainIvan Magalhaes QUALIFIED
Clifford RimItalyBernardo Dominic PROPOSAL
Julie StensethArgentinaElwin Sharvill NEGOTIATION
Izzy GarufiUnited KingdomElwin 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>