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
Ashley DoeAustraliaXuxue Feng PROPOSAL
Stacey MacleadIndiaBernardo Dominic QUALIFIED
Murillo MaletUnited KingdomOnyama Limba PROPOSAL
Mujtaba NickaFranceStephen Shaw UNQUALIFIED
Jeanfrancois VenereIndiaAsiya Javayant UNQUALIFIED
Aruna FigeroaBrazilBernardo Dominic QUALIFIED
Aruna FigeroaArgentinaStephen Shaw RENEWAL
Jeanfrancois VenereSpainBernardo Dominic UNQUALIFIED
Morrow RutaAustraliaIoni Bowcher QUALIFIED
Chavez BriddickRussiaIoni Bowcher UNQUALIFIED
Leon OldroydBrazilIvan Magalhaes QUALIFIED
Stacey MacleadItalyIvan Magalhaes UNQUALIFIED
Cody SaylorsCanadaIvan Magalhaes NEW
James ButtFranceIvan Magalhaes PROPOSAL
Maria MarrierAustraliaStephen Shaw NEGOTIATION
Mujtaba NickaAustraliaAnna Fali NEGOTIATION
Claire TollnerJapanElwin Sharvill NEGOTIATION
Nicolas IturbideAustraliaIoni Bowcher PROPOSAL
Isabel BowleyCanadaBernardo Dominic RENEWAL
Aditya KuskoArgentinaIvan Magalhaes UNQUALIFIED
Silvio SlusarskiArgentinaStephen Shaw UNQUALIFIED
Izzy GarufiIndiaIvan Magalhaes PROPOSAL
Clifford RimSpainXuxue Feng UNQUALIFIED
Darci PoquetteJapanElwin Sharvill NEW
Emily WhobreyAustraliaXuxue Feng NEGOTIATION
Murillo MaletIndiaAmy Elsner PROPOSAL
Emily WhobreyGermanyStephen Shaw PROPOSAL
Kaitlin OstroskySpainBernardo Dominic RENEWAL
Julie StensethCanadaAsiya Javayant QUALIFIED
Jeanfrancois VenereIndiaElwin Sharvill NEGOTIATION
Sinclair WaycottUnited KingdomAmy Elsner RENEWAL
Salvatore StockhamFranceIvan Magalhaes NEGOTIATION
David DarakjyFranceAsiya Javayant NEGOTIATION
Maisha RulapaughUnited KingdomAsiya Javayant UNQUALIFIED
Isabel BowleyBrazilAsiya Javayant PROPOSAL
Cody SaylorsArgentinaStephen Shaw NEW
Greenwood BologniaSpainAnna Fali RENEWAL
Aruna FigeroaSpainStephen Shaw NEW
Claire TollnerGermanyAsiya Javayant RENEWAL
Adams MorascaJapanIoni Bowcher PROPOSAL
Chavez BriddickGermanyOnyama Limba QUALIFIED
Jeanfrancois VenereGermanyAnna Fali NEW
Wickens NestleRussiaIvan Magalhaes PROPOSAL
Isabel BowleyFranceIoni Bowcher UNQUALIFIED
Emily WhobreyAustraliaAnna Fali NEW
Darci PoquetteIndiaElwin Sharvill RENEWAL
Adams MorascaUnited KingdomElwin Sharvill UNQUALIFIED
Maisha RulapaughCanadaAsiya Javayant NEW
Darci PoquetteRussiaIoni Bowcher QUALIFIED
Ashley DoeUnited KingdomElwin Sharvill PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Mujtaba NickaJapanElwin Sharvill QUALIFIED
Silvio SlusarskiAustraliaElwin Sharvill NEGOTIATION
Francesco ShinkoRussiaOnyama Limba QUALIFIED
Jeanfrancois VenereGermanyStephen Shaw UNQUALIFIED
Julie StensethIndiaAmy Elsner NEGOTIATION
Alejandro PerinUnited KingdomStephen Shaw QUALIFIED
Greenwood BologniaRussiaAsiya Javayant PROPOSAL
Francesco ShinkoSpainIvan Magalhaes RENEWAL
Chavez BriddickItalyAmy Elsner UNQUALIFIED
Smith GlickIndiaBernardo Dominic PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Octavia MaletFrance2025-09-07Rangoni Of Florence RENEWAL15Amy Elsner
1001Jennifer AmigonBrazil2025-09-16Feltz Printing Service RENEWAL63Asiya Javayant
1002Jennifer AmigonBrazil2025-09-26Benton, John B Jr RENEWAL20Amy Elsner
1003Greenwood BologniaUnited Kingdom2025-09-06Benton, John B Jr PROPOSAL3Onyama Limba
1004Johnson SergiBrazil2025-09-25Rangoni Of Florence NEGOTIATION4Amy Elsner
1005Adams MorascaRussia2025-09-01Buckley Miller Wright NEW78Ioni Bowcher
1006Stacey MacleadUnited Kingdom2025-09-02Printing Dimensions NEGOTIATION41Ioni Bowcher
1007Claire TollnerBrazil2025-09-08Morlong Associates NEGOTIATION2Bernardo Dominic
1008Antonio CaudyFrance2025-09-04Benton, John B Jr QUALIFIED10Anna Fali
1009Darci PoquetteItaly2025-09-05Truhlar And Truhlar Attys RENEWAL4Stephen Shaw
1010Jones VocelkaAustralia2025-09-14Chemel, James L Cpa QUALIFIED82Anna Fali
1011Julie StensethCanada2025-09-08Chemel, James L Cpa NEW64Ivan Magalhaes
1012Munro FerenczArgentina2025-09-19Chemel, James L Cpa RENEWAL91Stephen Shaw
1013Ricardo GauchoBrazil2025-09-22Dorl, James J Esq QUALIFIED17Onyama Limba
1014Salvatore StockhamBrazil2025-09-01Commercial Press UNQUALIFIED23Amy Elsner
1015Clifford RimCanada2025-08-30Feltz Printing Service PROPOSAL52Ivan Magalhaes
1016Faith GillianBrazil2025-09-08Commercial Press UNQUALIFIED82Asiya Javayant
1017Jennifer AmigonUnited Kingdom2025-09-17King, Christopher A Esq UNQUALIFIED71Stephen Shaw
1018Ivar PaprockiSpain2025-08-31King, Christopher A Esq QUALIFIED60Ioni Bowcher
1019Darci PoquetteUnited Kingdom2025-09-23Buckley Miller Wright PROPOSAL10Stephen Shaw
1020Adams MorascaRussia2025-09-12Chemel, James L Cpa PROPOSAL42Anna Fali
1021Murillo MaletIndia2025-09-11Chapman, Ross E Esq PROPOSAL79Asiya Javayant
1022Murillo MaletAustralia2025-09-14Rangoni Of Florence RENEWAL85Stephen Shaw
1023Octavia MaletArgentina2025-09-23Truhlar And Truhlar Attys PROPOSAL15Elwin Sharvill
1024Ricardo GauchoBrazil2025-09-28Feiner Bros QUALIFIED3Elwin Sharvill
1025Kaitlin OstroskyCanada2025-09-18Chanay, Jeffrey A Esq RENEWAL23Anna Fali
1026Maisha RulapaughSpain2025-09-15Printing Dimensions UNQUALIFIED89Asiya Javayant
1027Antonio CaudySpain2025-09-19Chemel, James L Cpa QUALIFIED39Onyama Limba
1028Smith GlickArgentina2025-09-24Truhlar And Truhlar Attys QUALIFIED99Bernardo Dominic
1029Murillo MaletRussia2025-09-16King, Christopher A Esq UNQUALIFIED84Anna Fali
1030Jefferson SchemmerCanada2025-09-07Morlong Associates QUALIFIED78Elwin Sharvill
1031James ButtArgentina2025-09-20Rousseaux, Michael Esq RENEWAL29Asiya Javayant
1032Octavia MaletAustralia2025-09-04Printing Dimensions UNQUALIFIED50Stephen Shaw
1033Greenwood BologniaBrazil2025-09-14Chanay, Jeffrey A Esq NEW83Amy Elsner
1034Maisha RulapaughArgentina2025-09-06Dorl, James J Esq PROPOSAL15Bernardo Dominic
1035Faith GillianCanada2025-09-08Rousseaux, Michael Esq NEGOTIATION61Anna Fali
1036Cody SaylorsJapan2025-09-02Chapman, Ross E Esq PROPOSAL27Anna Fali
1037Sinclair WaycottRussia2025-09-08Chapman, Ross E Esq RENEWAL67Ivan Magalhaes
1038Ashley DoeUnited Kingdom2025-09-16Chanay, Jeffrey A Esq PROPOSAL30Elwin Sharvill
1039Mayumi KolmetzArgentina2025-09-17Chemel, James L Cpa PROPOSAL43Amy Elsner
1040Claire TollnerAustralia2025-09-03Buckley Miller Wright NEGOTIATION3Onyama Limba
1041Nicolas IturbideCanada2025-09-16Chanay, Jeffrey A Esq QUALIFIED69Amy Elsner
1042Greenwood BologniaRussia2025-09-10Rousseaux, Michael Esq PROPOSAL93Bernardo Dominic
1043Izzy GarufiItaly2025-09-20Benton, John B Jr UNQUALIFIED68Bernardo Dominic
1044Silvio SlusarskiRussia2025-09-22Commercial Press NEGOTIATION66Stephen Shaw
1045Ricardo GauchoIndia2025-09-15Feiner Bros PROPOSAL32Bernardo Dominic
1046Rodrigues CampainAustralia2025-09-18Commercial Press RENEWAL68Onyama Limba
1047Mujtaba NickaUnited Kingdom2025-09-21Rousseaux, Michael Esq UNQUALIFIED46Stephen Shaw
1048Isabel BowleyBrazil2025-09-08Dorl, James J Esq NEGOTIATION41Ivan Magalhaes
1049Arvin AlbaresRussia2025-09-05Buckley Miller Wright NEGOTIATION98Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Julie StensethFranceBernardo Dominic RENEWAL
Isabel BowleyAustraliaXuxue Feng NEW
Mayumi KolmetzArgentinaStephen Shaw NEW
Aditya KuskoUnited KingdomOnyama Limba RENEWAL
Emily WhobreyFranceAsiya Javayant NEGOTIATION
Clifford RimSpainIoni Bowcher NEGOTIATION
Kaitlin OstroskySpainAsiya Javayant RENEWAL
Silvio SlusarskiSpainElwin Sharvill NEW
Leon OldroydCanadaOnyama Limba RENEWAL
Juan WieserJapanXuxue Feng QUALIFIED
Jeanfrancois VenereIndiaOnyama Limba NEGOTIATION
Misaki RoysterIndiaOnyama Limba RENEWAL
Munro FerenczArgentinaAnna Fali QUALIFIED
Juan WieserUnited KingdomIvan Magalhaes NEW
Juan WieserUnited KingdomAsiya Javayant RENEWAL
Salvatore StockhamJapanAsiya Javayant RENEWAL
David DarakjyRussiaStephen Shaw UNQUALIFIED
Greenwood BologniaItalyOnyama Limba QUALIFIED
Greenwood BologniaCanadaStephen Shaw QUALIFIED
Francesco ShinkoAustraliaXuxue Feng NEGOTIATION
Cody SaylorsIndiaElwin Sharvill NEGOTIATION
Wickens NestleFranceIvan Magalhaes UNQUALIFIED
Darci PoquetteIndiaAmy Elsner RENEWAL
Maisha RulapaughGermanyOnyama Limba PROPOSAL
Arvin AlbaresCanadaAmy Elsner NEW
Smith GlickRussiaIoni Bowcher NEGOTIATION
Darci PoquetteCanadaStephen Shaw QUALIFIED
Murillo MaletCanadaOnyama Limba PROPOSAL
Murillo MaletSpainBernardo Dominic RENEWAL
Ivar PaprockiBrazilElwin Sharvill UNQUALIFIED
Maisha RulapaughIndiaStephen Shaw NEGOTIATION
Misaki RoysterBrazilIvan Magalhaes QUALIFIED
Maisha RulapaughIndiaIoni Bowcher NEW
Johnson SergiAustraliaAnna Fali RENEWAL
Emily WhobreyAustraliaIvan Magalhaes QUALIFIED
Mujtaba NickaCanadaAsiya Javayant PROPOSAL
Costa DilliardCanadaIvan Magalhaes NEW
Jones VocelkaAustraliaStephen Shaw NEGOTIATION
Aditya KuskoRussiaAnna Fali NEW
David DarakjyGermanyIvan Magalhaes QUALIFIED
Isabel BowleyUnited KingdomAsiya Javayant PROPOSAL
David DarakjyCanadaAsiya Javayant QUALIFIED
Johnson SergiAustraliaAnna Fali PROPOSAL
Clifford RimCanadaXuxue Feng QUALIFIED
Chavez BriddickUnited KingdomXuxue Feng UNQUALIFIED
Izzy GarufiFranceBernardo Dominic UNQUALIFIED
Claire TollnerIndiaXuxue Feng NEGOTIATION
Aruna FigeroaJapanBernardo Dominic UNQUALIFIED
Izzy GarufiGermanyAsiya Javayant NEGOTIATION
Morrow RutaBrazilXuxue Feng UNQUALIFIED
Frozen Columns
Name
Leon Oldroyd
Julie Stenseth
Mujtaba Nicka
Aditya Kusko
Faith Gillian
Emily Whobrey
Wickens Nestle
Arvin Albares
Clifford Rim
Smith Glick
Misaki Royster
Munro Ferencz
Nicolas Iturbide
Munro Ferencz
Johnson Sergi
Arvin Albares
James Butt
Salvatore Stockham
Aditya Kusko
Costa Dilliard
Wickens Nestle
Wickens Nestle
Claire Tollner
Juan Wieser
Nicolas Iturbide
Darci Poquette
Jennifer Amigon
Salvatore Stockham
Deepesh Chui
Jeanfrancois Venere
Aruna Figeroa
Salvatore Stockham
Greenwood Bolognia
Leja Caldarera
Juan Wieser
Misaki Royster
Greenwood Bolognia
Salvatore Stockham
Leja Caldarera
Wickens Nestle
Octavia Malet
Ashley Doe
Kadeem Flosi
Misaki Royster
Smith Glick
Aruna Figeroa
Arvin Albares
Alejandro Perin
Mujtaba Nicka
Antonio Caudy
IdCountryDate
1000Brazil2025-09-28
1001Germany2025-09-12
1002Japan2025-09-21
1003Canada2025-09-20
1004Spain2025-09-22
1005Italy2025-09-04
1006Brazil2025-09-06
1007Canada2025-09-05
1008United Kingdom2025-09-16
1009Brazil2025-09-13
1010Spain2025-09-26
1011Russia2025-08-30
1012Germany2025-09-02
1013France2025-09-14
1014United Kingdom2025-09-26
1015Japan2025-09-18
1016Argentina2025-09-26
1017Canada2025-09-11
1018Brazil2025-09-07
1019Argentina2025-08-31
1020France2025-09-27
1021Argentina2025-09-02
1022Argentina2025-09-06
1023Australia2025-08-30
1024Brazil2025-09-08
1025Germany2025-09-10
1026Australia2025-09-23
1027Australia2025-09-16
1028Spain2025-09-11
1029France2025-09-16
1030Germany2025-09-08
1031Italy2025-09-20
1032Japan2025-09-23
1033Argentina2025-09-26
1034Russia2025-09-20
1035India2025-09-17
1036Japan2025-08-30
1037Italy2025-09-01
1038France2025-09-10
1039India2025-09-23
1040Spain2025-09-09
1041Japan2025-09-24
1042Brazil2025-09-14
1043Argentina2025-08-30
1044Argentina2025-09-16
1045Canada2025-09-06
1046United Kingdom2025-09-19
1047France2025-09-24
1048Germany2025-09-19
1049Germany2025-09-06

On-Demand Data

NameIdCountryDate
Ivar Paprocki1000France2025-08-30
Faith Gillian1001Brazil2025-09-21
Julie Stenseth1002India2025-09-25
Salvatore Stockham1003United Kingdom2025-09-01
Silvio Slusarski1004Spain2025-09-08
Maisha Rulapaugh1005Argentina2025-08-31
Alejandro Perin1006France2025-09-08
Smith Glick1007Japan2025-09-15
Aika Inouye1008India2025-09-11
Rodrigues Campain1009United Kingdom2025-09-11
Francesco Shinko1010Germany2025-09-05
Silvio Slusarski1011United Kingdom2025-09-17
James Butt1012France2025-09-22
Tony Foller1013United Kingdom2025-09-06
Antonio Caudy1014Japan2025-09-19
Silvio Slusarski1015Japan2025-09-24
Antonio Caudy1016Japan2025-09-04
Kaitlin Ostrosky1017Germany2025-09-15
Tony Foller1018Germany2025-09-10
Silvio Slusarski1019India2025-09-03
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Salvatore StockhamArgentinaStephen Shaw RENEWAL
Rodrigues CampainBrazilAsiya Javayant NEW
Smith GlickRussiaIoni Bowcher UNQUALIFIED
Kadeem FlosiBrazilIvan Magalhaes NEGOTIATION
Jennifer AmigonCanadaAnna Fali UNQUALIFIED
Ivar PaprockiAustraliaXuxue Feng RENEWAL
Claire TollnerCanadaStephen Shaw PROPOSAL
Maisha RulapaughCanadaAmy Elsner QUALIFIED
Kaitlin OstroskySpainOnyama Limba QUALIFIED
Aika InouyeIndiaStephen Shaw RENEWAL
Ivar PaprockiIndiaElwin Sharvill QUALIFIED
Emily WhobreyUnited KingdomBernardo Dominic NEW
Mujtaba NickaCanadaAmy Elsner NEW
Francesco ShinkoCanadaStephen Shaw NEGOTIATION
Jefferson SchemmerRussiaIoni Bowcher RENEWAL
Leja CaldareraRussiaAnna Fali RENEWAL
Murillo MaletRussiaAsiya Javayant UNQUALIFIED
Maria MarrierIndiaAnna Fali NEW
James ButtCanadaAnna Fali RENEWAL
Aruna FigeroaJapanStephen Shaw PROPOSAL
Kadeem FlosiGermanyElwin Sharvill PROPOSAL
Smith GlickBrazilBernardo Dominic PROPOSAL
James ButtCanadaIvan Magalhaes NEW
Alejandro PerinCanadaXuxue Feng PROPOSAL
Kadeem FlosiIndiaOnyama Limba NEGOTIATION
Murillo MaletIndiaBernardo Dominic NEW
Ivar PaprockiArgentinaAsiya Javayant UNQUALIFIED
Rodrigues CampainUnited KingdomStephen Shaw QUALIFIED
Julie StensethFranceXuxue Feng PROPOSAL
Munro FerenczFranceAsiya Javayant UNQUALIFIED
Nicolas IturbideJapanOnyama Limba QUALIFIED
Maria MarrierIndiaXuxue Feng NEGOTIATION
Juan WieserSpainOnyama Limba PROPOSAL
Alejandro PerinUnited KingdomIvan Magalhaes QUALIFIED
Nicolas IturbideArgentinaIoni Bowcher QUALIFIED
Ashley DoeBrazilOnyama Limba UNQUALIFIED
Darci PoquetteSpainElwin Sharvill PROPOSAL
Munro FerenczArgentinaXuxue Feng RENEWAL
Julie StensethFranceStephen Shaw NEGOTIATION
Francesco ShinkoBrazilAnna Fali 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>