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
Murillo MaletIndiaBernardo Dominic NEGOTIATION
Cody SaylorsJapanAmy Elsner NEW
Maria MarrierSpainXuxue Feng NEGOTIATION
Leja CaldareraUnited KingdomAmy Elsner NEW
James ButtFranceAnna Fali QUALIFIED
Stacey MacleadArgentinaIvan Magalhaes NEGOTIATION
Julie StensethArgentinaOnyama Limba PROPOSAL
Jones VocelkaItalyOnyama Limba NEGOTIATION
Murillo MaletFranceXuxue Feng NEGOTIATION
Jeanfrancois VenereJapanAmy Elsner UNQUALIFIED
Maria MarrierJapanBernardo Dominic NEW
Cody SaylorsFranceOnyama Limba PROPOSAL
Jones VocelkaSpainStephen Shaw PROPOSAL
Ricardo GauchoCanadaIoni Bowcher NEGOTIATION
Stacey MacleadRussiaIoni Bowcher RENEWAL
Leja CaldareraFranceAsiya Javayant NEW
Johnson SergiRussiaXuxue Feng PROPOSAL
Maria MarrierIndiaAnna Fali NEW
Jones VocelkaArgentinaXuxue Feng PROPOSAL
Aditya KuskoRussiaAsiya Javayant RENEWAL
Ricardo GauchoBrazilIvan Magalhaes NEGOTIATION
David DarakjyGermanyStephen Shaw QUALIFIED
Mujtaba NickaRussiaAmy Elsner UNQUALIFIED
Arvin AlbaresRussiaIvan Magalhaes PROPOSAL
Leon OldroydItalyAnna Fali PROPOSAL
Darci PoquetteGermanyAnna Fali QUALIFIED
Faith GillianGermanyAsiya Javayant RENEWAL
Ivar PaprockiRussiaOnyama Limba PROPOSAL
Jeanfrancois VenereUnited KingdomXuxue Feng RENEWAL
Ricardo GauchoBrazilXuxue Feng QUALIFIED
Darci PoquetteAustraliaBernardo Dominic NEGOTIATION
Jones VocelkaUnited KingdomAnna Fali QUALIFIED
Jones VocelkaAustraliaIvan Magalhaes NEW
Leon OldroydFranceElwin Sharvill RENEWAL
Murillo MaletItalyOnyama Limba RENEWAL
Chavez BriddickItalyXuxue Feng UNQUALIFIED
Ashley DoeRussiaIvan Magalhaes UNQUALIFIED
Claire TollnerCanadaIvan Magalhaes PROPOSAL
Mujtaba NickaGermanyIvan Magalhaes UNQUALIFIED
Ivar PaprockiArgentinaBernardo Dominic NEW
Aika InouyeRussiaAsiya Javayant NEW
Morrow RutaUnited KingdomBernardo Dominic UNQUALIFIED
Deepesh ChuiJapanAsiya Javayant NEW
Juan WieserFranceXuxue Feng NEW
Aditya KuskoBrazilIvan Magalhaes NEGOTIATION
Rodrigues CampainRussiaIoni Bowcher QUALIFIED
Nicolas IturbideArgentinaAmy Elsner NEW
Isabel BowleyGermanyBernardo Dominic UNQUALIFIED
Alejandro PerinJapanAsiya Javayant NEW
Leja CaldareraJapanIvan Magalhaes RENEWAL
Horizontal
NameCountryRepresentativeStatus
James ButtFranceAsiya Javayant RENEWAL
Salvatore StockhamIndiaIoni Bowcher PROPOSAL
Mayumi KolmetzArgentinaIvan Magalhaes NEGOTIATION
Faith GillianFranceElwin Sharvill RENEWAL
Faith GillianFranceBernardo Dominic UNQUALIFIED
Ricardo GauchoJapanElwin Sharvill QUALIFIED
Izzy GarufiSpainIvan Magalhaes QUALIFIED
Isabel BowleyIndiaAmy Elsner RENEWAL
Leon OldroydSpainElwin Sharvill QUALIFIED
Isabel BowleyRussiaAmy Elsner NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Smith GlickCanada2025-10-10Dorl, James J Esq QUALIFIED30Ioni Bowcher
1001Leja CaldareraUnited Kingdom2025-09-21Dorl, James J Esq RENEWAL20Bernardo Dominic
1002Greenwood BologniaCanada2025-10-07Feltz Printing Service UNQUALIFIED35Anna Fali
1003James ButtFrance2025-09-23King, Christopher A Esq NEGOTIATION13Ivan Magalhaes
1004Jennifer AmigonIndia2025-10-05Morlong Associates PROPOSAL0Anna Fali
1005Mujtaba NickaArgentina2025-09-13Truhlar And Truhlar Attys UNQUALIFIED52Elwin Sharvill
1006Tony FollerIndia2025-09-23Rangoni Of Florence QUALIFIED5Asiya Javayant
1007Leja CaldareraRussia2025-09-11Chanay, Jeffrey A Esq NEGOTIATION43Ioni Bowcher
1008David DarakjyCanada2025-09-21Chapman, Ross E Esq RENEWAL74Ioni Bowcher
1009Julie StensethSpain2025-09-14Rangoni Of Florence UNQUALIFIED95Amy Elsner
1010Clifford RimGermany2025-09-13Feiner Bros NEW51Onyama Limba
1011Deepesh ChuiSpain2025-09-18Feiner Bros UNQUALIFIED69Bernardo Dominic
1012Silvio SlusarskiJapan2025-09-23Printing Dimensions PROPOSAL15Amy Elsner
1013Kadeem FlosiAustralia2025-09-29Rangoni Of Florence NEW77Bernardo Dominic
1014Jefferson SchemmerUnited Kingdom2025-09-23Rangoni Of Florence PROPOSAL77Anna Fali
1015Munro FerenczCanada2025-10-06Rangoni Of Florence PROPOSAL30Anna Fali
1016Rodrigues CampainItaly2025-10-03Benton, John B Jr UNQUALIFIED61Ivan Magalhaes
1017Chavez BriddickRussia2025-09-13Feltz Printing Service NEGOTIATION70Anna Fali
1018Isabel BowleyJapan2025-09-14Dorl, James J Esq NEW89Amy Elsner
1019Nicolas IturbideAustralia2025-09-30Commercial Press UNQUALIFIED6Anna Fali
1020Chavez BriddickIndia2025-09-22Feiner Bros PROPOSAL60Xuxue Feng
1021Jeanfrancois VenereAustralia2025-10-02Dorl, James J Esq NEW75Bernardo Dominic
1022Ashley DoeSpain2025-09-23Chemel, James L Cpa UNQUALIFIED46Asiya Javayant
1023Nicolas IturbideAustralia2025-10-01Benton, John B Jr RENEWAL51Amy Elsner
1024Jeanfrancois VenereFrance2025-10-06Feltz Printing Service PROPOSAL63Ivan Magalhaes
1025Maisha RulapaughSpain2025-09-18King, Christopher A Esq RENEWAL28Onyama Limba
1026Claire TollnerGermany2025-09-18Rangoni Of Florence RENEWAL71Stephen Shaw
1027Deepesh ChuiRussia2025-09-12Morlong Associates PROPOSAL53Amy Elsner
1028Greenwood BologniaCanada2025-09-27Chanay, Jeffrey A Esq NEW91Ioni Bowcher
1029Nicolas IturbideIndia2025-09-25Buckley Miller Wright RENEWAL12Ioni Bowcher
1030Maria MarrierArgentina2025-10-02Chanay, Jeffrey A Esq UNQUALIFIED99Onyama Limba
1031Stacey MacleadRussia2025-09-22Feiner Bros UNQUALIFIED96Ivan Magalhaes
1032Ashley DoeArgentina2025-09-28Feltz Printing Service NEGOTIATION35Anna Fali
1033Wickens NestleFrance2025-09-24Rangoni Of Florence RENEWAL25Xuxue Feng
1034Clifford RimBrazil2025-10-10Buckley Miller Wright QUALIFIED87Anna Fali
1035James ButtFrance2025-10-03Rangoni Of Florence QUALIFIED0Ioni Bowcher
1036Antonio CaudyBrazil2025-09-28King, Christopher A Esq NEGOTIATION23Elwin Sharvill
1037Emily WhobreyCanada2025-10-08Chapman, Ross E Esq UNQUALIFIED88Onyama Limba
1038Francesco ShinkoArgentina2025-09-27Rousseaux, Michael Esq QUALIFIED44Anna Fali
1039Darci PoquetteIndia2025-09-18Rangoni Of Florence UNQUALIFIED63Elwin Sharvill
1040Octavia MaletGermany2025-09-16Rousseaux, Michael Esq RENEWAL97Anna Fali
1041Francesco ShinkoUnited Kingdom2025-10-02Feltz Printing Service PROPOSAL95Ivan Magalhaes
1042Morrow RutaUnited Kingdom2025-09-21Chemel, James L Cpa NEGOTIATION43Ioni Bowcher
1043Maria MarrierJapan2025-09-17Benton, John B Jr NEW27Bernardo Dominic
1044Deepesh ChuiAustralia2025-09-22Chapman, Ross E Esq PROPOSAL87Amy Elsner
1045Claire TollnerFrance2025-10-03Rangoni Of Florence QUALIFIED82Xuxue Feng
1046Sinclair WaycottFrance2025-09-15Printing Dimensions QUALIFIED65Elwin Sharvill
1047Julie StensethBrazil2025-09-21Rousseaux, Michael Esq UNQUALIFIED54Ivan Magalhaes
1048Kaitlin OstroskyFrance2025-10-04Chemel, James L Cpa NEGOTIATION13Bernardo Dominic
1049Misaki RoysterFrance2025-09-13Chanay, Jeffrey A Esq NEGOTIATION28Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Silvio SlusarskiJapanXuxue Feng PROPOSAL
Morrow RutaGermanyIvan Magalhaes RENEWAL
Maisha RulapaughSpainElwin Sharvill NEGOTIATION
Emily WhobreyRussiaStephen Shaw RENEWAL
Arvin AlbaresJapanAsiya Javayant QUALIFIED
Darci PoquetteFranceAsiya Javayant NEGOTIATION
Clifford RimRussiaAsiya Javayant RENEWAL
David DarakjyGermanyIoni Bowcher RENEWAL
Kaitlin OstroskyGermanyOnyama Limba NEGOTIATION
Johnson SergiJapanElwin Sharvill RENEWAL
Antonio CaudySpainBernardo Dominic UNQUALIFIED
Wickens NestleCanadaAmy Elsner NEW
Leon OldroydJapanAmy Elsner PROPOSAL
Stacey MacleadArgentinaIvan Magalhaes QUALIFIED
Jennifer AmigonJapanAnna Fali QUALIFIED
Salvatore StockhamItalyIoni Bowcher PROPOSAL
Stacey MacleadFranceIoni Bowcher UNQUALIFIED
Wickens NestleFranceAmy Elsner QUALIFIED
Mayumi KolmetzUnited KingdomAnna Fali RENEWAL
Claire TollnerBrazilStephen Shaw PROPOSAL
Octavia MaletGermanyIvan Magalhaes QUALIFIED
Adams MorascaArgentinaIvan Magalhaes RENEWAL
Salvatore StockhamIndiaStephen Shaw PROPOSAL
Juan WieserUnited KingdomAnna Fali PROPOSAL
Tony FollerAustraliaElwin Sharvill NEGOTIATION
Jennifer AmigonFranceElwin Sharvill UNQUALIFIED
Ashley DoeCanadaAnna Fali QUALIFIED
Ricardo GauchoSpainStephen Shaw RENEWAL
Adams MorascaRussiaAmy Elsner NEW
Rodrigues CampainRussiaStephen Shaw UNQUALIFIED
Mujtaba NickaSpainAsiya Javayant UNQUALIFIED
Antonio CaudyCanadaElwin Sharvill RENEWAL
Mayumi KolmetzAustraliaElwin Sharvill NEW
Antonio CaudyBrazilAsiya Javayant UNQUALIFIED
David DarakjyCanadaIoni Bowcher NEW
Costa DilliardBrazilOnyama Limba UNQUALIFIED
Sinclair WaycottJapanElwin Sharvill NEGOTIATION
Jeanfrancois VenereSpainElwin Sharvill PROPOSAL
Mujtaba NickaArgentinaBernardo Dominic NEGOTIATION
Salvatore StockhamUnited KingdomAsiya Javayant PROPOSAL
Ricardo GauchoRussiaOnyama Limba NEGOTIATION
Munro FerenczSpainAsiya Javayant QUALIFIED
Costa DilliardRussiaAmy Elsner UNQUALIFIED
Adams MorascaIndiaIoni Bowcher NEGOTIATION
James ButtJapanXuxue Feng PROPOSAL
Jones VocelkaSpainAnna Fali QUALIFIED
Leon OldroydIndiaAmy Elsner QUALIFIED
Sinclair WaycottUnited KingdomBernardo Dominic UNQUALIFIED
Emily WhobreyIndiaXuxue Feng NEW
Silvio SlusarskiArgentinaAnna Fali UNQUALIFIED
Frozen Columns
Name
Octavia Malet
Stacey Maclead
Ricardo Gaucho
Juan Wieser
Faith Gillian
Sinclair Waycott
Murillo Malet
Ashley Doe
Octavia Malet
Rodrigues Campain
Nicolas Iturbide
Deepesh Chui
Greenwood Bolognia
Leja Caldarera
Jefferson Schemmer
Tony Foller
Julie Stenseth
Smith Glick
Maisha Rulapaugh
Ashley Doe
Claire Tollner
Smith Glick
Tony Foller
Deepesh Chui
Rodrigues Campain
Sinclair Waycott
Aika Inouye
Smith Glick
Emily Whobrey
Johnson Sergi
Wickens Nestle
Kadeem Flosi
Costa Dilliard
Isabel Bowley
Francesco Shinko
Nicolas Iturbide
Kadeem Flosi
Salvatore Stockham
Tony Foller
Julie Stenseth
Wickens Nestle
Adams Morasca
Adams Morasca
Deepesh Chui
Jones Vocelka
Rodrigues Campain
Claire Tollner
Leja Caldarera
Morrow Ruta
Julie Stenseth
IdCountryDate
1000Brazil2025-09-30
1001Germany2025-10-06
1002Spain2025-10-08
1003Japan2025-09-28
1004Italy2025-09-13
1005Japan2025-09-29
1006Argentina2025-09-11
1007France2025-09-12
1008Italy2025-09-24
1009Japan2025-09-23
1010Argentina2025-09-14
1011France2025-10-09
1012Spain2025-09-29
1013Brazil2025-09-29
1014India2025-09-11
1015Russia2025-10-09
1016Japan2025-10-10
1017Germany2025-09-27
1018Italy2025-09-23
1019Russia2025-09-14
1020Brazil2025-10-07
1021France2025-09-28
1022Italy2025-09-12
1023United Kingdom2025-09-13
1024Germany2025-09-23
1025Russia2025-10-08
1026Germany2025-10-10
1027Australia2025-09-27
1028United Kingdom2025-09-27
1029Japan2025-10-02
1030India2025-10-10
1031Canada2025-09-23
1032United Kingdom2025-09-27
1033Russia2025-10-08
1034Canada2025-09-29
1035Canada2025-10-01
1036Japan2025-09-25
1037Australia2025-09-21
1038Germany2025-09-13
1039France2025-10-07
1040Canada2025-10-10
1041Italy2025-09-30
1042Australia2025-10-07
1043Italy2025-09-12
1044Australia2025-09-14
1045France2025-10-08
1046Russia2025-10-03
1047Japan2025-09-13
1048Argentina2025-10-06
1049Canada2025-10-08

On-Demand Data

NameIdCountryDate
Clifford Rim1000India2025-09-15
Francesco Shinko1001Russia2025-10-09
Arvin Albares1002United Kingdom2025-09-25
Jones Vocelka1003Argentina2025-09-12
Ashley Doe1004Canada2025-09-30
Julie Stenseth1005Spain2025-09-13
Julie Stenseth1006Australia2025-10-10
Ivar Paprocki1007France2025-10-02
Ivar Paprocki1008India2025-10-02
Aika Inouye1009Russia2025-10-07
Faith Gillian1010Japan2025-10-10
Francesco Shinko1011France2025-09-16
Jeanfrancois Venere1012Russia2025-09-23
Arvin Albares1013Spain2025-10-06
Jefferson Schemmer1014Argentina2025-09-13
Jeanfrancois Venere1015Japan2025-09-17
Deepesh Chui1016France2025-09-16
Mujtaba Nicka1017France2025-10-03
Jefferson Schemmer1018Brazil2025-10-06
Costa Dilliard1019Germany2025-10-03
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kadeem FlosiItalyBernardo Dominic UNQUALIFIED
Misaki RoysterItalyBernardo Dominic NEGOTIATION
Maria MarrierSpainStephen Shaw NEGOTIATION
Chavez BriddickItalyStephen Shaw UNQUALIFIED
Maisha RulapaughCanadaBernardo Dominic RENEWAL
Costa DilliardItalyOnyama Limba NEGOTIATION
Munro FerenczRussiaAnna Fali NEW
Darci PoquetteAustraliaAnna Fali RENEWAL
Costa DilliardBrazilBernardo Dominic PROPOSAL
Smith GlickBrazilAmy Elsner QUALIFIED
David DarakjyFranceStephen Shaw NEGOTIATION
Alejandro PerinFranceXuxue Feng RENEWAL
Jones VocelkaJapanAmy Elsner NEW
Leon OldroydGermanyXuxue Feng RENEWAL
Stacey MacleadJapanElwin Sharvill NEGOTIATION
Jennifer AmigonAustraliaBernardo Dominic UNQUALIFIED
Aditya KuskoJapanXuxue Feng QUALIFIED
Johnson SergiRussiaIoni Bowcher QUALIFIED
Nicolas IturbideBrazilBernardo Dominic QUALIFIED
Ricardo GauchoCanadaBernardo Dominic QUALIFIED
Chavez BriddickRussiaAmy Elsner UNQUALIFIED
Arvin AlbaresBrazilStephen Shaw NEW
Mayumi KolmetzBrazilIoni Bowcher PROPOSAL
Cody SaylorsSpainIoni Bowcher PROPOSAL
Leon OldroydArgentinaElwin Sharvill PROPOSAL
Ivar PaprockiIndiaIoni Bowcher QUALIFIED
Jefferson SchemmerAustraliaXuxue Feng RENEWAL
Mujtaba NickaItalyAmy Elsner RENEWAL
Maisha RulapaughIndiaIvan Magalhaes UNQUALIFIED
Murillo MaletCanadaAmy Elsner QUALIFIED
Salvatore StockhamUnited KingdomXuxue Feng NEW
Sinclair WaycottUnited KingdomXuxue Feng QUALIFIED
Silvio SlusarskiBrazilOnyama Limba NEW
Cody SaylorsSpainAmy Elsner PROPOSAL
Clifford RimUnited KingdomIvan Magalhaes PROPOSAL
Claire TollnerCanadaIvan Magalhaes NEW
Jennifer AmigonArgentinaIvan Magalhaes PROPOSAL
Adams MorascaArgentinaAmy Elsner NEW
Aika InouyeBrazilIoni Bowcher PROPOSAL
Stacey MacleadSpainAsiya Javayant RENEWAL

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