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
Costa DilliardItalyAsiya Javayant QUALIFIED
Mujtaba NickaIndiaStephen Shaw NEGOTIATION
Morrow RutaItalyStephen Shaw UNQUALIFIED
Aika InouyeCanadaIoni Bowcher PROPOSAL
Isabel BowleyAustraliaIoni Bowcher RENEWAL
Tony FollerIndiaBernardo Dominic UNQUALIFIED
Deepesh ChuiGermanyIoni Bowcher QUALIFIED
Leja CaldareraItalyIvan Magalhaes QUALIFIED
Isabel BowleyRussiaIoni Bowcher QUALIFIED
Kaitlin OstroskyIndiaOnyama Limba RENEWAL
Maisha RulapaughRussiaStephen Shaw QUALIFIED
Munro FerenczJapanAsiya Javayant NEGOTIATION
Francesco ShinkoCanadaBernardo Dominic PROPOSAL
Murillo MaletJapanIvan Magalhaes PROPOSAL
Mayumi KolmetzAustraliaElwin Sharvill PROPOSAL
Ivar PaprockiAustraliaAmy Elsner UNQUALIFIED
Clifford RimItalyAmy Elsner RENEWAL
Antonio CaudyUnited KingdomStephen Shaw PROPOSAL
Sinclair WaycottAustraliaElwin Sharvill NEGOTIATION
Jones VocelkaIndiaIvan Magalhaes PROPOSAL
Jefferson SchemmerCanadaAmy Elsner QUALIFIED
Nicolas IturbideItalyOnyama Limba UNQUALIFIED
Tony FollerIndiaAnna Fali RENEWAL
Julie StensethAustraliaOnyama Limba QUALIFIED
Greenwood BologniaJapanOnyama Limba NEGOTIATION
Jones VocelkaRussiaXuxue Feng UNQUALIFIED
Tony FollerIndiaXuxue Feng NEW
Arvin AlbaresAustraliaElwin Sharvill NEGOTIATION
Alejandro PerinFranceAsiya Javayant NEW
Arvin AlbaresBrazilIoni Bowcher PROPOSAL
Stacey MacleadJapanAnna Fali QUALIFIED
Jefferson SchemmerUnited KingdomAmy Elsner QUALIFIED
Mujtaba NickaGermanyBernardo Dominic PROPOSAL
Sinclair WaycottBrazilAmy Elsner PROPOSAL
Kaitlin OstroskyAustraliaOnyama Limba NEW
Smith GlickSpainOnyama Limba QUALIFIED
Jefferson SchemmerFranceElwin Sharvill NEW
Darci PoquetteCanadaElwin Sharvill QUALIFIED
Aditya KuskoBrazilOnyama Limba RENEWAL
Clifford RimItalyBernardo Dominic QUALIFIED
Faith GillianJapanElwin Sharvill PROPOSAL
Smith GlickBrazilIvan Magalhaes NEW
Kaitlin OstroskyIndiaIoni Bowcher RENEWAL
Leon OldroydSpainElwin Sharvill NEW
Salvatore StockhamAustraliaAsiya Javayant PROPOSAL
Stacey MacleadAustraliaAsiya Javayant QUALIFIED
Rodrigues CampainCanadaOnyama Limba NEW
Leja CaldareraBrazilIoni Bowcher NEW
Jeanfrancois VenereItalyAsiya Javayant NEW
Deepesh ChuiAustraliaAsiya Javayant NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
David DarakjyGermanyXuxue Feng PROPOSAL
Cody SaylorsIndiaIvan Magalhaes PROPOSAL
Chavez BriddickFranceAsiya Javayant UNQUALIFIED
Leon OldroydFranceIvan Magalhaes NEW
Murillo MaletIndiaStephen Shaw NEGOTIATION
Alejandro PerinGermanyIoni Bowcher RENEWAL
Maisha RulapaughSpainStephen Shaw RENEWAL
David DarakjyFranceAsiya Javayant UNQUALIFIED
Mayumi KolmetzFranceOnyama Limba UNQUALIFIED
Ivar PaprockiRussiaXuxue Feng QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Silvio SlusarskiFrance2025-08-11Benton, John B Jr RENEWAL75Amy Elsner
1001Antonio CaudyRussia2025-08-13Feiner Bros NEGOTIATION3Amy Elsner
1002Izzy GarufiSpain2025-08-10Chemel, James L Cpa UNQUALIFIED35Xuxue Feng
1003Leon OldroydUnited Kingdom2025-08-12Chanay, Jeffrey A Esq QUALIFIED27Xuxue Feng
1004Morrow RutaBrazil2025-08-31Feltz Printing Service PROPOSAL79Bernardo Dominic
1005Aruna FigeroaAustralia2025-08-26Rangoni Of Florence NEGOTIATION14Elwin Sharvill
1006Murillo MaletArgentina2025-08-28Buckley Miller Wright RENEWAL80Onyama Limba
1007Adams MorascaRussia2025-08-12Benton, John B Jr QUALIFIED56Ioni Bowcher
1008Leon OldroydArgentina2025-09-02Chanay, Jeffrey A Esq UNQUALIFIED16Ioni Bowcher
1009Aruna FigeroaGermany2025-08-11Chanay, Jeffrey A Esq PROPOSAL88Elwin Sharvill
1010Tony FollerFrance2025-08-26Rousseaux, Michael Esq RENEWAL53Asiya Javayant
1011Kadeem FlosiCanada2025-08-22Dorl, James J Esq UNQUALIFIED96Stephen Shaw
1012Aika InouyeSpain2025-08-12Commercial Press RENEWAL2Amy Elsner
1013Jefferson SchemmerItaly2025-08-27Truhlar And Truhlar Attys RENEWAL46Elwin Sharvill
1014Juan WieserRussia2025-09-02Chemel, James L Cpa RENEWAL94Anna Fali
1015Murillo MaletArgentina2025-08-15Rousseaux, Michael Esq QUALIFIED43Onyama Limba
1016Kadeem FlosiArgentina2025-08-29Chanay, Jeffrey A Esq NEW74Asiya Javayant
1017Stacey MacleadIndia2025-08-10Morlong Associates RENEWAL87Bernardo Dominic
1018Aika InouyeJapan2025-08-23Buckley Miller Wright QUALIFIED52Onyama Limba
1019Aika InouyeJapan2025-09-07Printing Dimensions NEW81Ivan Magalhaes
1020Nicolas IturbideArgentina2025-08-26Rangoni Of Florence NEW79Elwin Sharvill
1021Emily WhobreyBrazil2025-08-19Chanay, Jeffrey A Esq RENEWAL77Onyama Limba
1022Aika InouyeRussia2025-08-17King, Christopher A Esq PROPOSAL75Stephen Shaw
1023Murillo MaletFrance2025-09-04Buckley Miller Wright PROPOSAL46Amy Elsner
1024Morrow RutaGermany2025-08-18Feiner Bros QUALIFIED46Ioni Bowcher
1025Mayumi KolmetzFrance2025-09-07Rangoni Of Florence PROPOSAL84Bernardo Dominic
1026Claire TollnerAustralia2025-08-31Rangoni Of Florence QUALIFIED0Asiya Javayant
1027Alejandro PerinCanada2025-08-16Buckley Miller Wright PROPOSAL57Ivan Magalhaes
1028Murillo MaletBrazil2025-08-14Feltz Printing Service QUALIFIED83Xuxue Feng
1029Misaki RoysterCanada2025-08-20Feltz Printing Service PROPOSAL50Anna Fali
1030Costa DilliardFrance2025-08-27Rangoni Of Florence NEW48Onyama Limba
1031Sinclair WaycottRussia2025-09-05Printing Dimensions PROPOSAL46Elwin Sharvill
1032Izzy GarufiIndia2025-08-17Feiner Bros RENEWAL66Asiya Javayant
1033Aditya KuskoJapan2025-08-18Buckley Miller Wright NEW65Anna Fali
1034Rodrigues CampainArgentina2025-08-18Chemel, James L Cpa RENEWAL80Elwin Sharvill
1035Emily WhobreyIndia2025-09-08Printing Dimensions QUALIFIED43Elwin Sharvill
1036Leon OldroydUnited Kingdom2025-08-17Chanay, Jeffrey A Esq QUALIFIED56Stephen Shaw
1037Octavia MaletFrance2025-09-06Chapman, Ross E Esq NEGOTIATION51Onyama Limba
1038Chavez BriddickCanada2025-08-30King, Christopher A Esq NEW56Onyama Limba
1039Salvatore StockhamGermany2025-08-28Feltz Printing Service QUALIFIED12Amy Elsner
1040Sinclair WaycottUnited Kingdom2025-09-05King, Christopher A Esq RENEWAL42Amy Elsner
1041Murillo MaletItaly2025-08-16Rousseaux, Michael Esq NEGOTIATION74Anna Fali
1042Francesco ShinkoRussia2025-08-29Buckley Miller Wright RENEWAL63Anna Fali
1043Darci PoquetteArgentina2025-09-07Chemel, James L Cpa QUALIFIED87Elwin Sharvill
1044Claire TollnerAustralia2025-08-31Dorl, James J Esq NEW12Bernardo Dominic
1045Leja CaldareraBrazil2025-08-20Rousseaux, Michael Esq UNQUALIFIED93Amy Elsner
1046Juan WieserFrance2025-08-22Chapman, Ross E Esq QUALIFIED75Bernardo Dominic
1047Antonio CaudySpain2025-08-31Rousseaux, Michael Esq NEW25Ioni Bowcher
1048Mujtaba NickaCanada2025-09-03Truhlar And Truhlar Attys PROPOSAL18Bernardo Dominic
1049Adams MorascaBrazil2025-08-16Rousseaux, Michael Esq NEGOTIATION60Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Johnson SergiItalyAnna Fali PROPOSAL
Mayumi KolmetzRussiaStephen Shaw NEW
David DarakjyFranceStephen Shaw UNQUALIFIED
Aika InouyeJapanBernardo Dominic PROPOSAL
Maria MarrierArgentinaIvan Magalhaes NEGOTIATION
Misaki RoysterIndiaBernardo Dominic UNQUALIFIED
Murillo MaletUnited KingdomElwin Sharvill PROPOSAL
Leon OldroydSpainBernardo Dominic PROPOSAL
Emily WhobreyRussiaIoni Bowcher NEGOTIATION
Adams MorascaFranceXuxue Feng PROPOSAL
Ashley DoeCanadaXuxue Feng UNQUALIFIED
Clifford RimCanadaElwin Sharvill NEW
Kadeem FlosiSpainElwin Sharvill QUALIFIED
Faith GillianRussiaIvan Magalhaes RENEWAL
Faith GillianAustraliaBernardo Dominic PROPOSAL
Munro FerenczGermanyAnna Fali NEW
Ashley DoeFranceBernardo Dominic QUALIFIED
Ricardo GauchoUnited KingdomIvan Magalhaes PROPOSAL
Nicolas IturbideArgentinaXuxue Feng PROPOSAL
Isabel BowleyBrazilElwin Sharvill NEGOTIATION
Adams MorascaUnited KingdomIoni Bowcher NEGOTIATION
Izzy GarufiCanadaIoni Bowcher PROPOSAL
Aruna FigeroaArgentinaElwin Sharvill QUALIFIED
Ivar PaprockiSpainAmy Elsner UNQUALIFIED
Aika InouyeArgentinaElwin Sharvill RENEWAL
Munro FerenczFranceStephen Shaw NEW
Aditya KuskoArgentinaBernardo Dominic UNQUALIFIED
Salvatore StockhamCanadaAmy Elsner RENEWAL
Salvatore StockhamGermanyIvan Magalhaes RENEWAL
Mayumi KolmetzCanadaIoni Bowcher UNQUALIFIED
Alejandro PerinItalyOnyama Limba RENEWAL
Izzy GarufiFranceIvan Magalhaes NEW
Sinclair WaycottAustraliaAsiya Javayant UNQUALIFIED
Jefferson SchemmerItalyIvan Magalhaes NEGOTIATION
Clifford RimJapanIoni Bowcher NEGOTIATION
Adams MorascaJapanOnyama Limba NEW
Arvin AlbaresFranceIoni Bowcher NEW
Jennifer AmigonAustraliaStephen Shaw QUALIFIED
Leja CaldareraIndiaXuxue Feng RENEWAL
Jennifer AmigonItalyIoni Bowcher NEW
Juan WieserFranceElwin Sharvill UNQUALIFIED
Stacey MacleadGermanyAmy Elsner UNQUALIFIED
James ButtRussiaOnyama Limba RENEWAL
Mujtaba NickaArgentinaIoni Bowcher NEW
Wickens NestleIndiaStephen Shaw PROPOSAL
Izzy GarufiItalyAmy Elsner RENEWAL
Clifford RimRussiaElwin Sharvill NEW
Rodrigues CampainCanadaIvan Magalhaes NEGOTIATION
Tony FollerBrazilBernardo Dominic NEGOTIATION
Arvin AlbaresRussiaOnyama Limba NEW
Frozen Columns
Name
Kadeem Flosi
Deepesh Chui
Emily Whobrey
Greenwood Bolognia
Misaki Royster
Kaitlin Ostrosky
Smith Glick
Smith Glick
Clifford Rim
Jennifer Amigon
Greenwood Bolognia
Chavez Briddick
Leon Oldroyd
Antonio Caudy
Tony Foller
Arvin Albares
Sinclair Waycott
Deepesh Chui
David Darakjy
Arvin Albares
Smith Glick
Johnson Sergi
Ricardo Gaucho
James Butt
Leja Caldarera
Rodrigues Campain
Rodrigues Campain
Julie Stenseth
Greenwood Bolognia
Sinclair Waycott
Misaki Royster
Mujtaba Nicka
Misaki Royster
Faith Gillian
Wickens Nestle
Johnson Sergi
Ricardo Gaucho
Maria Marrier
David Darakjy
Julie Stenseth
Mayumi Kolmetz
Isabel Bowley
Maria Marrier
Kaitlin Ostrosky
Faith Gillian
Rodrigues Campain
Kadeem Flosi
Morrow Ruta
Darci Poquette
Mujtaba Nicka
IdCountryDate
1000Canada2025-09-02
1001Brazil2025-08-21
1002India2025-09-07
1003Spain2025-08-24
1004Spain2025-09-02
1005Japan2025-09-05
1006Germany2025-09-04
1007India2025-08-16
1008United Kingdom2025-08-14
1009India2025-08-24
1010India2025-09-07
1011Spain2025-08-21
1012Russia2025-08-14
1013Italy2025-09-01
1014Argentina2025-08-16
1015Spain2025-08-12
1016Canada2025-09-08
1017Germany2025-08-18
1018Australia2025-09-07
1019Spain2025-08-26
1020Australia2025-08-19
1021United Kingdom2025-09-01
1022Canada2025-09-04
1023France2025-08-24
1024France2025-08-14
1025Canada2025-08-26
1026France2025-08-24
1027United Kingdom2025-08-24
1028Argentina2025-08-15
1029Italy2025-08-12
1030France2025-09-03
1031Spain2025-08-15
1032Spain2025-08-22
1033Canada2025-08-23
1034India2025-08-31
1035Argentina2025-08-20
1036Argentina2025-08-15
1037Italy2025-08-15
1038Russia2025-09-07
1039Canada2025-08-10
1040Spain2025-08-11
1041Russia2025-08-29
1042Italy2025-09-05
1043Australia2025-08-23
1044Brazil2025-09-01
1045Australia2025-09-04
1046Argentina2025-08-19
1047Italy2025-08-28
1048Australia2025-08-13
1049United Kingdom2025-08-12

On-Demand Data

NameIdCountryDate
Faith Gillian1000Argentina2025-08-20
Leja Caldarera1001Canada2025-08-20
Maisha Rulapaugh1002Japan2025-08-13
Kadeem Flosi1003Argentina2025-08-17
Smith Glick1004Canada2025-08-10
Claire Tollner1005France2025-09-01
Antonio Caudy1006United Kingdom2025-09-01
Francesco Shinko1007Brazil2025-08-13
Antonio Caudy1008Russia2025-08-10
Deepesh Chui1009Japan2025-08-14
Jones Vocelka1010Canada2025-08-10
Isabel Bowley1011Brazil2025-08-10
Francesco Shinko1012Italy2025-08-23
Aruna Figeroa1013India2025-08-19
Morrow Ruta1014Spain2025-08-19
Izzy Garufi1015Italy2025-09-06
Smith Glick1016Argentina2025-08-24
Alejandro Perin1017Canada2025-08-11
Ricardo Gaucho1018Russia2025-09-05
Mujtaba Nicka1019Spain2025-08-16
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Salvatore StockhamSpainStephen Shaw NEW
Nicolas IturbideFranceAnna Fali NEW
Maria MarrierItalyOnyama Limba PROPOSAL
Emily WhobreyAustraliaAnna Fali QUALIFIED
James ButtJapanOnyama Limba RENEWAL
Jeanfrancois VenereGermanyBernardo Dominic NEGOTIATION
Morrow RutaItalyIvan Magalhaes QUALIFIED
Cody SaylorsJapanAsiya Javayant QUALIFIED
Smith GlickArgentinaOnyama Limba NEW
Jones VocelkaGermanyIoni Bowcher PROPOSAL
Morrow RutaItalyAsiya Javayant NEW
Adams MorascaGermanyXuxue Feng QUALIFIED
Murillo MaletArgentinaBernardo Dominic PROPOSAL
Morrow RutaCanadaIvan Magalhaes UNQUALIFIED
Kadeem FlosiBrazilIvan Magalhaes RENEWAL
Francesco ShinkoGermanyIoni Bowcher UNQUALIFIED
Chavez BriddickSpainOnyama Limba NEGOTIATION
Julie StensethJapanElwin Sharvill NEW
Juan WieserItalyXuxue Feng QUALIFIED
Jones VocelkaBrazilAnna Fali PROPOSAL
Juan WieserAustraliaBernardo Dominic NEGOTIATION
Salvatore StockhamUnited KingdomAsiya Javayant NEGOTIATION
Emily WhobreyGermanyAsiya Javayant UNQUALIFIED
Octavia MaletFranceAnna Fali RENEWAL
James ButtIndiaAmy Elsner RENEWAL
Misaki RoysterJapanOnyama Limba UNQUALIFIED
James ButtFranceXuxue Feng QUALIFIED
Jeanfrancois VenereAustraliaStephen Shaw PROPOSAL
Aruna FigeroaJapanAsiya Javayant UNQUALIFIED
Arvin AlbaresGermanyIvan Magalhaes RENEWAL
Antonio CaudyJapanElwin Sharvill UNQUALIFIED
Isabel BowleyRussiaElwin Sharvill QUALIFIED
James ButtSpainElwin Sharvill RENEWAL
Ashley DoeJapanIvan Magalhaes RENEWAL
Maria MarrierCanadaAsiya Javayant RENEWAL
Aditya KuskoSpainAmy Elsner NEW
Adams MorascaArgentinaAnna Fali UNQUALIFIED
Greenwood BologniaUnited KingdomElwin Sharvill PROPOSAL
Jeanfrancois VenereGermanyAnna Fali UNQUALIFIED
Claire TollnerFranceAsiya Javayant PROPOSAL

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