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
Deepesh ChuiCanadaBernardo Dominic QUALIFIED
Wickens NestleIndiaXuxue Feng NEW
Claire TollnerCanadaAmy Elsner PROPOSAL
Mayumi KolmetzAustraliaAsiya Javayant UNQUALIFIED
Aika InouyeRussiaOnyama Limba NEW
Isabel BowleySpainXuxue Feng NEW
Johnson SergiBrazilXuxue Feng NEGOTIATION
Emily WhobreyCanadaAmy Elsner NEW
James ButtCanadaIoni Bowcher QUALIFIED
Maria MarrierFranceAnna Fali RENEWAL
Sinclair WaycottArgentinaElwin Sharvill NEW
Jeanfrancois VenereFranceIvan Magalhaes UNQUALIFIED
Costa DilliardFranceOnyama Limba NEGOTIATION
Maria MarrierGermanyElwin Sharvill NEGOTIATION
Ivar PaprockiJapanXuxue Feng PROPOSAL
Silvio SlusarskiJapanElwin Sharvill PROPOSAL
Misaki RoysterAustraliaBernardo Dominic NEGOTIATION
Smith GlickBrazilIvan Magalhaes NEW
Francesco ShinkoRussiaOnyama Limba UNQUALIFIED
Emily WhobreyUnited KingdomElwin Sharvill RENEWAL
Nicolas IturbideSpainAsiya Javayant QUALIFIED
Aditya KuskoItalyAnna Fali RENEWAL
Clifford RimGermanyIoni Bowcher QUALIFIED
Costa DilliardAustraliaIvan Magalhaes RENEWAL
Munro FerenczArgentinaStephen Shaw NEGOTIATION
Claire TollnerGermanyXuxue Feng PROPOSAL
Nicolas IturbideBrazilIvan Magalhaes NEW
Izzy GarufiItalyOnyama Limba NEW
Octavia MaletUnited KingdomIoni Bowcher RENEWAL
Juan WieserArgentinaStephen Shaw NEGOTIATION
Mujtaba NickaItalyElwin Sharvill RENEWAL
Mayumi KolmetzGermanyElwin Sharvill NEGOTIATION
Maria MarrierIndiaBernardo Dominic UNQUALIFIED
Kaitlin OstroskyFranceAnna Fali PROPOSAL
Maria MarrierGermanyIvan Magalhaes NEW
Faith GillianFranceStephen Shaw PROPOSAL
Cody SaylorsIndiaXuxue Feng QUALIFIED
Aika InouyeSpainStephen Shaw UNQUALIFIED
Kadeem FlosiBrazilAnna Fali NEGOTIATION
Ashley DoeArgentinaAsiya Javayant NEW
Stacey MacleadBrazilBernardo Dominic NEGOTIATION
Aditya KuskoUnited KingdomAmy Elsner QUALIFIED
Morrow RutaArgentinaAmy Elsner PROPOSAL
Deepesh ChuiItalyXuxue Feng QUALIFIED
Greenwood BologniaGermanyElwin Sharvill QUALIFIED
Kaitlin OstroskyArgentinaXuxue Feng RENEWAL
Morrow RutaSpainIoni Bowcher UNQUALIFIED
Arvin AlbaresArgentinaElwin Sharvill NEGOTIATION
Ivar PaprockiGermanyIoni Bowcher QUALIFIED
Maisha RulapaughRussiaElwin Sharvill RENEWAL
Horizontal
NameCountryRepresentativeStatus
Alejandro PerinSpainXuxue Feng NEGOTIATION
Arvin AlbaresGermanyOnyama Limba RENEWAL
Kaitlin OstroskyGermanyIvan Magalhaes NEW
Mujtaba NickaBrazilIvan Magalhaes RENEWAL
Stacey MacleadIndiaIvan Magalhaes RENEWAL
Maria MarrierGermanyIoni Bowcher NEGOTIATION
Antonio CaudyFranceAnna Fali NEGOTIATION
Maisha RulapaughRussiaElwin Sharvill UNQUALIFIED
Arvin AlbaresIndiaXuxue Feng PROPOSAL
Cody SaylorsUnited KingdomXuxue Feng QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ivar PaprockiUnited Kingdom2025-09-01Feiner Bros RENEWAL41Stephen Shaw
1001Smith GlickIndia2025-09-28Truhlar And Truhlar Attys NEGOTIATION16Elwin Sharvill
1002Murillo MaletUnited Kingdom2025-09-11Chemel, James L Cpa QUALIFIED47Onyama Limba
1003Arvin AlbaresJapan2025-09-21Feiner Bros NEW58Xuxue Feng
1004Salvatore StockhamFrance2025-09-13Feiner Bros PROPOSAL28Onyama Limba
1005Izzy GarufiIndia2025-09-28Chapman, Ross E Esq PROPOSAL76Asiya Javayant
1006Greenwood BologniaIndia2025-09-10Benton, John B Jr NEW98Anna Fali
1007Misaki RoysterArgentina2025-09-22Printing Dimensions RENEWAL4Anna Fali
1008Arvin AlbaresCanada2025-09-16Feltz Printing Service RENEWAL2Asiya Javayant
1009Aruna FigeroaBrazil2025-08-30Feiner Bros NEW70Xuxue Feng
1010Francesco ShinkoJapan2025-09-05Chemel, James L Cpa QUALIFIED98Anna Fali
1011Kaitlin OstroskyItaly2025-09-25King, Christopher A Esq RENEWAL53Anna Fali
1012Misaki RoysterJapan2025-09-19Rousseaux, Michael Esq PROPOSAL65Elwin Sharvill
1013Murillo MaletIndia2025-08-31Chanay, Jeffrey A Esq QUALIFIED38Bernardo Dominic
1014Emily WhobreyGermany2025-09-05Benton, John B Jr NEW85Asiya Javayant
1015Murillo MaletArgentina2025-09-21Truhlar And Truhlar Attys NEW40Ioni Bowcher
1016David DarakjyBrazil2025-09-27Chapman, Ross E Esq PROPOSAL91Elwin Sharvill
1017Leja CaldareraGermany2025-09-03Chanay, Jeffrey A Esq NEGOTIATION49Stephen Shaw
1018Ivar PaprockiItaly2025-09-18Dorl, James J Esq NEGOTIATION57Anna Fali
1019Jones VocelkaFrance2025-09-07Rousseaux, Michael Esq PROPOSAL60Onyama Limba
1020Jones VocelkaArgentina2025-09-10Rangoni Of Florence UNQUALIFIED14Ivan Magalhaes
1021Francesco ShinkoCanada2025-09-23Printing Dimensions NEW35Asiya Javayant
1022Costa DilliardGermany2025-09-07Benton, John B Jr PROPOSAL6Anna Fali
1023Faith GillianGermany2025-09-12Chemel, James L Cpa QUALIFIED85Asiya Javayant
1024Clifford RimBrazil2025-09-06Chemel, James L Cpa NEGOTIATION76Xuxue Feng
1025Ivar PaprockiBrazil2025-09-22Chemel, James L Cpa PROPOSAL32Asiya Javayant
1026Clifford RimUnited Kingdom2025-08-30Chanay, Jeffrey A Esq PROPOSAL91Amy Elsner
1027Cody SaylorsArgentina2025-09-22King, Christopher A Esq NEW76Ioni Bowcher
1028Nicolas IturbideAustralia2025-09-25King, Christopher A Esq UNQUALIFIED97Amy Elsner
1029Francesco ShinkoGermany2025-09-06Rangoni Of Florence QUALIFIED16Ioni Bowcher
1030Emily WhobreyArgentina2025-09-25Printing Dimensions QUALIFIED46Ioni Bowcher
1031Silvio SlusarskiArgentina2025-09-22Printing Dimensions RENEWAL16Stephen Shaw
1032Juan WieserAustralia2025-09-25Benton, John B Jr NEGOTIATION8Anna Fali
1033Alejandro PerinGermany2025-09-20Chanay, Jeffrey A Esq NEGOTIATION64Elwin Sharvill
1034Alejandro PerinFrance2025-09-03Chapman, Ross E Esq UNQUALIFIED53Ivan Magalhaes
1035Maisha RulapaughAustralia2025-09-21Printing Dimensions NEW93Onyama Limba
1036Morrow RutaAustralia2025-09-11Feiner Bros QUALIFIED78Anna Fali
1037Francesco ShinkoJapan2025-09-11King, Christopher A Esq RENEWAL83Stephen Shaw
1038Faith GillianUnited Kingdom2025-08-31Printing Dimensions NEGOTIATION97Anna Fali
1039Sinclair WaycottUnited Kingdom2025-09-05Truhlar And Truhlar Attys PROPOSAL64Amy Elsner
1040Adams MorascaUnited Kingdom2025-09-07Printing Dimensions PROPOSAL90Xuxue Feng
1041Kadeem FlosiIndia2025-09-23Chemel, James L Cpa PROPOSAL13Ivan Magalhaes
1042Ivar PaprockiItaly2025-09-19Printing Dimensions RENEWAL1Ivan Magalhaes
1043Chavez BriddickJapan2025-09-09Benton, John B Jr RENEWAL77Asiya Javayant
1044Jennifer AmigonSpain2025-09-17Printing Dimensions NEGOTIATION58Bernardo Dominic
1045Izzy GarufiItaly2025-09-24Chemel, James L Cpa QUALIFIED0Elwin Sharvill
1046Kadeem FlosiAustralia2025-09-01Chanay, Jeffrey A Esq NEW78Ioni Bowcher
1047Aika InouyeRussia2025-09-28Truhlar And Truhlar Attys NEW34Anna Fali
1048Ricardo GauchoGermany2025-09-02Printing Dimensions NEGOTIATION84Amy Elsner
1049Cody SaylorsArgentina2025-08-30Commercial Press NEGOTIATION13Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Deepesh ChuiSpainBernardo Dominic NEW
Darci PoquetteCanadaBernardo Dominic UNQUALIFIED
Jennifer AmigonRussiaElwin Sharvill NEW
Misaki RoysterRussiaIvan Magalhaes NEGOTIATION
Ashley DoeIndiaXuxue Feng QUALIFIED
Kaitlin OstroskyItalyIvan Magalhaes NEGOTIATION
Arvin AlbaresArgentinaStephen Shaw NEW
Jones VocelkaIndiaAsiya Javayant PROPOSAL
Rodrigues CampainSpainElwin Sharvill RENEWAL
Octavia MaletArgentinaXuxue Feng UNQUALIFIED
Ricardo GauchoFranceIvan Magalhaes NEGOTIATION
Wickens NestleAustraliaIoni Bowcher RENEWAL
Isabel BowleyItalyOnyama Limba PROPOSAL
David DarakjyArgentinaOnyama Limba RENEWAL
Nicolas IturbideSpainAnna Fali QUALIFIED
Emily WhobreyUnited KingdomXuxue Feng PROPOSAL
Maria MarrierGermanyOnyama Limba NEW
Emily WhobreySpainIvan Magalhaes PROPOSAL
Murillo MaletIndiaIvan Magalhaes PROPOSAL
Kadeem FlosiBrazilIvan Magalhaes PROPOSAL
Mujtaba NickaItalyElwin Sharvill QUALIFIED
Izzy GarufiRussiaStephen Shaw UNQUALIFIED
Ricardo GauchoCanadaIvan Magalhaes PROPOSAL
Sinclair WaycottBrazilAmy Elsner QUALIFIED
Julie StensethAustraliaStephen Shaw PROPOSAL
Tony FollerRussiaElwin Sharvill NEW
Isabel BowleyItalyAmy Elsner NEGOTIATION
Salvatore StockhamGermanyBernardo Dominic PROPOSAL
Jeanfrancois VenereFranceStephen Shaw QUALIFIED
Wickens NestleBrazilXuxue Feng RENEWAL
Salvatore StockhamBrazilIvan Magalhaes NEW
Sinclair WaycottFranceStephen Shaw PROPOSAL
Adams MorascaIndiaIvan Magalhaes UNQUALIFIED
Arvin AlbaresRussiaOnyama Limba NEGOTIATION
Deepesh ChuiCanadaAsiya Javayant RENEWAL
Jefferson SchemmerArgentinaIoni Bowcher PROPOSAL
Sinclair WaycottFranceAnna Fali RENEWAL
Adams MorascaRussiaAsiya Javayant UNQUALIFIED
Arvin AlbaresCanadaAmy Elsner PROPOSAL
Adams MorascaJapanAnna Fali RENEWAL
Clifford RimRussiaOnyama Limba QUALIFIED
Chavez BriddickRussiaAsiya Javayant NEGOTIATION
David DarakjyAustraliaOnyama Limba PROPOSAL
Kaitlin OstroskyJapanXuxue Feng QUALIFIED
Mujtaba NickaAustraliaAnna Fali QUALIFIED
Munro FerenczIndiaIoni Bowcher NEGOTIATION
Nicolas IturbideBrazilStephen Shaw QUALIFIED
Antonio CaudyArgentinaXuxue Feng NEW
Silvio SlusarskiItalyAsiya Javayant PROPOSAL
Cody SaylorsIndiaAmy Elsner RENEWAL
Frozen Columns
Name
Faith Gillian
Maisha Rulapaugh
Aika Inouye
Morrow Ruta
Costa Dilliard
Jones Vocelka
Jennifer Amigon
Nicolas Iturbide
Rodrigues Campain
Clifford Rim
Stacey Maclead
Octavia Malet
Ivar Paprocki
Jefferson Schemmer
Maria Marrier
Adams Morasca
Aditya Kusko
Stacey Maclead
Alejandro Perin
Johnson Sergi
Clifford Rim
Ashley Doe
Chavez Briddick
Cody Saylors
Kaitlin Ostrosky
Rodrigues Campain
Ashley Doe
Jones Vocelka
Smith Glick
Aika Inouye
Misaki Royster
Clifford Rim
Octavia Malet
Maisha Rulapaugh
Deepesh Chui
Maisha Rulapaugh
Kaitlin Ostrosky
Kadeem Flosi
Faith Gillian
Leja Caldarera
Darci Poquette
Mayumi Kolmetz
Smith Glick
Aditya Kusko
Izzy Garufi
Costa Dilliard
Maisha Rulapaugh
Alejandro Perin
Kadeem Flosi
Emily Whobrey
IdCountryDate
1000Russia2025-09-16
1001Canada2025-08-30
1002Japan2025-09-03
1003Germany2025-09-15
1004Japan2025-09-02
1005India2025-09-28
1006Brazil2025-09-20
1007Argentina2025-09-24
1008Canada2025-09-16
1009Spain2025-09-23
1010United Kingdom2025-09-20
1011Russia2025-09-15
1012Canada2025-09-25
1013India2025-09-13
1014Russia2025-08-31
1015Russia2025-09-17
1016Canada2025-08-31
1017Russia2025-08-31
1018Germany2025-09-04
1019Canada2025-09-18
1020Argentina2025-09-08
1021Spain2025-09-24
1022Canada2025-09-09
1023Australia2025-09-24
1024Spain2025-09-28
1025Germany2025-09-20
1026Spain2025-08-31
1027India2025-09-17
1028France2025-09-11
1029United Kingdom2025-09-05
1030Russia2025-09-01
1031Italy2025-09-03
1032Japan2025-09-28
1033Italy2025-08-31
1034Japan2025-09-24
1035Brazil2025-09-25
1036Spain2025-09-20
1037Brazil2025-09-20
1038Argentina2025-09-10
1039Italy2025-09-07
1040India2025-09-23
1041United Kingdom2025-09-10
1042France2025-09-04
1043Germany2025-09-21
1044Brazil2025-09-19
1045Australia2025-09-10
1046France2025-09-14
1047Canada2025-09-23
1048Germany2025-09-05
1049Spain2025-09-24

On-Demand Data

NameIdCountryDate
Chavez Briddick1000Australia2025-09-17
Smith Glick1001Japan2025-09-20
Tony Foller1002Spain2025-08-30
Kadeem Flosi1003Spain2025-09-07
Salvatore Stockham1004Germany2025-09-14
Kaitlin Ostrosky1005United Kingdom2025-09-08
Clifford Rim1006United Kingdom2025-09-26
Jennifer Amigon1007Brazil2025-09-21
Alejandro Perin1008Australia2025-09-11
Cody Saylors1009India2025-09-28
Jefferson Schemmer1010Japan2025-09-27
Tony Foller1011Spain2025-09-25
Antonio Caudy1012United Kingdom2025-09-07
Rodrigues Campain1013Canada2025-09-16
Sinclair Waycott1014Australia2025-09-14
Johnson Sergi1015Argentina2025-08-31
Claire Tollner1016Australia2025-09-24
Wickens Nestle1017Spain2025-09-20
Juan Wieser1018Argentina2025-09-23
Deepesh Chui1019United Kingdom2025-09-13
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Leon OldroydBrazilIvan Magalhaes UNQUALIFIED
Smith GlickArgentinaXuxue Feng RENEWAL
Stacey MacleadGermanyAnna Fali UNQUALIFIED
Mujtaba NickaUnited KingdomOnyama Limba PROPOSAL
Antonio CaudyRussiaStephen Shaw PROPOSAL
Johnson SergiJapanXuxue Feng UNQUALIFIED
Ashley DoeItalyStephen Shaw NEGOTIATION
Mayumi KolmetzIndiaIoni Bowcher NEGOTIATION
Maria MarrierRussiaBernardo Dominic QUALIFIED
Deepesh ChuiJapanStephen Shaw RENEWAL
Morrow RutaIndiaIvan Magalhaes RENEWAL
Adams MorascaIndiaXuxue Feng RENEWAL
Clifford RimIndiaOnyama Limba UNQUALIFIED
Julie StensethSpainIoni Bowcher QUALIFIED
Maria MarrierBrazilAnna Fali NEW
Chavez BriddickBrazilIoni Bowcher NEGOTIATION
Claire TollnerBrazilXuxue Feng UNQUALIFIED
Silvio SlusarskiRussiaIvan Magalhaes NEGOTIATION
Darci PoquetteSpainIoni Bowcher QUALIFIED
Costa DilliardArgentinaXuxue Feng UNQUALIFIED
Claire TollnerRussiaOnyama Limba NEW
Kaitlin OstroskyArgentinaAsiya Javayant UNQUALIFIED
Johnson SergiRussiaXuxue Feng RENEWAL
Nicolas IturbideArgentinaXuxue Feng PROPOSAL
James ButtBrazilOnyama Limba NEGOTIATION
Mayumi KolmetzCanadaBernardo Dominic RENEWAL
Stacey MacleadBrazilIoni Bowcher UNQUALIFIED
Chavez BriddickGermanyOnyama Limba UNQUALIFIED
Jefferson SchemmerIndiaAsiya Javayant UNQUALIFIED
Mayumi KolmetzBrazilAsiya Javayant UNQUALIFIED
Jones VocelkaIndiaIoni Bowcher NEGOTIATION
Aditya KuskoBrazilIoni Bowcher RENEWAL
Chavez BriddickArgentinaAmy Elsner RENEWAL
Munro FerenczGermanyOnyama Limba PROPOSAL
Stacey MacleadJapanXuxue Feng NEW
Stacey MacleadArgentinaStephen Shaw QUALIFIED
Mujtaba NickaCanadaElwin Sharvill RENEWAL
Isabel BowleyCanadaIoni Bowcher QUALIFIED
Silvio SlusarskiGermanyIvan Magalhaes NEGOTIATION
Costa DilliardFranceAmy Elsner 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>