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
Juan WieserUnited KingdomOnyama Limba NEGOTIATION
Aditya KuskoIndiaIoni Bowcher NEW
Deepesh ChuiCanadaOnyama Limba PROPOSAL
Ricardo GauchoIndiaStephen Shaw PROPOSAL
Clifford RimFranceXuxue Feng NEW
Kadeem FlosiIndiaElwin Sharvill RENEWAL
Murillo MaletRussiaStephen Shaw QUALIFIED
Arvin AlbaresUnited KingdomElwin Sharvill PROPOSAL
Tony FollerArgentinaBernardo Dominic PROPOSAL
Antonio CaudyRussiaAsiya Javayant NEW
Mujtaba NickaBrazilIoni Bowcher UNQUALIFIED
Ricardo GauchoArgentinaBernardo Dominic RENEWAL
Alejandro PerinIndiaXuxue Feng UNQUALIFIED
Tony FollerItalyElwin Sharvill NEW
Costa DilliardBrazilOnyama Limba NEGOTIATION
Leon OldroydRussiaAsiya Javayant PROPOSAL
Alejandro PerinCanadaElwin Sharvill NEGOTIATION
Octavia MaletSpainIoni Bowcher PROPOSAL
Isabel BowleyUnited KingdomAsiya Javayant QUALIFIED
Aika InouyeBrazilXuxue Feng QUALIFIED
Deepesh ChuiRussiaOnyama Limba QUALIFIED
Francesco ShinkoAustraliaAmy Elsner PROPOSAL
Maisha RulapaughRussiaIvan Magalhaes PROPOSAL
Murillo MaletCanadaIvan Magalhaes RENEWAL
Jennifer AmigonCanadaIoni Bowcher RENEWAL
Jones VocelkaUnited KingdomIvan Magalhaes NEW
Adams MorascaGermanyBernardo Dominic UNQUALIFIED
Chavez BriddickIndiaXuxue Feng RENEWAL
Munro FerenczIndiaOnyama Limba RENEWAL
Kadeem FlosiCanadaIoni Bowcher NEW
Jennifer AmigonUnited KingdomElwin Sharvill RENEWAL
David DarakjyUnited KingdomElwin Sharvill QUALIFIED
Leja CaldareraGermanyAnna Fali PROPOSAL
Julie StensethCanadaAmy Elsner NEGOTIATION
Cody SaylorsIndiaAnna Fali QUALIFIED
Wickens NestleAustraliaAsiya Javayant QUALIFIED
Kadeem FlosiGermanyAsiya Javayant RENEWAL
Isabel BowleyIndiaBernardo Dominic UNQUALIFIED
James ButtUnited KingdomIoni Bowcher NEGOTIATION
Isabel BowleyJapanAmy Elsner PROPOSAL
Rodrigues CampainCanadaStephen Shaw PROPOSAL
Jones VocelkaFranceAsiya Javayant UNQUALIFIED
Mayumi KolmetzSpainIvan Magalhaes UNQUALIFIED
Costa DilliardSpainAmy Elsner UNQUALIFIED
Emily WhobreyRussiaOnyama Limba NEGOTIATION
Antonio CaudyArgentinaAmy Elsner RENEWAL
Silvio SlusarskiArgentinaXuxue Feng NEW
Mayumi KolmetzFranceAsiya Javayant UNQUALIFIED
Arvin AlbaresIndiaXuxue Feng NEW
Rodrigues CampainJapanAsiya Javayant NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Leja CaldareraBrazilIoni Bowcher RENEWAL
Nicolas IturbideIndiaAsiya Javayant NEW
Clifford RimRussiaAsiya Javayant UNQUALIFIED
Jefferson SchemmerSpainBernardo Dominic PROPOSAL
Francesco ShinkoIndiaAsiya Javayant PROPOSAL
Sinclair WaycottItalyElwin Sharvill NEGOTIATION
Aika InouyeUnited KingdomAnna Fali QUALIFIED
Mujtaba NickaFranceBernardo Dominic QUALIFIED
Juan WieserSpainOnyama Limba RENEWAL
Ashley DoeArgentinaIvan Magalhaes PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Costa DilliardArgentina2025-07-28Chemel, James L Cpa PROPOSAL46Xuxue Feng
1001Morrow RutaCanada2025-07-24King, Christopher A Esq QUALIFIED41Stephen Shaw
1002Julie StensethCanada2025-07-28Chanay, Jeffrey A Esq NEGOTIATION45Ivan Magalhaes
1003Isabel BowleyItaly2025-07-17Rousseaux, Michael Esq PROPOSAL21Onyama Limba
1004Smith GlickGermany2025-07-30Buckley Miller Wright RENEWAL95Onyama Limba
1005Francesco ShinkoRussia2025-07-12Truhlar And Truhlar Attys NEGOTIATION92Bernardo Dominic
1006Isabel BowleyAustralia2025-07-11Printing Dimensions NEGOTIATION90Ioni Bowcher
1007Izzy GarufiUnited Kingdom2025-07-30Rousseaux, Michael Esq UNQUALIFIED99Onyama Limba
1008Mujtaba NickaCanada2025-07-23King, Christopher A Esq RENEWAL95Ioni Bowcher
1009Sinclair WaycottJapan2025-07-07Chanay, Jeffrey A Esq NEW1Stephen Shaw
1010Kadeem FlosiRussia2025-07-22Feiner Bros NEW71Onyama Limba
1011Kaitlin OstroskyItaly2025-07-15Commercial Press UNQUALIFIED67Stephen Shaw
1012Nicolas IturbideSpain2025-07-03Feltz Printing Service NEGOTIATION57Onyama Limba
1013Johnson SergiFrance2025-07-18Chanay, Jeffrey A Esq RENEWAL21Ivan Magalhaes
1014Silvio SlusarskiBrazil2025-07-26Buckley Miller Wright UNQUALIFIED86Ivan Magalhaes
1015Maisha RulapaughCanada2025-07-29Printing Dimensions UNQUALIFIED30Asiya Javayant
1016Johnson SergiUnited Kingdom2025-07-24Feltz Printing Service UNQUALIFIED80Asiya Javayant
1017James ButtRussia2025-07-12Chapman, Ross E Esq QUALIFIED56Asiya Javayant
1018Ivar PaprockiAustralia2025-07-11Rangoni Of Florence PROPOSAL30Xuxue Feng
1019James ButtJapan2025-07-13Feltz Printing Service PROPOSAL31Ivan Magalhaes
1020Jefferson SchemmerUnited Kingdom2025-07-12Commercial Press UNQUALIFIED27Asiya Javayant
1021Faith GillianCanada2025-07-09Feiner Bros RENEWAL17Bernardo Dominic
1022James ButtGermany2025-07-17Feiner Bros QUALIFIED35Anna Fali
1023Octavia MaletRussia2025-07-11King, Christopher A Esq UNQUALIFIED87Anna Fali
1024Maisha RulapaughRussia2025-07-12Morlong Associates RENEWAL95Elwin Sharvill
1025Mujtaba NickaSpain2025-07-20Feltz Printing Service RENEWAL45Amy Elsner
1026Johnson SergiCanada2025-07-14Chemel, James L Cpa NEW15Onyama Limba
1027Arvin AlbaresArgentina2025-07-27Chemel, James L Cpa UNQUALIFIED17Elwin Sharvill
1028Emily WhobreyAustralia2025-07-21Truhlar And Truhlar Attys NEGOTIATION66Ioni Bowcher
1029Kadeem FlosiJapan2025-07-28Dorl, James J Esq QUALIFIED43Asiya Javayant
1030Misaki RoysterItaly2025-07-28Morlong Associates NEGOTIATION3Elwin Sharvill
1031Izzy GarufiItaly2025-07-07Chanay, Jeffrey A Esq RENEWAL83Elwin Sharvill
1032Emily WhobreyJapan2025-07-04Feltz Printing Service PROPOSAL90Asiya Javayant
1033Salvatore StockhamItaly2025-07-13Dorl, James J Esq NEW30Xuxue Feng
1034Izzy GarufiSpain2025-07-05Feiner Bros PROPOSAL71Stephen Shaw
1035Deepesh ChuiAustralia2025-07-27Feiner Bros UNQUALIFIED40Elwin Sharvill
1036Leon OldroydBrazil2025-07-05Chanay, Jeffrey A Esq RENEWAL5Ivan Magalhaes
1037Julie StensethIndia2025-07-21Dorl, James J Esq PROPOSAL32Ioni Bowcher
1038Costa DilliardRussia2025-07-27Printing Dimensions QUALIFIED76Ioni Bowcher
1039Mujtaba NickaIndia2025-08-01Feltz Printing Service QUALIFIED69Ivan Magalhaes
1040Murillo MaletArgentina2025-07-03Chemel, James L Cpa PROPOSAL35Anna Fali
1041Chavez BriddickUnited Kingdom2025-07-22King, Christopher A Esq PROPOSAL51Xuxue Feng
1042Leon OldroydItaly2025-07-20Chapman, Ross E Esq UNQUALIFIED72Anna Fali
1043Costa DilliardUnited Kingdom2025-07-15Buckley Miller Wright NEW78Ioni Bowcher
1044Antonio CaudyUnited Kingdom2025-07-28Rangoni Of Florence NEGOTIATION87Ivan Magalhaes
1045Greenwood BologniaItaly2025-07-04Rangoni Of Florence RENEWAL60Ioni Bowcher
1046Antonio CaudySpain2025-07-22Chanay, Jeffrey A Esq NEW78Xuxue Feng
1047Silvio SlusarskiUnited Kingdom2025-07-09Commercial Press UNQUALIFIED40Asiya Javayant
1048Francesco ShinkoAustralia2025-07-13Feltz Printing Service RENEWAL23Stephen Shaw
1049Juan WieserUnited Kingdom2025-07-14Buckley Miller Wright RENEWAL75Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Aditya KuskoArgentinaAmy Elsner RENEWAL
Maisha RulapaughSpainAnna Fali NEW
Jones VocelkaAustraliaStephen Shaw QUALIFIED
Ricardo GauchoBrazilOnyama Limba QUALIFIED
Salvatore StockhamIndiaBernardo Dominic PROPOSAL
Juan WieserGermanyBernardo Dominic RENEWAL
Stacey MacleadSpainElwin Sharvill NEGOTIATION
Octavia MaletFranceBernardo Dominic NEW
Claire TollnerCanadaElwin Sharvill UNQUALIFIED
Kadeem FlosiUnited KingdomXuxue Feng UNQUALIFIED
Aika InouyeUnited KingdomOnyama Limba NEW
Ashley DoeRussiaStephen Shaw PROPOSAL
Leja CaldareraSpainXuxue Feng UNQUALIFIED
Murillo MaletCanadaAnna Fali UNQUALIFIED
Isabel BowleyUnited KingdomBernardo Dominic RENEWAL
Cody SaylorsRussiaAmy Elsner NEW
Jefferson SchemmerBrazilBernardo Dominic UNQUALIFIED
Adams MorascaAustraliaElwin Sharvill NEW
Costa DilliardIndiaAmy Elsner NEGOTIATION
David DarakjyAustraliaAmy Elsner NEW
Munro FerenczArgentinaAnna Fali NEW
Chavez BriddickArgentinaAnna Fali RENEWAL
Leja CaldareraItalyStephen Shaw NEGOTIATION
Darci PoquetteBrazilIoni Bowcher UNQUALIFIED
Darci PoquetteGermanyIoni Bowcher RENEWAL
Rodrigues CampainCanadaOnyama Limba NEW
Kaitlin OstroskyRussiaAmy Elsner RENEWAL
Francesco ShinkoUnited KingdomBernardo Dominic RENEWAL
Morrow RutaJapanOnyama Limba QUALIFIED
Julie StensethGermanyAsiya Javayant QUALIFIED
Deepesh ChuiCanadaBernardo Dominic NEGOTIATION
Maisha RulapaughCanadaXuxue Feng NEW
James ButtJapanIvan Magalhaes RENEWAL
Adams MorascaItalyBernardo Dominic QUALIFIED
Octavia MaletFranceXuxue Feng UNQUALIFIED
Wickens NestleAustraliaIoni Bowcher PROPOSAL
Ashley DoeRussiaOnyama Limba QUALIFIED
Alejandro PerinCanadaXuxue Feng PROPOSAL
Munro FerenczUnited KingdomStephen Shaw PROPOSAL
Aruna FigeroaCanadaAmy Elsner QUALIFIED
Antonio CaudyUnited KingdomAmy Elsner NEGOTIATION
Antonio CaudyItalyAmy Elsner RENEWAL
Francesco ShinkoItalyBernardo Dominic NEGOTIATION
David DarakjyCanadaOnyama Limba PROPOSAL
Johnson SergiJapanBernardo Dominic UNQUALIFIED
Aruna FigeroaGermanyBernardo Dominic UNQUALIFIED
Stacey MacleadIndiaAnna Fali PROPOSAL
Julie StensethAustraliaIvan Magalhaes QUALIFIED
Leja CaldareraSpainStephen Shaw QUALIFIED
James ButtSpainBernardo Dominic PROPOSAL
Frozen Columns
Name
Aika Inouye
Morrow Ruta
Francesco Shinko
Maria Marrier
Emily Whobrey
Kadeem Flosi
Claire Tollner
Juan Wieser
Darci Poquette
Kaitlin Ostrosky
Claire Tollner
Aditya Kusko
Wickens Nestle
Maisha Rulapaugh
Darci Poquette
Isabel Bowley
Ivar Paprocki
Kaitlin Ostrosky
Kaitlin Ostrosky
Ivar Paprocki
Maria Marrier
Mujtaba Nicka
Jeanfrancois Venere
Wickens Nestle
Faith Gillian
Francesco Shinko
Octavia Malet
Munro Ferencz
Misaki Royster
Kaitlin Ostrosky
Ricardo Gaucho
Isabel Bowley
Murillo Malet
Mujtaba Nicka
Clifford Rim
Stacey Maclead
Kadeem Flosi
Silvio Slusarski
Aditya Kusko
Chavez Briddick
Isabel Bowley
Adams Morasca
Silvio Slusarski
Julie Stenseth
Tony Foller
Faith Gillian
Jones Vocelka
Morrow Ruta
James Butt
Jones Vocelka
IdCountryDate
1000Spain2025-07-31
1001India2025-07-06
1002Germany2025-07-28
1003Spain2025-07-14
1004Canada2025-07-17
1005India2025-07-27
1006United Kingdom2025-08-01
1007Japan2025-07-21
1008Brazil2025-07-08
1009Argentina2025-07-09
1010Germany2025-07-14
1011Russia2025-07-21
1012India2025-07-19
1013Canada2025-07-19
1014Italy2025-07-10
1015United Kingdom2025-07-21
1016United Kingdom2025-07-04
1017India2025-07-14
1018Spain2025-07-26
1019Spain2025-07-26
1020France2025-07-09
1021Brazil2025-07-20
1022Argentina2025-07-20
1023Germany2025-07-16
1024Spain2025-07-25
1025Italy2025-07-05
1026Brazil2025-07-08
1027United Kingdom2025-07-23
1028France2025-07-12
1029France2025-07-15
1030Japan2025-07-06
1031United Kingdom2025-07-24
1032Brazil2025-07-14
1033Brazil2025-07-06
1034Italy2025-07-15
1035Japan2025-07-08
1036France2025-07-31
1037Germany2025-07-13
1038Spain2025-07-12
1039Spain2025-07-31
1040Germany2025-07-13
1041Argentina2025-07-16
1042Japan2025-07-23
1043Brazil2025-07-05
1044Australia2025-07-12
1045France2025-07-29
1046United Kingdom2025-07-09
1047France2025-07-13
1048United Kingdom2025-07-05
1049Spain2025-07-23

On-Demand Data

NameIdCountryDate
Darci Poquette1000Italy2025-07-30
Silvio Slusarski1001Canada2025-07-08
Cody Saylors1002Spain2025-07-03
Alejandro Perin1003Russia2025-07-16
Isabel Bowley1004United Kingdom2025-07-11
Arvin Albares1005Argentina2025-07-16
Wickens Nestle1006Japan2025-07-17
Cody Saylors1007Brazil2025-07-26
Faith Gillian1008Germany2025-07-07
Adams Morasca1009Germany2025-07-14
Misaki Royster1010Germany2025-07-10
Adams Morasca1011Germany2025-07-06
Deepesh Chui1012Germany2025-07-03
Greenwood Bolognia1013Brazil2025-07-05
Ricardo Gaucho1014Brazil2025-07-17
Octavia Malet1015Italy2025-07-10
Francesco Shinko1016India2025-07-08
Adams Morasca1017Germany2025-07-26
Jefferson Schemmer1018India2025-08-01
Emily Whobrey1019Brazil2025-07-08
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kadeem FlosiCanadaAnna Fali NEW
Deepesh ChuiFranceXuxue Feng RENEWAL
Claire TollnerCanadaBernardo Dominic QUALIFIED
Greenwood BologniaSpainAmy Elsner RENEWAL
Ashley DoeIndiaAnna Fali NEGOTIATION
Costa DilliardArgentinaAmy Elsner RENEWAL
Johnson SergiUnited KingdomXuxue Feng RENEWAL
Silvio SlusarskiUnited KingdomIoni Bowcher PROPOSAL
Jefferson SchemmerAustraliaAsiya Javayant UNQUALIFIED
Isabel BowleyArgentinaStephen Shaw PROPOSAL
Greenwood BologniaArgentinaBernardo Dominic NEW
Jennifer AmigonIndiaAmy Elsner NEGOTIATION
Rodrigues CampainArgentinaXuxue Feng RENEWAL
Munro FerenczJapanAsiya Javayant RENEWAL
Salvatore StockhamBrazilIvan Magalhaes QUALIFIED
Alejandro PerinItalyAmy Elsner RENEWAL
Clifford RimSpainAnna Fali PROPOSAL
Morrow RutaArgentinaIoni Bowcher QUALIFIED
Ashley DoeSpainStephen Shaw NEW
Nicolas IturbideAustraliaOnyama Limba RENEWAL
Aika InouyeJapanOnyama Limba QUALIFIED
Claire TollnerFranceBernardo Dominic NEGOTIATION
Deepesh ChuiAustraliaAnna Fali UNQUALIFIED
Jefferson SchemmerUnited KingdomXuxue Feng UNQUALIFIED
Kadeem FlosiAustraliaAmy Elsner RENEWAL
Aditya KuskoCanadaAnna Fali PROPOSAL
Jeanfrancois VenereArgentinaIvan Magalhaes NEGOTIATION
Jeanfrancois VenereGermanyAmy Elsner UNQUALIFIED
Mayumi KolmetzItalyIoni Bowcher NEW
Clifford RimIndiaIoni Bowcher RENEWAL
Greenwood BologniaRussiaElwin Sharvill NEGOTIATION
Alejandro PerinArgentinaElwin Sharvill UNQUALIFIED
Adams MorascaItalyOnyama Limba RENEWAL
Claire TollnerIndiaIoni Bowcher NEW
Faith GillianGermanyXuxue Feng NEGOTIATION
Aruna FigeroaIndiaAnna Fali RENEWAL
Faith GillianRussiaAmy Elsner NEGOTIATION
Octavia MaletArgentinaAsiya Javayant QUALIFIED
Ricardo GauchoSpainAsiya Javayant RENEWAL
Isabel BowleyGermanyOnyama Limba NEW

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