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
Costa DilliardAustraliaAsiya Javayant PROPOSAL
Darci PoquetteJapanAsiya Javayant PROPOSAL
Stacey MacleadRussiaIoni Bowcher RENEWAL
Jeanfrancois VenereJapanAsiya Javayant RENEWAL
Costa DilliardRussiaOnyama Limba PROPOSAL
Sinclair WaycottRussiaIoni Bowcher UNQUALIFIED
Aditya KuskoGermanyXuxue Feng QUALIFIED
Faith GillianBrazilAmy Elsner UNQUALIFIED
Izzy GarufiCanadaAsiya Javayant RENEWAL
Jefferson SchemmerCanadaOnyama Limba NEGOTIATION
Emily WhobreyArgentinaOnyama Limba UNQUALIFIED
Isabel BowleyItalyStephen Shaw PROPOSAL
Francesco ShinkoSpainIoni Bowcher NEW
Mayumi KolmetzJapanIvan Magalhaes RENEWAL
Jeanfrancois VenereIndiaAnna Fali RENEWAL
Mujtaba NickaArgentinaIvan Magalhaes NEW
Jeanfrancois VenereFranceStephen Shaw PROPOSAL
Leja CaldareraBrazilBernardo Dominic NEW
Darci PoquetteBrazilAnna Fali QUALIFIED
Jennifer AmigonArgentinaAmy Elsner QUALIFIED
Juan WieserRussiaIvan Magalhaes PROPOSAL
Maria MarrierItalyOnyama Limba NEW
Ivar PaprockiRussiaIoni Bowcher PROPOSAL
Emily WhobreyUnited KingdomBernardo Dominic NEGOTIATION
Silvio SlusarskiFranceIoni Bowcher NEGOTIATION
Deepesh ChuiRussiaStephen Shaw NEGOTIATION
Wickens NestleUnited KingdomIvan Magalhaes PROPOSAL
Nicolas IturbideUnited KingdomBernardo Dominic UNQUALIFIED
Clifford RimFranceAnna Fali QUALIFIED
Leon OldroydArgentinaIvan Magalhaes NEW
Tony FollerRussiaIvan Magalhaes UNQUALIFIED
Ivar PaprockiFranceStephen Shaw PROPOSAL
Clifford RimIndiaStephen Shaw QUALIFIED
Kaitlin OstroskyRussiaStephen Shaw UNQUALIFIED
Faith GillianGermanyBernardo Dominic UNQUALIFIED
Kaitlin OstroskyIndiaElwin Sharvill NEW
Salvatore StockhamRussiaIvan Magalhaes QUALIFIED
Arvin AlbaresSpainIvan Magalhaes NEW
Antonio CaudyUnited KingdomElwin Sharvill RENEWAL
Morrow RutaFranceAsiya Javayant NEGOTIATION
Jefferson SchemmerSpainBernardo Dominic NEGOTIATION
Stacey MacleadUnited KingdomElwin Sharvill UNQUALIFIED
Kadeem FlosiAustraliaStephen Shaw RENEWAL
James ButtRussiaAsiya Javayant UNQUALIFIED
Francesco ShinkoSpainOnyama Limba NEW
James ButtBrazilIvan Magalhaes NEW
Octavia MaletArgentinaAmy Elsner UNQUALIFIED
Aditya KuskoItalyElwin Sharvill QUALIFIED
Maria MarrierBrazilXuxue Feng NEW
Chavez BriddickSpainIoni Bowcher NEW
Horizontal
NameCountryRepresentativeStatus
Alejandro PerinCanadaIvan Magalhaes PROPOSAL
Costa DilliardItalyAnna Fali PROPOSAL
Emily WhobreyArgentinaIoni Bowcher NEGOTIATION
Arvin AlbaresJapanStephen Shaw NEGOTIATION
Ashley DoeSpainStephen Shaw UNQUALIFIED
Aruna FigeroaAustraliaIvan Magalhaes RENEWAL
Francesco ShinkoBrazilAsiya Javayant UNQUALIFIED
Rodrigues CampainItalyStephen Shaw UNQUALIFIED
Aruna FigeroaItalyAmy Elsner RENEWAL
Nicolas IturbideSpainStephen Shaw NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Francesco ShinkoUnited Kingdom2025-09-08Feiner Bros PROPOSAL95Onyama Limba
1001Arvin AlbaresAustralia2025-09-07King, Christopher A Esq NEGOTIATION36Onyama Limba
1002Jennifer AmigonIndia2025-08-22Chanay, Jeffrey A Esq NEW22Ioni Bowcher
1003Jones VocelkaAustralia2025-09-12Benton, John B Jr NEW51Stephen Shaw
1004Ivar PaprockiJapan2025-08-17Chapman, Ross E Esq RENEWAL39Elwin Sharvill
1005Aika InouyeGermany2025-09-09Benton, John B Jr PROPOSAL20Stephen Shaw
1006Aditya KuskoCanada2025-09-14Chemel, James L Cpa NEW82Onyama Limba
1007Darci PoquetteSpain2025-09-02Benton, John B Jr NEW36Onyama Limba
1008Wickens NestleRussia2025-09-09Feltz Printing Service NEW53Amy Elsner
1009Leja CaldareraRussia2025-08-23Printing Dimensions QUALIFIED27Onyama Limba
1010Wickens NestleJapan2025-08-31Benton, John B Jr QUALIFIED17Anna Fali
1011Jefferson SchemmerArgentina2025-08-20King, Christopher A Esq NEGOTIATION28Stephen Shaw
1012Murillo MaletJapan2025-09-04Chanay, Jeffrey A Esq UNQUALIFIED36Anna Fali
1013Murillo MaletFrance2025-09-13Rousseaux, Michael Esq RENEWAL33Bernardo Dominic
1014Aditya KuskoGermany2025-09-03Morlong Associates UNQUALIFIED4Amy Elsner
1015Nicolas IturbideSpain2025-09-07Commercial Press PROPOSAL75Ivan Magalhaes
1016Arvin AlbaresGermany2025-08-26Benton, John B Jr PROPOSAL40Onyama Limba
1017Misaki RoysterItaly2025-08-30Feltz Printing Service QUALIFIED84Amy Elsner
1018Rodrigues CampainCanada2025-09-14Truhlar And Truhlar Attys NEW81Stephen Shaw
1019Juan WieserArgentina2025-09-04Feltz Printing Service NEGOTIATION54Anna Fali
1020Emily WhobreyArgentina2025-08-26Feltz Printing Service NEW54Ivan Magalhaes
1021Clifford RimUnited Kingdom2025-09-04Buckley Miller Wright RENEWAL83Bernardo Dominic
1022Mujtaba NickaSpain2025-08-17Morlong Associates UNQUALIFIED83Ivan Magalhaes
1023Kadeem FlosiArgentina2025-09-13Commercial Press PROPOSAL76Amy Elsner
1024Kaitlin OstroskyCanada2025-09-08Rangoni Of Florence NEW78Anna Fali
1025Silvio SlusarskiIndia2025-09-11Buckley Miller Wright PROPOSAL52Asiya Javayant
1026Jones VocelkaUnited Kingdom2025-08-28Feltz Printing Service RENEWAL75Asiya Javayant
1027Tony FollerArgentina2025-08-26Printing Dimensions NEW70Amy Elsner
1028Aruna FigeroaArgentina2025-09-06Chanay, Jeffrey A Esq NEGOTIATION26Ioni Bowcher
1029Munro FerenczUnited Kingdom2025-08-27Printing Dimensions PROPOSAL52Ioni Bowcher
1030Leja CaldareraFrance2025-09-12Commercial Press PROPOSAL90Ivan Magalhaes
1031Maria MarrierAustralia2025-09-11Morlong Associates UNQUALIFIED77Amy Elsner
1032Juan WieserGermany2025-08-18Benton, John B Jr RENEWAL58Onyama Limba
1033Maria MarrierCanada2025-08-23Rangoni Of Florence PROPOSAL63Amy Elsner
1034Arvin AlbaresAustralia2025-09-13Feiner Bros QUALIFIED98Amy Elsner
1035Kaitlin OstroskyFrance2025-09-07Feiner Bros RENEWAL41Amy Elsner
1036Kaitlin OstroskyIndia2025-08-21Rangoni Of Florence PROPOSAL66Anna Fali
1037Aruna FigeroaBrazil2025-09-11Benton, John B Jr PROPOSAL89Xuxue Feng
1038Aika InouyeRussia2025-09-12Feltz Printing Service NEW26Ivan Magalhaes
1039Silvio SlusarskiCanada2025-08-19Feltz Printing Service NEW1Ioni Bowcher
1040Jones VocelkaRussia2025-09-12Dorl, James J Esq PROPOSAL95Onyama Limba
1041Ivar PaprockiAustralia2025-09-03Feiner Bros QUALIFIED78Asiya Javayant
1042Aika InouyeRussia2025-09-13King, Christopher A Esq NEGOTIATION73Elwin Sharvill
1043Aditya KuskoCanada2025-08-29Chanay, Jeffrey A Esq UNQUALIFIED99Amy Elsner
1044Johnson SergiSpain2025-08-28Chanay, Jeffrey A Esq UNQUALIFIED45Ivan Magalhaes
1045Juan WieserSpain2025-08-26Chapman, Ross E Esq UNQUALIFIED75Ivan Magalhaes
1046Ivar PaprockiRussia2025-09-08Morlong Associates RENEWAL76Bernardo Dominic
1047Costa DilliardGermany2025-09-11Printing Dimensions RENEWAL88Anna Fali
1048Isabel BowleyCanada2025-08-27Truhlar And Truhlar Attys QUALIFIED40Anna Fali
1049Adams MorascaJapan2025-08-17Feltz Printing Service NEW59Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Morrow RutaItalyIoni Bowcher QUALIFIED
Chavez BriddickGermanyBernardo Dominic RENEWAL
Rodrigues CampainArgentinaOnyama Limba QUALIFIED
Deepesh ChuiRussiaIoni Bowcher QUALIFIED
Mayumi KolmetzBrazilStephen Shaw RENEWAL
Silvio SlusarskiJapanBernardo Dominic PROPOSAL
Francesco ShinkoArgentinaBernardo Dominic UNQUALIFIED
Claire TollnerJapanElwin Sharvill RENEWAL
Jones VocelkaRussiaBernardo Dominic NEW
Deepesh ChuiJapanElwin Sharvill NEW
Izzy GarufiSpainOnyama Limba UNQUALIFIED
Ashley DoeItalyStephen Shaw NEGOTIATION
Murillo MaletCanadaElwin Sharvill NEW
Sinclair WaycottCanadaAmy Elsner NEGOTIATION
Ivar PaprockiFranceXuxue Feng UNQUALIFIED
Arvin AlbaresBrazilElwin Sharvill PROPOSAL
Arvin AlbaresJapanElwin Sharvill RENEWAL
Jennifer AmigonGermanyBernardo Dominic UNQUALIFIED
Leja CaldareraGermanyAmy Elsner NEW
Smith GlickRussiaOnyama Limba PROPOSAL
Jefferson SchemmerGermanyElwin Sharvill RENEWAL
Aika InouyeIndiaAsiya Javayant UNQUALIFIED
Murillo MaletGermanyIoni Bowcher RENEWAL
Emily WhobreyFranceIvan Magalhaes PROPOSAL
Mujtaba NickaItalyIvan Magalhaes RENEWAL
Alejandro PerinBrazilOnyama Limba NEGOTIATION
Aruna FigeroaUnited KingdomIoni Bowcher UNQUALIFIED
Juan WieserFranceStephen Shaw RENEWAL
Rodrigues CampainBrazilAsiya Javayant QUALIFIED
Chavez BriddickSpainAsiya Javayant NEW
Antonio CaudyUnited KingdomAnna Fali NEGOTIATION
Octavia MaletItalyStephen Shaw RENEWAL
Emily WhobreyGermanyBernardo Dominic PROPOSAL
Jones VocelkaGermanyElwin Sharvill NEW
Alejandro PerinBrazilAnna Fali NEW
Emily WhobreyJapanXuxue Feng NEGOTIATION
Murillo MaletAustraliaXuxue Feng NEGOTIATION
Emily WhobreySpainStephen Shaw NEGOTIATION
Darci PoquetteSpainAmy Elsner PROPOSAL
Darci PoquetteCanadaAmy Elsner UNQUALIFIED
Maria MarrierBrazilElwin Sharvill PROPOSAL
Clifford RimIndiaIvan Magalhaes PROPOSAL
Adams MorascaUnited KingdomIvan Magalhaes UNQUALIFIED
Morrow RutaAustraliaAmy Elsner RENEWAL
Jones VocelkaJapanIvan Magalhaes NEGOTIATION
Misaki RoysterIndiaIvan Magalhaes PROPOSAL
Aruna FigeroaFranceBernardo Dominic NEW
Morrow RutaUnited KingdomIoni Bowcher NEGOTIATION
Jennifer AmigonItalyOnyama Limba NEW
Nicolas IturbideAustraliaIoni Bowcher NEW
Frozen Columns
Name
Francesco Shinko
Salvatore Stockham
Ashley Doe
Nicolas Iturbide
Jeanfrancois Venere
Jefferson Schemmer
Salvatore Stockham
Izzy Garufi
Tony Foller
Arvin Albares
Greenwood Bolognia
Darci Poquette
Smith Glick
Munro Ferencz
David Darakjy
Ashley Doe
James Butt
Maisha Rulapaugh
Faith Gillian
Cody Saylors
Aditya Kusko
Ivar Paprocki
Jefferson Schemmer
Jeanfrancois Venere
Alejandro Perin
Sinclair Waycott
Morrow Ruta
Nicolas Iturbide
Mujtaba Nicka
Maisha Rulapaugh
Adams Morasca
Kaitlin Ostrosky
Jefferson Schemmer
Murillo Malet
Mujtaba Nicka
Ricardo Gaucho
Misaki Royster
Smith Glick
Antonio Caudy
Arvin Albares
Misaki Royster
Maria Marrier
Stacey Maclead
Antonio Caudy
Johnson Sergi
Misaki Royster
Alejandro Perin
Morrow Ruta
Julie Stenseth
Aruna Figeroa
IdCountryDate
1000Argentina2025-09-07
1001Japan2025-08-30
1002France2025-08-16
1003Italy2025-08-23
1004Canada2025-09-12
1005Brazil2025-09-11
1006Russia2025-09-02
1007Canada2025-09-14
1008Brazil2025-09-04
1009Japan2025-08-21
1010Australia2025-09-06
1011Spain2025-09-13
1012Argentina2025-08-21
1013Brazil2025-09-10
1014Italy2025-09-02
1015Canada2025-09-11
1016Italy2025-08-22
1017United Kingdom2025-09-12
1018United Kingdom2025-09-06
1019Brazil2025-09-05
1020India2025-09-10
1021Canada2025-08-18
1022France2025-08-25
1023Spain2025-08-21
1024Italy2025-09-07
1025Russia2025-09-02
1026Canada2025-08-27
1027Argentina2025-09-06
1028India2025-08-16
1029United Kingdom2025-08-21
1030Argentina2025-08-23
1031Spain2025-08-18
1032Brazil2025-09-04
1033United Kingdom2025-08-22
1034Germany2025-08-28
1035United Kingdom2025-09-03
1036Canada2025-08-19
1037Argentina2025-09-11
1038Spain2025-09-07
1039India2025-09-09
1040Germany2025-08-16
1041Spain2025-08-21
1042United Kingdom2025-08-29
1043Japan2025-09-09
1044Australia2025-08-21
1045Italy2025-08-29
1046Russia2025-09-04
1047United Kingdom2025-08-16
1048Canada2025-08-18
1049India2025-08-24

On-Demand Data

NameIdCountryDate
Maisha Rulapaugh1000France2025-08-28
Morrow Ruta1001United Kingdom2025-08-18
Chavez Briddick1002France2025-08-20
Ashley Doe1003Australia2025-08-23
Cody Saylors1004United Kingdom2025-09-02
Murillo Malet1005Russia2025-08-26
Julie Stenseth1006Brazil2025-08-20
Izzy Garufi1007United Kingdom2025-09-07
Ashley Doe1008Germany2025-08-23
Salvatore Stockham1009Russia2025-09-05
Johnson Sergi1010Russia2025-08-30
Aditya Kusko1011Canada2025-08-17
Mayumi Kolmetz1012Australia2025-08-28
Ashley Doe1013Brazil2025-08-26
Tony Foller1014Canada2025-08-24
Kadeem Flosi1015Argentina2025-09-07
James Butt1016Canada2025-08-20
Juan Wieser1017Argentina2025-09-09
Emily Whobrey1018Australia2025-09-12
Kadeem Flosi1019Italy2025-09-08
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jefferson SchemmerItalyAnna Fali PROPOSAL
Maria MarrierJapanStephen Shaw RENEWAL
Leja CaldareraAustraliaIoni Bowcher QUALIFIED
Nicolas IturbideArgentinaStephen Shaw NEW
Kaitlin OstroskyRussiaAmy Elsner RENEWAL
Wickens NestleItalyIvan Magalhaes UNQUALIFIED
Jefferson SchemmerJapanXuxue Feng NEW
Misaki RoysterSpainIvan Magalhaes QUALIFIED
Wickens NestleGermanyElwin Sharvill RENEWAL
Jones VocelkaUnited KingdomAnna Fali UNQUALIFIED
Wickens NestleSpainElwin Sharvill NEW
Johnson SergiRussiaAsiya Javayant QUALIFIED
Maisha RulapaughCanadaAnna Fali QUALIFIED
Ashley DoeAustraliaOnyama Limba NEGOTIATION
Nicolas IturbideJapanBernardo Dominic RENEWAL
Cody SaylorsRussiaIoni Bowcher PROPOSAL
Tony FollerSpainXuxue Feng QUALIFIED
Silvio SlusarskiJapanAmy Elsner RENEWAL
Munro FerenczCanadaStephen Shaw NEW
Wickens NestleIndiaOnyama Limba RENEWAL
Mujtaba NickaAustraliaAsiya Javayant UNQUALIFIED
Greenwood BologniaRussiaIoni Bowcher UNQUALIFIED
Chavez BriddickFranceIoni Bowcher NEW
Isabel BowleyJapanIvan Magalhaes RENEWAL
Kadeem FlosiJapanIvan Magalhaes PROPOSAL
Adams MorascaJapanOnyama Limba QUALIFIED
Maisha RulapaughItalyIvan Magalhaes UNQUALIFIED
Adams MorascaUnited KingdomIvan Magalhaes UNQUALIFIED
Darci PoquetteJapanAmy Elsner NEGOTIATION
James ButtSpainStephen Shaw PROPOSAL
Ashley DoeSpainBernardo Dominic UNQUALIFIED
Rodrigues CampainIndiaXuxue Feng PROPOSAL
Jennifer AmigonUnited KingdomAmy Elsner NEGOTIATION
Kadeem FlosiGermanyStephen Shaw QUALIFIED
Wickens NestleItalyOnyama Limba PROPOSAL
Maisha RulapaughIndiaElwin Sharvill RENEWAL
Johnson SergiRussiaXuxue Feng PROPOSAL
Jefferson SchemmerCanadaAnna Fali NEW
Arvin AlbaresCanadaOnyama Limba NEGOTIATION
Jefferson SchemmerItalyIvan Magalhaes 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>