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
Smith GlickJapanOnyama Limba RENEWAL
Ivar PaprockiJapanAmy Elsner UNQUALIFIED
Ashley DoeArgentinaAsiya Javayant NEGOTIATION
Misaki RoysterJapanIvan Magalhaes NEGOTIATION
Emily WhobreyCanadaXuxue Feng NEGOTIATION
Johnson SergiBrazilAmy Elsner NEW
Kadeem FlosiIndiaAmy Elsner NEW
Ashley DoeGermanyOnyama Limba NEW
Kaitlin OstroskyCanadaXuxue Feng QUALIFIED
Mayumi KolmetzUnited KingdomBernardo Dominic NEGOTIATION
Jones VocelkaAustraliaElwin Sharvill RENEWAL
Leon OldroydGermanyStephen Shaw NEW
Jefferson SchemmerArgentinaAmy Elsner NEW
Jennifer AmigonFranceIvan Magalhaes NEW
Greenwood BologniaCanadaIvan Magalhaes NEW
Jeanfrancois VenereJapanAnna Fali RENEWAL
Octavia MaletRussiaStephen Shaw RENEWAL
Mujtaba NickaFranceBernardo Dominic UNQUALIFIED
Izzy GarufiIndiaElwin Sharvill QUALIFIED
Kadeem FlosiFranceOnyama Limba UNQUALIFIED
Isabel BowleyAustraliaIoni Bowcher NEGOTIATION
Aika InouyeBrazilElwin Sharvill QUALIFIED
Ashley DoeSpainIvan Magalhaes QUALIFIED
Leja CaldareraSpainBernardo Dominic QUALIFIED
Nicolas IturbideGermanyStephen Shaw NEW
Antonio CaudyAustraliaAsiya Javayant QUALIFIED
Smith GlickAustraliaElwin Sharvill NEW
Octavia MaletSpainStephen Shaw NEW
Johnson SergiSpainIoni Bowcher QUALIFIED
Julie StensethArgentinaStephen Shaw UNQUALIFIED
Kaitlin OstroskyUnited KingdomAsiya Javayant QUALIFIED
Julie StensethItalyAnna Fali RENEWAL
Cody SaylorsJapanBernardo Dominic NEGOTIATION
Maisha RulapaughIndiaAnna Fali NEGOTIATION
Mujtaba NickaSpainIvan Magalhaes RENEWAL
Darci PoquetteJapanIvan Magalhaes NEW
Adams MorascaGermanyOnyama Limba NEGOTIATION
Jeanfrancois VenereBrazilAmy Elsner PROPOSAL
Stacey MacleadItalyStephen Shaw NEW
Octavia MaletRussiaIoni Bowcher PROPOSAL
Salvatore StockhamSpainAmy Elsner NEW
Greenwood BologniaRussiaIoni Bowcher NEW
Mujtaba NickaJapanIvan Magalhaes NEW
Julie StensethFranceAmy Elsner NEW
Munro FerenczGermanyOnyama Limba UNQUALIFIED
Greenwood BologniaRussiaAnna Fali RENEWAL
David DarakjyFranceAmy Elsner NEW
Wickens NestleRussiaXuxue Feng UNQUALIFIED
Maisha RulapaughArgentinaIoni Bowcher NEW
Jennifer AmigonCanadaAnna Fali QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Emily WhobreyCanadaAsiya Javayant RENEWAL
Jones VocelkaSpainBernardo Dominic QUALIFIED
Izzy GarufiAustraliaXuxue Feng NEGOTIATION
Kaitlin OstroskySpainXuxue Feng QUALIFIED
James ButtArgentinaXuxue Feng NEW
Ricardo GauchoAustraliaElwin Sharvill PROPOSAL
Ashley DoeUnited KingdomElwin Sharvill NEGOTIATION
Rodrigues CampainArgentinaXuxue Feng QUALIFIED
David DarakjyItalyAsiya Javayant NEW
Costa DilliardRussiaStephen Shaw NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jones VocelkaCanada2026-06-05Truhlar And Truhlar Attys RENEWAL79Ioni Bowcher
1001Nicolas IturbideArgentina2026-05-29Morlong Associates UNQUALIFIED42Stephen Shaw
1002Kadeem FlosiJapan2026-06-11Dorl, James J Esq PROPOSAL79Onyama Limba
1003Salvatore StockhamItaly2026-05-31Chanay, Jeffrey A Esq UNQUALIFIED74Onyama Limba
1004Jefferson SchemmerAustralia2026-06-10Buckley Miller Wright UNQUALIFIED14Stephen Shaw
1005Octavia MaletGermany2026-06-11Benton, John B Jr UNQUALIFIED93Elwin Sharvill
1006Francesco ShinkoJapan2026-06-04King, Christopher A Esq QUALIFIED52Onyama Limba
1007Sinclair WaycottAustralia2026-05-26Benton, John B Jr NEW35Elwin Sharvill
1008Deepesh ChuiItaly2026-05-21Chanay, Jeffrey A Esq NEGOTIATION22Amy Elsner
1009Darci PoquetteItaly2026-05-30Chapman, Ross E Esq UNQUALIFIED93Onyama Limba
1010Emily WhobreyUnited Kingdom2026-06-14Morlong Associates QUALIFIED57Amy Elsner
1011Maria MarrierCanada2026-06-09Dorl, James J Esq NEW68Xuxue Feng
1012Isabel BowleyIndia2026-05-30Rousseaux, Michael Esq QUALIFIED39Stephen Shaw
1013Darci PoquetteBrazil2026-06-04Chemel, James L Cpa QUALIFIED80Amy Elsner
1014Aika InouyeSpain2026-06-18Dorl, James J Esq QUALIFIED60Ioni Bowcher
1015Aruna FigeroaBrazil2026-06-09Feltz Printing Service RENEWAL7Amy Elsner
1016Emily WhobreyAustralia2026-06-15Feltz Printing Service NEGOTIATION96Ivan Magalhaes
1017Antonio CaudyCanada2026-06-01Rangoni Of Florence NEW0Stephen Shaw
1018Silvio SlusarskiRussia2026-06-06Buckley Miller Wright RENEWAL52Xuxue Feng
1019Francesco ShinkoAustralia2026-05-26Chapman, Ross E Esq PROPOSAL22Amy Elsner
1020Arvin AlbaresAustralia2026-05-25King, Christopher A Esq PROPOSAL61Ioni Bowcher
1021Claire TollnerBrazil2026-06-19Chanay, Jeffrey A Esq NEGOTIATION29Ivan Magalhaes
1022Nicolas IturbideItaly2026-06-16Feltz Printing Service QUALIFIED12Elwin Sharvill
1023Cody SaylorsCanada2026-06-17Dorl, James J Esq PROPOSAL55Stephen Shaw
1024Darci PoquetteArgentina2026-05-27Printing Dimensions RENEWAL85Ioni Bowcher
1025Leja CaldareraGermany2026-06-10Chanay, Jeffrey A Esq NEGOTIATION84Elwin Sharvill
1026Ricardo GauchoSpain2026-06-07Printing Dimensions NEW80Anna Fali
1027Aika InouyeGermany2026-05-27Morlong Associates NEW67Ioni Bowcher
1028Alejandro PerinCanada2026-06-09Dorl, James J Esq NEGOTIATION38Elwin Sharvill
1029Mayumi KolmetzRussia2026-06-02Chemel, James L Cpa PROPOSAL72Amy Elsner
1030Morrow RutaCanada2026-05-24King, Christopher A Esq NEGOTIATION27Bernardo Dominic
1031Jeanfrancois VenereCanada2026-05-31Rousseaux, Michael Esq RENEWAL86Asiya Javayant
1032Adams MorascaItaly2026-05-31Printing Dimensions NEW55Ioni Bowcher
1033Julie StensethRussia2026-06-01Chanay, Jeffrey A Esq NEGOTIATION27Onyama Limba
1034Cody SaylorsUnited Kingdom2026-05-25King, Christopher A Esq PROPOSAL65Anna Fali
1035Octavia MaletIndia2026-06-18Commercial Press QUALIFIED63Ivan Magalhaes
1036Adams MorascaBrazil2026-05-29King, Christopher A Esq NEW87Elwin Sharvill
1037Ricardo GauchoCanada2026-05-31Chemel, James L Cpa UNQUALIFIED30Ioni Bowcher
1038Munro FerenczFrance2026-06-14Chemel, James L Cpa NEGOTIATION31Bernardo Dominic
1039Misaki RoysterJapan2026-05-24Rousseaux, Michael Esq QUALIFIED36Asiya Javayant
1040Aruna FigeroaBrazil2026-05-22Commercial Press NEW38Ivan Magalhaes
1041Jones VocelkaGermany2026-05-21Rousseaux, Michael Esq PROPOSAL34Elwin Sharvill
1042Ashley DoeRussia2026-06-19Chanay, Jeffrey A Esq QUALIFIED17Anna Fali
1043Sinclair WaycottCanada2026-06-08Commercial Press NEW59Stephen Shaw
1044Clifford RimFrance2026-05-29Benton, John B Jr UNQUALIFIED84Elwin Sharvill
1045Murillo MaletIndia2026-05-23Benton, John B Jr QUALIFIED26Xuxue Feng
1046Izzy GarufiUnited Kingdom2026-06-09Buckley Miller Wright UNQUALIFIED34Bernardo Dominic
1047Silvio SlusarskiArgentina2026-05-26Feltz Printing Service RENEWAL19Xuxue Feng
1048Johnson SergiJapan2026-05-25Dorl, James J Esq PROPOSAL40Xuxue Feng
1049Johnson SergiIndia2026-06-05King, Christopher A Esq UNQUALIFIED42Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Misaki RoysterFranceAmy Elsner QUALIFIED
Darci PoquetteIndiaAnna Fali PROPOSAL
Octavia MaletIndiaAmy Elsner UNQUALIFIED
Claire TollnerJapanElwin Sharvill UNQUALIFIED
Chavez BriddickJapanOnyama Limba RENEWAL
Rodrigues CampainIndiaOnyama Limba PROPOSAL
Sinclair WaycottSpainStephen Shaw UNQUALIFIED
Jefferson SchemmerJapanBernardo Dominic NEW
Greenwood BologniaBrazilOnyama Limba PROPOSAL
Mujtaba NickaGermanyAnna Fali NEW
Jeanfrancois VenereBrazilOnyama Limba UNQUALIFIED
David DarakjyAustraliaIvan Magalhaes RENEWAL
Adams MorascaIndiaAsiya Javayant UNQUALIFIED
Morrow RutaFranceAsiya Javayant PROPOSAL
Maisha RulapaughSpainBernardo Dominic NEW
Johnson SergiFranceAnna Fali QUALIFIED
Jeanfrancois VenereSpainAnna Fali NEW
Cody SaylorsItalyBernardo Dominic UNQUALIFIED
Clifford RimRussiaStephen Shaw NEGOTIATION
Juan WieserCanadaIvan Magalhaes QUALIFIED
Adams MorascaAustraliaIvan Magalhaes NEGOTIATION
Jennifer AmigonFranceAmy Elsner PROPOSAL
Emily WhobreyIndiaBernardo Dominic PROPOSAL
Johnson SergiCanadaAmy Elsner PROPOSAL
Johnson SergiFranceIvan Magalhaes QUALIFIED
Nicolas IturbideAustraliaXuxue Feng NEW
Adams MorascaIndiaIoni Bowcher RENEWAL
Francesco ShinkoAustraliaElwin Sharvill NEGOTIATION
Leon OldroydRussiaIvan Magalhaes RENEWAL
Morrow RutaUnited KingdomStephen Shaw UNQUALIFIED
Izzy GarufiItalyAmy Elsner PROPOSAL
Adams MorascaGermanyElwin Sharvill NEGOTIATION
Aruna FigeroaSpainElwin Sharvill NEW
Darci PoquetteBrazilAnna Fali UNQUALIFIED
Nicolas IturbideFranceXuxue Feng RENEWAL
Leon OldroydCanadaOnyama Limba NEGOTIATION
Wickens NestleJapanAmy Elsner QUALIFIED
Ashley DoeUnited KingdomAnna Fali PROPOSAL
Stacey MacleadItalyAnna Fali QUALIFIED
Nicolas IturbideArgentinaIoni Bowcher RENEWAL
James ButtBrazilOnyama Limba NEGOTIATION
Francesco ShinkoIndiaXuxue Feng PROPOSAL
Antonio CaudyJapanStephen Shaw PROPOSAL
Maisha RulapaughRussiaAmy Elsner QUALIFIED
Morrow RutaRussiaElwin Sharvill RENEWAL
Claire TollnerAustraliaElwin Sharvill PROPOSAL
Jennifer AmigonIndiaOnyama Limba PROPOSAL
Deepesh ChuiUnited KingdomIvan Magalhaes NEW
Aika InouyeJapanXuxue Feng UNQUALIFIED
James ButtArgentinaAmy Elsner UNQUALIFIED
Frozen Columns
Name
Isabel Bowley
Maisha Rulapaugh
David Darakjy
Johnson Sergi
Sinclair Waycott
James Butt
Mujtaba Nicka
Clifford Rim
Clifford Rim
Nicolas Iturbide
Rodrigues Campain
Jones Vocelka
Ashley Doe
Arvin Albares
Jefferson Schemmer
Stacey Maclead
Ivar Paprocki
Johnson Sergi
Jones Vocelka
Maria Marrier
Munro Ferencz
Leja Caldarera
Nicolas Iturbide
Darci Poquette
Emily Whobrey
David Darakjy
Rodrigues Campain
Stacey Maclead
Jones Vocelka
Julie Stenseth
Deepesh Chui
Aditya Kusko
Deepesh Chui
Deepesh Chui
Tony Foller
Misaki Royster
Chavez Briddick
Faith Gillian
Silvio Slusarski
Johnson Sergi
Kaitlin Ostrosky
Tony Foller
Sinclair Waycott
Ivar Paprocki
Munro Ferencz
Adams Morasca
Salvatore Stockham
Greenwood Bolognia
Costa Dilliard
Wickens Nestle
IdCountryDate
1000Italy2026-06-15
1001Spain2026-05-28
1002Italy2026-05-24
1003Argentina2026-05-22
1004Germany2026-05-31
1005Canada2026-05-22
1006Italy2026-06-07
1007India2026-06-03
1008Brazil2026-06-12
1009Russia2026-06-15
1010Australia2026-05-30
1011Japan2026-06-19
1012Italy2026-06-18
1013Japan2026-05-26
1014France2026-06-10
1015France2026-05-31
1016Italy2026-06-18
1017Spain2026-05-30
1018Japan2026-06-19
1019Australia2026-06-09
1020Germany2026-06-11
1021United Kingdom2026-06-07
1022Germany2026-06-02
1023Germany2026-06-16
1024Brazil2026-05-31
1025Argentina2026-06-17
1026France2026-05-30
1027India2026-05-23
1028Argentina2026-06-01
1029Canada2026-06-02
1030Spain2026-05-22
1031Germany2026-05-26
1032Argentina2026-06-14
1033Italy2026-06-15
1034Brazil2026-06-15
1035Italy2026-06-08
1036France2026-05-21
1037France2026-06-17
1038Germany2026-06-09
1039Russia2026-06-09
1040Spain2026-05-22
1041Argentina2026-05-22
1042Argentina2026-06-04
1043Australia2026-05-30
1044Japan2026-06-03
1045United Kingdom2026-05-30
1046Italy2026-06-13
1047Spain2026-05-31
1048Canada2026-06-17
1049India2026-06-06

On-Demand Data

NameIdCountryDate
Cody Saylors1000Brazil2026-06-14
Mayumi Kolmetz1001Australia2026-06-08
Maria Marrier1002Canada2026-05-27
Antonio Caudy1003Canada2026-05-21
Mayumi Kolmetz1004Spain2026-06-08
Aruna Figeroa1005Russia2026-06-03
Jeanfrancois Venere1006Russia2026-06-09
Francesco Shinko1007Argentina2026-05-21
Clifford Rim1008France2026-05-31
Octavia Malet1009Russia2026-06-16
Francesco Shinko1010Australia2026-06-05
Arvin Albares1011Brazil2026-05-23
Ashley Doe1012United Kingdom2026-06-18
Wickens Nestle1013Spain2026-06-10
Stacey Maclead1014France2026-06-05
Nicolas Iturbide1015Brazil2026-05-25
Deepesh Chui1016United Kingdom2026-06-10
Ricardo Gaucho1017Canada2026-06-07
Isabel Bowley1018Argentina2026-05-26
Leja Caldarera1019Spain2026-06-16
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Sinclair WaycottRussiaAsiya Javayant NEGOTIATION
Johnson SergiArgentinaIvan Magalhaes QUALIFIED
Kaitlin OstroskyUnited KingdomXuxue Feng RENEWAL
Maisha RulapaughFranceIoni Bowcher NEGOTIATION
Chavez BriddickItalyIoni Bowcher RENEWAL
Jones VocelkaItalyAsiya Javayant QUALIFIED
Darci PoquetteAustraliaStephen Shaw RENEWAL
Sinclair WaycottAustraliaXuxue Feng PROPOSAL
Munro FerenczItalyStephen Shaw NEW
Ricardo GauchoArgentinaIvan Magalhaes QUALIFIED
Chavez BriddickArgentinaAsiya Javayant UNQUALIFIED
Kaitlin OstroskyUnited KingdomIoni Bowcher RENEWAL
Cody SaylorsAustraliaOnyama Limba NEGOTIATION
Jennifer AmigonGermanyAsiya Javayant UNQUALIFIED
Mujtaba NickaCanadaAsiya Javayant PROPOSAL
Ivar PaprockiFranceAmy Elsner NEW
James ButtFranceBernardo Dominic PROPOSAL
Mujtaba NickaIndiaAmy Elsner NEW
Costa DilliardBrazilIoni Bowcher UNQUALIFIED
Aruna FigeroaFranceElwin Sharvill RENEWAL
Munro FerenczUnited KingdomStephen Shaw QUALIFIED
Leja CaldareraArgentinaXuxue Feng PROPOSAL
Emily WhobreyAustraliaAmy Elsner RENEWAL
Chavez BriddickJapanXuxue Feng UNQUALIFIED
Wickens NestleIndiaOnyama Limba NEGOTIATION
Salvatore StockhamItalyBernardo Dominic NEGOTIATION
Jeanfrancois VenereUnited KingdomXuxue Feng UNQUALIFIED
Ashley DoeBrazilStephen Shaw RENEWAL
Ashley DoeGermanyIvan Magalhaes PROPOSAL
Julie StensethRussiaXuxue Feng QUALIFIED
Chavez BriddickArgentinaAsiya Javayant QUALIFIED
Smith GlickArgentinaAnna Fali NEGOTIATION
Munro FerenczRussiaIvan Magalhaes QUALIFIED
Octavia MaletArgentinaIoni Bowcher NEW
James ButtCanadaElwin Sharvill PROPOSAL
Alejandro PerinIndiaXuxue Feng PROPOSAL
Nicolas IturbideItalyElwin Sharvill NEGOTIATION
Greenwood BologniaGermanyBernardo Dominic PROPOSAL
Wickens NestleUnited KingdomAmy Elsner PROPOSAL
Sinclair WaycottRussiaAnna 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>