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 DarakjyArgentinaElwin Sharvill RENEWAL
Cody SaylorsUnited KingdomXuxue Feng QUALIFIED
Emily WhobreyBrazilBernardo Dominic PROPOSAL
Chavez BriddickJapanOnyama Limba PROPOSAL
Johnson SergiArgentinaIvan Magalhaes NEW
Jeanfrancois VenereBrazilStephen Shaw RENEWAL
Cody SaylorsBrazilIvan Magalhaes RENEWAL
Costa DilliardAustraliaOnyama Limba RENEWAL
Munro FerenczSpainAnna Fali RENEWAL
Stacey MacleadFranceBernardo Dominic NEW
Arvin AlbaresRussiaIvan Magalhaes NEW
James ButtJapanIvan Magalhaes QUALIFIED
Julie StensethItalyXuxue Feng NEGOTIATION
Leon OldroydFranceAmy Elsner UNQUALIFIED
Francesco ShinkoGermanyAnna Fali NEGOTIATION
Francesco ShinkoUnited KingdomXuxue Feng NEGOTIATION
Izzy GarufiCanadaIoni Bowcher QUALIFIED
Isabel BowleySpainOnyama Limba PROPOSAL
Leon OldroydSpainAsiya Javayant NEW
Jennifer AmigonCanadaIvan Magalhaes NEW
Arvin AlbaresCanadaAmy Elsner UNQUALIFIED
Aruna FigeroaBrazilElwin Sharvill RENEWAL
Claire TollnerSpainXuxue Feng RENEWAL
Ashley DoeItalyElwin Sharvill UNQUALIFIED
James ButtBrazilAnna Fali NEGOTIATION
Chavez BriddickUnited KingdomStephen Shaw UNQUALIFIED
Tony FollerJapanIvan Magalhaes UNQUALIFIED
Smith GlickAustraliaOnyama Limba NEGOTIATION
Deepesh ChuiGermanyIoni Bowcher NEW
Silvio SlusarskiBrazilAnna Fali NEGOTIATION
Jones VocelkaAustraliaElwin Sharvill QUALIFIED
Johnson SergiIndiaElwin Sharvill NEGOTIATION
Salvatore StockhamGermanyIoni Bowcher PROPOSAL
Claire TollnerFranceBernardo Dominic PROPOSAL
Maisha RulapaughRussiaIoni Bowcher RENEWAL
Misaki RoysterArgentinaElwin Sharvill PROPOSAL
Ivar PaprockiCanadaAnna Fali QUALIFIED
Sinclair WaycottFranceIvan Magalhaes QUALIFIED
Aika InouyeItalyStephen Shaw QUALIFIED
Rodrigues CampainJapanAsiya Javayant NEGOTIATION
Aditya KuskoSpainAmy Elsner PROPOSAL
Chavez BriddickUnited KingdomBernardo Dominic RENEWAL
Francesco ShinkoGermanyElwin Sharvill PROPOSAL
Nicolas IturbideSpainBernardo Dominic NEW
Jefferson SchemmerSpainStephen Shaw PROPOSAL
Isabel BowleyAustraliaAmy Elsner UNQUALIFIED
Emily WhobreyFranceBernardo Dominic UNQUALIFIED
Francesco ShinkoCanadaXuxue Feng RENEWAL
Deepesh ChuiIndiaElwin Sharvill RENEWAL
Ricardo GauchoUnited KingdomIvan Magalhaes NEW
Horizontal
NameCountryRepresentativeStatus
Julie StensethCanadaAmy Elsner NEW
Tony FollerUnited KingdomXuxue Feng PROPOSAL
Antonio CaudyArgentinaElwin Sharvill NEGOTIATION
Johnson SergiCanadaIoni Bowcher PROPOSAL
Rodrigues CampainCanadaAmy Elsner RENEWAL
Arvin AlbaresJapanElwin Sharvill PROPOSAL
Isabel BowleyIndiaAsiya Javayant NEW
Stacey MacleadUnited KingdomBernardo Dominic NEW
Claire TollnerUnited KingdomIvan Magalhaes NEGOTIATION
Chavez BriddickArgentinaIoni Bowcher UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Darci PoquetteIndia2025-06-16Commercial Press QUALIFIED51Anna Fali
1001Cody SaylorsGermany2025-06-25Benton, John B Jr RENEWAL14Asiya Javayant
1002Murillo MaletGermany2025-07-04Buckley Miller Wright NEGOTIATION92Ioni Bowcher
1003Jennifer AmigonAustralia2025-07-05Truhlar And Truhlar Attys RENEWAL82Asiya Javayant
1004Leja CaldareraBrazil2025-07-05Rangoni Of Florence UNQUALIFIED52Bernardo Dominic
1005Greenwood BologniaSpain2025-06-13Feiner Bros PROPOSAL62Xuxue Feng
1006Maria MarrierItaly2025-06-06Chemel, James L Cpa PROPOSAL35Asiya Javayant
1007Murillo MaletCanada2025-06-21King, Christopher A Esq NEGOTIATION67Onyama Limba
1008Sinclair WaycottRussia2025-07-03Feltz Printing Service QUALIFIED10Elwin Sharvill
1009Cody SaylorsGermany2025-06-19Feltz Printing Service UNQUALIFIED87Xuxue Feng
1010Rodrigues CampainFrance2025-06-30Commercial Press UNQUALIFIED5Stephen Shaw
1011Kadeem FlosiSpain2025-06-21Feiner Bros UNQUALIFIED39Stephen Shaw
1012Misaki RoysterAustralia2025-06-08Commercial Press NEGOTIATION66Elwin Sharvill
1013Jeanfrancois VenereArgentina2025-06-25Printing Dimensions UNQUALIFIED90Elwin Sharvill
1014Jennifer AmigonSpain2025-06-24Commercial Press PROPOSAL62Xuxue Feng
1015Misaki RoysterCanada2025-06-26Truhlar And Truhlar Attys NEGOTIATION94Asiya Javayant
1016Chavez BriddickArgentina2025-06-19Feltz Printing Service NEW95Elwin Sharvill
1017Silvio SlusarskiGermany2025-06-27Feltz Printing Service NEW94Onyama Limba
1018Octavia MaletAustralia2025-06-18Buckley Miller Wright RENEWAL29Bernardo Dominic
1019Munro FerenczRussia2025-06-15Dorl, James J Esq UNQUALIFIED43Xuxue Feng
1020Mujtaba NickaArgentina2025-06-17Truhlar And Truhlar Attys RENEWAL18Bernardo Dominic
1021Leja CaldareraSpain2025-06-15Rousseaux, Michael Esq QUALIFIED69Ioni Bowcher
1022Ashley DoeRussia2025-06-07Feltz Printing Service RENEWAL4Onyama Limba
1023Munro FerenczItaly2025-06-06Rousseaux, Michael Esq QUALIFIED11Anna Fali
1024Sinclair WaycottUnited Kingdom2025-07-03Chanay, Jeffrey A Esq UNQUALIFIED90Xuxue Feng
1025Maisha RulapaughCanada2025-06-06Chapman, Ross E Esq RENEWAL16Stephen Shaw
1026Faith GillianUnited Kingdom2025-06-20Benton, John B Jr PROPOSAL53Anna Fali
1027Faith GillianCanada2025-07-04Rousseaux, Michael Esq UNQUALIFIED68Bernardo Dominic
1028Arvin AlbaresRussia2025-06-10Feltz Printing Service NEW20Ioni Bowcher
1029Kadeem FlosiItaly2025-06-24Truhlar And Truhlar Attys PROPOSAL58Asiya Javayant
1030Costa DilliardIndia2025-06-17Commercial Press RENEWAL86Onyama Limba
1031Wickens NestleSpain2025-06-20Morlong Associates RENEWAL0Ioni Bowcher
1032Murillo MaletSpain2025-06-26Buckley Miller Wright UNQUALIFIED16Anna Fali
1033Claire TollnerFrance2025-06-24Morlong Associates NEGOTIATION99Ivan Magalhaes
1034Deepesh ChuiItaly2025-06-30Feltz Printing Service NEGOTIATION12Onyama Limba
1035Arvin AlbaresJapan2025-07-02Dorl, James J Esq UNQUALIFIED35Onyama Limba
1036Alejandro PerinItaly2025-06-22Dorl, James J Esq PROPOSAL86Xuxue Feng
1037Costa DilliardArgentina2025-06-12Morlong Associates NEW58Onyama Limba
1038Deepesh ChuiBrazil2025-06-11Feltz Printing Service PROPOSAL15Stephen Shaw
1039Nicolas IturbideGermany2025-06-17Rangoni Of Florence UNQUALIFIED55Elwin Sharvill
1040Julie StensethFrance2025-06-06Chapman, Ross E Esq UNQUALIFIED24Elwin Sharvill
1041Tony FollerJapan2025-06-17Rousseaux, Michael Esq NEGOTIATION90Bernardo Dominic
1042Cody SaylorsGermany2025-06-12Chapman, Ross E Esq RENEWAL53Elwin Sharvill
1043Deepesh ChuiArgentina2025-06-08Chemel, James L Cpa QUALIFIED95Onyama Limba
1044James ButtBrazil2025-06-15Benton, John B Jr QUALIFIED51Asiya Javayant
1045Greenwood BologniaIndia2025-06-11King, Christopher A Esq UNQUALIFIED38Bernardo Dominic
1046Tony FollerCanada2025-06-14Rousseaux, Michael Esq NEW24Asiya Javayant
1047Kadeem FlosiUnited Kingdom2025-06-16Feiner Bros PROPOSAL44Onyama Limba
1048Morrow RutaGermany2025-06-19Feltz Printing Service NEGOTIATION61Asiya Javayant
1049Munro FerenczGermany2025-06-14Feltz Printing Service PROPOSAL57Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Aditya KuskoCanadaAsiya Javayant QUALIFIED
Alejandro PerinRussiaAsiya Javayant NEGOTIATION
Cody SaylorsJapanXuxue Feng NEGOTIATION
Rodrigues CampainGermanyIoni Bowcher NEW
Morrow RutaJapanXuxue Feng PROPOSAL
Isabel BowleyItalyOnyama Limba PROPOSAL
Nicolas IturbideItalyStephen Shaw NEW
Jones VocelkaRussiaAsiya Javayant QUALIFIED
Jefferson SchemmerBrazilXuxue Feng UNQUALIFIED
Emily WhobreyCanadaAmy Elsner NEW
Izzy GarufiFranceIvan Magalhaes RENEWAL
Maisha RulapaughFranceAmy Elsner QUALIFIED
Morrow RutaGermanyIvan Magalhaes NEGOTIATION
Maisha RulapaughJapanElwin Sharvill UNQUALIFIED
Leon OldroydArgentinaAsiya Javayant QUALIFIED
Ivar PaprockiUnited KingdomBernardo Dominic NEGOTIATION
Rodrigues CampainSpainIoni Bowcher RENEWAL
Alejandro PerinBrazilBernardo Dominic UNQUALIFIED
Aruna FigeroaCanadaBernardo Dominic NEW
Antonio CaudySpainOnyama Limba NEW
Francesco ShinkoAustraliaXuxue Feng RENEWAL
Jennifer AmigonUnited KingdomBernardo Dominic PROPOSAL
Johnson SergiSpainIoni Bowcher PROPOSAL
Aruna FigeroaAustraliaXuxue Feng NEW
Mayumi KolmetzGermanyXuxue Feng NEGOTIATION
Ashley DoeBrazilAnna Fali NEGOTIATION
Arvin AlbaresItalyAsiya Javayant PROPOSAL
Clifford RimBrazilBernardo Dominic PROPOSAL
Antonio CaudyArgentinaOnyama Limba UNQUALIFIED
Rodrigues CampainSpainAmy Elsner PROPOSAL
Adams MorascaCanadaStephen Shaw QUALIFIED
Jennifer AmigonGermanyIvan Magalhaes NEGOTIATION
Aika InouyeArgentinaElwin Sharvill NEGOTIATION
Faith GillianGermanyIoni Bowcher NEGOTIATION
Juan WieserSpainStephen Shaw NEGOTIATION
Aruna FigeroaCanadaAmy Elsner RENEWAL
James ButtJapanIvan Magalhaes RENEWAL
Salvatore StockhamCanadaStephen Shaw NEGOTIATION
Costa DilliardUnited KingdomAsiya Javayant NEW
Munro FerenczCanadaIvan Magalhaes PROPOSAL
Kaitlin OstroskyAustraliaXuxue Feng PROPOSAL
Jennifer AmigonItalyAsiya Javayant NEW
Deepesh ChuiJapanBernardo Dominic UNQUALIFIED
Emily WhobreyIndiaAmy Elsner UNQUALIFIED
Munro FerenczArgentinaOnyama Limba NEGOTIATION
Maria MarrierGermanyElwin Sharvill RENEWAL
Morrow RutaGermanyOnyama Limba NEGOTIATION
Juan WieserArgentinaAnna Fali RENEWAL
Ivar PaprockiSpainAsiya Javayant RENEWAL
Leja CaldareraUnited KingdomAnna Fali PROPOSAL
Frozen Columns
Name
Arvin Albares
Izzy Garufi
Claire Tollner
Aditya Kusko
Rodrigues Campain
Jefferson Schemmer
Darci Poquette
Leon Oldroyd
Aika Inouye
Mayumi Kolmetz
Costa Dilliard
Arvin Albares
Jeanfrancois Venere
Sinclair Waycott
Smith Glick
Cody Saylors
Aruna Figeroa
Claire Tollner
Cody Saylors
Cody Saylors
Cody Saylors
Kaitlin Ostrosky
Ricardo Gaucho
Kadeem Flosi
Aruna Figeroa
Maria Marrier
Jeanfrancois Venere
Kaitlin Ostrosky
Faith Gillian
Murillo Malet
Alejandro Perin
Misaki Royster
Costa Dilliard
Munro Ferencz
Maisha Rulapaugh
Octavia Malet
Adams Morasca
Misaki Royster
Emily Whobrey
Smith Glick
Maisha Rulapaugh
Costa Dilliard
Octavia Malet
Julie Stenseth
Maria Marrier
Munro Ferencz
Aruna Figeroa
Johnson Sergi
Darci Poquette
Kaitlin Ostrosky
IdCountryDate
1000Argentina2025-07-04
1001India2025-06-12
1002Australia2025-06-15
1003Spain2025-07-05
1004Germany2025-06-22
1005India2025-06-09
1006Brazil2025-06-06
1007Brazil2025-06-07
1008Brazil2025-06-15
1009France2025-06-12
1010Germany2025-07-01
1011Germany2025-06-29
1012Brazil2025-06-08
1013France2025-06-21
1014Russia2025-06-20
1015Germany2025-06-13
1016Argentina2025-06-17
1017France2025-06-23
1018Germany2025-06-23
1019Russia2025-06-15
1020Brazil2025-06-26
1021Germany2025-07-02
1022Spain2025-06-30
1023Italy2025-06-30
1024Australia2025-06-20
1025Argentina2025-06-23
1026Russia2025-06-21
1027Spain2025-06-17
1028Argentina2025-06-19
1029United Kingdom2025-06-17
1030Australia2025-06-10
1031Brazil2025-06-13
1032Argentina2025-06-27
1033Japan2025-06-29
1034Spain2025-06-11
1035Germany2025-07-03
1036Japan2025-06-07
1037United Kingdom2025-06-06
1038India2025-06-28
1039United Kingdom2025-06-22
1040Australia2025-06-06
1041Argentina2025-06-24
1042United Kingdom2025-06-11
1043United Kingdom2025-07-04
1044India2025-06-28
1045Spain2025-06-19
1046Canada2025-06-08
1047Russia2025-06-30
1048Russia2025-06-09
1049Canada2025-06-12

On-Demand Data

NameIdCountryDate
Claire Tollner1000Canada2025-06-18
Leja Caldarera1001Brazil2025-06-08
James Butt1002Spain2025-06-14
Claire Tollner1003France2025-06-23
Chavez Briddick1004Italy2025-06-15
Sinclair Waycott1005France2025-06-15
Claire Tollner1006Japan2025-06-12
Stacey Maclead1007Canada2025-07-05
Isabel Bowley1008Italy2025-06-18
Kadeem Flosi1009Brazil2025-06-17
Antonio Caudy1010Russia2025-06-08
Smith Glick1011Australia2025-06-15
James Butt1012Canada2025-06-13
Alejandro Perin1013Canada2025-06-25
Greenwood Bolognia1014Italy2025-06-16
Morrow Ruta1015Australia2025-06-21
Johnson Sergi1016France2025-07-03
Julie Stenseth1017India2025-06-08
Adams Morasca1018India2025-06-20
David Darakjy1019Australia2025-07-02
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Emily WhobreyIndiaElwin Sharvill RENEWAL
Maisha RulapaughSpainElwin Sharvill QUALIFIED
Rodrigues CampainFranceIoni Bowcher NEGOTIATION
Leja CaldareraItalyAsiya Javayant NEGOTIATION
Darci PoquetteBrazilAnna Fali UNQUALIFIED
Silvio SlusarskiItalyOnyama Limba NEGOTIATION
Aruna FigeroaFranceIvan Magalhaes NEGOTIATION
Faith GillianSpainXuxue Feng QUALIFIED
Leja CaldareraArgentinaIvan Magalhaes NEGOTIATION
Stacey MacleadJapanXuxue Feng RENEWAL
Mayumi KolmetzBrazilIoni Bowcher UNQUALIFIED
James ButtSpainAmy Elsner QUALIFIED
Maria MarrierAustraliaAnna Fali NEW
James ButtCanadaXuxue Feng UNQUALIFIED
Claire TollnerGermanyBernardo Dominic UNQUALIFIED
Nicolas IturbideJapanOnyama Limba QUALIFIED
Antonio CaudyJapanXuxue Feng PROPOSAL
James ButtRussiaAnna Fali NEGOTIATION
David DarakjyUnited KingdomIvan Magalhaes UNQUALIFIED
Salvatore StockhamRussiaElwin Sharvill QUALIFIED
Sinclair WaycottIndiaBernardo Dominic PROPOSAL
Smith GlickCanadaElwin Sharvill UNQUALIFIED
Kaitlin OstroskySpainElwin Sharvill QUALIFIED
Jones VocelkaCanadaIvan Magalhaes QUALIFIED
Morrow RutaCanadaStephen Shaw PROPOSAL
Chavez BriddickArgentinaStephen Shaw NEW
Tony FollerSpainOnyama Limba UNQUALIFIED
Arvin AlbaresFranceXuxue Feng UNQUALIFIED
Mujtaba NickaSpainAnna Fali NEGOTIATION
Maisha RulapaughJapanIvan Magalhaes QUALIFIED
Antonio CaudyItalyIvan Magalhaes PROPOSAL
Leja CaldareraItalyOnyama Limba NEGOTIATION
Rodrigues CampainRussiaIvan Magalhaes RENEWAL
Faith GillianGermanyAmy Elsner PROPOSAL
Cody SaylorsCanadaIvan Magalhaes QUALIFIED
Ivar PaprockiJapanAmy Elsner UNQUALIFIED
Smith GlickBrazilBernardo Dominic RENEWAL
Darci PoquetteGermanyAsiya Javayant NEW
Sinclair WaycottJapanAnna Fali RENEWAL
Smith GlickRussiaIvan 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>