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
Julie StensethAustraliaIoni Bowcher PROPOSAL
David DarakjyAustraliaOnyama Limba NEGOTIATION
Ashley DoeArgentinaOnyama Limba NEW
Stacey MacleadBrazilIoni Bowcher PROPOSAL
James ButtCanadaAnna Fali RENEWAL
Mayumi KolmetzBrazilStephen Shaw RENEWAL
Aika InouyeSpainXuxue Feng PROPOSAL
Faith GillianAustraliaOnyama Limba QUALIFIED
Ashley DoeAustraliaAmy Elsner NEW
Kadeem FlosiCanadaBernardo Dominic PROPOSAL
Tony FollerBrazilOnyama Limba RENEWAL
Chavez BriddickRussiaIvan Magalhaes RENEWAL
Adams MorascaUnited KingdomAnna Fali PROPOSAL
Mayumi KolmetzCanadaXuxue Feng UNQUALIFIED
Arvin AlbaresSpainIvan Magalhaes QUALIFIED
Rodrigues CampainJapanOnyama Limba NEGOTIATION
Salvatore StockhamBrazilAmy Elsner QUALIFIED
Izzy GarufiBrazilStephen Shaw UNQUALIFIED
Faith GillianJapanBernardo Dominic PROPOSAL
Jeanfrancois VenereUnited KingdomElwin Sharvill NEGOTIATION
Jones VocelkaAustraliaXuxue Feng PROPOSAL
Arvin AlbaresCanadaElwin Sharvill NEW
Emily WhobreyUnited KingdomAmy Elsner QUALIFIED
Darci PoquetteCanadaAmy Elsner PROPOSAL
Octavia MaletGermanyAmy Elsner UNQUALIFIED
Emily WhobreyRussiaAnna Fali UNQUALIFIED
Deepesh ChuiAustraliaXuxue Feng UNQUALIFIED
Cody SaylorsArgentinaOnyama Limba QUALIFIED
Cody SaylorsAustraliaAsiya Javayant UNQUALIFIED
Leja CaldareraSpainIoni Bowcher QUALIFIED
Arvin AlbaresGermanyAsiya Javayant QUALIFIED
Murillo MaletAustraliaAnna Fali RENEWAL
Mayumi KolmetzGermanyIvan Magalhaes RENEWAL
Izzy GarufiIndiaOnyama Limba PROPOSAL
Ashley DoeRussiaIvan Magalhaes RENEWAL
Kaitlin OstroskyIndiaIvan Magalhaes RENEWAL
Aruna FigeroaCanadaElwin Sharvill RENEWAL
Greenwood BologniaCanadaElwin Sharvill PROPOSAL
Mujtaba NickaBrazilIvan Magalhaes UNQUALIFIED
Aika InouyeItalyAnna Fali NEW
Costa DilliardIndiaIvan Magalhaes UNQUALIFIED
Aditya KuskoGermanyStephen Shaw RENEWAL
Nicolas IturbideGermanyAsiya Javayant PROPOSAL
Tony FollerRussiaAnna Fali NEW
Julie StensethRussiaAsiya Javayant PROPOSAL
Juan WieserCanadaIoni Bowcher PROPOSAL
Emily WhobreySpainStephen Shaw NEGOTIATION
Jennifer AmigonSpainAmy Elsner NEW
James ButtSpainStephen Shaw PROPOSAL
Arvin AlbaresItalyAsiya Javayant NEW
Horizontal
NameCountryRepresentativeStatus
Arvin AlbaresItalyElwin Sharvill UNQUALIFIED
Maria MarrierAustraliaAnna Fali RENEWAL
Munro FerenczSpainElwin Sharvill UNQUALIFIED
Jefferson SchemmerSpainXuxue Feng UNQUALIFIED
David DarakjyIndiaStephen Shaw QUALIFIED
Misaki RoysterAustraliaOnyama Limba NEW
Aruna FigeroaSpainElwin Sharvill PROPOSAL
Munro FerenczSpainElwin Sharvill NEGOTIATION
Arvin AlbaresBrazilAnna Fali UNQUALIFIED
Smith GlickAustraliaAsiya Javayant NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Misaki RoysterIndia2025-07-16Commercial Press RENEWAL30Bernardo Dominic
1001Julie StensethRussia2025-07-31Chapman, Ross E Esq UNQUALIFIED78Anna Fali
1002Misaki RoysterSpain2025-07-12Chemel, James L Cpa NEW23Ioni Bowcher
1003Johnson SergiIndia2025-08-04Rangoni Of Florence UNQUALIFIED68Bernardo Dominic
1004Arvin AlbaresJapan2025-07-19Dorl, James J Esq UNQUALIFIED78Bernardo Dominic
1005Aika InouyeCanada2025-07-27Truhlar And Truhlar Attys QUALIFIED36Bernardo Dominic
1006Smith GlickIndia2025-07-31Chemel, James L Cpa QUALIFIED14Onyama Limba
1007Munro FerenczBrazil2025-08-01Benton, John B Jr QUALIFIED62Amy Elsner
1008Aika InouyeFrance2025-08-01Chemel, James L Cpa NEW70Anna Fali
1009Smith GlickIndia2025-07-13Chanay, Jeffrey A Esq QUALIFIED50Ioni Bowcher
1010Emily WhobreyBrazil2025-08-01Dorl, James J Esq QUALIFIED40Asiya Javayant
1011David DarakjyCanada2025-07-11Printing Dimensions PROPOSAL64Amy Elsner
1012Emily WhobreyFrance2025-08-04Morlong Associates RENEWAL42Anna Fali
1013Faith GillianCanada2025-08-05Benton, John B Jr PROPOSAL30Onyama Limba
1014Morrow RutaArgentina2025-07-15Chemel, James L Cpa UNQUALIFIED27Ioni Bowcher
1015Izzy GarufiGermany2025-07-14Dorl, James J Esq UNQUALIFIED55Xuxue Feng
1016Clifford RimUnited Kingdom2025-07-22Chanay, Jeffrey A Esq QUALIFIED26Bernardo Dominic
1017Misaki RoysterJapan2025-07-18Rousseaux, Michael Esq UNQUALIFIED47Stephen Shaw
1018Jennifer AmigonItaly2025-08-05Truhlar And Truhlar Attys NEW49Asiya Javayant
1019Adams MorascaArgentina2025-08-03King, Christopher A Esq NEW50Elwin Sharvill
1020Kadeem FlosiAustralia2025-08-03Chemel, James L Cpa PROPOSAL27Asiya Javayant
1021Kadeem FlosiArgentina2025-07-28King, Christopher A Esq RENEWAL52Ivan Magalhaes
1022Salvatore StockhamAustralia2025-07-24Rousseaux, Michael Esq UNQUALIFIED96Elwin Sharvill
1023Darci PoquetteGermany2025-08-08Benton, John B Jr RENEWAL64Anna Fali
1024Mujtaba NickaArgentina2025-08-09Benton, John B Jr PROPOSAL26Anna Fali
1025Stacey MacleadBrazil2025-07-20Morlong Associates NEW9Bernardo Dominic
1026Jones VocelkaUnited Kingdom2025-07-17King, Christopher A Esq NEGOTIATION9Asiya Javayant
1027Jefferson SchemmerRussia2025-08-07Chemel, James L Cpa NEW99Anna Fali
1028Leja CaldareraFrance2025-08-08Commercial Press NEW82Stephen Shaw
1029Mayumi KolmetzJapan2025-08-08Morlong Associates NEGOTIATION73Ioni Bowcher
1030Ricardo GauchoBrazil2025-07-22Chanay, Jeffrey A Esq NEGOTIATION39Ivan Magalhaes
1031Leja CaldareraIndia2025-07-23Feiner Bros QUALIFIED6Stephen Shaw
1032Emily WhobreyBrazil2025-08-06Morlong Associates QUALIFIED19Elwin Sharvill
1033Tony FollerUnited Kingdom2025-07-25Dorl, James J Esq RENEWAL15Xuxue Feng
1034Leon OldroydIndia2025-08-01Benton, John B Jr NEW22Stephen Shaw
1035Smith GlickUnited Kingdom2025-07-31Benton, John B Jr NEGOTIATION65Asiya Javayant
1036Antonio CaudyJapan2025-07-19Morlong Associates QUALIFIED20Bernardo Dominic
1037Salvatore StockhamBrazil2025-07-30Commercial Press RENEWAL33Amy Elsner
1038Alejandro PerinUnited Kingdom2025-07-13Benton, John B Jr UNQUALIFIED10Ioni Bowcher
1039Jennifer AmigonGermany2025-08-01Printing Dimensions RENEWAL49Onyama Limba
1040Morrow RutaCanada2025-07-20Chanay, Jeffrey A Esq NEW41Asiya Javayant
1041Emily WhobreySpain2025-07-25Commercial Press PROPOSAL72Ivan Magalhaes
1042Salvatore StockhamFrance2025-08-09Buckley Miller Wright PROPOSAL68Stephen Shaw
1043Jeanfrancois VenereCanada2025-07-12Rousseaux, Michael Esq PROPOSAL92Asiya Javayant
1044Kadeem FlosiArgentina2025-07-16Rangoni Of Florence RENEWAL54Elwin Sharvill
1045Jennifer AmigonBrazil2025-08-06Rangoni Of Florence RENEWAL40Ivan Magalhaes
1046Rodrigues CampainBrazil2025-07-28Rangoni Of Florence NEGOTIATION3Ivan Magalhaes
1047Juan WieserGermany2025-07-16Commercial Press NEGOTIATION28Xuxue Feng
1048Kadeem FlosiRussia2025-07-31King, Christopher A Esq NEW27Ioni Bowcher
1049Chavez BriddickUnited Kingdom2025-08-09Commercial Press NEW38Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Costa DilliardRussiaAnna Fali RENEWAL
Aika InouyeJapanAnna Fali UNQUALIFIED
Aika InouyeUnited KingdomIoni Bowcher UNQUALIFIED
Jennifer AmigonRussiaOnyama Limba NEW
Julie StensethUnited KingdomIoni Bowcher QUALIFIED
Leon OldroydRussiaStephen Shaw PROPOSAL
Ivar PaprockiRussiaElwin Sharvill NEW
Morrow RutaSpainStephen Shaw RENEWAL
Octavia MaletItalyXuxue Feng RENEWAL
Chavez BriddickGermanyIvan Magalhaes PROPOSAL
Jennifer AmigonAustraliaIvan Magalhaes RENEWAL
Rodrigues CampainFranceAmy Elsner UNQUALIFIED
Leon OldroydGermanyAnna Fali NEGOTIATION
Adams MorascaGermanyIoni Bowcher QUALIFIED
Jeanfrancois VenereSpainBernardo Dominic NEGOTIATION
Isabel BowleyItalyXuxue Feng NEW
Izzy GarufiJapanOnyama Limba QUALIFIED
Leon OldroydRussiaBernardo Dominic QUALIFIED
Jennifer AmigonRussiaBernardo Dominic PROPOSAL
Francesco ShinkoJapanStephen Shaw NEW
Cody SaylorsFranceAnna Fali NEW
Leja CaldareraAustraliaOnyama Limba PROPOSAL
Izzy GarufiAustraliaXuxue Feng NEGOTIATION
Clifford RimCanadaAnna Fali QUALIFIED
Misaki RoysterGermanyElwin Sharvill QUALIFIED
Mujtaba NickaJapanOnyama Limba PROPOSAL
Leon OldroydIndiaOnyama Limba NEGOTIATION
Mujtaba NickaUnited KingdomStephen Shaw UNQUALIFIED
Misaki RoysterBrazilStephen Shaw QUALIFIED
Ashley DoeFranceIvan Magalhaes NEGOTIATION
Ivar PaprockiItalyAmy Elsner UNQUALIFIED
Mayumi KolmetzFranceIvan Magalhaes UNQUALIFIED
Octavia MaletRussiaBernardo Dominic QUALIFIED
Silvio SlusarskiJapanStephen Shaw QUALIFIED
Isabel BowleyJapanOnyama Limba NEGOTIATION
Ricardo GauchoRussiaElwin Sharvill QUALIFIED
Silvio SlusarskiFranceAsiya Javayant NEGOTIATION
Claire TollnerAustraliaElwin Sharvill PROPOSAL
David DarakjyFranceOnyama Limba PROPOSAL
Cody SaylorsCanadaStephen Shaw UNQUALIFIED
Johnson SergiRussiaIoni Bowcher QUALIFIED
Rodrigues CampainIndiaIvan Magalhaes QUALIFIED
Juan WieserIndiaIoni Bowcher NEW
Rodrigues CampainItalyXuxue Feng RENEWAL
Nicolas IturbideRussiaAmy Elsner RENEWAL
Misaki RoysterRussiaIoni Bowcher NEGOTIATION
Ivar PaprockiArgentinaIoni Bowcher QUALIFIED
Ricardo GauchoGermanyAmy Elsner UNQUALIFIED
Sinclair WaycottItalyBernardo Dominic NEW
Claire TollnerAustraliaAsiya Javayant NEGOTIATION
Frozen Columns
Name
Jennifer Amigon
Mujtaba Nicka
Stacey Maclead
Darci Poquette
Tony Foller
Greenwood Bolognia
Silvio Slusarski
Rodrigues Campain
Arvin Albares
Francesco Shinko
Kadeem Flosi
Julie Stenseth
Johnson Sergi
Clifford Rim
Mayumi Kolmetz
Ashley Doe
Jeanfrancois Venere
Sinclair Waycott
Darci Poquette
Ivar Paprocki
Aruna Figeroa
Johnson Sergi
Murillo Malet
Emily Whobrey
Salvatore Stockham
Nicolas Iturbide
Claire Tollner
Tony Foller
Sinclair Waycott
Aika Inouye
Tony Foller
Munro Ferencz
Silvio Slusarski
James Butt
Jones Vocelka
Isabel Bowley
Morrow Ruta
Maria Marrier
Maria Marrier
Ricardo Gaucho
Tony Foller
Emily Whobrey
Aruna Figeroa
James Butt
Arvin Albares
Rodrigues Campain
David Darakjy
Costa Dilliard
Jeanfrancois Venere
Juan Wieser
IdCountryDate
1000United Kingdom2025-08-08
1001India2025-07-11
1002United Kingdom2025-07-17
1003India2025-08-01
1004France2025-08-06
1005Canada2025-07-22
1006France2025-07-12
1007Canada2025-07-21
1008Argentina2025-07-31
1009Argentina2025-07-14
1010Brazil2025-07-16
1011United Kingdom2025-07-12
1012Australia2025-07-11
1013Russia2025-07-31
1014Germany2025-07-25
1015Argentina2025-07-15
1016Japan2025-07-23
1017Spain2025-08-04
1018Germany2025-07-20
1019Japan2025-07-20
1020India2025-07-13
1021Germany2025-08-03
1022Germany2025-08-07
1023United Kingdom2025-07-21
1024Canada2025-08-06
1025Spain2025-07-21
1026Italy2025-07-30
1027Canada2025-07-21
1028Argentina2025-07-31
1029Japan2025-08-05
1030Australia2025-07-27
1031France2025-07-23
1032Brazil2025-07-15
1033Brazil2025-08-01
1034Brazil2025-08-06
1035Japan2025-07-13
1036United Kingdom2025-07-26
1037Australia2025-08-04
1038United Kingdom2025-08-04
1039Spain2025-07-17
1040Italy2025-07-24
1041France2025-07-20
1042Russia2025-08-01
1043Australia2025-07-31
1044Canada2025-08-02
1045Australia2025-07-19
1046Brazil2025-07-18
1047Germany2025-07-13
1048Brazil2025-07-31
1049India2025-07-15

On-Demand Data

NameIdCountryDate
Octavia Malet1000France2025-07-22
Claire Tollner1001Russia2025-08-09
Arvin Albares1002Argentina2025-08-02
Clifford Rim1003India2025-07-16
Alejandro Perin1004France2025-08-02
Isabel Bowley1005Canada2025-08-02
Smith Glick1006France2025-08-01
Kadeem Flosi1007Argentina2025-07-29
Izzy Garufi1008France2025-07-14
Darci Poquette1009India2025-08-09
Wickens Nestle1010France2025-07-16
Jeanfrancois Venere1011France2025-07-12
Deepesh Chui1012India2025-07-29
Misaki Royster1013Japan2025-08-02
Alejandro Perin1014United Kingdom2025-07-20
Aika Inouye1015Italy2025-08-01
David Darakjy1016India2025-07-18
Kadeem Flosi1017Japan2025-07-31
Alejandro Perin1018Canada2025-08-08
Juan Wieser1019Brazil2025-07-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Stacey MacleadFranceElwin Sharvill UNQUALIFIED
Smith GlickJapanBernardo Dominic PROPOSAL
Misaki RoysterAustraliaAsiya Javayant PROPOSAL
Arvin AlbaresBrazilAnna Fali PROPOSAL
Misaki RoysterItalyOnyama Limba RENEWAL
Mayumi KolmetzJapanAsiya Javayant QUALIFIED
Munro FerenczBrazilAnna Fali NEGOTIATION
Wickens NestleUnited KingdomIoni Bowcher PROPOSAL
Juan WieserItalyIoni Bowcher UNQUALIFIED
David DarakjySpainElwin Sharvill NEGOTIATION
Deepesh ChuiArgentinaStephen Shaw PROPOSAL
Arvin AlbaresIndiaAsiya Javayant QUALIFIED
Costa DilliardBrazilAsiya Javayant PROPOSAL
Aruna FigeroaBrazilStephen Shaw PROPOSAL
Antonio CaudyJapanBernardo Dominic NEW
Costa DilliardJapanXuxue Feng PROPOSAL
Leja CaldareraUnited KingdomStephen Shaw PROPOSAL
Isabel BowleyRussiaOnyama Limba RENEWAL
Greenwood BologniaCanadaIvan Magalhaes UNQUALIFIED
Kaitlin OstroskyCanadaStephen Shaw PROPOSAL
Aika InouyeUnited KingdomStephen Shaw UNQUALIFIED
Faith GillianAustraliaIoni Bowcher RENEWAL
Chavez BriddickGermanyXuxue Feng UNQUALIFIED
Kaitlin OstroskyFranceAsiya Javayant QUALIFIED
Aruna FigeroaFranceAmy Elsner NEGOTIATION
Costa DilliardSpainOnyama Limba NEW
Aditya KuskoItalyIvan Magalhaes PROPOSAL
Johnson SergiGermanyAmy Elsner RENEWAL
Jefferson SchemmerRussiaXuxue Feng PROPOSAL
Costa DilliardGermanyStephen Shaw NEGOTIATION
Ivar PaprockiSpainAnna Fali NEGOTIATION
Munro FerenczArgentinaIoni Bowcher UNQUALIFIED
Morrow RutaRussiaXuxue Feng RENEWAL
Jennifer AmigonGermanyElwin Sharvill NEW
Arvin AlbaresArgentinaAmy Elsner UNQUALIFIED
Misaki RoysterAustraliaAmy Elsner NEW
Aditya KuskoSpainElwin Sharvill NEW
Cody SaylorsJapanAsiya Javayant QUALIFIED
Costa DilliardAustraliaIoni Bowcher QUALIFIED
Maisha RulapaughItalyStephen Shaw 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>