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
James ButtUnited KingdomAnna Fali PROPOSAL
Isabel BowleyIndiaAmy Elsner PROPOSAL
Francesco ShinkoItalyIoni Bowcher NEGOTIATION
Murillo MaletJapanAsiya Javayant PROPOSAL
Ashley DoeAustraliaAmy Elsner PROPOSAL
Wickens NestleJapanIoni Bowcher QUALIFIED
Silvio SlusarskiFranceAmy Elsner PROPOSAL
Juan WieserUnited KingdomIoni Bowcher PROPOSAL
Murillo MaletSpainAnna Fali PROPOSAL
Rodrigues CampainRussiaOnyama Limba QUALIFIED
Johnson SergiBrazilAmy Elsner QUALIFIED
Izzy GarufiIndiaIoni Bowcher RENEWAL
Costa DilliardSpainAmy Elsner RENEWAL
Jennifer AmigonIndiaAsiya Javayant PROPOSAL
Isabel BowleyGermanyAsiya Javayant NEGOTIATION
Jefferson SchemmerRussiaAmy Elsner NEGOTIATION
Costa DilliardFranceXuxue Feng NEW
Claire TollnerFranceBernardo Dominic NEGOTIATION
James ButtSpainBernardo Dominic PROPOSAL
Mayumi KolmetzFranceElwin Sharvill NEGOTIATION
Antonio CaudyUnited KingdomIvan Magalhaes UNQUALIFIED
Jeanfrancois VenereItalyIvan Magalhaes PROPOSAL
Costa DilliardAustraliaAmy Elsner NEGOTIATION
Maisha RulapaughJapanStephen Shaw RENEWAL
Aruna FigeroaIndiaBernardo Dominic NEGOTIATION
Izzy GarufiJapanIvan Magalhaes QUALIFIED
Wickens NestleUnited KingdomStephen Shaw PROPOSAL
Leja CaldareraGermanyElwin Sharvill NEW
Leon OldroydCanadaXuxue Feng QUALIFIED
Arvin AlbaresArgentinaStephen Shaw PROPOSAL
Johnson SergiFranceXuxue Feng UNQUALIFIED
Jennifer AmigonItalyStephen Shaw NEW
Jeanfrancois VenereGermanyAmy Elsner NEGOTIATION
Leon OldroydAustraliaIvan Magalhaes PROPOSAL
Munro FerenczFranceAmy Elsner UNQUALIFIED
Isabel BowleyJapanBernardo Dominic QUALIFIED
Maria MarrierIndiaAnna Fali NEGOTIATION
Maria MarrierJapanIvan Magalhaes RENEWAL
Maria MarrierItalyOnyama Limba QUALIFIED
Clifford RimUnited KingdomOnyama Limba PROPOSAL
Mayumi KolmetzBrazilOnyama Limba NEGOTIATION
Aruna FigeroaRussiaXuxue Feng NEW
Tony FollerAustraliaStephen Shaw NEGOTIATION
Ashley DoeJapanIvan Magalhaes NEGOTIATION
Aruna FigeroaCanadaAnna Fali UNQUALIFIED
James ButtArgentinaBernardo Dominic NEW
Isabel BowleyIndiaAsiya Javayant UNQUALIFIED
Silvio SlusarskiFranceIoni Bowcher RENEWAL
Aika InouyeIndiaIoni Bowcher UNQUALIFIED
Francesco ShinkoGermanyAmy Elsner QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Chavez BriddickSpainAmy Elsner QUALIFIED
Izzy GarufiJapanXuxue Feng NEW
Ivar PaprockiRussiaXuxue Feng QUALIFIED
Aika InouyeJapanIoni Bowcher RENEWAL
Smith GlickSpainIvan Magalhaes RENEWAL
Aruna FigeroaSpainAsiya Javayant NEW
Adams MorascaGermanyIoni Bowcher RENEWAL
Juan WieserItalyAsiya Javayant NEW
Arvin AlbaresIndiaBernardo Dominic NEW
Cody SaylorsItalyAsiya Javayant PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Tony FollerAustralia2026-04-17Rousseaux, Michael Esq QUALIFIED47Anna Fali
1001Adams MorascaItaly2026-04-22Morlong Associates RENEWAL22Xuxue Feng
1002Costa DilliardGermany2026-04-13King, Christopher A Esq NEW30Amy Elsner
1003Antonio CaudyBrazil2026-04-30Benton, John B Jr UNQUALIFIED35Ivan Magalhaes
1004Tony FollerIndia2026-04-26Rangoni Of Florence QUALIFIED54Amy Elsner
1005Tony FollerJapan2026-04-05Chapman, Ross E Esq NEW72Anna Fali
1006Aruna FigeroaRussia2026-04-16Truhlar And Truhlar Attys RENEWAL86Ioni Bowcher
1007Tony FollerCanada2026-04-26Chanay, Jeffrey A Esq NEW84Bernardo Dominic
1008Ricardo GauchoRussia2026-04-24Chemel, James L Cpa QUALIFIED86Stephen Shaw
1009Jefferson SchemmerFrance2026-04-16Morlong Associates NEGOTIATION83Amy Elsner
1010Silvio SlusarskiArgentina2026-04-02Chanay, Jeffrey A Esq QUALIFIED1Asiya Javayant
1011Adams MorascaRussia2026-04-24Morlong Associates NEGOTIATION81Bernardo Dominic
1012Alejandro PerinArgentina2026-04-24Chapman, Ross E Esq RENEWAL2Ivan Magalhaes
1013Francesco ShinkoBrazil2026-04-14Benton, John B Jr UNQUALIFIED72Ivan Magalhaes
1014Jones VocelkaBrazil2026-04-24Chapman, Ross E Esq UNQUALIFIED7Elwin Sharvill
1015Antonio CaudyJapan2026-04-06Chanay, Jeffrey A Esq PROPOSAL38Ioni Bowcher
1016Jefferson SchemmerRussia2026-04-17Chapman, Ross E Esq UNQUALIFIED66Xuxue Feng
1017Octavia MaletCanada2026-04-03King, Christopher A Esq PROPOSAL56Stephen Shaw
1018Maisha RulapaughUnited Kingdom2026-04-13Benton, John B Jr NEGOTIATION89Elwin Sharvill
1019Alejandro PerinSpain2026-04-28Dorl, James J Esq RENEWAL10Elwin Sharvill
1020Jones VocelkaItaly2026-04-29Commercial Press PROPOSAL4Amy Elsner
1021Ricardo GauchoGermany2026-04-20Dorl, James J Esq QUALIFIED14Bernardo Dominic
1022Misaki RoysterAustralia2026-04-09Rousseaux, Michael Esq PROPOSAL29Bernardo Dominic
1023Emily WhobreyIndia2026-04-19Printing Dimensions NEGOTIATION30Ivan Magalhaes
1024Cody SaylorsSpain2026-04-05Benton, John B Jr UNQUALIFIED55Asiya Javayant
1025Rodrigues CampainIndia2026-04-28Buckley Miller Wright UNQUALIFIED87Amy Elsner
1026Rodrigues CampainBrazil2026-04-30Feiner Bros QUALIFIED31Onyama Limba
1027Mayumi KolmetzArgentina2026-04-12Chapman, Ross E Esq PROPOSAL75Bernardo Dominic
1028Maria MarrierUnited Kingdom2026-04-16Benton, John B Jr NEGOTIATION85Onyama Limba
1029Cody SaylorsCanada2026-04-14Printing Dimensions NEW86Elwin Sharvill
1030Francesco ShinkoBrazil2026-04-22Chanay, Jeffrey A Esq NEGOTIATION51Xuxue Feng
1031Kaitlin OstroskySpain2026-04-25Printing Dimensions UNQUALIFIED83Anna Fali
1032Johnson SergiRussia2026-04-03Rousseaux, Michael Esq PROPOSAL3Stephen Shaw
1033Nicolas IturbideCanada2026-04-09Benton, John B Jr QUALIFIED94Anna Fali
1034Salvatore StockhamIndia2026-04-02Truhlar And Truhlar Attys NEGOTIATION7Onyama Limba
1035Jeanfrancois VenereRussia2026-04-13Commercial Press NEGOTIATION68Stephen Shaw
1036Maria MarrierBrazil2026-04-19Rousseaux, Michael Esq NEGOTIATION63Ivan Magalhaes
1037Ivar PaprockiAustralia2026-04-06Truhlar And Truhlar Attys NEGOTIATION1Onyama Limba
1038Jennifer AmigonCanada2026-04-16Truhlar And Truhlar Attys RENEWAL85Ivan Magalhaes
1039Arvin AlbaresIndia2026-04-29Chemel, James L Cpa NEGOTIATION33Bernardo Dominic
1040Stacey MacleadSpain2026-04-22Truhlar And Truhlar Attys NEW3Asiya Javayant
1041Johnson SergiAustralia2026-04-02Feiner Bros RENEWAL80Ivan Magalhaes
1042Wickens NestleAustralia2026-04-29Feiner Bros PROPOSAL4Bernardo Dominic
1043Aditya KuskoIndia2026-04-11Feltz Printing Service PROPOSAL34Ioni Bowcher
1044Aika InouyeRussia2026-04-23Dorl, James J Esq NEW9Onyama Limba
1045Kadeem FlosiSpain2026-04-17Feiner Bros PROPOSAL2Bernardo Dominic
1046Jennifer AmigonUnited Kingdom2026-04-07Dorl, James J Esq QUALIFIED41Ivan Magalhaes
1047Claire TollnerItaly2026-04-01Chanay, Jeffrey A Esq UNQUALIFIED84Asiya Javayant
1048Munro FerenczBrazil2026-04-13Chemel, James L Cpa PROPOSAL95Onyama Limba
1049Morrow RutaBrazil2026-04-01Buckley Miller Wright NEW50Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Morrow RutaItalyAsiya Javayant NEGOTIATION
Tony FollerGermanyOnyama Limba QUALIFIED
Arvin AlbaresIndiaAsiya Javayant NEGOTIATION
Adams MorascaItalyIoni Bowcher NEGOTIATION
Ivar PaprockiGermanyAsiya Javayant RENEWAL
Julie StensethSpainStephen Shaw PROPOSAL
Francesco ShinkoUnited KingdomIvan Magalhaes UNQUALIFIED
Leja CaldareraCanadaAsiya Javayant NEGOTIATION
Darci PoquetteSpainIvan Magalhaes PROPOSAL
Claire TollnerCanadaXuxue Feng RENEWAL
Mayumi KolmetzBrazilIoni Bowcher PROPOSAL
Sinclair WaycottArgentinaBernardo Dominic PROPOSAL
Silvio SlusarskiIndiaXuxue Feng NEGOTIATION
Jennifer AmigonJapanAsiya Javayant NEW
Ashley DoeBrazilStephen Shaw QUALIFIED
Jennifer AmigonIndiaStephen Shaw UNQUALIFIED
Maisha RulapaughArgentinaXuxue Feng RENEWAL
Francesco ShinkoCanadaBernardo Dominic NEGOTIATION
Antonio CaudyItalyIoni Bowcher NEGOTIATION
Juan WieserArgentinaOnyama Limba NEGOTIATION
Darci PoquetteBrazilBernardo Dominic NEW
Smith GlickIndiaXuxue Feng QUALIFIED
Ricardo GauchoJapanAmy Elsner QUALIFIED
Rodrigues CampainGermanyAnna Fali PROPOSAL
Antonio CaudyUnited KingdomAsiya Javayant UNQUALIFIED
Ivar PaprockiIndiaAsiya Javayant NEGOTIATION
Faith GillianGermanyXuxue Feng NEGOTIATION
Emily WhobreyCanadaStephen Shaw NEGOTIATION
Johnson SergiUnited KingdomAsiya Javayant NEGOTIATION
Cody SaylorsUnited KingdomOnyama Limba QUALIFIED
Aditya KuskoItalyBernardo Dominic NEGOTIATION
Jones VocelkaIndiaBernardo Dominic RENEWAL
James ButtBrazilAmy Elsner NEW
Johnson SergiArgentinaAmy Elsner NEGOTIATION
Clifford RimArgentinaAsiya Javayant RENEWAL
David DarakjyGermanyIvan Magalhaes NEGOTIATION
Aditya KuskoUnited KingdomStephen Shaw UNQUALIFIED
Juan WieserRussiaOnyama Limba RENEWAL
Silvio SlusarskiFranceXuxue Feng RENEWAL
Salvatore StockhamFranceAnna Fali NEW
Sinclair WaycottItalyAnna Fali NEW
Deepesh ChuiJapanAnna Fali UNQUALIFIED
Octavia MaletSpainOnyama Limba QUALIFIED
Izzy GarufiBrazilOnyama Limba RENEWAL
Kaitlin OstroskyItalyElwin Sharvill QUALIFIED
Stacey MacleadGermanyIoni Bowcher NEGOTIATION
James ButtItalyAsiya Javayant NEW
Mujtaba NickaSpainAmy Elsner NEGOTIATION
Ivar PaprockiCanadaIvan Magalhaes RENEWAL
Ashley DoeJapanBernardo Dominic QUALIFIED
Frozen Columns
Name
James Butt
Jones Vocelka
Deepesh Chui
Octavia Malet
Ivar Paprocki
Antonio Caudy
Maria Marrier
Wickens Nestle
Darci Poquette
Munro Ferencz
Aruna Figeroa
Nicolas Iturbide
Octavia Malet
Ashley Doe
Johnson Sergi
Morrow Ruta
Morrow Ruta
Ricardo Gaucho
Salvatore Stockham
Tony Foller
Izzy Garufi
Faith Gillian
Ivar Paprocki
Ivar Paprocki
Leon Oldroyd
Johnson Sergi
Faith Gillian
Johnson Sergi
David Darakjy
Francesco Shinko
Julie Stenseth
Kaitlin Ostrosky
Morrow Ruta
Sinclair Waycott
Rodrigues Campain
Tony Foller
Aika Inouye
Adams Morasca
Jones Vocelka
Mayumi Kolmetz
Ashley Doe
Ivar Paprocki
Isabel Bowley
Adams Morasca
David Darakjy
Mayumi Kolmetz
Silvio Slusarski
James Butt
Mayumi Kolmetz
Faith Gillian
IdCountryDate
1000United Kingdom2026-04-29
1001Spain2026-04-03
1002Germany2026-04-14
1003United Kingdom2026-04-11
1004Russia2026-04-05
1005United Kingdom2026-04-01
1006Australia2026-04-25
1007Spain2026-04-14
1008Canada2026-04-19
1009Italy2026-04-23
1010Japan2026-04-15
1011India2026-04-09
1012United Kingdom2026-04-14
1013Australia2026-04-08
1014Russia2026-04-24
1015Spain2026-04-30
1016France2026-04-24
1017Russia2026-04-28
1018Canada2026-04-24
1019France2026-04-04
1020Spain2026-04-21
1021France2026-04-22
1022India2026-04-02
1023Spain2026-04-07
1024Italy2026-04-28
1025Spain2026-04-19
1026Brazil2026-04-16
1027Italy2026-04-02
1028Spain2026-04-25
1029Russia2026-04-03
1030Italy2026-04-15
1031Australia2026-04-13
1032Japan2026-04-15
1033India2026-04-13
1034Japan2026-04-01
1035India2026-04-28
1036Russia2026-04-28
1037France2026-04-14
1038Brazil2026-04-18
1039Canada2026-04-05
1040United Kingdom2026-04-30
1041Brazil2026-04-03
1042France2026-04-27
1043Brazil2026-04-29
1044Italy2026-04-29
1045Argentina2026-04-28
1046India2026-04-17
1047Brazil2026-04-25
1048United Kingdom2026-04-10
1049Australia2026-04-08

On-Demand Data

NameIdCountryDate
Wickens Nestle1000Canada2026-04-18
Francesco Shinko1001France2026-04-29
Antonio Caudy1002United Kingdom2026-04-30
Jeanfrancois Venere1003Brazil2026-04-13
Greenwood Bolognia1004Brazil2026-04-15
Morrow Ruta1005Argentina2026-04-21
Wickens Nestle1006France2026-04-26
Octavia Malet1007Italy2026-04-15
Mujtaba Nicka1008United Kingdom2026-04-30
Antonio Caudy1009Italy2026-04-03
Misaki Royster1010Australia2026-04-24
Leon Oldroyd1011Australia2026-04-17
Maisha Rulapaugh1012Spain2026-04-08
Jefferson Schemmer1013Australia2026-04-02
Deepesh Chui1014Japan2026-04-13
Jeanfrancois Venere1015Russia2026-04-13
Silvio Slusarski1016Argentina2026-04-21
Ivar Paprocki1017Russia2026-04-06
Salvatore Stockham1018France2026-04-12
Maisha Rulapaugh1019Spain2026-04-04
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jefferson SchemmerAustraliaAmy Elsner UNQUALIFIED
Sinclair WaycottCanadaOnyama Limba PROPOSAL
Tony FollerUnited KingdomAsiya Javayant UNQUALIFIED
Alejandro PerinFranceXuxue Feng RENEWAL
Cody SaylorsJapanIvan Magalhaes RENEWAL
Darci PoquetteCanadaIvan Magalhaes PROPOSAL
Morrow RutaIndiaOnyama Limba NEW
Silvio SlusarskiCanadaAnna Fali NEGOTIATION
Aditya KuskoItalyAnna Fali UNQUALIFIED
Murillo MaletUnited KingdomStephen Shaw NEW
Ashley DoeRussiaXuxue Feng NEW
Rodrigues CampainBrazilStephen Shaw RENEWAL
Munro FerenczFranceIoni Bowcher UNQUALIFIED
Maria MarrierUnited KingdomAsiya Javayant UNQUALIFIED
Mujtaba NickaSpainAmy Elsner NEGOTIATION
Chavez BriddickRussiaAsiya Javayant NEW
Emily WhobreyArgentinaXuxue Feng QUALIFIED
Ricardo GauchoRussiaBernardo Dominic UNQUALIFIED
Darci PoquetteIndiaAsiya Javayant NEGOTIATION
Julie StensethCanadaAnna Fali NEW
Greenwood BologniaItalyAmy Elsner PROPOSAL
Julie StensethAustraliaXuxue Feng NEW
Nicolas IturbideSpainIoni Bowcher UNQUALIFIED
Faith GillianAustraliaAmy Elsner UNQUALIFIED
Aika InouyeCanadaOnyama Limba UNQUALIFIED
Salvatore StockhamBrazilIvan Magalhaes RENEWAL
Maria MarrierIndiaBernardo Dominic QUALIFIED
Juan WieserBrazilAnna Fali NEW
Stacey MacleadSpainBernardo Dominic UNQUALIFIED
Izzy GarufiJapanIvan Magalhaes PROPOSAL
Smith GlickCanadaAsiya Javayant NEGOTIATION
Francesco ShinkoAustraliaAmy Elsner UNQUALIFIED
Salvatore StockhamBrazilXuxue Feng UNQUALIFIED
Munro FerenczFranceAmy Elsner UNQUALIFIED
Adams MorascaSpainBernardo Dominic RENEWAL
Darci PoquetteJapanAsiya Javayant NEGOTIATION
Sinclair WaycottAustraliaIoni Bowcher NEW
Leon OldroydSpainBernardo Dominic NEGOTIATION
Johnson SergiRussiaStephen Shaw NEGOTIATION
Morrow RutaItalyStephen Shaw 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>