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
Leon OldroydCanadaAnna Fali PROPOSAL
Aditya KuskoUnited KingdomBernardo Dominic PROPOSAL
Tony FollerBrazilElwin Sharvill UNQUALIFIED
Greenwood BologniaGermanyAsiya Javayant PROPOSAL
Silvio SlusarskiBrazilIoni Bowcher PROPOSAL
Aruna FigeroaFranceAsiya Javayant RENEWAL
Leja CaldareraArgentinaAnna Fali NEGOTIATION
Julie StensethCanadaIvan Magalhaes PROPOSAL
Izzy GarufiArgentinaAsiya Javayant QUALIFIED
Costa DilliardUnited KingdomIoni Bowcher QUALIFIED
Tony FollerBrazilStephen Shaw PROPOSAL
Deepesh ChuiAustraliaIoni Bowcher QUALIFIED
Aruna FigeroaIndiaAmy Elsner RENEWAL
Chavez BriddickJapanIvan Magalhaes NEGOTIATION
Nicolas IturbideAustraliaIoni Bowcher NEGOTIATION
Ricardo GauchoIndiaXuxue Feng RENEWAL
Clifford RimIndiaIvan Magalhaes NEW
Rodrigues CampainItalyIvan Magalhaes PROPOSAL
Sinclair WaycottItalyAnna Fali QUALIFIED
Salvatore StockhamFranceIvan Magalhaes NEGOTIATION
Isabel BowleyFranceAsiya Javayant NEGOTIATION
Johnson SergiBrazilOnyama Limba UNQUALIFIED
Jeanfrancois VenereBrazilIoni Bowcher PROPOSAL
Francesco ShinkoCanadaElwin Sharvill NEGOTIATION
Arvin AlbaresAustraliaAnna Fali PROPOSAL
Aruna FigeroaBrazilStephen Shaw PROPOSAL
Misaki RoysterJapanBernardo Dominic UNQUALIFIED
Isabel BowleySpainAnna Fali PROPOSAL
Izzy GarufiBrazilAnna Fali PROPOSAL
James ButtUnited KingdomStephen Shaw RENEWAL
Ivar PaprockiFranceStephen Shaw NEW
Wickens NestleArgentinaOnyama Limba NEGOTIATION
Misaki RoysterArgentinaOnyama Limba RENEWAL
Maria MarrierGermanyAmy Elsner UNQUALIFIED
Isabel BowleyGermanyAmy Elsner QUALIFIED
Maria MarrierCanadaAnna Fali NEW
Nicolas IturbideSpainBernardo Dominic QUALIFIED
Emily WhobreyCanadaAsiya Javayant UNQUALIFIED
Kadeem FlosiJapanAmy Elsner NEGOTIATION
Arvin AlbaresFranceOnyama Limba QUALIFIED
Octavia MaletGermanyBernardo Dominic QUALIFIED
Antonio CaudyBrazilXuxue Feng NEW
Antonio CaudyArgentinaXuxue Feng QUALIFIED
Izzy GarufiItalyStephen Shaw NEGOTIATION
Clifford RimItalyAmy Elsner RENEWAL
Mujtaba NickaSpainAsiya Javayant RENEWAL
Jeanfrancois VenereGermanyAnna Fali NEGOTIATION
Leon OldroydCanadaOnyama Limba QUALIFIED
Mujtaba NickaFranceBernardo Dominic UNQUALIFIED
Aditya KuskoBrazilBernardo Dominic QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Silvio SlusarskiBrazilStephen Shaw PROPOSAL
Izzy GarufiCanadaOnyama Limba PROPOSAL
Rodrigues CampainFranceAsiya Javayant PROPOSAL
Mayumi KolmetzUnited KingdomIvan Magalhaes QUALIFIED
Arvin AlbaresItalyAsiya Javayant NEGOTIATION
Johnson SergiArgentinaBernardo Dominic RENEWAL
Arvin AlbaresSpainXuxue Feng PROPOSAL
Misaki RoysterBrazilAnna Fali UNQUALIFIED
Deepesh ChuiFranceElwin Sharvill NEGOTIATION
Maisha RulapaughGermanyAsiya Javayant NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Mujtaba NickaBrazil2026-05-09Buckley Miller Wright RENEWAL4Anna Fali
1001Ivar PaprockiCanada2026-05-31Rousseaux, Michael Esq UNQUALIFIED69Onyama Limba
1002Darci PoquetteCanada2026-06-03King, Christopher A Esq UNQUALIFIED55Elwin Sharvill
1003Octavia MaletJapan2026-05-12Feltz Printing Service RENEWAL91Ivan Magalhaes
1004Jennifer AmigonIndia2026-06-01Buckley Miller Wright NEGOTIATION87Elwin Sharvill
1005Jefferson SchemmerIndia2026-05-17Truhlar And Truhlar Attys PROPOSAL64Ioni Bowcher
1006Ricardo GauchoIndia2026-06-01Commercial Press QUALIFIED80Onyama Limba
1007Ricardo GauchoItaly2026-05-17Chapman, Ross E Esq PROPOSAL81Anna Fali
1008Isabel BowleySpain2026-05-27Chanay, Jeffrey A Esq QUALIFIED8Bernardo Dominic
1009Morrow RutaAustralia2026-05-17Commercial Press UNQUALIFIED21Onyama Limba
1010Cody SaylorsJapan2026-06-01Feltz Printing Service RENEWAL9Onyama Limba
1011Costa DilliardRussia2026-05-27Rousseaux, Michael Esq PROPOSAL1Bernardo Dominic
1012Faith GillianBrazil2026-05-12Dorl, James J Esq QUALIFIED8Ioni Bowcher
1013Costa DilliardAustralia2026-05-25Rangoni Of Florence RENEWAL18Onyama Limba
1014Arvin AlbaresIndia2026-05-09Rousseaux, Michael Esq NEGOTIATION75Xuxue Feng
1015Smith GlickFrance2026-05-25King, Christopher A Esq NEGOTIATION17Onyama Limba
1016Francesco ShinkoAustralia2026-05-24Benton, John B Jr QUALIFIED64Elwin Sharvill
1017Leja CaldareraSpain2026-05-18Benton, John B Jr PROPOSAL68Xuxue Feng
1018Ricardo GauchoGermany2026-05-14Dorl, James J Esq QUALIFIED62Onyama Limba
1019Julie StensethItaly2026-05-09Benton, John B Jr NEGOTIATION78Onyama Limba
1020Francesco ShinkoBrazil2026-05-15Feiner Bros UNQUALIFIED29Elwin Sharvill
1021Ricardo GauchoAustralia2026-05-10Buckley Miller Wright NEGOTIATION86Asiya Javayant
1022Leon OldroydBrazil2026-05-29Printing Dimensions PROPOSAL90Ioni Bowcher
1023Julie StensethBrazil2026-05-22Commercial Press NEGOTIATION67Ioni Bowcher
1024Aruna FigeroaAustralia2026-05-24Truhlar And Truhlar Attys PROPOSAL42Asiya Javayant
1025Jennifer AmigonFrance2026-05-07Commercial Press NEGOTIATION17Anna Fali
1026Salvatore StockhamGermany2026-05-15Feiner Bros RENEWAL16Xuxue Feng
1027Tony FollerFrance2026-05-12King, Christopher A Esq NEW47Xuxue Feng
1028Stacey MacleadJapan2026-05-06Truhlar And Truhlar Attys PROPOSAL1Anna Fali
1029Cody SaylorsAustralia2026-06-04Rousseaux, Michael Esq NEW67Amy Elsner
1030Aruna FigeroaJapan2026-05-21Rousseaux, Michael Esq PROPOSAL24Ivan Magalhaes
1031David DarakjyBrazil2026-06-01Rousseaux, Michael Esq RENEWAL68Ioni Bowcher
1032Ashley DoeRussia2026-05-23Feltz Printing Service QUALIFIED38Bernardo Dominic
1033Darci PoquetteBrazil2026-05-19Chapman, Ross E Esq RENEWAL76Stephen Shaw
1034Francesco ShinkoIndia2026-05-14Chemel, James L Cpa QUALIFIED94Amy Elsner
1035Clifford RimCanada2026-05-08Chanay, Jeffrey A Esq UNQUALIFIED1Onyama Limba
1036Aika InouyeBrazil2026-05-06Rangoni Of Florence NEGOTIATION30Onyama Limba
1037Francesco ShinkoIndia2026-06-04Commercial Press QUALIFIED81Amy Elsner
1038Silvio SlusarskiSpain2026-05-23Dorl, James J Esq RENEWAL63Stephen Shaw
1039Misaki RoysterGermany2026-05-31Truhlar And Truhlar Attys QUALIFIED17Bernardo Dominic
1040Rodrigues CampainGermany2026-05-09Chemel, James L Cpa NEGOTIATION96Amy Elsner
1041Misaki RoysterRussia2026-05-18Feltz Printing Service RENEWAL40Anna Fali
1042David DarakjyCanada2026-05-19Chemel, James L Cpa PROPOSAL83Onyama Limba
1043Chavez BriddickItaly2026-05-25Feiner Bros QUALIFIED16Asiya Javayant
1044Ashley DoeRussia2026-05-28Rangoni Of Florence NEGOTIATION57Bernardo Dominic
1045Kadeem FlosiSpain2026-06-03King, Christopher A Esq RENEWAL83Elwin Sharvill
1046Antonio CaudyBrazil2026-06-03Morlong Associates PROPOSAL35Asiya Javayant
1047James ButtIndia2026-05-20Morlong Associates QUALIFIED73Stephen Shaw
1048Morrow RutaUnited Kingdom2026-05-24Chemel, James L Cpa NEGOTIATION22Asiya Javayant
1049Silvio SlusarskiRussia2026-05-31Buckley Miller Wright NEW82Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Octavia MaletUnited KingdomIoni Bowcher UNQUALIFIED
Maisha RulapaughUnited KingdomAsiya Javayant RENEWAL
Alejandro PerinSpainBernardo Dominic NEGOTIATION
Greenwood BologniaGermanyXuxue Feng RENEWAL
Misaki RoysterGermanyStephen Shaw UNQUALIFIED
Stacey MacleadGermanyAsiya Javayant NEGOTIATION
Cody SaylorsRussiaStephen Shaw NEGOTIATION
Munro FerenczBrazilIvan Magalhaes NEGOTIATION
Maria MarrierRussiaBernardo Dominic NEW
Antonio CaudyBrazilStephen Shaw RENEWAL
Faith GillianAustraliaAmy Elsner NEGOTIATION
Kadeem FlosiSpainStephen Shaw UNQUALIFIED
Jennifer AmigonItalyElwin Sharvill NEGOTIATION
Jefferson SchemmerAustraliaStephen Shaw UNQUALIFIED
Sinclair WaycottUnited KingdomStephen Shaw UNQUALIFIED
Jennifer AmigonItalyIoni Bowcher NEW
Francesco ShinkoRussiaStephen Shaw RENEWAL
Darci PoquetteGermanyBernardo Dominic RENEWAL
Morrow RutaBrazilAnna Fali RENEWAL
Chavez BriddickRussiaAmy Elsner NEGOTIATION
Deepesh ChuiFranceBernardo Dominic NEGOTIATION
Jones VocelkaUnited KingdomStephen Shaw NEW
Salvatore StockhamBrazilIoni Bowcher NEGOTIATION
Arvin AlbaresBrazilAmy Elsner RENEWAL
Johnson SergiAustraliaStephen Shaw NEGOTIATION
Kaitlin OstroskyAustraliaXuxue Feng QUALIFIED
Mayumi KolmetzArgentinaAmy Elsner NEGOTIATION
Leja CaldareraIndiaAnna Fali PROPOSAL
Maria MarrierRussiaAnna Fali QUALIFIED
Costa DilliardAustraliaAnna Fali PROPOSAL
Deepesh ChuiFranceOnyama Limba QUALIFIED
Jefferson SchemmerIndiaAnna Fali QUALIFIED
Wickens NestleFranceIoni Bowcher PROPOSAL
Mujtaba NickaJapanIoni Bowcher NEW
Sinclair WaycottRussiaAnna Fali RENEWAL
Sinclair WaycottCanadaIvan Magalhaes NEW
Ivar PaprockiBrazilAnna Fali UNQUALIFIED
Emily WhobreyUnited KingdomIvan Magalhaes UNQUALIFIED
Rodrigues CampainAustraliaOnyama Limba QUALIFIED
Nicolas IturbideItalyAnna Fali RENEWAL
Silvio SlusarskiJapanAmy Elsner QUALIFIED
Tony FollerGermanyOnyama Limba NEGOTIATION
Rodrigues CampainCanadaStephen Shaw PROPOSAL
Stacey MacleadGermanyIvan Magalhaes QUALIFIED
Aika InouyeIndiaIoni Bowcher RENEWAL
Alejandro PerinItalyElwin Sharvill QUALIFIED
Ashley DoeCanadaXuxue Feng QUALIFIED
Rodrigues CampainJapanElwin Sharvill NEGOTIATION
Maisha RulapaughAustraliaAmy Elsner QUALIFIED
Kadeem FlosiFranceIvan Magalhaes QUALIFIED
Frozen Columns
Name
Deepesh Chui
Mayumi Kolmetz
Claire Tollner
Jennifer Amigon
Nicolas Iturbide
Murillo Malet
Mayumi Kolmetz
Wickens Nestle
Ashley Doe
Kadeem Flosi
Ivar Paprocki
Rodrigues Campain
Stacey Maclead
Ricardo Gaucho
Maisha Rulapaugh
Cody Saylors
Cody Saylors
Jones Vocelka
Greenwood Bolognia
Wickens Nestle
Julie Stenseth
Costa Dilliard
Emily Whobrey
Aruna Figeroa
Arvin Albares
Julie Stenseth
Nicolas Iturbide
Smith Glick
Johnson Sergi
Stacey Maclead
Mujtaba Nicka
Murillo Malet
David Darakjy
Aditya Kusko
Isabel Bowley
Ivar Paprocki
Francesco Shinko
Antonio Caudy
Jennifer Amigon
Mujtaba Nicka
Cody Saylors
Clifford Rim
Ricardo Gaucho
Greenwood Bolognia
Aika Inouye
Misaki Royster
Mujtaba Nicka
Ivar Paprocki
Mayumi Kolmetz
Murillo Malet
IdCountryDate
1000Germany2026-05-15
1001Japan2026-06-04
1002India2026-05-20
1003India2026-05-22
1004United Kingdom2026-06-03
1005Canada2026-05-24
1006Canada2026-05-18
1007Germany2026-05-29
1008Russia2026-05-14
1009France2026-05-14
1010Argentina2026-05-12
1011Argentina2026-05-12
1012Japan2026-06-02
1013Japan2026-05-21
1014Argentina2026-05-07
1015Argentina2026-05-14
1016Spain2026-05-26
1017Australia2026-05-16
1018Russia2026-05-18
1019India2026-05-18
1020Spain2026-05-08
1021France2026-05-12
1022Japan2026-05-16
1023Spain2026-05-24
1024Italy2026-05-27
1025United Kingdom2026-05-10
1026Italy2026-05-27
1027Italy2026-05-16
1028Spain2026-05-14
1029Russia2026-05-28
1030Canada2026-06-01
1031United Kingdom2026-05-10
1032Spain2026-05-21
1033France2026-05-20
1034Germany2026-06-01
1035Japan2026-05-26
1036Japan2026-05-06
1037France2026-05-10
1038Canada2026-05-17
1039Germany2026-05-29
1040Canada2026-05-31
1041Argentina2026-05-11
1042Australia2026-05-24
1043Australia2026-05-27
1044Canada2026-05-26
1045United Kingdom2026-05-13
1046Argentina2026-05-17
1047India2026-05-27
1048Germany2026-05-25
1049Russia2026-05-16

On-Demand Data

NameIdCountryDate
Deepesh Chui1000Argentina2026-06-02
Leja Caldarera1001Italy2026-06-01
Clifford Rim1002Argentina2026-05-09
Claire Tollner1003France2026-05-11
Mujtaba Nicka1004Italy2026-05-21
Clifford Rim1005United Kingdom2026-06-01
Deepesh Chui1006Brazil2026-06-02
Salvatore Stockham1007Canada2026-05-28
Munro Ferencz1008Australia2026-05-22
Chavez Briddick1009Spain2026-05-06
Jennifer Amigon1010Canada2026-05-09
Jefferson Schemmer1011Spain2026-05-17
Jefferson Schemmer1012France2026-05-27
Mujtaba Nicka1013France2026-05-30
Ashley Doe1014Brazil2026-05-16
Deepesh Chui1015United Kingdom2026-05-10
Clifford Rim1016Russia2026-05-25
Aika Inouye1017United Kingdom2026-05-10
Jones Vocelka1018Germany2026-05-13
Darci Poquette1019Germany2026-05-28
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aika InouyeItalyAnna Fali PROPOSAL
Murillo MaletIndiaOnyama Limba PROPOSAL
Tony FollerJapanIvan Magalhaes UNQUALIFIED
Julie StensethIndiaOnyama Limba NEGOTIATION
Julie StensethBrazilOnyama Limba QUALIFIED
Antonio CaudyArgentinaAnna Fali RENEWAL
Emily WhobreyRussiaAsiya Javayant PROPOSAL
Rodrigues CampainSpainAmy Elsner NEGOTIATION
Aditya KuskoRussiaOnyama Limba NEGOTIATION
Aika InouyeRussiaIvan Magalhaes PROPOSAL
Rodrigues CampainUnited KingdomAmy Elsner RENEWAL
Murillo MaletItalyBernardo Dominic NEW
Aruna FigeroaSpainAnna Fali NEW
Juan WieserSpainAmy Elsner NEGOTIATION
Ashley DoeItalyAsiya Javayant QUALIFIED
Isabel BowleyItalyAnna Fali UNQUALIFIED
Octavia MaletRussiaXuxue Feng QUALIFIED
Munro FerenczAustraliaElwin Sharvill PROPOSAL
Kadeem FlosiGermanyOnyama Limba QUALIFIED
Mujtaba NickaBrazilAnna Fali QUALIFIED
Mayumi KolmetzRussiaXuxue Feng RENEWAL
Darci PoquetteBrazilOnyama Limba NEGOTIATION
Wickens NestleJapanIoni Bowcher NEW
Ivar PaprockiAustraliaAsiya Javayant RENEWAL
James ButtSpainElwin Sharvill UNQUALIFIED
Clifford RimAustraliaAnna Fali NEW
Deepesh ChuiArgentinaXuxue Feng RENEWAL
Deepesh ChuiBrazilAsiya Javayant NEGOTIATION
Smith GlickIndiaXuxue Feng UNQUALIFIED
Kaitlin OstroskyArgentinaIoni Bowcher NEW
Smith GlickItalyAmy Elsner UNQUALIFIED
Ashley DoeIndiaOnyama Limba NEGOTIATION
Smith GlickCanadaAmy Elsner QUALIFIED
Murillo MaletFranceAsiya Javayant NEW
Jones VocelkaBrazilBernardo Dominic RENEWAL
Arvin AlbaresAustraliaAsiya Javayant NEW
Clifford RimUnited KingdomAnna Fali NEGOTIATION
Cody SaylorsRussiaBernardo Dominic NEW
Ashley DoeUnited KingdomXuxue Feng QUALIFIED
Maisha RulapaughItalyElwin Sharvill 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>