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
Jennifer AmigonFranceBernardo Dominic PROPOSAL
Clifford RimAustraliaElwin Sharvill RENEWAL
Cody SaylorsCanadaIvan Magalhaes QUALIFIED
Sinclair WaycottIndiaBernardo Dominic RENEWAL
Ashley DoeUnited KingdomStephen Shaw PROPOSAL
Johnson SergiAustraliaElwin Sharvill PROPOSAL
Francesco ShinkoIndiaIvan Magalhaes UNQUALIFIED
Costa DilliardRussiaIoni Bowcher PROPOSAL
Octavia MaletJapanStephen Shaw NEGOTIATION
Maisha RulapaughCanadaAsiya Javayant NEGOTIATION
Munro FerenczUnited KingdomAnna Fali NEW
Smith GlickBrazilStephen Shaw UNQUALIFIED
Alejandro PerinItalyAmy Elsner NEW
Izzy GarufiCanadaBernardo Dominic QUALIFIED
Emily WhobreyAustraliaAmy Elsner QUALIFIED
Tony FollerCanadaIvan Magalhaes UNQUALIFIED
Kaitlin OstroskySpainIoni Bowcher NEGOTIATION
Morrow RutaGermanyXuxue Feng PROPOSAL
David DarakjyCanadaAsiya Javayant PROPOSAL
Smith GlickAustraliaBernardo Dominic UNQUALIFIED
Misaki RoysterItalyBernardo Dominic QUALIFIED
Morrow RutaCanadaBernardo Dominic RENEWAL
Munro FerenczArgentinaBernardo Dominic NEW
Misaki RoysterBrazilStephen Shaw NEGOTIATION
Clifford RimFranceIvan Magalhaes NEW
Johnson SergiBrazilAmy Elsner NEW
Maisha RulapaughFranceAmy Elsner QUALIFIED
Francesco ShinkoJapanElwin Sharvill QUALIFIED
David DarakjyAustraliaElwin Sharvill NEGOTIATION
Kaitlin OstroskyGermanyIoni Bowcher PROPOSAL
Smith GlickCanadaAnna Fali PROPOSAL
Francesco ShinkoJapanStephen Shaw NEGOTIATION
Faith GillianCanadaOnyama Limba NEGOTIATION
Salvatore StockhamUnited KingdomXuxue Feng RENEWAL
David DarakjyItalyElwin Sharvill QUALIFIED
Deepesh ChuiCanadaElwin Sharvill NEW
Juan WieserRussiaBernardo Dominic RENEWAL
Ivar PaprockiItalyBernardo Dominic NEW
Aditya KuskoRussiaAsiya Javayant UNQUALIFIED
Johnson SergiArgentinaIoni Bowcher NEGOTIATION
Nicolas IturbideAustraliaOnyama Limba QUALIFIED
Adams MorascaArgentinaOnyama Limba NEGOTIATION
Clifford RimArgentinaBernardo Dominic PROPOSAL
Maria MarrierIndiaOnyama Limba PROPOSAL
Aika InouyeArgentinaElwin Sharvill QUALIFIED
Arvin AlbaresRussiaBernardo Dominic NEW
Jones VocelkaBrazilIoni Bowcher NEW
Mayumi KolmetzCanadaIoni Bowcher QUALIFIED
Julie StensethItalyBernardo Dominic UNQUALIFIED
Jeanfrancois VenereFranceAnna Fali RENEWAL
Horizontal
NameCountryRepresentativeStatus
Adams MorascaItalyAsiya Javayant RENEWAL
Ivar PaprockiFranceAmy Elsner RENEWAL
Maisha RulapaughSpainIoni Bowcher NEW
Salvatore StockhamAustraliaAnna Fali UNQUALIFIED
Antonio CaudyFranceStephen Shaw RENEWAL
Ivar PaprockiJapanIoni Bowcher PROPOSAL
Silvio SlusarskiBrazilStephen Shaw UNQUALIFIED
Smith GlickGermanyAmy Elsner RENEWAL
Smith GlickJapanAsiya Javayant PROPOSAL
Jennifer AmigonRussiaXuxue Feng PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jones VocelkaRussia2025-09-04Commercial Press RENEWAL68Bernardo Dominic
1001Murillo MaletCanada2025-09-09Rousseaux, Michael Esq NEW7Elwin Sharvill
1002Ivar PaprockiIndia2025-08-31Chanay, Jeffrey A Esq UNQUALIFIED99Ivan Magalhaes
1003Mayumi KolmetzAustralia2025-09-04Rangoni Of Florence QUALIFIED58Xuxue Feng
1004Claire TollnerRussia2025-08-21Benton, John B Jr QUALIFIED82Elwin Sharvill
1005Aika InouyeAustralia2025-08-26Rangoni Of Florence NEGOTIATION12Xuxue Feng
1006Adams MorascaRussia2025-09-11Feiner Bros QUALIFIED17Bernardo Dominic
1007Izzy GarufiCanada2025-08-29Commercial Press RENEWAL91Stephen Shaw
1008Julie StensethAustralia2025-09-10Chanay, Jeffrey A Esq UNQUALIFIED14Stephen Shaw
1009Arvin AlbaresFrance2025-09-08Rousseaux, Michael Esq QUALIFIED3Asiya Javayant
1010Jefferson SchemmerBrazil2025-08-30Feltz Printing Service PROPOSAL16Anna Fali
1011Adams MorascaFrance2025-09-07Chanay, Jeffrey A Esq NEW71Ivan Magalhaes
1012Greenwood BologniaGermany2025-09-01Feltz Printing Service NEGOTIATION78Anna Fali
1013Jeanfrancois VenereArgentina2025-08-25King, Christopher A Esq PROPOSAL8Xuxue Feng
1014Kadeem FlosiItaly2025-09-05Printing Dimensions PROPOSAL70Stephen Shaw
1015Stacey MacleadBrazil2025-09-09Feiner Bros PROPOSAL57Bernardo Dominic
1016Ricardo GauchoFrance2025-08-25Printing Dimensions UNQUALIFIED7Bernardo Dominic
1017Johnson SergiUnited Kingdom2025-08-17Rangoni Of Florence NEGOTIATION68Ivan Magalhaes
1018Greenwood BologniaArgentina2025-08-25King, Christopher A Esq NEGOTIATION4Ioni Bowcher
1019Munro FerenczCanada2025-08-28Feiner Bros UNQUALIFIED52Amy Elsner
1020James ButtUnited Kingdom2025-09-03Morlong Associates QUALIFIED48Asiya Javayant
1021Maria MarrierJapan2025-09-14Truhlar And Truhlar Attys QUALIFIED67Bernardo Dominic
1022Munro FerenczSpain2025-09-06Chemel, James L Cpa NEGOTIATION5Xuxue Feng
1023Aruna FigeroaUnited Kingdom2025-08-28Morlong Associates UNQUALIFIED15Asiya Javayant
1024James ButtIndia2025-08-27Buckley Miller Wright UNQUALIFIED11Onyama Limba
1025Maria MarrierBrazil2025-09-14King, Christopher A Esq PROPOSAL4Ivan Magalhaes
1026Arvin AlbaresUnited Kingdom2025-08-21Chapman, Ross E Esq UNQUALIFIED35Onyama Limba
1027Jennifer AmigonArgentina2025-09-08Printing Dimensions PROPOSAL28Stephen Shaw
1028Silvio SlusarskiJapan2025-08-30Truhlar And Truhlar Attys RENEWAL43Asiya Javayant
1029Antonio CaudyJapan2025-08-29Feltz Printing Service QUALIFIED43Asiya Javayant
1030Ricardo GauchoIndia2025-08-20Rousseaux, Michael Esq NEW81Onyama Limba
1031Maria MarrierGermany2025-09-07Rousseaux, Michael Esq QUALIFIED93Stephen Shaw
1032Aruna FigeroaFrance2025-08-20Feltz Printing Service UNQUALIFIED9Xuxue Feng
1033Faith GillianArgentina2025-08-17Rangoni Of Florence NEGOTIATION78Asiya Javayant
1034Silvio SlusarskiCanada2025-09-04Chemel, James L Cpa NEGOTIATION65Amy Elsner
1035David DarakjyCanada2025-09-02Morlong Associates NEW81Asiya Javayant
1036Darci PoquetteCanada2025-08-27King, Christopher A Esq NEW93Asiya Javayant
1037Smith GlickRussia2025-08-21Benton, John B Jr QUALIFIED84Amy Elsner
1038Salvatore StockhamCanada2025-08-17Chanay, Jeffrey A Esq PROPOSAL34Stephen Shaw
1039Sinclair WaycottGermany2025-08-19Printing Dimensions NEW4Ioni Bowcher
1040Leja CaldareraJapan2025-08-21Rangoni Of Florence NEW23Ivan Magalhaes
1041Leja CaldareraIndia2025-08-29Morlong Associates UNQUALIFIED23Asiya Javayant
1042Stacey MacleadAustralia2025-09-05Feltz Printing Service NEW90Amy Elsner
1043David DarakjySpain2025-09-12Chapman, Ross E Esq QUALIFIED89Bernardo Dominic
1044Leon OldroydRussia2025-09-09Printing Dimensions UNQUALIFIED72Amy Elsner
1045Jefferson SchemmerFrance2025-09-09Feiner Bros PROPOSAL37Anna Fali
1046Mayumi KolmetzFrance2025-09-12Chemel, James L Cpa NEW62Stephen Shaw
1047Julie StensethJapan2025-08-31Rousseaux, Michael Esq PROPOSAL74Stephen Shaw
1048Aditya KuskoJapan2025-09-10Chanay, Jeffrey A Esq PROPOSAL96Stephen Shaw
1049Smith GlickGermany2025-09-07Benton, John B Jr NEW28Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Adams MorascaItalyStephen Shaw NEW
Adams MorascaUnited KingdomElwin Sharvill PROPOSAL
Maisha RulapaughIndiaOnyama Limba NEGOTIATION
Sinclair WaycottSpainAnna Fali NEW
Adams MorascaGermanyOnyama Limba QUALIFIED
Sinclair WaycottAustraliaElwin Sharvill NEW
Leon OldroydSpainIoni Bowcher UNQUALIFIED
Isabel BowleyItalyAmy Elsner UNQUALIFIED
Salvatore StockhamArgentinaOnyama Limba RENEWAL
Leja CaldareraItalyAsiya Javayant PROPOSAL
Aditya KuskoIndiaIvan Magalhaes UNQUALIFIED
Rodrigues CampainItalyAnna Fali NEGOTIATION
Antonio CaudySpainStephen Shaw NEW
Emily WhobreyItalyElwin Sharvill UNQUALIFIED
Aditya KuskoFranceBernardo Dominic UNQUALIFIED
Arvin AlbaresArgentinaAmy Elsner UNQUALIFIED
Francesco ShinkoSpainAsiya Javayant RENEWAL
Isabel BowleyFranceXuxue Feng QUALIFIED
Ivar PaprockiIndiaAnna Fali NEW
Salvatore StockhamCanadaStephen Shaw RENEWAL
Izzy GarufiBrazilXuxue Feng PROPOSAL
Johnson SergiCanadaXuxue Feng UNQUALIFIED
Faith GillianBrazilAmy Elsner QUALIFIED
Jeanfrancois VenereFranceAsiya Javayant PROPOSAL
Costa DilliardRussiaXuxue Feng RENEWAL
Stacey MacleadUnited KingdomXuxue Feng PROPOSAL
Izzy GarufiFranceAmy Elsner NEGOTIATION
Cody SaylorsUnited KingdomAsiya Javayant PROPOSAL
Leja CaldareraGermanyXuxue Feng UNQUALIFIED
Faith GillianItalyOnyama Limba NEW
Francesco ShinkoBrazilAsiya Javayant NEW
Kaitlin OstroskyArgentinaAsiya Javayant RENEWAL
David DarakjyJapanIoni Bowcher UNQUALIFIED
Aruna FigeroaItalyIvan Magalhaes NEGOTIATION
Mujtaba NickaBrazilAnna Fali QUALIFIED
Aika InouyeArgentinaAsiya Javayant PROPOSAL
Johnson SergiJapanAnna Fali NEW
Octavia MaletArgentinaOnyama Limba NEW
Maria MarrierSpainElwin Sharvill QUALIFIED
Nicolas IturbideCanadaIvan Magalhaes UNQUALIFIED
Johnson SergiAustraliaOnyama Limba UNQUALIFIED
Clifford RimItalyIoni Bowcher NEW
Emily WhobreyUnited KingdomAmy Elsner PROPOSAL
Isabel BowleyRussiaElwin Sharvill PROPOSAL
Claire TollnerSpainOnyama Limba UNQUALIFIED
Octavia MaletIndiaIoni Bowcher UNQUALIFIED
Stacey MacleadGermanyXuxue Feng UNQUALIFIED
Aika InouyeBrazilIoni Bowcher NEW
Tony FollerCanadaXuxue Feng QUALIFIED
Rodrigues CampainBrazilXuxue Feng RENEWAL
Frozen Columns
Name
Arvin Albares
Ricardo Gaucho
Aika Inouye
Clifford Rim
Salvatore Stockham
Aika Inouye
Mayumi Kolmetz
Mayumi Kolmetz
Jennifer Amigon
Arvin Albares
Adams Morasca
Jeanfrancois Venere
Stacey Maclead
David Darakjy
Claire Tollner
Aika Inouye
David Darakjy
Faith Gillian
Kadeem Flosi
David Darakjy
Cody Saylors
Leja Caldarera
Deepesh Chui
Johnson Sergi
Sinclair Waycott
Cody Saylors
Maria Marrier
Aditya Kusko
Misaki Royster
Jones Vocelka
Aruna Figeroa
Leon Oldroyd
Alejandro Perin
Stacey Maclead
Misaki Royster
Tony Foller
Wickens Nestle
Antonio Caudy
Aruna Figeroa
Ricardo Gaucho
Alejandro Perin
Antonio Caudy
Clifford Rim
Isabel Bowley
Aditya Kusko
Tony Foller
Stacey Maclead
Kadeem Flosi
Rodrigues Campain
Mayumi Kolmetz
IdCountryDate
1000Italy2025-08-24
1001Spain2025-08-31
1002Russia2025-08-30
1003Australia2025-09-08
1004Germany2025-09-15
1005Italy2025-09-06
1006Spain2025-08-29
1007India2025-08-24
1008Japan2025-08-18
1009Brazil2025-09-03
1010Russia2025-08-26
1011United Kingdom2025-08-25
1012India2025-08-29
1013Japan2025-09-04
1014Spain2025-09-10
1015Canada2025-08-31
1016Italy2025-09-11
1017United Kingdom2025-08-21
1018Canada2025-09-01
1019United Kingdom2025-08-19
1020Russia2025-08-24
1021Japan2025-08-24
1022Canada2025-08-24
1023Russia2025-08-20
1024Spain2025-08-19
1025Spain2025-08-26
1026Australia2025-09-07
1027India2025-09-05
1028Japan2025-09-14
1029Italy2025-08-31
1030Canada2025-09-13
1031Russia2025-09-08
1032Brazil2025-09-05
1033Italy2025-08-23
1034Argentina2025-09-02
1035Argentina2025-09-13
1036Canada2025-09-07
1037India2025-08-26
1038Australia2025-08-19
1039Canada2025-08-19
1040Argentina2025-09-03
1041India2025-09-04
1042Japan2025-09-09
1043Russia2025-09-07
1044Argentina2025-08-21
1045Italy2025-09-09
1046India2025-08-30
1047Russia2025-09-07
1048Spain2025-09-12
1049Italy2025-08-31

On-Demand Data

NameIdCountryDate
Ricardo Gaucho1000Brazil2025-08-17
Smith Glick1001India2025-09-11
Cody Saylors1002Brazil2025-09-04
Aika Inouye1003Japan2025-08-19
Salvatore Stockham1004Italy2025-08-24
Maisha Rulapaugh1005Japan2025-09-07
Jones Vocelka1006Italy2025-09-03
David Darakjy1007Brazil2025-09-14
Sinclair Waycott1008Japan2025-09-04
Wickens Nestle1009Spain2025-08-31
Salvatore Stockham1010Brazil2025-09-11
Murillo Malet1011France2025-08-17
Leon Oldroyd1012Spain2025-09-14
Silvio Slusarski1013Argentina2025-09-04
Juan Wieser1014India2025-09-10
Mujtaba Nicka1015India2025-09-01
Leja Caldarera1016Argentina2025-09-11
Jones Vocelka1017Australia2025-09-12
Kadeem Flosi1018Australia2025-09-02
Ashley Doe1019Canada2025-09-14
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Chavez BriddickFranceAnna Fali UNQUALIFIED
Deepesh ChuiJapanOnyama Limba PROPOSAL
Jeanfrancois VenereUnited KingdomOnyama Limba PROPOSAL
Isabel BowleyItalyElwin Sharvill RENEWAL
Adams MorascaBrazilAsiya Javayant PROPOSAL
Costa DilliardAustraliaAnna Fali UNQUALIFIED
Francesco ShinkoCanadaAsiya Javayant QUALIFIED
Stacey MacleadGermanyOnyama Limba QUALIFIED
Leon OldroydJapanIoni Bowcher NEW
Morrow RutaCanadaAsiya Javayant NEGOTIATION
Alejandro PerinCanadaAmy Elsner QUALIFIED
Darci PoquetteJapanIoni Bowcher UNQUALIFIED
Aika InouyeUnited KingdomAmy Elsner PROPOSAL
Murillo MaletSpainStephen Shaw NEGOTIATION
Misaki RoysterBrazilBernardo Dominic RENEWAL
Mujtaba NickaCanadaOnyama Limba PROPOSAL
Leja CaldareraArgentinaAmy Elsner UNQUALIFIED
Jennifer AmigonJapanElwin Sharvill QUALIFIED
Leon OldroydIndiaAmy Elsner PROPOSAL
Murillo MaletBrazilBernardo Dominic UNQUALIFIED
Mayumi KolmetzJapanAsiya Javayant NEW
Chavez BriddickJapanElwin Sharvill QUALIFIED
Costa DilliardJapanBernardo Dominic NEW
Aika InouyeAustraliaElwin Sharvill UNQUALIFIED
Aika InouyeBrazilAmy Elsner NEGOTIATION
Cody SaylorsBrazilIvan Magalhaes PROPOSAL
Kaitlin OstroskyGermanyAnna Fali RENEWAL
Ricardo GauchoRussiaAmy Elsner RENEWAL
Francesco ShinkoSpainIoni Bowcher NEW
Munro FerenczItalyIoni Bowcher QUALIFIED
Adams MorascaIndiaIvan Magalhaes PROPOSAL
Jeanfrancois VenereRussiaAnna Fali RENEWAL
Adams MorascaItalyStephen Shaw NEW
Aditya KuskoBrazilOnyama Limba NEGOTIATION
Tony FollerFranceBernardo Dominic QUALIFIED
Morrow RutaSpainElwin Sharvill PROPOSAL
Kadeem FlosiItalyBernardo Dominic UNQUALIFIED
Salvatore StockhamArgentinaAmy Elsner UNQUALIFIED
Aruna FigeroaUnited KingdomAsiya Javayant PROPOSAL
Julie StensethUnited KingdomBernardo Dominic UNQUALIFIED

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