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
David DarakjyIndiaAnna Fali PROPOSAL
Morrow RutaIndiaAsiya Javayant PROPOSAL
Mujtaba NickaSpainAsiya Javayant QUALIFIED
Jefferson SchemmerFranceAmy Elsner NEGOTIATION
Johnson SergiBrazilAnna Fali PROPOSAL
Antonio CaudyIndiaAmy Elsner NEW
Darci PoquetteBrazilXuxue Feng UNQUALIFIED
Alejandro PerinJapanAmy Elsner NEGOTIATION
Mayumi KolmetzBrazilBernardo Dominic PROPOSAL
Maisha RulapaughBrazilElwin Sharvill RENEWAL
Wickens NestleItalyIoni Bowcher NEGOTIATION
Cody SaylorsCanadaAsiya Javayant QUALIFIED
Jones VocelkaUnited KingdomOnyama Limba QUALIFIED
Chavez BriddickCanadaBernardo Dominic PROPOSAL
Stacey MacleadRussiaAmy Elsner RENEWAL
Jones VocelkaArgentinaElwin Sharvill NEGOTIATION
Munro FerenczSpainOnyama Limba QUALIFIED
Adams MorascaRussiaAsiya Javayant NEGOTIATION
David DarakjyAustraliaAmy Elsner QUALIFIED
James ButtUnited KingdomAsiya Javayant RENEWAL
Stacey MacleadArgentinaAmy Elsner QUALIFIED
Jennifer AmigonArgentinaAmy Elsner NEGOTIATION
Nicolas IturbideIndiaBernardo Dominic RENEWAL
Wickens NestleUnited KingdomIoni Bowcher QUALIFIED
Arvin AlbaresJapanBernardo Dominic QUALIFIED
Darci PoquetteItalyOnyama Limba UNQUALIFIED
Emily WhobreyItalyIoni Bowcher PROPOSAL
Jefferson SchemmerSpainElwin Sharvill QUALIFIED
Silvio SlusarskiJapanAmy Elsner PROPOSAL
Mujtaba NickaAustraliaAsiya Javayant UNQUALIFIED
Greenwood BologniaBrazilAmy Elsner QUALIFIED
Clifford RimJapanBernardo Dominic RENEWAL
Rodrigues CampainUnited KingdomAsiya Javayant NEGOTIATION
Octavia MaletUnited KingdomIvan Magalhaes PROPOSAL
Mayumi KolmetzSpainElwin Sharvill UNQUALIFIED
Arvin AlbaresUnited KingdomXuxue Feng NEW
Jones VocelkaAustraliaIoni Bowcher RENEWAL
Johnson SergiIndiaStephen Shaw PROPOSAL
Greenwood BologniaBrazilIvan Magalhaes PROPOSAL
Juan WieserBrazilXuxue Feng NEW
Mujtaba NickaRussiaIoni Bowcher NEGOTIATION
Clifford RimRussiaAsiya Javayant QUALIFIED
Morrow RutaRussiaStephen Shaw RENEWAL
Faith GillianFranceAnna Fali RENEWAL
Julie StensethUnited KingdomBernardo Dominic NEGOTIATION
Misaki RoysterItalyBernardo Dominic NEGOTIATION
Kaitlin OstroskyCanadaXuxue Feng UNQUALIFIED
Chavez BriddickUnited KingdomIvan Magalhaes PROPOSAL
Juan WieserArgentinaBernardo Dominic PROPOSAL
Juan WieserItalyAnna Fali NEW
Horizontal
NameCountryRepresentativeStatus
Antonio CaudyRussiaIvan Magalhaes RENEWAL
David DarakjyJapanAmy Elsner NEGOTIATION
Jefferson SchemmerFranceBernardo Dominic QUALIFIED
Darci PoquetteGermanyOnyama Limba RENEWAL
Adams MorascaSpainAmy Elsner RENEWAL
Stacey MacleadItalyOnyama Limba PROPOSAL
Alejandro PerinSpainAsiya Javayant UNQUALIFIED
James ButtSpainOnyama Limba NEGOTIATION
Nicolas IturbideSpainAmy Elsner UNQUALIFIED
Costa DilliardArgentinaBernardo Dominic NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Deepesh ChuiRussia2025-07-30Chemel, James L Cpa NEGOTIATION40Ioni Bowcher
1001Ashley DoeUnited Kingdom2025-07-14Commercial Press RENEWAL75Bernardo Dominic
1002Salvatore StockhamFrance2025-07-24Feltz Printing Service RENEWAL26Xuxue Feng
1003Leon OldroydAustralia2025-07-27Chanay, Jeffrey A Esq QUALIFIED49Elwin Sharvill
1004Emily WhobreyRussia2025-08-03Buckley Miller Wright NEW41Onyama Limba
1005Ashley DoeBrazil2025-07-19Buckley Miller Wright QUALIFIED40Bernardo Dominic
1006Arvin AlbaresFrance2025-08-05Rousseaux, Michael Esq RENEWAL74Ivan Magalhaes
1007Cody SaylorsIndia2025-07-18Buckley Miller Wright PROPOSAL25Elwin Sharvill
1008Maisha RulapaughSpain2025-07-24Truhlar And Truhlar Attys PROPOSAL38Amy Elsner
1009Jeanfrancois VenereIndia2025-07-23Truhlar And Truhlar Attys NEGOTIATION84Ivan Magalhaes
1010Wickens NestleRussia2025-08-04Buckley Miller Wright UNQUALIFIED49Stephen Shaw
1011Leja CaldareraFrance2025-07-19Dorl, James J Esq PROPOSAL53Stephen Shaw
1012Francesco ShinkoSpain2025-07-09Feltz Printing Service RENEWAL53Ivan Magalhaes
1013Clifford RimItaly2025-07-16Printing Dimensions QUALIFIED77Xuxue Feng
1014Leja CaldareraBrazil2025-07-23Rangoni Of Florence NEGOTIATION79Ivan Magalhaes
1015Darci PoquetteIndia2025-07-09Chemel, James L Cpa UNQUALIFIED2Asiya Javayant
1016Maisha RulapaughAustralia2025-08-05Feiner Bros RENEWAL37Stephen Shaw
1017Sinclair WaycottIndia2025-07-22Chapman, Ross E Esq RENEWAL75Stephen Shaw
1018Tony FollerSpain2025-07-14Benton, John B Jr RENEWAL86Ioni Bowcher
1019Jennifer AmigonRussia2025-07-31King, Christopher A Esq RENEWAL10Ivan Magalhaes
1020Francesco ShinkoItaly2025-07-14Chapman, Ross E Esq NEGOTIATION42Elwin Sharvill
1021Francesco ShinkoItaly2025-07-18Chapman, Ross E Esq RENEWAL63Stephen Shaw
1022Munro FerenczItaly2025-07-31Chemel, James L Cpa UNQUALIFIED53Xuxue Feng
1023Darci PoquetteBrazil2025-07-15Printing Dimensions UNQUALIFIED93Stephen Shaw
1024David DarakjyAustralia2025-07-17Chapman, Ross E Esq UNQUALIFIED77Elwin Sharvill
1025Emily WhobreyJapan2025-08-07Rousseaux, Michael Esq RENEWAL3Stephen Shaw
1026David DarakjyUnited Kingdom2025-07-17Printing Dimensions PROPOSAL26Xuxue Feng
1027Arvin AlbaresGermany2025-07-24Rousseaux, Michael Esq RENEWAL69Asiya Javayant
1028Arvin AlbaresAustralia2025-07-11Buckley Miller Wright NEGOTIATION20Ioni Bowcher
1029Stacey MacleadBrazil2025-07-14Morlong Associates NEGOTIATION51Stephen Shaw
1030Leja CaldareraFrance2025-08-01Dorl, James J Esq QUALIFIED3Anna Fali
1031Murillo MaletFrance2025-07-14Chemel, James L Cpa PROPOSAL58Elwin Sharvill
1032Salvatore StockhamBrazil2025-07-31Buckley Miller Wright RENEWAL51Elwin Sharvill
1033Arvin AlbaresFrance2025-07-23Truhlar And Truhlar Attys PROPOSAL74Ioni Bowcher
1034Kaitlin OstroskySpain2025-07-13Chemel, James L Cpa NEGOTIATION19Anna Fali
1035Jefferson SchemmerAustralia2025-07-17Commercial Press UNQUALIFIED86Ivan Magalhaes
1036Isabel BowleyItaly2025-07-22Benton, John B Jr NEGOTIATION37Amy Elsner
1037Leja CaldareraCanada2025-07-19Benton, John B Jr UNQUALIFIED78Xuxue Feng
1038Misaki RoysterIndia2025-07-15Benton, John B Jr NEGOTIATION96Ioni Bowcher
1039Rodrigues CampainBrazil2025-07-27Commercial Press RENEWAL59Amy Elsner
1040Jeanfrancois VenereCanada2025-08-07Buckley Miller Wright UNQUALIFIED37Xuxue Feng
1041Misaki RoysterBrazil2025-07-09Feltz Printing Service PROPOSAL8Stephen Shaw
1042Leja CaldareraFrance2025-07-21Chapman, Ross E Esq RENEWAL12Amy Elsner
1043Leja CaldareraRussia2025-08-06Rangoni Of Florence UNQUALIFIED24Stephen Shaw
1044Kaitlin OstroskyArgentina2025-08-05Printing Dimensions QUALIFIED34Amy Elsner
1045Johnson SergiRussia2025-07-12Rangoni Of Florence PROPOSAL24Ioni Bowcher
1046Julie StensethGermany2025-08-04Truhlar And Truhlar Attys PROPOSAL52Bernardo Dominic
1047Cody SaylorsGermany2025-08-02Rangoni Of Florence UNQUALIFIED61Ivan Magalhaes
1048Ricardo GauchoCanada2025-07-30Buckley Miller Wright QUALIFIED96Xuxue Feng
1049Jeanfrancois VenereItaly2025-08-06Rousseaux, Michael Esq RENEWAL15Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Kaitlin OstroskyUnited KingdomIoni Bowcher NEW
Murillo MaletCanadaIoni Bowcher NEGOTIATION
Smith GlickArgentinaAmy Elsner NEW
Morrow RutaJapanAmy Elsner PROPOSAL
Rodrigues CampainJapanAnna Fali PROPOSAL
Aditya KuskoFranceIvan Magalhaes RENEWAL
Arvin AlbaresBrazilIoni Bowcher UNQUALIFIED
Jefferson SchemmerRussiaAnna Fali RENEWAL
Emily WhobreyIndiaIoni Bowcher NEGOTIATION
Aditya KuskoGermanyIoni Bowcher PROPOSAL
Salvatore StockhamAustraliaAsiya Javayant PROPOSAL
Maria MarrierIndiaAnna Fali NEW
Jefferson SchemmerFranceAnna Fali QUALIFIED
Smith GlickArgentinaOnyama Limba UNQUALIFIED
Aruna FigeroaBrazilIvan Magalhaes NEGOTIATION
Adams MorascaJapanElwin Sharvill PROPOSAL
Arvin AlbaresAustraliaIoni Bowcher UNQUALIFIED
Rodrigues CampainGermanyBernardo Dominic QUALIFIED
Smith GlickFranceIoni Bowcher NEW
Smith GlickBrazilStephen Shaw UNQUALIFIED
Tony FollerGermanyElwin Sharvill RENEWAL
Ashley DoeFranceAnna Fali RENEWAL
Aditya KuskoUnited KingdomAsiya Javayant RENEWAL
Mayumi KolmetzCanadaAmy Elsner NEW
Misaki RoysterAustraliaIoni Bowcher PROPOSAL
Maria MarrierCanadaBernardo Dominic RENEWAL
Silvio SlusarskiFranceBernardo Dominic QUALIFIED
Murillo MaletJapanAmy Elsner PROPOSAL
Munro FerenczBrazilBernardo Dominic UNQUALIFIED
Aditya KuskoBrazilIvan Magalhaes QUALIFIED
Ivar PaprockiUnited KingdomBernardo Dominic RENEWAL
Francesco ShinkoArgentinaAsiya Javayant NEGOTIATION
Mayumi KolmetzArgentinaBernardo Dominic NEW
Maisha RulapaughAustraliaStephen Shaw PROPOSAL
Aika InouyeArgentinaXuxue Feng QUALIFIED
Jennifer AmigonFranceAmy Elsner PROPOSAL
Aruna FigeroaIndiaIvan Magalhaes QUALIFIED
Mujtaba NickaBrazilAmy Elsner RENEWAL
Ivar PaprockiFranceStephen Shaw RENEWAL
Ricardo GauchoFranceStephen Shaw NEW
Julie StensethAustraliaElwin Sharvill QUALIFIED
Stacey MacleadBrazilElwin Sharvill UNQUALIFIED
Rodrigues CampainJapanBernardo Dominic PROPOSAL
Johnson SergiCanadaIvan Magalhaes NEW
Misaki RoysterRussiaXuxue Feng RENEWAL
Salvatore StockhamGermanyXuxue Feng NEW
Octavia MaletSpainAnna Fali PROPOSAL
Mujtaba NickaGermanyAnna Fali NEW
Aditya KuskoItalyXuxue Feng NEGOTIATION
Francesco ShinkoRussiaIvan Magalhaes QUALIFIED
Frozen Columns
Name
Mayumi Kolmetz
Wickens Nestle
Greenwood Bolognia
Morrow Ruta
Antonio Caudy
Munro Ferencz
Rodrigues Campain
Sinclair Waycott
Julie Stenseth
Leja Caldarera
Cody Saylors
Sinclair Waycott
Chavez Briddick
Jefferson Schemmer
David Darakjy
Mayumi Kolmetz
Adams Morasca
Rodrigues Campain
Ashley Doe
Aruna Figeroa
Leon Oldroyd
Claire Tollner
Stacey Maclead
Stacey Maclead
Ricardo Gaucho
Aditya Kusko
Adams Morasca
Stacey Maclead
Ricardo Gaucho
Alejandro Perin
Sinclair Waycott
Aika Inouye
Aditya Kusko
Aruna Figeroa
Costa Dilliard
Octavia Malet
Wickens Nestle
Aditya Kusko
Aditya Kusko
Ashley Doe
Aruna Figeroa
Julie Stenseth
Jennifer Amigon
Arvin Albares
Sinclair Waycott
Deepesh Chui
Darci Poquette
Aika Inouye
Izzy Garufi
Arvin Albares
IdCountryDate
1000Russia2025-07-12
1001France2025-07-20
1002Italy2025-08-07
1003United Kingdom2025-07-11
1004Spain2025-07-09
1005Germany2025-07-17
1006Japan2025-07-13
1007Germany2025-07-23
1008Canada2025-07-28
1009United Kingdom2025-07-16
1010France2025-08-05
1011Japan2025-07-20
1012Argentina2025-07-24
1013United Kingdom2025-07-21
1014Argentina2025-07-14
1015Italy2025-07-22
1016Russia2025-07-17
1017India2025-07-30
1018Canada2025-07-10
1019United Kingdom2025-08-05
1020United Kingdom2025-07-16
1021Japan2025-07-16
1022Australia2025-07-24
1023Russia2025-07-23
1024Germany2025-07-30
1025Russia2025-07-25
1026Italy2025-07-26
1027Argentina2025-07-15
1028Brazil2025-07-29
1029Germany2025-07-12
1030Germany2025-07-22
1031Spain2025-08-04
1032Italy2025-07-10
1033Italy2025-07-27
1034Australia2025-07-22
1035Japan2025-07-10
1036Germany2025-07-25
1037Japan2025-07-25
1038Canada2025-07-15
1039Russia2025-07-11
1040United Kingdom2025-07-20
1041Canada2025-07-25
1042Japan2025-08-03
1043Russia2025-08-03
1044Argentina2025-07-31
1045Japan2025-07-09
1046Japan2025-07-20
1047Australia2025-08-02
1048Italy2025-08-06
1049Brazil2025-08-06

On-Demand Data

NameIdCountryDate
Arvin Albares1000Spain2025-08-04
Kaitlin Ostrosky1001Spain2025-07-28
Jeanfrancois Venere1002Germany2025-07-17
Maria Marrier1003Brazil2025-07-31
Smith Glick1004Japan2025-07-09
Antonio Caudy1005Japan2025-07-28
Kadeem Flosi1006Brazil2025-07-23
Chavez Briddick1007France2025-08-05
Isabel Bowley1008Argentina2025-07-28
Jefferson Schemmer1009Italy2025-08-01
Jones Vocelka1010Italy2025-08-02
Jones Vocelka1011United Kingdom2025-08-07
Maria Marrier1012Australia2025-07-21
Leon Oldroyd1013Brazil2025-07-27
Deepesh Chui1014Canada2025-07-20
Claire Tollner1015United Kingdom2025-07-11
Francesco Shinko1016Argentina2025-07-19
Maisha Rulapaugh1017Brazil2025-08-02
Deepesh Chui1018India2025-08-02
Aruna Figeroa1019Canada2025-07-27
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Alejandro PerinAustraliaXuxue Feng PROPOSAL
Jefferson SchemmerRussiaXuxue Feng RENEWAL
Mujtaba NickaItalyStephen Shaw PROPOSAL
Francesco ShinkoBrazilXuxue Feng PROPOSAL
Tony FollerArgentinaAmy Elsner NEW
James ButtIndiaBernardo Dominic UNQUALIFIED
Murillo MaletBrazilXuxue Feng UNQUALIFIED
Julie StensethBrazilBernardo Dominic PROPOSAL
Deepesh ChuiFranceOnyama Limba RENEWAL
Francesco ShinkoUnited KingdomAmy Elsner NEW
Faith GillianSpainAsiya Javayant NEW
Greenwood BologniaItalyStephen Shaw RENEWAL
Jefferson SchemmerCanadaAmy Elsner PROPOSAL
Misaki RoysterRussiaElwin Sharvill NEW
Alejandro PerinItalyStephen Shaw RENEWAL
Johnson SergiUnited KingdomIvan Magalhaes QUALIFIED
Adams MorascaArgentinaElwin Sharvill RENEWAL
Sinclair WaycottAustraliaElwin Sharvill RENEWAL
Izzy GarufiSpainBernardo Dominic UNQUALIFIED
Aruna FigeroaAustraliaAmy Elsner NEW
Nicolas IturbideCanadaOnyama Limba PROPOSAL
Silvio SlusarskiItalyIoni Bowcher RENEWAL
Misaki RoysterItalyAmy Elsner NEW
Jones VocelkaJapanAsiya Javayant QUALIFIED
James ButtAustraliaIvan Magalhaes RENEWAL
Jones VocelkaAustraliaBernardo Dominic NEGOTIATION
Aruna FigeroaAustraliaElwin Sharvill RENEWAL
Ricardo GauchoRussiaXuxue Feng NEGOTIATION
Morrow RutaGermanyAnna Fali NEW
Kaitlin OstroskyUnited KingdomOnyama Limba PROPOSAL
Leon OldroydArgentinaBernardo Dominic RENEWAL
Juan WieserBrazilBernardo Dominic NEW
Jennifer AmigonIndiaAsiya Javayant QUALIFIED
Arvin AlbaresBrazilAsiya Javayant RENEWAL
Silvio SlusarskiIndiaAnna Fali QUALIFIED
Nicolas IturbideUnited KingdomOnyama Limba RENEWAL
Arvin AlbaresUnited KingdomElwin Sharvill PROPOSAL
David DarakjyIndiaOnyama Limba UNQUALIFIED
Morrow RutaRussiaBernardo Dominic QUALIFIED
Izzy GarufiBrazilOnyama 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>