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
Octavia MaletFranceAmy Elsner QUALIFIED
Stacey MacleadFranceAsiya Javayant RENEWAL
Silvio SlusarskiItalyAmy Elsner UNQUALIFIED
Munro FerenczItalyIvan Magalhaes NEGOTIATION
Jefferson SchemmerFranceAmy Elsner NEGOTIATION
Chavez BriddickItalyIvan Magalhaes NEW
Faith GillianCanadaElwin Sharvill NEW
Jennifer AmigonIndiaStephen Shaw UNQUALIFIED
Aruna FigeroaCanadaElwin Sharvill UNQUALIFIED
Silvio SlusarskiArgentinaStephen Shaw PROPOSAL
Silvio SlusarskiAustraliaBernardo Dominic NEW
Kadeem FlosiIndiaIoni Bowcher PROPOSAL
Ashley DoeSpainAmy Elsner UNQUALIFIED
Costa DilliardRussiaAsiya Javayant PROPOSAL
Ricardo GauchoFranceIoni Bowcher UNQUALIFIED
Ivar PaprockiUnited KingdomBernardo Dominic QUALIFIED
Alejandro PerinArgentinaBernardo Dominic PROPOSAL
Aruna FigeroaFranceIvan Magalhaes RENEWAL
Munro FerenczArgentinaIoni Bowcher UNQUALIFIED
Johnson SergiCanadaAsiya Javayant RENEWAL
Misaki RoysterBrazilAmy Elsner RENEWAL
Morrow RutaGermanyAsiya Javayant NEGOTIATION
Francesco ShinkoGermanyBernardo Dominic RENEWAL
Sinclair WaycottSpainOnyama Limba RENEWAL
Jefferson SchemmerIndiaXuxue Feng RENEWAL
Darci PoquetteJapanBernardo Dominic NEGOTIATION
Julie StensethArgentinaXuxue Feng PROPOSAL
Faith GillianCanadaOnyama Limba NEW
Nicolas IturbideIndiaIoni Bowcher QUALIFIED
Alejandro PerinJapanOnyama Limba UNQUALIFIED
Alejandro PerinJapanXuxue Feng NEW
Leon OldroydGermanyBernardo Dominic PROPOSAL
Wickens NestleFranceOnyama Limba NEGOTIATION
Francesco ShinkoAustraliaElwin Sharvill NEW
Leja CaldareraUnited KingdomIvan Magalhaes NEGOTIATION
Smith GlickGermanyOnyama Limba NEGOTIATION
Julie StensethBrazilAsiya Javayant UNQUALIFIED
Aruna FigeroaJapanIoni Bowcher RENEWAL
Mayumi KolmetzRussiaAmy Elsner NEW
Munro FerenczItalyStephen Shaw NEGOTIATION
Smith GlickItalyAsiya Javayant NEGOTIATION
Darci PoquetteUnited KingdomIvan Magalhaes RENEWAL
James ButtBrazilIvan Magalhaes NEW
Tony FollerAustraliaIoni Bowcher UNQUALIFIED
Maisha RulapaughBrazilIoni Bowcher UNQUALIFIED
Deepesh ChuiItalyAmy Elsner PROPOSAL
Antonio CaudyArgentinaIoni Bowcher RENEWAL
Isabel BowleyArgentinaXuxue Feng RENEWAL
Ashley DoeItalyStephen Shaw UNQUALIFIED
Rodrigues CampainAustraliaAmy Elsner NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Juan WieserItalyIvan Magalhaes PROPOSAL
Costa DilliardItalyAsiya Javayant NEGOTIATION
Emily WhobreyGermanyIoni Bowcher PROPOSAL
Ricardo GauchoArgentinaOnyama Limba PROPOSAL
Aruna FigeroaSpainOnyama Limba PROPOSAL
Rodrigues CampainUnited KingdomIvan Magalhaes QUALIFIED
Leon OldroydFranceAmy Elsner RENEWAL
Juan WieserGermanyStephen Shaw UNQUALIFIED
Sinclair WaycottAustraliaElwin Sharvill NEW
Faith GillianIndiaAsiya Javayant PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Francesco ShinkoAustralia2025-10-11King, Christopher A Esq NEW12Ivan Magalhaes
1001Stacey MacleadIndia2025-11-03Chapman, Ross E Esq RENEWAL18Elwin Sharvill
1002Nicolas IturbideAustralia2025-10-12Commercial Press QUALIFIED99Asiya Javayant
1003Greenwood BologniaBrazil2025-11-02Chapman, Ross E Esq UNQUALIFIED41Ivan Magalhaes
1004Cody SaylorsBrazil2025-10-22Chapman, Ross E Esq PROPOSAL16Elwin Sharvill
1005Salvatore StockhamAustralia2025-10-27Truhlar And Truhlar Attys NEW18Stephen Shaw
1006Julie StensethJapan2025-10-24Commercial Press PROPOSAL31Stephen Shaw
1007Stacey MacleadUnited Kingdom2025-10-13King, Christopher A Esq NEW41Elwin Sharvill
1008Wickens NestleGermany2025-10-22King, Christopher A Esq UNQUALIFIED46Asiya Javayant
1009Izzy GarufiItaly2025-10-30Commercial Press NEGOTIATION99Stephen Shaw
1010Cody SaylorsArgentina2025-10-17Feltz Printing Service NEGOTIATION26Amy Elsner
1011Darci PoquetteArgentina2025-10-06Feiner Bros QUALIFIED1Elwin Sharvill
1012Julie StensethIndia2025-10-30Rousseaux, Michael Esq QUALIFIED79Xuxue Feng
1013David DarakjyAustralia2025-10-12Chanay, Jeffrey A Esq NEW85Asiya Javayant
1014Mujtaba NickaIndia2025-10-18Truhlar And Truhlar Attys NEW15Onyama Limba
1015Leon OldroydRussia2025-10-15Dorl, James J Esq RENEWAL72Xuxue Feng
1016James ButtUnited Kingdom2025-10-12Truhlar And Truhlar Attys NEW69Anna Fali
1017Sinclair WaycottFrance2025-10-26Commercial Press PROPOSAL92Anna Fali
1018David DarakjyRussia2025-10-15Rousseaux, Michael Esq RENEWAL70Asiya Javayant
1019Antonio CaudyUnited Kingdom2025-11-04Chapman, Ross E Esq QUALIFIED29Elwin Sharvill
1020Antonio CaudyBrazil2025-10-09Rousseaux, Michael Esq PROPOSAL92Anna Fali
1021Deepesh ChuiBrazil2025-10-12Chemel, James L Cpa UNQUALIFIED16Elwin Sharvill
1022Silvio SlusarskiBrazil2025-10-31Printing Dimensions UNQUALIFIED53Anna Fali
1023Isabel BowleyRussia2025-10-30Chapman, Ross E Esq RENEWAL10Elwin Sharvill
1024Salvatore StockhamAustralia2025-10-13Truhlar And Truhlar Attys PROPOSAL78Ivan Magalhaes
1025Deepesh ChuiRussia2025-10-08Feiner Bros NEW56Ioni Bowcher
1026Tony FollerIndia2025-10-31Dorl, James J Esq NEGOTIATION16Onyama Limba
1027Murillo MaletCanada2025-10-22Truhlar And Truhlar Attys NEGOTIATION44Anna Fali
1028Wickens NestleSpain2025-10-31King, Christopher A Esq NEGOTIATION25Asiya Javayant
1029Faith GillianJapan2025-10-29Rousseaux, Michael Esq NEGOTIATION57Xuxue Feng
1030Salvatore StockhamUnited Kingdom2025-10-15Chanay, Jeffrey A Esq NEGOTIATION22Onyama Limba
1031Julie StensethFrance2025-10-28Dorl, James J Esq NEGOTIATION57Asiya Javayant
1032Johnson SergiArgentina2025-10-30Commercial Press RENEWAL0Anna Fali
1033Ivar PaprockiFrance2025-10-11Truhlar And Truhlar Attys RENEWAL28Ivan Magalhaes
1034Deepesh ChuiUnited Kingdom2025-10-17Feiner Bros UNQUALIFIED33Asiya Javayant
1035Isabel BowleyJapan2025-11-03Feltz Printing Service QUALIFIED11Onyama Limba
1036Deepesh ChuiUnited Kingdom2025-11-01King, Christopher A Esq NEGOTIATION79Bernardo Dominic
1037Faith GillianAustralia2025-10-29Truhlar And Truhlar Attys RENEWAL8Amy Elsner
1038Adams MorascaCanada2025-10-22Feiner Bros PROPOSAL89Amy Elsner
1039Greenwood BologniaJapan2025-10-10Feltz Printing Service RENEWAL94Bernardo Dominic
1040Francesco ShinkoJapan2025-10-09Chemel, James L Cpa NEGOTIATION52Ivan Magalhaes
1041James ButtFrance2025-10-08Commercial Press UNQUALIFIED21Ioni Bowcher
1042Jeanfrancois VenereCanada2025-10-24Benton, John B Jr PROPOSAL54Onyama Limba
1043Morrow RutaRussia2025-10-11Rousseaux, Michael Esq RENEWAL31Onyama Limba
1044Munro FerenczIndia2025-10-11Feltz Printing Service UNQUALIFIED26Amy Elsner
1045Adams MorascaSpain2025-10-08Buckley Miller Wright PROPOSAL85Elwin Sharvill
1046Rodrigues CampainSpain2025-11-01Dorl, James J Esq NEW27Ivan Magalhaes
1047Wickens NestleIndia2025-11-01Chanay, Jeffrey A Esq RENEWAL51Asiya Javayant
1048Aika InouyeJapan2025-10-28Rangoni Of Florence NEW78Onyama Limba
1049Leja CaldareraItaly2025-10-27Chemel, James L Cpa RENEWAL18Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Aditya KuskoArgentinaElwin Sharvill RENEWAL
Emily WhobreyJapanAmy Elsner RENEWAL
Jeanfrancois VenereFranceIoni Bowcher RENEWAL
Ivar PaprockiJapanIoni Bowcher QUALIFIED
Adams MorascaCanadaAmy Elsner PROPOSAL
Kadeem FlosiCanadaBernardo Dominic RENEWAL
Salvatore StockhamCanadaStephen Shaw QUALIFIED
Claire TollnerJapanXuxue Feng QUALIFIED
Octavia MaletIndiaAnna Fali PROPOSAL
Salvatore StockhamGermanyIvan Magalhaes UNQUALIFIED
Smith GlickRussiaStephen Shaw PROPOSAL
Darci PoquetteGermanyIvan Magalhaes NEGOTIATION
Francesco ShinkoFranceXuxue Feng NEGOTIATION
Jennifer AmigonFranceIvan Magalhaes PROPOSAL
Aruna FigeroaFranceIoni Bowcher RENEWAL
Claire TollnerCanadaAsiya Javayant UNQUALIFIED
Munro FerenczItalyBernardo Dominic RENEWAL
Munro FerenczArgentinaIoni Bowcher NEW
Smith GlickGermanyStephen Shaw UNQUALIFIED
Jefferson SchemmerGermanyAmy Elsner NEGOTIATION
Ricardo GauchoIndiaIoni Bowcher NEW
Antonio CaudyItalyAnna Fali UNQUALIFIED
Aruna FigeroaBrazilAmy Elsner QUALIFIED
Chavez BriddickUnited KingdomStephen Shaw UNQUALIFIED
Octavia MaletCanadaOnyama Limba UNQUALIFIED
Sinclair WaycottJapanAnna Fali NEGOTIATION
Cody SaylorsUnited KingdomIoni Bowcher PROPOSAL
Mayumi KolmetzCanadaAmy Elsner UNQUALIFIED
Jennifer AmigonRussiaAnna Fali NEW
David DarakjyBrazilIoni Bowcher UNQUALIFIED
Antonio CaudyJapanIvan Magalhaes NEW
James ButtSpainIvan Magalhaes QUALIFIED
Francesco ShinkoBrazilIoni Bowcher QUALIFIED
Adams MorascaBrazilElwin Sharvill RENEWAL
Salvatore StockhamGermanyXuxue Feng RENEWAL
Aditya KuskoGermanyBernardo Dominic QUALIFIED
Morrow RutaIndiaXuxue Feng NEW
Alejandro PerinBrazilStephen Shaw RENEWAL
Silvio SlusarskiArgentinaOnyama Limba PROPOSAL
Antonio CaudyRussiaAmy Elsner UNQUALIFIED
Nicolas IturbideCanadaBernardo Dominic QUALIFIED
Arvin AlbaresJapanElwin Sharvill QUALIFIED
Ricardo GauchoIndiaOnyama Limba NEW
Francesco ShinkoArgentinaElwin Sharvill UNQUALIFIED
Tony FollerArgentinaAnna Fali RENEWAL
Faith GillianUnited KingdomElwin Sharvill QUALIFIED
Julie StensethIndiaOnyama Limba UNQUALIFIED
Wickens NestleRussiaAsiya Javayant QUALIFIED
Ivar PaprockiFranceBernardo Dominic QUALIFIED
Johnson SergiGermanyIoni Bowcher UNQUALIFIED
Frozen Columns
Name
Maisha Rulapaugh
Costa Dilliard
Darci Poquette
Stacey Maclead
Jeanfrancois Venere
Emily Whobrey
Faith Gillian
Isabel Bowley
Jones Vocelka
Smith Glick
Munro Ferencz
Francesco Shinko
Chavez Briddick
Jennifer Amigon
Mayumi Kolmetz
Cody Saylors
Ivar Paprocki
Kadeem Flosi
Alejandro Perin
Morrow Ruta
Costa Dilliard
Chavez Briddick
Maria Marrier
Silvio Slusarski
James Butt
Sinclair Waycott
Jones Vocelka
Juan Wieser
Chavez Briddick
Wickens Nestle
Octavia Malet
Alejandro Perin
Ricardo Gaucho
Leon Oldroyd
Chavez Briddick
Smith Glick
Smith Glick
Smith Glick
Tony Foller
Rodrigues Campain
David Darakjy
Clifford Rim
Morrow Ruta
Octavia Malet
Julie Stenseth
David Darakjy
Leja Caldarera
Kaitlin Ostrosky
Francesco Shinko
Ashley Doe
IdCountryDate
1000United Kingdom2025-10-06
1001United Kingdom2025-10-14
1002Russia2025-10-21
1003Japan2025-10-12
1004Argentina2025-10-24
1005Germany2025-10-20
1006Russia2025-10-17
1007Canada2025-11-03
1008Brazil2025-10-14
1009Brazil2025-10-18
1010Brazil2025-10-28
1011France2025-10-08
1012Italy2025-10-30
1013Australia2025-10-13
1014Brazil2025-10-19
1015Japan2025-10-30
1016Australia2025-10-12
1017Brazil2025-10-15
1018Australia2025-10-06
1019Argentina2025-11-03
1020India2025-10-27
1021Italy2025-10-06
1022Spain2025-11-01
1023Argentina2025-10-07
1024Canada2025-10-15
1025Japan2025-10-30
1026United Kingdom2025-10-07
1027France2025-10-29
1028France2025-10-09
1029Argentina2025-10-20
1030Italy2025-11-01
1031Italy2025-10-10
1032United Kingdom2025-10-12
1033Brazil2025-10-24
1034Russia2025-10-16
1035Italy2025-10-18
1036Germany2025-10-31
1037India2025-10-11
1038Italy2025-11-04
1039Italy2025-10-13
1040Italy2025-10-06
1041Italy2025-10-25
1042Australia2025-11-01
1043Australia2025-10-27
1044United Kingdom2025-10-16
1045India2025-10-11
1046India2025-10-15
1047Germany2025-10-16
1048Australia2025-10-12
1049Spain2025-10-23

On-Demand Data

NameIdCountryDate
Smith Glick1000France2025-10-29
Francesco Shinko1001Canada2025-10-21
Alejandro Perin1002Germany2025-10-25
Jeanfrancois Venere1003United Kingdom2025-10-26
Octavia Malet1004Russia2025-10-25
Izzy Garufi1005Japan2025-11-03
Adams Morasca1006Canada2025-10-11
Stacey Maclead1007Argentina2025-10-29
Costa Dilliard1008Spain2025-10-29
Johnson Sergi1009Brazil2025-10-18
Aika Inouye1010France2025-11-03
Aika Inouye1011Spain2025-10-13
Emily Whobrey1012Australia2025-10-21
Antonio Caudy1013Argentina2025-10-21
Julie Stenseth1014Japan2025-10-06
Kadeem Flosi1015France2025-10-21
Francesco Shinko1016Spain2025-10-14
Morrow Ruta1017Argentina2025-10-19
Jefferson Schemmer1018India2025-10-22
Rodrigues Campain1019Italy2025-10-10
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Izzy GarufiAustraliaOnyama Limba NEW
Clifford RimSpainOnyama Limba NEGOTIATION
Leon OldroydFranceIoni Bowcher NEGOTIATION
David DarakjyItalyIvan Magalhaes RENEWAL
Faith GillianUnited KingdomIvan Magalhaes NEGOTIATION
Chavez BriddickSpainAmy Elsner NEGOTIATION
Chavez BriddickFranceBernardo Dominic NEGOTIATION
Leon OldroydCanadaIvan Magalhaes QUALIFIED
Arvin AlbaresArgentinaBernardo Dominic UNQUALIFIED
Johnson SergiUnited KingdomStephen Shaw NEW
Cody SaylorsGermanyAsiya Javayant RENEWAL
Greenwood BologniaItalyIvan Magalhaes RENEWAL
Antonio CaudyArgentinaElwin Sharvill QUALIFIED
Jennifer AmigonCanadaStephen Shaw QUALIFIED
Kadeem FlosiFranceAnna Fali NEGOTIATION
Leon OldroydArgentinaStephen Shaw RENEWAL
Johnson SergiFranceIoni Bowcher NEGOTIATION
Salvatore StockhamJapanOnyama Limba RENEWAL
Munro FerenczItalyBernardo Dominic RENEWAL
Clifford RimArgentinaIvan Magalhaes PROPOSAL
Maisha RulapaughBrazilStephen Shaw UNQUALIFIED
Chavez BriddickArgentinaIoni Bowcher UNQUALIFIED
Arvin AlbaresRussiaElwin Sharvill UNQUALIFIED
Arvin AlbaresAustraliaIoni Bowcher NEGOTIATION
Rodrigues CampainFranceElwin Sharvill QUALIFIED
Kaitlin OstroskyAustraliaAsiya Javayant UNQUALIFIED
Morrow RutaItalyXuxue Feng NEGOTIATION
Julie StensethArgentinaIoni Bowcher QUALIFIED
Jones VocelkaAustraliaIvan Magalhaes NEW
Silvio SlusarskiAustraliaXuxue Feng RENEWAL
Mujtaba NickaJapanIoni Bowcher RENEWAL
Munro FerenczArgentinaAnna Fali NEGOTIATION
Rodrigues CampainFranceIoni Bowcher QUALIFIED
Maisha RulapaughBrazilXuxue Feng UNQUALIFIED
Aditya KuskoBrazilIoni Bowcher PROPOSAL
Jefferson SchemmerItalyStephen Shaw UNQUALIFIED
Morrow RutaUnited KingdomAmy Elsner QUALIFIED
Smith GlickIndiaStephen Shaw RENEWAL
Morrow RutaGermanyOnyama Limba NEW
Adams MorascaGermanyAsiya Javayant 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>