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
Kadeem FlosiAustraliaXuxue Feng RENEWAL
Arvin AlbaresCanadaAnna Fali RENEWAL
Adams MorascaSpainIoni Bowcher NEGOTIATION
Ashley DoeJapanBernardo Dominic RENEWAL
James ButtRussiaAsiya Javayant PROPOSAL
Sinclair WaycottItalyAmy Elsner RENEWAL
Smith GlickBrazilBernardo Dominic UNQUALIFIED
David DarakjyCanadaIvan Magalhaes RENEWAL
Maria MarrierAustraliaAmy Elsner PROPOSAL
Stacey MacleadBrazilElwin Sharvill PROPOSAL
Mayumi KolmetzAustraliaAnna Fali NEW
Nicolas IturbideArgentinaIoni Bowcher NEGOTIATION
Alejandro PerinArgentinaBernardo Dominic NEGOTIATION
Wickens NestleIndiaStephen Shaw PROPOSAL
Greenwood BologniaArgentinaIoni Bowcher QUALIFIED
Arvin AlbaresRussiaAnna Fali PROPOSAL
Francesco ShinkoIndiaIvan Magalhaes NEGOTIATION
Leon OldroydFranceIoni Bowcher PROPOSAL
Cody SaylorsArgentinaAmy Elsner PROPOSAL
Francesco ShinkoIndiaAnna Fali NEW
Adams MorascaIndiaElwin Sharvill QUALIFIED
Greenwood BologniaIndiaAnna Fali NEGOTIATION
Morrow RutaCanadaElwin Sharvill RENEWAL
Kadeem FlosiBrazilXuxue Feng NEW
Kaitlin OstroskyUnited KingdomAsiya Javayant NEGOTIATION
Alejandro PerinRussiaXuxue Feng PROPOSAL
Adams MorascaItalyElwin Sharvill PROPOSAL
Morrow RutaItalyBernardo Dominic UNQUALIFIED
Murillo MaletAustraliaAsiya Javayant NEGOTIATION
Tony FollerBrazilIoni Bowcher PROPOSAL
Johnson SergiBrazilStephen Shaw NEW
Leon OldroydBrazilIoni Bowcher UNQUALIFIED
Adams MorascaFranceAsiya Javayant QUALIFIED
Mujtaba NickaGermanyStephen Shaw NEGOTIATION
Francesco ShinkoBrazilIvan Magalhaes NEW
Nicolas IturbideSpainElwin Sharvill RENEWAL
David DarakjyItalyAmy Elsner RENEWAL
Jeanfrancois VenereCanadaAmy Elsner PROPOSAL
Stacey MacleadAustraliaOnyama Limba UNQUALIFIED
Darci PoquetteCanadaOnyama Limba RENEWAL
Darci PoquetteFranceIoni Bowcher QUALIFIED
Claire TollnerJapanStephen Shaw PROPOSAL
Smith GlickAustraliaAsiya Javayant NEGOTIATION
Adams MorascaGermanyStephen Shaw RENEWAL
Chavez BriddickFranceElwin Sharvill UNQUALIFIED
Sinclair WaycottGermanyOnyama Limba RENEWAL
Rodrigues CampainJapanIoni Bowcher RENEWAL
James ButtArgentinaIvan Magalhaes NEW
Aditya KuskoFranceIvan Magalhaes RENEWAL
Jones VocelkaArgentinaXuxue Feng UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Aditya KuskoGermanyAnna Fali NEW
Arvin AlbaresCanadaIvan Magalhaes NEW
Juan WieserAustraliaAmy Elsner QUALIFIED
Munro FerenczJapanXuxue Feng RENEWAL
Misaki RoysterCanadaAmy Elsner NEGOTIATION
Francesco ShinkoFranceAnna Fali UNQUALIFIED
Johnson SergiBrazilIoni Bowcher PROPOSAL
Smith GlickFranceOnyama Limba NEW
Emily WhobreyUnited KingdomIoni Bowcher NEW
Aika InouyeJapanIoni Bowcher NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Alejandro PerinSpain2025-10-06Rangoni Of Florence QUALIFIED75Anna Fali
1001Maria MarrierUnited Kingdom2025-10-12Commercial Press PROPOSAL81Amy Elsner
1002Jeanfrancois VenereUnited Kingdom2025-09-21Rousseaux, Michael Esq QUALIFIED21Stephen Shaw
1003Julie StensethIndia2025-09-25Rangoni Of Florence RENEWAL80Onyama Limba
1004Nicolas IturbideAustralia2025-09-27Printing Dimensions UNQUALIFIED55Bernardo Dominic
1005Kaitlin OstroskyRussia2025-09-27Dorl, James J Esq NEGOTIATION15Ioni Bowcher
1006James ButtCanada2025-10-03Truhlar And Truhlar Attys QUALIFIED82Onyama Limba
1007Deepesh ChuiFrance2025-09-25Rangoni Of Florence NEGOTIATION11Bernardo Dominic
1008Isabel BowleyJapan2025-10-01Chemel, James L Cpa QUALIFIED63Ivan Magalhaes
1009Mayumi KolmetzGermany2025-09-21Chapman, Ross E Esq NEW62Ioni Bowcher
1010Nicolas IturbideCanada2025-10-09Chapman, Ross E Esq NEGOTIATION24Elwin Sharvill
1011Arvin AlbaresAustralia2025-10-07Rousseaux, Michael Esq NEW34Ivan Magalhaes
1012Claire TollnerIndia2025-09-25Benton, John B Jr NEGOTIATION50Anna Fali
1013Darci PoquetteSpain2025-10-08Dorl, James J Esq UNQUALIFIED68Ivan Magalhaes
1014Kaitlin OstroskyFrance2025-09-27Feiner Bros NEGOTIATION57Ivan Magalhaes
1015Maria MarrierRussia2025-09-19Commercial Press QUALIFIED81Asiya Javayant
1016Costa DilliardAustralia2025-09-28King, Christopher A Esq PROPOSAL59Amy Elsner
1017Octavia MaletRussia2025-10-14Buckley Miller Wright NEGOTIATION73Elwin Sharvill
1018Aruna FigeroaUnited Kingdom2025-10-05Chanay, Jeffrey A Esq RENEWAL88Asiya Javayant
1019Nicolas IturbideJapan2025-09-26Rousseaux, Michael Esq QUALIFIED23Onyama Limba
1020Maisha RulapaughRussia2025-09-30Benton, John B Jr RENEWAL50Amy Elsner
1021Izzy GarufiItaly2025-10-05Chanay, Jeffrey A Esq QUALIFIED31Bernardo Dominic
1022Salvatore StockhamIndia2025-10-04Chapman, Ross E Esq UNQUALIFIED21Elwin Sharvill
1023Kaitlin OstroskyRussia2025-10-08Morlong Associates QUALIFIED59Ivan Magalhaes
1024Murillo MaletItaly2025-09-23Feiner Bros UNQUALIFIED78Ioni Bowcher
1025Isabel BowleyItaly2025-09-16Chemel, James L Cpa NEW50Asiya Javayant
1026Ashley DoeGermany2025-10-14Chapman, Ross E Esq PROPOSAL25Asiya Javayant
1027Munro FerenczJapan2025-09-18Rangoni Of Florence RENEWAL79Onyama Limba
1028Murillo MaletAustralia2025-09-20Rangoni Of Florence NEGOTIATION67Stephen Shaw
1029Jeanfrancois VenereFrance2025-09-23Chanay, Jeffrey A Esq UNQUALIFIED81Bernardo Dominic
1030Leja CaldareraFrance2025-09-18Rangoni Of Florence RENEWAL57Elwin Sharvill
1031Ivar PaprockiCanada2025-09-17Rangoni Of Florence PROPOSAL81Ioni Bowcher
1032Maria MarrierGermany2025-09-17Dorl, James J Esq PROPOSAL48Asiya Javayant
1033Isabel BowleyBrazil2025-09-29Chapman, Ross E Esq RENEWAL12Asiya Javayant
1034Smith GlickArgentina2025-10-12Dorl, James J Esq UNQUALIFIED66Asiya Javayant
1035Stacey MacleadRussia2025-09-24Printing Dimensions NEGOTIATION73Onyama Limba
1036Johnson SergiJapan2025-09-24Chemel, James L Cpa PROPOSAL6Xuxue Feng
1037Sinclair WaycottGermany2025-09-21Chapman, Ross E Esq NEW67Asiya Javayant
1038Stacey MacleadItaly2025-10-14Feltz Printing Service NEGOTIATION68Ioni Bowcher
1039Izzy GarufiIndia2025-10-08Chapman, Ross E Esq UNQUALIFIED49Bernardo Dominic
1040Wickens NestleAustralia2025-09-27Benton, John B Jr RENEWAL49Bernardo Dominic
1041Aika InouyeIndia2025-10-14Benton, John B Jr QUALIFIED48Xuxue Feng
1042Octavia MaletArgentina2025-09-28Morlong Associates PROPOSAL60Ivan Magalhaes
1043Arvin AlbaresSpain2025-09-30Rangoni Of Florence NEGOTIATION76Amy Elsner
1044Salvatore StockhamItaly2025-09-24Truhlar And Truhlar Attys NEW34Xuxue Feng
1045Octavia MaletGermany2025-09-16Rangoni Of Florence NEGOTIATION78Elwin Sharvill
1046Sinclair WaycottJapan2025-10-12Rangoni Of Florence PROPOSAL86Xuxue Feng
1047Munro FerenczRussia2025-10-11Printing Dimensions NEGOTIATION58Ivan Magalhaes
1048Stacey MacleadJapan2025-10-09Rangoni Of Florence NEW54Bernardo Dominic
1049Jones VocelkaArgentina2025-10-11Rangoni Of Florence QUALIFIED81Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Nicolas IturbideAustraliaXuxue Feng NEGOTIATION
Izzy GarufiJapanAmy Elsner RENEWAL
Nicolas IturbideArgentinaAnna Fali NEGOTIATION
Mujtaba NickaArgentinaElwin Sharvill RENEWAL
Smith GlickArgentinaIvan Magalhaes RENEWAL
Smith GlickAustraliaAnna Fali RENEWAL
Munro FerenczArgentinaBernardo Dominic NEGOTIATION
Silvio SlusarskiArgentinaAnna Fali QUALIFIED
Greenwood BologniaRussiaIoni Bowcher RENEWAL
Smith GlickArgentinaOnyama Limba QUALIFIED
Mayumi KolmetzSpainStephen Shaw UNQUALIFIED
Izzy GarufiFranceAnna Fali PROPOSAL
Morrow RutaFranceAsiya Javayant QUALIFIED
Mayumi KolmetzRussiaXuxue Feng UNQUALIFIED
Maisha RulapaughIndiaAsiya Javayant UNQUALIFIED
Cody SaylorsItalyAmy Elsner UNQUALIFIED
Julie StensethRussiaElwin Sharvill RENEWAL
Rodrigues CampainAustraliaStephen Shaw UNQUALIFIED
Ricardo GauchoCanadaIvan Magalhaes UNQUALIFIED
Aruna FigeroaSpainAsiya Javayant PROPOSAL
Ivar PaprockiRussiaIvan Magalhaes NEGOTIATION
Kadeem FlosiRussiaIoni Bowcher UNQUALIFIED
Costa DilliardIndiaIvan Magalhaes RENEWAL
Salvatore StockhamCanadaXuxue Feng NEGOTIATION
Johnson SergiFranceElwin Sharvill RENEWAL
Ivar PaprockiJapanIoni Bowcher QUALIFIED
Aruna FigeroaArgentinaStephen Shaw NEGOTIATION
James ButtIndiaAsiya Javayant QUALIFIED
David DarakjyArgentinaAnna Fali PROPOSAL
Misaki RoysterBrazilOnyama Limba UNQUALIFIED
Johnson SergiFranceXuxue Feng NEW
Chavez BriddickAustraliaBernardo Dominic NEGOTIATION
Rodrigues CampainSpainAsiya Javayant NEW
Octavia MaletItalyAmy Elsner UNQUALIFIED
Alejandro PerinIndiaXuxue Feng UNQUALIFIED
Maisha RulapaughArgentinaOnyama Limba PROPOSAL
Salvatore StockhamBrazilElwin Sharvill NEGOTIATION
David DarakjySpainXuxue Feng RENEWAL
Jennifer AmigonAustraliaXuxue Feng QUALIFIED
Kaitlin OstroskySpainXuxue Feng PROPOSAL
Alejandro PerinAustraliaIoni Bowcher NEGOTIATION
Jones VocelkaArgentinaAsiya Javayant PROPOSAL
Sinclair WaycottUnited KingdomAsiya Javayant PROPOSAL
Deepesh ChuiBrazilXuxue Feng RENEWAL
Aruna FigeroaRussiaIvan Magalhaes NEGOTIATION
Leja CaldareraRussiaOnyama Limba NEGOTIATION
Greenwood BologniaAustraliaXuxue Feng UNQUALIFIED
Arvin AlbaresAustraliaBernardo Dominic UNQUALIFIED
Ashley DoeIndiaElwin Sharvill QUALIFIED
Isabel BowleyCanadaAsiya Javayant UNQUALIFIED
Frozen Columns
Name
Leon Oldroyd
Smith Glick
Leja Caldarera
Murillo Malet
Aditya Kusko
Kaitlin Ostrosky
Leon Oldroyd
Chavez Briddick
Deepesh Chui
Greenwood Bolognia
Misaki Royster
Kadeem Flosi
Clifford Rim
Ashley Doe
Ashley Doe
Greenwood Bolognia
Salvatore Stockham
Smith Glick
Maisha Rulapaugh
Maria Marrier
Francesco Shinko
Chavez Briddick
Jones Vocelka
Kaitlin Ostrosky
Morrow Ruta
Juan Wieser
Silvio Slusarski
Isabel Bowley
Costa Dilliard
Francesco Shinko
Antonio Caudy
Clifford Rim
Kaitlin Ostrosky
Sinclair Waycott
Julie Stenseth
Emily Whobrey
Mayumi Kolmetz
Julie Stenseth
Arvin Albares
Smith Glick
Ricardo Gaucho
Jones Vocelka
Maria Marrier
Jefferson Schemmer
Izzy Garufi
Smith Glick
Silvio Slusarski
Faith Gillian
Rodrigues Campain
Adams Morasca
IdCountryDate
1000Brazil2025-10-02
1001Canada2025-09-20
1002Canada2025-10-04
1003United Kingdom2025-09-20
1004United Kingdom2025-10-06
1005Japan2025-10-04
1006Australia2025-10-12
1007India2025-10-04
1008Australia2025-09-18
1009Germany2025-09-28
1010France2025-10-11
1011Canada2025-09-21
1012Argentina2025-10-11
1013France2025-09-18
1014Italy2025-10-11
1015Brazil2025-09-22
1016United Kingdom2025-09-26
1017Argentina2025-10-02
1018Russia2025-09-17
1019Japan2025-10-13
1020India2025-09-30
1021France2025-10-13
1022Russia2025-09-20
1023Canada2025-09-24
1024Russia2025-10-05
1025Japan2025-10-10
1026Russia2025-09-27
1027Japan2025-09-28
1028Canada2025-10-14
1029Brazil2025-10-10
1030Brazil2025-09-19
1031Spain2025-09-24
1032Germany2025-09-17
1033Brazil2025-10-11
1034Italy2025-10-11
1035Italy2025-09-29
1036Australia2025-09-19
1037Japan2025-09-23
1038Spain2025-09-18
1039Spain2025-10-11
1040Italy2025-09-18
1041United Kingdom2025-09-21
1042Russia2025-09-20
1043Japan2025-09-30
1044France2025-09-15
1045Australia2025-10-07
1046Argentina2025-09-16
1047Germany2025-09-25
1048Argentina2025-09-29
1049Japan2025-09-21

On-Demand Data

NameIdCountryDate
Leja Caldarera1000Russia2025-10-07
Cody Saylors1001Australia2025-09-18
Johnson Sergi1002Argentina2025-10-12
Kaitlin Ostrosky1003Italy2025-10-10
Costa Dilliard1004United Kingdom2025-09-23
Stacey Maclead1005Argentina2025-09-19
David Darakjy1006Japan2025-10-14
Mayumi Kolmetz1007Japan2025-10-04
Leja Caldarera1008Japan2025-10-07
Ivar Paprocki1009Australia2025-10-01
Leon Oldroyd1010Brazil2025-09-27
Aika Inouye1011Italy2025-09-24
Salvatore Stockham1012Spain2025-09-17
Aika Inouye1013Argentina2025-09-18
Silvio Slusarski1014Spain2025-10-11
Murillo Malet1015Spain2025-10-12
Rodrigues Campain1016Spain2025-10-13
Juan Wieser1017Brazil2025-09-23
Ricardo Gaucho1018Russia2025-09-26
Costa Dilliard1019France2025-10-06
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Smith GlickUnited KingdomOnyama Limba PROPOSAL
Johnson SergiJapanBernardo Dominic NEGOTIATION
Mayumi KolmetzGermanyAnna Fali NEW
Adams MorascaCanadaAmy Elsner UNQUALIFIED
Izzy GarufiCanadaBernardo Dominic UNQUALIFIED
David DarakjyUnited KingdomElwin Sharvill NEW
Faith GillianJapanIvan Magalhaes NEW
Munro FerenczBrazilElwin Sharvill QUALIFIED
Darci PoquetteIndiaElwin Sharvill PROPOSAL
Morrow RutaJapanOnyama Limba QUALIFIED
Francesco ShinkoIndiaAmy Elsner PROPOSAL
Emily WhobreyAustraliaIvan Magalhaes NEW
Izzy GarufiAustraliaXuxue Feng PROPOSAL
Claire TollnerArgentinaBernardo Dominic UNQUALIFIED
Aika InouyeRussiaIoni Bowcher NEGOTIATION
Stacey MacleadArgentinaAsiya Javayant PROPOSAL
Mujtaba NickaGermanyAmy Elsner NEW
Emily WhobreyUnited KingdomAmy Elsner QUALIFIED
Deepesh ChuiGermanyBernardo Dominic QUALIFIED
Deepesh ChuiAustraliaIvan Magalhaes QUALIFIED
Adams MorascaUnited KingdomStephen Shaw UNQUALIFIED
Maria MarrierSpainIoni Bowcher QUALIFIED
Francesco ShinkoFranceAsiya Javayant NEGOTIATION
Alejandro PerinItalyIoni Bowcher PROPOSAL
Julie StensethAustraliaAmy Elsner RENEWAL
Jones VocelkaIndiaAmy Elsner QUALIFIED
Deepesh ChuiBrazilAnna Fali RENEWAL
Jeanfrancois VenereUnited KingdomOnyama Limba QUALIFIED
Clifford RimFranceOnyama Limba NEW
Wickens NestleAustraliaIvan Magalhaes NEGOTIATION
Claire TollnerSpainXuxue Feng NEGOTIATION
Leon OldroydAustraliaAsiya Javayant UNQUALIFIED
Adams MorascaItalyIvan Magalhaes PROPOSAL
Jennifer AmigonJapanBernardo Dominic PROPOSAL
Julie StensethFranceIvan Magalhaes QUALIFIED
Tony FollerFranceIvan Magalhaes QUALIFIED
Morrow RutaCanadaAsiya Javayant NEW
Jones VocelkaGermanyXuxue Feng QUALIFIED
Isabel BowleyCanadaIvan Magalhaes NEGOTIATION
Costa DilliardFranceAmy Elsner QUALIFIED

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