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
Faith GillianItalyAnna Fali QUALIFIED
Antonio CaudyIndiaAmy Elsner UNQUALIFIED
Clifford RimJapanIvan Magalhaes NEGOTIATION
Aika InouyeArgentinaBernardo Dominic PROPOSAL
Octavia MaletArgentinaXuxue Feng RENEWAL
Ricardo GauchoIndiaIoni Bowcher PROPOSAL
Claire TollnerItalyAmy Elsner PROPOSAL
Maisha RulapaughCanadaStephen Shaw RENEWAL
Mujtaba NickaUnited KingdomIoni Bowcher PROPOSAL
Kaitlin OstroskyUnited KingdomOnyama Limba UNQUALIFIED
Murillo MaletRussiaBernardo Dominic QUALIFIED
Clifford RimJapanBernardo Dominic UNQUALIFIED
Alejandro PerinArgentinaIoni Bowcher UNQUALIFIED
Kadeem FlosiBrazilBernardo Dominic NEW
Arvin AlbaresJapanIoni Bowcher QUALIFIED
Adams MorascaAustraliaOnyama Limba NEGOTIATION
Chavez BriddickArgentinaIvan Magalhaes QUALIFIED
Costa DilliardJapanIoni Bowcher NEGOTIATION
Misaki RoysterGermanyAnna Fali NEGOTIATION
James ButtAustraliaStephen Shaw UNQUALIFIED
Ivar PaprockiCanadaAmy Elsner NEGOTIATION
Johnson SergiUnited KingdomBernardo Dominic QUALIFIED
Mujtaba NickaAustraliaStephen Shaw UNQUALIFIED
Alejandro PerinGermanyOnyama Limba NEW
Morrow RutaItalyXuxue Feng RENEWAL
Smith GlickGermanyOnyama Limba UNQUALIFIED
Leja CaldareraRussiaIoni Bowcher QUALIFIED
Maisha RulapaughJapanAnna Fali UNQUALIFIED
Leja CaldareraRussiaIoni Bowcher RENEWAL
Faith GillianSpainOnyama Limba NEGOTIATION
Alejandro PerinItalyAmy Elsner QUALIFIED
Ivar PaprockiItalyElwin Sharvill UNQUALIFIED
Tony FollerIndiaIoni Bowcher QUALIFIED
Costa DilliardCanadaOnyama Limba PROPOSAL
Jeanfrancois VenereAustraliaIvan Magalhaes RENEWAL
Ivar PaprockiBrazilBernardo Dominic NEW
Isabel BowleyFranceIvan Magalhaes NEGOTIATION
Darci PoquetteJapanIvan Magalhaes NEGOTIATION
Rodrigues CampainGermanyAsiya Javayant UNQUALIFIED
Leon OldroydFranceStephen Shaw NEGOTIATION
Salvatore StockhamItalyAnna Fali UNQUALIFIED
Emily WhobreyIndiaXuxue Feng RENEWAL
Jones VocelkaRussiaIoni Bowcher QUALIFIED
James ButtBrazilAmy Elsner RENEWAL
Leon OldroydCanadaIoni Bowcher QUALIFIED
Rodrigues CampainAustraliaIoni Bowcher QUALIFIED
Isabel BowleySpainIoni Bowcher QUALIFIED
Chavez BriddickItalyAmy Elsner NEGOTIATION
Stacey MacleadBrazilAnna Fali RENEWAL
Murillo MaletCanadaXuxue Feng NEW
Horizontal
NameCountryRepresentativeStatus
Aditya KuskoIndiaAmy Elsner QUALIFIED
Salvatore StockhamRussiaAnna Fali QUALIFIED
Ricardo GauchoSpainAnna Fali NEW
Isabel BowleyRussiaIvan Magalhaes QUALIFIED
Mayumi KolmetzAustraliaAnna Fali NEGOTIATION
Jones VocelkaAustraliaOnyama Limba RENEWAL
Stacey MacleadCanadaAnna Fali UNQUALIFIED
Mujtaba NickaItalyIoni Bowcher NEW
Greenwood BologniaFranceElwin Sharvill QUALIFIED
Morrow RutaJapanIoni Bowcher QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Chavez BriddickIndia2025-09-13Printing Dimensions RENEWAL35Anna Fali
1001Rodrigues CampainCanada2025-08-24Chapman, Ross E Esq NEGOTIATION86Ioni Bowcher
1002Smith GlickUnited Kingdom2025-09-15Rangoni Of Florence NEW21Amy Elsner
1003Jefferson SchemmerJapan2025-08-30Feltz Printing Service QUALIFIED99Anna Fali
1004Emily WhobreyGermany2025-08-28Commercial Press PROPOSAL4Amy Elsner
1005Aika InouyeSpain2025-08-25Printing Dimensions RENEWAL6Xuxue Feng
1006Leon OldroydFrance2025-09-19Dorl, James J Esq UNQUALIFIED57Ioni Bowcher
1007Faith GillianGermany2025-08-29Chanay, Jeffrey A Esq NEW10Ioni Bowcher
1008Adams MorascaGermany2025-09-08Feiner Bros QUALIFIED36Onyama Limba
1009Smith GlickIndia2025-09-01Feltz Printing Service UNQUALIFIED51Ivan Magalhaes
1010Kadeem FlosiFrance2025-09-15Feiner Bros UNQUALIFIED72Xuxue Feng
1011Maria MarrierIndia2025-09-07Truhlar And Truhlar Attys UNQUALIFIED19Amy Elsner
1012Claire TollnerJapan2025-09-14Truhlar And Truhlar Attys NEW6Stephen Shaw
1013Greenwood BologniaIndia2025-08-30Chemel, James L Cpa RENEWAL9Amy Elsner
1014Claire TollnerGermany2025-09-11Rousseaux, Michael Esq NEGOTIATION26Anna Fali
1015Kadeem FlosiGermany2025-09-03Rousseaux, Michael Esq NEW91Onyama Limba
1016Aruna FigeroaGermany2025-09-03Chanay, Jeffrey A Esq NEGOTIATION16Onyama Limba
1017Kaitlin OstroskyIndia2025-09-11Feltz Printing Service QUALIFIED59Ivan Magalhaes
1018Nicolas IturbideIndia2025-09-15Chapman, Ross E Esq NEW1Stephen Shaw
1019Maria MarrierGermany2025-09-20Rousseaux, Michael Esq UNQUALIFIED31Anna Fali
1020Antonio CaudyGermany2025-08-23Feltz Printing Service RENEWAL25Ioni Bowcher
1021Sinclair WaycottUnited Kingdom2025-09-18Chapman, Ross E Esq RENEWAL73Amy Elsner
1022Jeanfrancois VenereIndia2025-09-19Commercial Press PROPOSAL79Ioni Bowcher
1023Francesco ShinkoJapan2025-09-03King, Christopher A Esq UNQUALIFIED91Stephen Shaw
1024Smith GlickRussia2025-08-22King, Christopher A Esq QUALIFIED31Xuxue Feng
1025David DarakjyGermany2025-09-20Feltz Printing Service QUALIFIED57Bernardo Dominic
1026Emily WhobreyArgentina2025-09-17Rangoni Of Florence QUALIFIED79Onyama Limba
1027Alejandro PerinGermany2025-09-06Feiner Bros RENEWAL96Anna Fali
1028Cody SaylorsArgentina2025-08-25Feltz Printing Service QUALIFIED38Asiya Javayant
1029Emily WhobreyAustralia2025-08-25Feltz Printing Service NEGOTIATION7Ioni Bowcher
1030Octavia MaletGermany2025-09-18Morlong Associates QUALIFIED67Ioni Bowcher
1031Claire TollnerSpain2025-09-02King, Christopher A Esq PROPOSAL86Ioni Bowcher
1032Ivar PaprockiSpain2025-09-10Morlong Associates UNQUALIFIED0Onyama Limba
1033Deepesh ChuiAustralia2025-09-10Dorl, James J Esq PROPOSAL47Amy Elsner
1034Wickens NestleArgentina2025-09-20Chanay, Jeffrey A Esq NEGOTIATION2Asiya Javayant
1035James ButtCanada2025-09-10Feiner Bros PROPOSAL38Anna Fali
1036Aditya KuskoIndia2025-08-22Chanay, Jeffrey A Esq QUALIFIED52Anna Fali
1037Mayumi KolmetzRussia2025-08-22Commercial Press PROPOSAL19Ivan Magalhaes
1038Antonio CaudyCanada2025-09-03Buckley Miller Wright NEGOTIATION81Bernardo Dominic
1039Jennifer AmigonAustralia2025-09-14Chanay, Jeffrey A Esq RENEWAL5Asiya Javayant
1040Claire TollnerGermany2025-09-08Rousseaux, Michael Esq QUALIFIED3Ivan Magalhaes
1041Tony FollerCanada2025-09-13Feltz Printing Service PROPOSAL86Stephen Shaw
1042Antonio CaudyCanada2025-08-24Rousseaux, Michael Esq PROPOSAL31Xuxue Feng
1043Ashley DoeBrazil2025-09-04King, Christopher A Esq NEW15Elwin Sharvill
1044Adams MorascaItaly2025-09-15Rousseaux, Michael Esq QUALIFIED33Bernardo Dominic
1045Stacey MacleadItaly2025-09-03Truhlar And Truhlar Attys RENEWAL87Bernardo Dominic
1046Jeanfrancois VenereFrance2025-08-25Feltz Printing Service NEW32Bernardo Dominic
1047Isabel BowleyAustralia2025-08-31Morlong Associates NEGOTIATION60Ivan Magalhaes
1048Aruna FigeroaSpain2025-08-24Chemel, James L Cpa PROPOSAL38Asiya Javayant
1049Cody SaylorsUnited Kingdom2025-09-18Chanay, Jeffrey A Esq UNQUALIFIED36Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Sinclair WaycottRussiaAsiya Javayant PROPOSAL
Aditya KuskoUnited KingdomElwin Sharvill NEGOTIATION
Greenwood BologniaArgentinaIoni Bowcher PROPOSAL
Emily WhobreyUnited KingdomStephen Shaw RENEWAL
Munro FerenczRussiaXuxue Feng RENEWAL
Maria MarrierCanadaAnna Fali RENEWAL
Deepesh ChuiFranceStephen Shaw RENEWAL
Greenwood BologniaRussiaIoni Bowcher QUALIFIED
Claire TollnerAustraliaXuxue Feng NEGOTIATION
Claire TollnerAustraliaXuxue Feng PROPOSAL
Rodrigues CampainItalyElwin Sharvill RENEWAL
Johnson SergiIndiaAsiya Javayant NEW
Aika InouyeSpainXuxue Feng QUALIFIED
Kadeem FlosiUnited KingdomOnyama Limba NEW
Smith GlickAustraliaXuxue Feng NEW
Stacey MacleadRussiaStephen Shaw UNQUALIFIED
Leja CaldareraJapanBernardo Dominic NEW
Kaitlin OstroskyRussiaStephen Shaw RENEWAL
Smith GlickFranceIvan Magalhaes UNQUALIFIED
Ivar PaprockiFranceAnna Fali UNQUALIFIED
James ButtAustraliaAnna Fali PROPOSAL
Ricardo GauchoCanadaAnna Fali QUALIFIED
Jeanfrancois VenereGermanyIvan Magalhaes NEGOTIATION
Faith GillianSpainElwin Sharvill RENEWAL
Costa DilliardRussiaBernardo Dominic UNQUALIFIED
Cody SaylorsJapanAmy Elsner RENEWAL
Nicolas IturbideJapanAsiya Javayant PROPOSAL
Nicolas IturbideItalyIoni Bowcher PROPOSAL
James ButtItalyAnna Fali RENEWAL
Juan WieserItalyIoni Bowcher UNQUALIFIED
Aditya KuskoRussiaXuxue Feng NEGOTIATION
James ButtArgentinaElwin Sharvill NEGOTIATION
Munro FerenczItalyXuxue Feng PROPOSAL
Cody SaylorsFranceElwin Sharvill RENEWAL
Smith GlickJapanAmy Elsner PROPOSAL
David DarakjyArgentinaElwin Sharvill NEGOTIATION
Kaitlin OstroskyIndiaAmy Elsner QUALIFIED
Darci PoquetteIndiaAsiya Javayant RENEWAL
Costa DilliardIndiaBernardo Dominic NEW
Alejandro PerinArgentinaIoni Bowcher RENEWAL
Johnson SergiJapanOnyama Limba PROPOSAL
Costa DilliardAustraliaIvan Magalhaes PROPOSAL
Cody SaylorsCanadaXuxue Feng PROPOSAL
Aruna FigeroaCanadaAsiya Javayant QUALIFIED
Emily WhobreyFranceOnyama Limba QUALIFIED
Maisha RulapaughCanadaElwin Sharvill PROPOSAL
Aditya KuskoGermanyAmy Elsner UNQUALIFIED
Jeanfrancois VenereArgentinaAmy Elsner QUALIFIED
Nicolas IturbideBrazilIvan Magalhaes UNQUALIFIED
Greenwood BologniaCanadaIoni Bowcher NEGOTIATION
Frozen Columns
Name
Isabel Bowley
Claire Tollner
Jones Vocelka
Jones Vocelka
Leja Caldarera
Smith Glick
Darci Poquette
Sinclair Waycott
Nicolas Iturbide
Sinclair Waycott
Kadeem Flosi
Isabel Bowley
Alejandro Perin
Kaitlin Ostrosky
Ivar Paprocki
Darci Poquette
Greenwood Bolognia
Jennifer Amigon
Darci Poquette
Jefferson Schemmer
Greenwood Bolognia
Kaitlin Ostrosky
Deepesh Chui
Misaki Royster
Murillo Malet
Octavia Malet
Murillo Malet
Silvio Slusarski
Izzy Garufi
Sinclair Waycott
Munro Ferencz
Kadeem Flosi
Jones Vocelka
Munro Ferencz
Darci Poquette
Emily Whobrey
Jeanfrancois Venere
Ashley Doe
Octavia Malet
Faith Gillian
Chavez Briddick
Alejandro Perin
Alejandro Perin
Costa Dilliard
Francesco Shinko
Arvin Albares
Sinclair Waycott
Johnson Sergi
Mujtaba Nicka
Kadeem Flosi
IdCountryDate
1000Canada2025-09-06
1001Spain2025-09-19
1002Canada2025-08-26
1003Spain2025-08-22
1004Brazil2025-09-09
1005Canada2025-08-28
1006Russia2025-09-09
1007India2025-09-12
1008United Kingdom2025-08-29
1009Italy2025-09-01
1010Spain2025-08-22
1011Brazil2025-08-29
1012Spain2025-08-30
1013Japan2025-08-27
1014Canada2025-08-28
1015Japan2025-09-04
1016Japan2025-08-31
1017Australia2025-09-03
1018United Kingdom2025-09-10
1019Brazil2025-09-15
1020India2025-09-12
1021Argentina2025-08-22
1022Canada2025-09-13
1023Italy2025-08-29
1024Australia2025-09-02
1025Russia2025-08-31
1026United Kingdom2025-08-28
1027United Kingdom2025-08-31
1028India2025-08-29
1029Argentina2025-08-25
1030Japan2025-08-28
1031Argentina2025-09-07
1032Russia2025-08-23
1033Italy2025-08-25
1034Argentina2025-08-31
1035Canada2025-09-14
1036Australia2025-09-11
1037Japan2025-09-16
1038Spain2025-08-22
1039Russia2025-09-16
1040Spain2025-08-29
1041Germany2025-09-17
1042Russia2025-09-01
1043France2025-09-18
1044Canada2025-08-24
1045Spain2025-08-29
1046United Kingdom2025-09-20
1047Spain2025-09-01
1048Spain2025-09-04
1049Brazil2025-09-01

On-Demand Data

NameIdCountryDate
Emily Whobrey1000Brazil2025-08-23
Ricardo Gaucho1001United Kingdom2025-09-13
Jefferson Schemmer1002Italy2025-09-01
Sinclair Waycott1003France2025-08-26
Claire Tollner1004Germany2025-09-11
Octavia Malet1005Argentina2025-09-09
Antonio Caudy1006India2025-09-19
Francesco Shinko1007Japan2025-09-04
Darci Poquette1008India2025-09-16
Isabel Bowley1009Argentina2025-09-11
Nicolas Iturbide1010Japan2025-09-15
Jones Vocelka1011Australia2025-09-01
Isabel Bowley1012Canada2025-09-17
Stacey Maclead1013Brazil2025-09-19
Smith Glick1014Australia2025-09-19
Mayumi Kolmetz1015Canada2025-09-15
Maria Marrier1016Australia2025-08-22
Claire Tollner1017Canada2025-09-08
Ashley Doe1018Italy2025-09-19
Stacey Maclead1019Brazil2025-09-10
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Misaki RoysterUnited KingdomBernardo Dominic UNQUALIFIED
Jeanfrancois VenereAustraliaStephen Shaw RENEWAL
Izzy GarufiFranceOnyama Limba NEGOTIATION
Leon OldroydSpainAmy Elsner QUALIFIED
Alejandro PerinItalyElwin Sharvill QUALIFIED
Misaki RoysterBrazilBernardo Dominic NEW
Juan WieserGermanyIvan Magalhaes PROPOSAL
Silvio SlusarskiIndiaAmy Elsner NEGOTIATION
Salvatore StockhamGermanyAsiya Javayant RENEWAL
Francesco ShinkoJapanElwin Sharvill RENEWAL
Maria MarrierArgentinaIoni Bowcher NEGOTIATION
Adams MorascaSpainXuxue Feng UNQUALIFIED
Antonio CaudyItalyStephen Shaw NEGOTIATION
Aditya KuskoUnited KingdomXuxue Feng RENEWAL
Izzy GarufiCanadaStephen Shaw PROPOSAL
Clifford RimSpainStephen Shaw QUALIFIED
Francesco ShinkoSpainElwin Sharvill QUALIFIED
Octavia MaletRussiaAsiya Javayant NEGOTIATION
Ashley DoeSpainAnna Fali PROPOSAL
Salvatore StockhamBrazilElwin Sharvill NEGOTIATION
Maria MarrierIndiaIvan Magalhaes RENEWAL
Greenwood BologniaFranceIvan Magalhaes UNQUALIFIED
Wickens NestleBrazilElwin Sharvill RENEWAL
Wickens NestleRussiaIoni Bowcher NEW
Kaitlin OstroskySpainXuxue Feng QUALIFIED
Sinclair WaycottCanadaAsiya Javayant UNQUALIFIED
Octavia MaletIndiaXuxue Feng RENEWAL
Antonio CaudyJapanOnyama Limba RENEWAL
Ricardo GauchoBrazilBernardo Dominic UNQUALIFIED
Aika InouyeUnited KingdomAsiya Javayant RENEWAL
Rodrigues CampainCanadaAnna Fali UNQUALIFIED
Darci PoquetteFranceIoni Bowcher NEGOTIATION
Adams MorascaBrazilOnyama Limba UNQUALIFIED
Chavez BriddickCanadaIoni Bowcher QUALIFIED
Aika InouyeBrazilIvan Magalhaes RENEWAL
Julie StensethCanadaAmy Elsner NEGOTIATION
Johnson SergiFranceOnyama Limba NEGOTIATION
Jennifer AmigonArgentinaXuxue Feng UNQUALIFIED
Leja CaldareraGermanyOnyama Limba UNQUALIFIED
Faith GillianJapanIoni Bowcher 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>